Layout

Native Fluid Sizing

ModulateCSS leverages CSS custom properties, CSS Calc, and CSS Clamp to implement fluid sizing techniques, providing a robust CSS-only solution that eliminates the need for SCSS or external tools. This method contrasts traditional approaches that rely on breakpoints, which often result in abrupt changes in sizing at specific screen widths.

Fluid sizing enables typography and other design elements to adapt smoothly across different devices without the sudden leaps associated with breakpoints. It utilizes linear interpolation between specified minimum and maximum values to generate scalable designs that adjust effectively across various screen sizes.

This method is especially beneficial for handling fixed design drafts that only include mobile and desktop views. It simplifies the typically challenging task of accommodating all intermediate device sizes.

Advantages of Fluid Sizing

• Comprehensive Responsiveness: Affects typography, margins, paddings, and more to ensure uniformity across devices.
• Enhanced Customizability: Allows precise control over the responsive behavior of each element.
• Streamlined Development: Employs custom CSS properties and internal calculations for straightforward implementation.

Setup

Global Settings

Set global minimum and maximum screen sizes and base font size at the :root level.

@layer base {
    :root {
        --s-min: 400; /* Screen Size Min for General Fluid Sizing */
        --s-max: 1400; /* Screen Size Max for General Fluid Sizing */
        --rem: 16; /* Pixel per REM for General Fluid Sizing */
    }
}

Basic Usage

For each design element, set up custom properties for fluid behavior:

.element {
    fluid-property: var(--fp);
    --fp-min: 10; /* Minimum value for the property */
    --fp-max: 20; /* Maximum value for the property */
}

Replace --fp-min and --fp-max with appropriate values for properties like font-size, line-height, letter-spacing, and more to ensure seamless adaptation across different devices.

Available Fluid Properties

Below you'll find all properties available in ModulateCSS for implementing fluid sizing, designed to enhance responsiveness and adaptability across different devices. Note that traditional properties like top, left, bottom, and right are not supported; instead, only logical properties are utilized. Each entry specifies which traditional properties are replaced by these logical counterparts to ensure compatibility and flexibility in layout design.

Text

font-size

font-size: var(--fs)
--fs-min: 30;
--fs-max: 50;

line-height

line-height: var(--lh);
--lh-min: 20;
--lh-max: 30;

letter-spacing

letter-spacing: var(--ls);
--ls-min: 1;
--ls-max: 5;

word-spacing

word-spacing: var(--ws);
--ws-min: 5;
--ws-max: 15;

text-indent

text-indent: var(--ti);
--ti-min: 0;
--ti-max: 30;

text-decoration-thickness

text-decoration-thickness: var(--tdt);
--tdt-min: 1; 
--tdt-max: 10; 

text-underline-offset

text-underline-offset: var(--tuo);
--tuo-min: 3; 
--tuo-max: 12; 

Block

block-size replaces height

block-size: var(--bs);
--bs-min: 20;
--bs-max: 50;

min-block-size replaces min-height

min-block-size: var(--minbs);
--minbs-min: 50;
--minbs-max: 20;

max-block-size replaces max-height

max-block-size: var(--maxbs);
--maxbs-min: 20;
--maxbs-max: 50;

Inline

inline-size replaces width

inline-size: var(--is);
--is-min: 100;
--is-max: 300;

min-inline-size replaces min-width

min-inline-size: var(--minis);
--minis-min: 300;
--minis-max: 100;

max-inline-size replaces max-width

max-inline-size: var(--maxis);
--maxis-min: 100;
--maxis-max: 300;

Margin

margin

margin: var(--m);
--m-min: 5;
--m-max: 15;

margin-block replaces margin-top + margin-bottom

margin-block: var(--mb);
--mb-min: 5;
--mb-max: 15;

margin-block-start replaces margin-top

margin-block-start: var(--mbs);
--mbs-min: 5;
--mbs-max: 15;

margin-block-end replaces margin-bottom

margin-block-end: var(--mbe);
--mbe-min: 5;
--mbe-max: 15;

margin-inline replaces margin-left + margin-right

margin-inline: var(--mi);
--mi-min: 5;
--mi-max: 15;

margin-inline-start replaces margin-left

margin-inline-start: var(--mis);
--mis-min: 5;
--mis-max: 15;

margin-inline-end replaces margin-right

margin-inline-end: var(--mie);
--mie-min: 5;
--mie-max: 15;

Padding

padding

padding: var(--p);
--p-min: 5;
--p-max: 25;

padding-block replaces padding-top + padding-bottom

padding-block: var(--pb);
--pb-min: 5;
--pb-max: 25;

padding-block-start replaces padding-top

padding-block-start: var(--pbs);
--pbs-min: 5;
--pbs-max: 25;

padding-block-end replaces padding-bottom

padding-block-end: var(--pbe);
--pbe-min: 5;
--pbe-max: 25;

padding-inline replaces padding-left + padding-right

padding-inline: var(--pi);
--pi-min: 5;
--pi-max: 25;

padding-inline-start replaces padding-left

padding-inline-start: var(--pis);
--pis-min: 5;
--pis-max: 25;

padding-inline-end replaces padding-right

padding-inline-end: var(--pie);
--pie-min: 5;
--pie-max: 25;

Border Width

border-width

border-width: var(--bw);
--bw-min: 10;
--bw-max: 20;

border-block-width replaces border-top-width + border-bottom-width

border-block-width: var(--bbw);
--bbw-min: 10;
--bbw-max: 20;

border-block-start-width replaces border-top-width

border-block-start-width: var(--bbsw);
--bbsw-min: 10;
--bbsw-max: 20;

border-block-end-width replaces border-bottom-width

border-block-end-width: var(--bbew);
--bbew-min: 10;
--bbew-max: 20;

border-inline-width replaces border-left-width + border-right-width

border-inline-width: var(--biw);
--biw-min: 10;
--biw-max: 20;

border-inline-start-width replaces border-left-width

border-inline-start-width: var(--bisw);
--bisw-min: 10;
--bisw-max: 20;

border-inline-end-width replaces border-right-width

border-inline-end-width: var(--biew);
--biew-min: 10;
--biew-max: 20;

Border Radius

border-radius

border-radius: var(--br);
--br-min: 10;
--br-max: 20;

border-start-start-radius replaces border-top-left-radius

border-start-start-radius: var(--bssr);
--bssr-min: 10;
--bssr-max: 20;

border-start-end-radius replaces border-top-right-radius

border-start-end-radius: var(--bser);
--bser-min: 10;
--bser-max: 20;

border-end-end-radius replaces border-bottom-right-radius

border-end-end-radius: var(--beer);
--beer-min: 10;
--beer-max: 20;

border-end-start-radius replaces border-bottom-left-radius

border-end-start-radius: var(--besr);
--besr-min: 10;
--besr-max: 20;

Outline

outline-width

outline-width: var(--ow);
--ow-min: 10;
--ow-max: 20;

outline-offset

outline-offset: var(--oo);
--oo-min: 10;
--oo-max: 20;

Inset

inset

inset: var(--i);
--i-min: 10;
--i-max: 20;

inset-block replaces top + bottom

inset-block: var(--ib);
--ib-min: 10;
--ib-max: 20;

inset-block-start replaces top

inset-block-start: var(--ibs);
--ibs-min: 10;
--ibs-max: 20;

inset-block-end replaces bottom

inset-block-end: var(--ibe);
--ibe-min: 10;
--ibe-max: 20;

inset-inline replaces left + right

inset-inline: var(--ii);
--ii-min: 10;
--ii-max: 20;

inset-inline-start replaces left

inset-inline-start: var(--iis);
--iis-min: 10;
--iis-max: 20;

inset-inline-end replaces right

inset-inline-end: var(--iie);
--iie-min: 10;
--iie-max: 20;

Grid, Flex and Columns

grid-auto-columns

grid-auto-columns: var(--gac);
--gac-min: 10;
--gac-max: 20;

grid-auto-rows

grid-auto-rows: var(--gar);
--gar-min: 10;
--gar-max: 20;

gap

gap: var(--g);
--g-min: 10;
--g-max: 20;

column-gap

column-gap: var(--cg);
--cg-min: 10;
--cg-max: 20;

row-gap

row-gap: var(--rg);
--rg-min: 10;
--rg-max: 20;

column-width

column-width: var(--cw);
--cw-min: 10;
--cw-max: 20;

column-rule-width

column-rule-width: var(--crw);
--crw-min: 10;
--crw-max: 20;

flex-basis

flex-basis: var(--fb);
--fb-min: 16;
--fb-max: 20;

Background

background-position-x

background-position-x: var(--bpx);
--bpx-min: 10;
--bpx-max: 20;

background-position-y

background-position-y: var(--bpy);
--bpy-min: 10;
--bpy-max: 20;

Scroll

scroll-margin

scroll-margin: var(--sm);
--sm-min: 10;
--sm-max: 20;

scroll-margin-block replaces scroll-margin-top + scroll-margin-bottom

scroll-margin-block: var(--smb);
--smb-min: 10;
--smb-max: 20;

scroll-margin-block-start replaces scroll-margin-top

scroll-margin-block-start: var(--smbs);
--smbs-min: 10;
--smbs-max: 20;

scroll-margin-block-end replaces scroll-margin-bottom

scroll-margin-block-end: var(--smbe);
--smbe-min: 10;
--smbe-max: 20;

scroll-margin-inline replaces scroll-margin-left + scroll-margin-right

scroll-margin-inline: var(--smi);
--smi-min: 10;
--smi-max: 20;

scroll-margin-inline-start replaces scroll-margin-left

scroll-margin-inline-start: var(--smis);
--smis-min: 10;
--smis-max: 20;

scroll-margin-inline-end replaces scroll-margin-right

scroll-margin-inline-end: var(--smie);
--smie-min: 10;
--smie-max: 20;

scroll-padding

scroll-padding: var(--sp);
--sp-min: 10;
--sp-max: 20;

scroll-padding-block replaces scroll-padding-top + scroll-padding-bottom

scroll-padding-block: var(--spb);
--spb-min: 10;
--spb-max: 20;

scroll-padding-block-start replaces scroll-padding-top

scroll-padding-block-start: var(--spbs);
--spbs-min: 10;
--spbs-max: 20;

scroll-padding-block-end replaces scroll-padding-bottom

scroll-padding-block-end: var(--spbe);
--spbe-min: 10;
--spbe-max: 20;

scroll-padding-inline replaces scroll-padding-left + scroll-padding-right

scroll-padding-inline: var(--spi);
--spi-min: 10;
--spi-max: 20;

scroll-padding-inline-start replaces scroll-padding-left

scroll-padding-inline-start: var(--spis);
--spis-min: 10;
--spis-max: 20;

scroll-padding-inline-end replaces scroll-padding-right

scroll-padding-inline-end: var(--spie);
--spie-min: 10;
--spie-max: 20;