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 Framework - BRICKS Library FooterBRICKS Framework - BRICKS Library FooterBRICKS Framework - BRICKS Library HeaderBRICKS Framework - BRICKS Library TestimonialsBRICKS Framework - BRICKS Library FeaturesBRICKS Framework - BRICKS Library Main SectionBRICKS Framework - BRICKS Library 404BRICKS Framework - BRICKS Library PricingBRICKS Framework - BRICKS Library Privacy Banner
BRICKS Framework - BRICKS Library FooterBRICKS Framework - BRICKS Library FeaturesBRICKS Framework - BRICKS Library HeaderBRICKS Framework - BRICKS Library Privacy BannerBRICKS Framework - BRICKS Library TestimonialsBRICKS Framework - BRICKS Library Main SectionBRICKS Framework - BRICKS Library 404BRICKS Framework - BRICKS Library FooterBRICKS Framework - BRICKS Library Pricing
BRICKS Framework - BRICKS Library FooterBRICKS Framework - BRICKS Library HeaderBRICKS Framework - BRICKS Library PricingBRICKS Framework - BRICKS Library TestimonialsBRICKS Framework - BRICKS Library FeaturesBRICKS Framework - BRICKS Library Main SectionBRICKS Framework - BRICKS Library Privacy BannerBRICKS Framework - BRICKS Library 404BRICKS Framework - BRICKS Library Footer

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.