BRICKS

Bricks is a design and CSS development framework for a professional and efficient workflow.

Build high-end scalable websites – like a PRO, from Figma to Webflow.

BRICKS Framework - Figma Style Guide
BRICKS Framework - Documentation

Webflow Style Guide

Clone the Webflow Project and start building scalable websites today,
Clone in Webflow
View Live Site
BRICKS Framework, Webflow Style Guide
BRICKS Framework, Webflow Style Guide
BRICKS Framework, Webflow Style Guide
BRICKS Framework, Webflow Style Guide
We created the Bricks Framework to have a production ready Figma to Webflow design and development workflow, that covers advanced needs and is based off best front-end development practices.

Make fast changes with our attribute based solution

Theme Modes

Change section and page colors by simply switching between theme modes.
<style>

/* theme light */
:root,
[data-theme="light"],
[data-theme="dark"] [data-theme="invert"] {
	--_theme-modes---color-theme--background: var(--_theme-modes---color-theme--light);
	--_theme-modes---color-theme--text:  var(--_theme-modes---color-theme--dark);
  --_theme-modes---color-theme--borders:  var(--_theme-modes---color-theme--dark);
	/* button */
  --_theme-modes---color-button--background: var(--_theme-modes---color-theme--dark);
  --_theme-modes---color-button--text:  var(--_theme-modes---color-theme--light);
  --_theme-modes---color-button--border:  var(--color-greyscale-tints--greyscale-tint-xdark);
  --_theme-modes---color-button--background-hover: var(--color-theme--accent-color-secondary);
  --_theme-modes---color-button--text-hover: var(--_theme-modes---color-theme--dark);
  --_theme-modes---color-button--border-hover: var(--_theme-modes---color-theme--dark);
	/* button alter*/
  --color-button-alter--background: var(--_theme-modes---color-theme--transparent);
  --color-button-alter--text: var(--_theme-modes---color-theme--dark);
  --color-button-alter--border: var(--_theme-modes---color-theme--dark);
  --color-button-alter--background-hover: var(--_theme-modes---color-theme--dark);
  --color-button-alter--text-hover: var(--_theme-modes---color-theme--light);
  --color-button-alter--border-hover: var(--_theme-modes---color-theme--dark);
  /* button brand */
  --color-button-brand--background: var(--_theme-modes---color-theme--dark);
  --color-button-brand--text: var(--_theme-modes---color-theme--light);
  --color-button-brand--border: var(--color-greyscale-tints--greyscale-tint-xdark);
  --color-button-brand--background-hover: var(--_theme-modes---color-theme--light);
  --color-button-brand--text-hover: var(--_theme-modes---color-theme--dark);
  --color-button-brand--border-hover: var(--_theme-modes---color-theme--light);
}

/* theme dark */
[data-theme="dark"],
[data-theme="invert"],
[data-theme="light"] [data-theme="invert"] {
	--_theme-modes---color-theme--background: var(--_theme-modes---color-theme--dark);
	--_theme-modes---color-theme--text:  var(--_theme-modes---color-theme--light);
  --_theme-modes---color-theme--borders:  var(--_theme-modes---color-theme--light);
	/* button */
  --_theme-modes--color-button--background: var(--_theme-modes---color-theme--light);
  --_theme-modes--color-button--text: var(--_theme-modes---color-theme--dark);
  --_theme-modes--color-button--border: var(--color-greyscale-tints--greyscale-tint-xdark);
  --_theme-modes--color-button--background-hover: var(--_theme-modes---color-theme--dark);
  --_theme-modes--color-button--text-hover: var(--_theme-modes---color-theme--light);
  --_theme-modes--color-button--border-hover:  var(--_theme-modes---color-theme--light);
	/* button alter */
  --color-button-alter--background: var(--_theme-modes---color-theme--dark);
  --color-button-alter--text: var(--_theme-modes---color-theme--light);
  --color-button-alter--border: var(--color-greyscale-tints--greyscale-tint-xdark);
  --color-button-alter--background-hover: var(--_theme-modes---color-theme--light);
  --color-button-alter--text-hover: var(--_theme-modes---color-theme--dark);
  --color-button-alter--border-hover: var(--_theme-modes---color-theme--light);
  /* button brand */
  --color-button-brand--background: var(--color-brand--brand-color-primary_opacity-drop-33);
  --color-button-brand--text: var(--_theme-modes---color-theme--light);
  --color-button-brand--border: var(--color-brand--brand-color-primary_opacity-drop-66);
  --color-button-brand--background-hover: var(--color-brand--brand-color-primary_opacity-drop-66);
  --color-button-brand--text-hover: var(--_theme-modes---color-theme--dark);
  --color-button-brand--border-hover: var(--_theme-modes---color-theme--light);
}

/* button alter */
[data-button-style="alter"] {
  --_theme-modes---color-button--background: var(--color-button-alter--background);
  --_theme-modes---color-button--text: var(--color-button-alter--text);
  --_theme-modes---color-button--border: var(--color-button-alter--border);
  --_theme-modes---color-button--background-hover: var(--color-button-alter--background-hover);
  --_theme-modes---color-button--text-hover: var(--color-button-alter--text-hover);
  --_theme-modes---color-button--border-hover: var(--color-button-alter--border-hover);
}

/* button brand */
[data-button-style="brand"] {
  --_theme-modes---color-button--background: var(--color-button-brand--background);
  --_theme-modes---color-button--text: var(--color-button-brand--text);
  --_theme-modes---color-button--border: var(--color-button-brand--border);
  --_theme-modes---color-button--background-hover: var(--color-button-brand--background-hover);
  --_theme-modes---color-button--text-hover: var(--color-button-brand--text-hover);
  --_theme-modes---color-button--border-hover: var(--color-button-brand--border-hover);
}

/* apply colors */
:is(c, :where([data-theme]:not([data-theme="none"]))) {
	background-color: var(--_theme-modes---color-theme--background);
	color: var(--_theme-modes---color-theme--text);
}

</style>

Horizontal and Vertical Padding

Change container top and bottom paddings by simply switching between states. Add horizontal paddings with custom attribute padding-global.
<style>
/* Padding System */

/* padding-global */
:is(c, :where([padding-global])) {
        position: relative;
        container-type: inline-size;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding-left: var(--_structure-management---structure-padding-padding-global--padding-horizontal);
        padding-right: var(--_structure-management---structure-padding-padding-global--padding-horizontal);
        @media screen and (max-width: 479px) {
        padding-left: var(--_structure-management---structure-padding-padding-global--padding-horizontal_mobile);
        padding-right: var(--_structure-management---structure-padding-padding-global--padding-horizontal_mobile);};
}

/* padding-vertical-xsmall */
:is(c, :where([data-padding-top="xsmall"])) { padding-top: var(--structure-padding-padding-vertical--padding-vertical-nav);}
:is(c, :where([data-padding-bottom="xsmall"])) { padding-bottom: var(--structure-padding-padding-vertical--padding-vertical-nav); }

/* padding-vertical-small */
:is(c, :where([data-padding-top="small"])) { padding-top: var(--_structure-management---structure-padding-padding-vertical--padding-vertical-small);}
:is(c, :where([data-padding-bottom="small"])) { padding-bottom: var(--_structure-management---structure-padding-padding-vertical--padding-vertical-small); }
@media screen and (max-width: 768px) {
    :is(c, :where([data-padding-top="small"])) {
        padding-top: var(--_structure-management---structure-padding-padding-vertical--padding-vertical-small-mobile);
    }
    :is(c, :where([data-padding-bottom="small"])) {
        padding-bottom: var(--_structure-management---structure-padding-padding-vertical--padding-vertical-small-mobile);
    }
}

/* padding-vertical-medium */
:is(c, :where([data-padding-top="medium"])) { padding-top: var(--_structure-management---structure-padding-padding-vertical--padding-vertical-medium); }
:is(c, :where([data-padding-bottom="medium"])) { padding-bottom: var(--_structure-management---structure-padding-padding-vertical--padding-vertical-medium); }
@media screen and (max-width: 768px) {
    :is(c, :where([data-padding-top="medium"])) {
        padding-top: var(--_structure-management---structure-padding-padding-vertical--padding-vertical-medium-mobile);
    }
    :is(c, :where([data-padding-bottom="medium"])) {
        padding-bottom: var(--_structure-management---structure-padding-padding-vertical--padding-vertical-medium-mobile);
    }
}

/* padding-vertical-large */
:is(c, :where([data-padding-top="large"])) { padding-top: var(--_structure-management---structure-padding-padding-vertical--padding-vertical-large);}
:is(c, :where([data-padding-bottom="large"])) { padding-bottom: var(--_structure-management---structure-padding-padding-vertical--padding-vertical-large); }
/* Additional padding adjustment for large screens */
@media screen and (max-width: 768px) {
    :is(c, :where([data-padding-top="large"])) {
        padding-top: var(--_structure-management---structure-padding-padding-vertical--padding-vertical-large-mobile);
    }
    :is(c, :where([data-padding-bottom="large"])) {
        padding-bottom: var(--_structure-management---structure-padding-padding-vertical--padding-vertical-large-mobile);
    }
}

/* padding-vertical-none */
:is(c, :where([data-padding-top="none"])) { padding-top: 0; }
:is(c, :where([data-padding-bottom="none"])) { padding-bottom: 0; }
</style>
Build high-end scalable websites with prebuild Webflow Components.

Component Library

Create production-ready live builds within seconds.
Coming to Webflow
View Live Site
BRICKS Library - Webflow FooterBRICKS Library - Webflow FooterBRICKS Library - Webflow HeadersBRICKS Library - Webflow MarqueeBRICKS Library - Webflow Banners BRICKS Library - Webflow Main SectionBRICKS Library - 404 SectionBRICKS Library - Webflow Pricing SectionBRICKS Library - Webflow CTA Section
BRICKS Library - Webflow CTA SectionBRICKS Library - Webflow Pricing SectionBRICKS Library - 404 SectionBRICKS Library - Webflow Main SectionBRICKS Library - Webflow Banners BRICKS Library - Webflow MarqueeBRICKS Library - Webflow HeadersBRICKS Library - Webflow FooterBRICKS Library - Webflow Footer
BRICKS Library - Webflow HeadersBRICKS Library - Webflow FooterBRICKS Library - Webflow MarqueeBRICKS Library - Webflow FooterBRICKS Library - Webflow Banners BRICKS Library - 404 SectionBRICKS Library - Webflow Pricing SectionBRICKS Library - Webflow Main SectionBRICKS Library - Webflow CTA Section

Build for Efficiency

Tokens

Change brand and core style parameters globally by setting up design tokens.

Variables

A faster and more efficient workflow by styling Figma and Webflow Variables.

Seamless Figma to Webflow Workflow

Download the Figma and Webflow Starter Projects and build seamless web experiences.

Themes

Change section and page colors by simply switching between theme modes.

Tokens

Change brand and core style parameters globally by setting up design tokens.

Variables

A faster and more efficient workflow by styling Figma and Webflow Variables.

Seamless Figma to Webflow Workflow

Download the Figma and Webflow Starter Projects and build seamless web experiences.

Themes

Change section and page colors by simply switching between theme modes.

#madewithbricks

Preview Live Site
Preview Live Site
Preview Live Site
Preview Live Site
Preview Live Site
Preview Live Site
Get in Touch
Keep scrolling ↓
Explore what's next

↓ Keep scrolling to explore our website templates

As Certified Experts we build high-quality HTML website templates for both Webflow and Framer.