Design Classes

Design Classes

Here is a complete list of CSS variables for design classes, formatted for easy pasting into Bricks Builder’s CSS Variables section. These include variables for transitions, positioning, shadows, borders, button styles and sizes, backgrounds, link styles, opacity, background blur, cards, and avatars.

/* Useful Design Variables */
--c-transition: all 0.3s ease; /* Global transition */
--c-relative: relative;
--c-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Adjust shadow as needed */
--c-rounded: 8px; /* Border radius */
--c-border-light: 1px solid #e0e0e0; /* Light border color */
--c-border-dark: 1px solid #333333; /* Dark border color */

/* Button Styles */
--c-btn-main: #0073e6; /* Main button color */
--c-btn-alt: #005bb5; /* Alternative button color */
--c-btn-transparent: transparent;

/* Button Sizes */
--c-btn-s: 0.5rem 1rem; /* Padding for Small */
--c-btn-m: 0.75rem 1.25rem; /* Padding for Medium */
--c-btn-l: 1rem 1.5rem; /* Padding for Large */
--c-btn-xl: 1.25rem 2rem; /* Padding for X-Large */

/* Background Colors */
--c-bg-light: #f9f9f9;
--c-bg-light-alt: #e0e0e0;
--c-bg-dark: #222222;
--c-bg-dark-alt: #333333;
--c-bg-accent: #ff6347; /* Accent color */
--c-bg-accent-alt: #ff7b61;

/* Link Styles */
--c-link-accent: #ff6347; /* Accent link color */
--c-link-light: #f9f9f9; /* Light link color */
--c-link-dark: #222222; /* Dark link color */

/* Link Sizes */
--c-link-s: 0.75rem;
--c-link-m: 1rem;
--c-link-l: 1.25rem;
--c-link-xl: 1.5rem;

/* Opacity Levels */
--c-opacity-25: 0.25;
--c-opacity-50: 0.5;
--c-opacity-75: 0.75;

/* Background Blur */
--c-bg-blur-s: blur(2px);
--c-bg-blur-m: blur(4px);
--c-bg-blur-l: blur(6px);
--c-bg-blur-xl: blur(8px);

/* Card Styles */
--c-card-light: #f9f9f9; /* Light card background color */
--c-card-dark: #222222; /* Dark card background color */
--c-card-accent: #ff6347; /* Accent card background color */

/* Avatar Sizes */
--c-avatar-s: 24px;
--c-avatar-m: 36px;
--c-avatar-l: 48px;
--c-avatar-xl: 64px;

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:
- Positioning and Shadows:

position: var(--c-relative);
box-shadow: var(--c-shadow);

Basic and Specific Alignments: Use justify-content and align-Borders and Border Radius:

border: var(--c-border-light); /* or use --c-border-dark */
border-radius: var(--c-rounded);

Button Styles and Sizes:

background-color: var(--c-btn-main); /* Main button color */
padding: var(--c-btn-l); /* Large button size */

Backgrounds and Opacity:

background-color: var(--c-bg-light); /* Light background */
opacity: var(--c-opacity-50); /* 50% opacity */

Background Blur:

filter: var(--c-bg-blur-m); /* Medium blur effect */

Link Styles and Sizes:

color: var(--c-link-accent); /* Accent link color */
font-size: var(--c-link-m); /* Medium link size */

Cards and Avatars:

background-color: var(--c-card-light); /* Light card */
width: var(--c-avatar-l); /* Large avatar */
height: var(--c-avatar-l);

This set of CSS variables provides a comprehensive and reusable design system in Bricks Builder, making it easy to apply consistent styling across your project. Adjust the values as needed to fit 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;