View
Use the sections below to generate fluid CSS variable declarations. Global viewport settings are used for all calculations.
MinVW and MaxVW:
Set your minimum and maximum viewport widths (in pixels). These values are used in the fluid calculations for all sections.
Purpose:
Generates fluid font CSS variables using the clamp() function with the middle value expressed in vw units.
Usage:
Edit preset values (e.g., H1, H2, H3) or add new font items. Enter the minimum and maximum font sizes (in px). The tool converts these to rem and calculates a fluid value based on the global viewport settings.
Click "Generate Font CSS" to see the output.
Use the Copy button to copy the generated CSS.
Example:
For a font entry with a minimum font size of 18px and a maximum font size of 22px (with default viewport values minVW=420 and maxVW=1440), the output will be:
--h1: clamp(1.125rem, 1.0221rem + 0.3922vw, 1.375rem);
Purpose:
Generates fluid padding CSS variables using the clamp() function with the middle value expressed in vw units.
Usage:
The first item has a placeholder of "padding-1". New items get a placeholder based on the current count (e.g., "padding-2", etc.).
Click "Generate Padding CSS" to see the output.
Use the Copy button to copy the generated CSS.
Purpose:
Generates fluid spacing CSS variables (for margins, gaps, etc.) using the clamp() function with the middle value expressed in vw units.
Usage:
The first item shows a placeholder of "space-1". New items update the placeholder dynamically (e.g., "space-2", etc.).
Click "Generate Spacing CSS" to see the output.
Use the Copy button to copy the generated CSS.
For Fonts (using vw):
// Convert px to rem: value in rem = pixelValue / 16
// Calculate:
minRem = minFont / 16
maxRem = maxFont / 16
slope = (maxRem - minRem) / ((maxVW - minVW) / 100)
offset = minRem - (minVW / 100) * slope
// Display coefficient (scaled to vw) = slope × 16
// Output:
--varName: clamp(minRemrem, offsetrem + slope×16vw, maxRemrem);
For Padding & Spacing (using vw):
// The same conversion and calculation are used, but the fluid value uses vw directly:
--varName: clamp(minRemrem, offsetrem + coefficientvw, maxRemrem);
You can adjust the formulas or the base value if needed. The Copy buttons in the generator use the Clipboard API for easy copying.
Dynamic Placeholders:
The tool uses JavaScript to count the number of items in the Padding and Spacing sections and automatically assigns placeholder names (e.g., "padding-1", "padding-2", "space-1", "space-2", etc.). Removing and re-adding items resets the count accordingly.
Copy to Clipboard:
Each output section includes a Copy to Clipboard button that uses the Clipboard API to copy the generated CSS, so you don’t have to manually highlight the text.
Using the Output in Bricks Builder:
You can copy the generated CSS and paste it directly into the Bricks Builder Classes & Variables Manager. This allows you to apply the fluid typography, padding, and spacing styles directly within your Bricks Builder project.
