Margin Classes

Margin Classes

Here’s a complete list of CSS variables for responsive margin classes, formatted for easy pasting into Bricks Builder’s CSS Variables section. Each variable represents a different margin size for all sides, left, right, top, and bottom.

/* Margin All Sides */
--c-margin-xs: 0.25rem; /* Adjust value as needed */
--c-margin-s: 0.5rem;
--c-margin-m: 1rem;
--c-margin-l: 1.5rem;
--c-margin-xl: 2rem;
--c-margin-xxl: 3rem;

/* Margin Left */
--c-margin-left-xs: 0.25rem;
--c-margin-left-s: 0.5rem;
--c-margin-left-m: 1rem;
--c-margin-left-l: 1.5rem;
--c-margin-left-xl: 2rem;
--c-margin-left-xxl: 3rem;

/* Margin Right */
--c-margin-right-xs: 0.25rem;
--c-margin-right-s: 0.5rem;
--c-margin-right-m: 1rem;
--c-margin-right-l: 1.5rem;
--c-margin-right-xl: 2rem;
--c-margin-right-xxl: 3rem;

/* Margin Top */
--c-margin-top-xs: 0.25rem;
--c-margin-top-s: 0.5rem;
--c-margin-top-m: 1rem;
--c-margin-top-l: 1.5rem;
--c-margin-top-xl: 2rem;
--c-margin-top-xxl: 3rem;

/* Margin Bottom */
--c-margin-bottom-xs: 0.25rem;
--c-margin-bottom-s: 0.5rem;
--c-margin-bottom-m: 1rem;
--c-margin-bottom-l: 1.5rem;
--c-margin-bottom-xl: 2rem;
--c-margin-bottom-xxl: 3rem;
How to Use in Bricks Builder
  • Paste the Variables: Copy all the lines and paste them into the CSS Variables field in Bricks Builder under Bricks > Settings > Variables.
  • Using the Variables in CSS:
    • To apply margin using these variables, use the following properties in your CSS:
margin: var(--c-margin-m); /* All sides */
margin-left: var(--c-margin-left-l);
margin-right: var(--c-margin-right-m);
margin-top: var(--c-margin-top-s);
margin-bottom: var(--c-margin-bottom-xl);

This setup provides you with a responsive and consistent margin system for use across elements in Bricks Builder. Adjust the values as needed to align with your design requirements.

Combined Variables Entry for Bricks

If you want to enter all these variables into Bricks in one go, here’s the full list combined for easy copy-pasting (with semicolons separating each variable):

--columns-6: repeat(6, 1fr); --columns-5: repeat(5, 1fr); --columns-4: repeat(4, 1fr); --columns-3: repeat(3, 1fr); --columns-2: repeat(2, 1fr); --columns-xl-5: repeat(5, 1fr); --columns-xl-4: repeat(4, 1fr); --columns-xl-3: repeat(3, 1fr); --columns-xl-2: repeat(2, 1fr); --columns-xl-1: repeat(1, 1fr); --columns-l-4: repeat(4, 1fr); --columns-l-3: repeat(3, 1fr); --columns-l-2: repeat(2, 1fr); --columns-l-1: repeat(1, 1fr); --columns-m-3: repeat(3, 1fr); --columns-m-2: repeat(2, 1fr); --columns-m-1: repeat(1, 1fr); --columns-s-2: repeat(2, 1fr); --columns-s-1: repeat(1, 1fr); --columns-1-3: 1fr 3fr; --columns-3-1: 3fr 1fr; --columns-1-2: 1fr 2fr; --columns-2-1: 2fr 1fr; --columns-2-3: 2fr 3fr; --columns-3-2: 3fr 2fr;