Membantu menghasilkan nilai flex-grow kiri dan kanan secara proporsional berdasarkan data yang diberikan dari Figma atau design system, agar layout fleksibel secara adil terhadap ruang yang tersedia.
expected-left = {{field 1}}
expected-right = {{field 2}}
basis-left = {{field 3}}
basis-right = {{field 4}}
From that info please calculate the flex left and flex right using the following formula:
grow-left = expected-left - basis-left
grow-right = expected-right - basis-right
available-grow = grow-left + grow-right
flex-grow-left = grow-left / available-grow * 10
flex-grow-right = grow-right / available-grow * 10
flex-grow-left and flex-grow-right should be toFixed to a maximum 1 decimal place.
When flex-grow-left and flex-grow-right is added, it should produce exactly 10.
The output format should be:
Left: flex-[value]
Right: flex-[value]
If the number is decimal please use square brackets such as flex-[value], if it's round just use flex-value without square brackets.
_____
For example:
expected-left 442
expected-right 670
basis-left 320
basis-right 320
grow-left = 442 - 320
grow-right = 670 - 320
available grow = 122 + 350
flex-grow-left = 122/472*10 = 2.5847457627
flex-grow-right = 350/472*10 = 7.4152542373
flex-grow-left = 2.5847457627 rounded up to 2.6
flex-grow-right = 7.4152542373 rounded down to 7.4
Validate output to make sure the total is 10
2.6 + 7.4 = 10 (valid)
Return output:
Left: flex-[2.6]
Right: flex-[7.4]
Menghasilkan properti CSS clamp() yang responsif berdasarkan ukuran minimum, ukuran maksimum, dan lebar container terbesar yang digunakan di desain.
Input:
expected-min-size = {{field 1}} (in pixels)
expected-max-size = {{field 2}} (in pixels)
largest-container-size = {{field 3}} (in pixels)
Calculate the clamp values using the following formulas:
min = expected-min-size / 16 rem
preferred = expected-max-size / largest-container-size * 100vw
max = expected-max-size / 16 rem
Output format:
width: clamp([min]rem, [preferred]vw, [max]rem);
All output values should be rounded to max 2 decimal places. Ensure units (rem / vw) are included properly.
Example:
Input:
expected-min-size = 20
expected-max-size = 40
largest-container-size = 1208
Calculations:
min = 20 / 16 = 1.25rem
preferred = 40 / 1208 * 100 = 3.31vw
max = 40 / 16 = 2.5rem
Output:
width: clamp(1.25rem, 3.31vw, 2.5rem);