Padding Classes

Padding Classes

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

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

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

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

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

/* Padding Bottom */
--c-padding-bottom-xs: 0.25rem;
--c-padding-bottom-s: 0.5rem;
--c-padding-bottom-m: 1rem;
--c-padding-bottom-l: 1.5rem;
--c-padding-bottom-xl: 2rem;
--c-padding-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 padding using these variables, use the following properties in your CSS:

padding: var(--c-padding-m); /* All sides */
padding-left: var(--c-padding-left-l);
padding-right: var(--c-padding-right-m);
padding-top: var(--c-padding-top-s);
padding-bottom: var(--c-padding-bottom-xl);

This setup allows you to quickly apply consistent, responsive padding across elements in Bricks Builder. Adjust the values as necessary to match your design system.

Example Code for Padding Variables Page

This HTML and CSS code demonstrates how different padding variables affect box elements. Each box will use a different padding variable so you can see the differences visually.

<div style="display: flex; gap: 1rem; flex-wrap: wrap;">
  <div class="box" style="padding: var(--c-padding-xs);">Padding XS</div>
  <div class="box" style="padding: var(--c-padding-s);">Padding S</div>
  <div class="box" style="padding: var(--c-padding-m);">Padding M</div>
  <div class="box" style="padding: var(--c-padding-l);">Padding L</div>
  <div class="box" style="padding: var(--c-padding-xl);">Padding XL</div>
  <div class="box" style="padding: var(--c-padding-xxl);">Padding XXL</div>
</div>

<style>
  .box {
    background-color: #e0e0e0;
    border: 1px solid #ccc;
    border-radius: 8px;
    text-align: center;
    min-width: 100px;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>

Padding XS

Padding S

Padding M

Padding L

Padding XL

Padding XXL

This code lets you see the margin differences by adjusting the space around each box.