It's gonna be a hot one...

Summer of sections

Over 150 new sections will be added in July alone!Check out our progress!!

Bricks templates you can actually use

A lot of Bricks Builder libraries are filled with templates that you can't use. All of our templates are based on real sites that are modern, clean, and fast loading. 

All frameworks currently Supported:

Bricks Styler
CORE Framework
ATF - Advanced Themer
ACSS Framework

With the perfect balance of style

We use, what we call BMS (Bare Minimum Styling) means that the only styling we use is your standard, out of the box, framework variables. So you can drop in a template and it will just work with the settings you have on your site already. 

MEET BMS

Using only the variables that come with your framework

The whole reason you use a framework is for consistency, so shouldn't your templates use them too? Below are the only styling variables our templates use, and we never use utility classes. No more wasting time stripping away styling or recreating what the screenshot looked like because your template imported as a blank slab.

TypographyWe use the font sizes that come with your framework. So that each section you insert will have the identical sizing as the rest of your site.
SpacingStandard spacings are used from --space-xs thru to --space-2xl for maximum consistency.
BordersFor border radius we use --radius-xs thru to --radius xl as well as radius-full and radius-circle. 
ColorsFor colors only Primary, Black, and White and matching transparencies of those colors are used.

TYPOGRAPHY

▼
CORE ACSS ATF
--text-xs --text-xs --at-text-xs
--text-s --text-s --at-text-s
--text-m --text-m --at-text-m
--text-l --text-l --at-text-l
--text-xl --text-xl --at-text-xl
--text-2xl --text-2xl --at-text-2xl

SPACING

▼
CORE ACSS ATF
--space-xs --space-xs --at-space-xs
--space-s --space-s --at-space-s
--space-m --space-m --at-space-m
--space-l --space-l --at-space-l
--space-xl --space-xl --at-space-xl
--space-2xl --space-2xl --at-space-2xl

BORDERS

▼
CORE ACSS ATF
--radius-xs --radius-xs --at-radius-xs
--radius-s --radius-s --at-radius-s
--radius-m --radius-m --at-radius-m
--radius-l --radius-l --at-radius-l
--radius-xl --radius-xl --at-radius-xl

COLORS

▼
CORE ACSS ATF
--primary --primary --at-primary
--primary-10 --primary-10 --at-primary-10
--primary-20 --primary-20 --at-primary-9
--primary-30 --primary-30 --at-primary-8
--primary-40 --primary-40 --at-primary-7
--primary-50 --primary-50 --at-primary-6
--primary-60 --primary-60 --at-primary-5
--primary-70 --primary-70 --at-primary-4
--primary-80 --primary-80 --at-primary-3
--primary-90 --primary-90 --at-primary-2
--primary-95 --primary-95 --at-primary-1
--dark --black --at-black
--dark-10 --black-trans-10 --at-black-10
--dark-20 --black-trans-20 --at-black-9
--dark-30 --black-trans-30 --at-black-8
--dark-40 --black-trans-40 --at-black-7
--dark-50 --black-trans-50 --at-black-6
--dark-60 --black-trans-60 --at-black-5
--dark-70 --black-trans-70 --at-black-4
--dark-80 --black-trans-80 --at-black-3
--dark-90 --black-trans-90 --at-black-2
--dark-95 --black-trans-95 --at-black-1
--light --white --at-white
--light-10 --white-trans-10 --at-white-10
--light-20 --white-trans-20 --at-white-9
--light-30 --white-trans-30 --at-white-8
--light-40 --white-trans-40 --at-white-7
--light-50 --white-trans-50 --at-white-6
--light-60 --white-trans-60 --at-white-5
--light-70 --white-trans-70 --at-white-4
--light-80 --white-trans-80 --at-white-3
--light-90 --white-trans-90 --at-white-2
--light-95 --white-trans-95 --at-white-1

A library that makes you feel in control

Bricks Bits isn’t about bloated libraries with endless duplicates. Instead, we focus on modern, usable templates and our overview videos show you exactly how to edit a design - fast.

Build with confidence

Advanced templates include an explainer video so you can understand the concept.

Scalable Templates

All of our templates utilize BEM naming and the ability to rename the block elements.

Look  pro now

Improve your front end designs now while learning best practices along the way.

Truly useable SECTION TEMPLATES

Our templates actually look like real websites because they are based on actual top tier website trends that are being used today. Not some useless design just to add another section to our library count.

ImageImage
Image

Sections can be used in Light or dark mode

Our Core Framework versions are dark / light mode compliant right out of the box.

Image

Light Mode

Image

Dark Mode

And introducing Bricks Bits action classes

Let’s be real, clients who want over-the-top motion on their sites aren’t the ones paying your bills. But adding just the right touch can make you look like an expert, which helps justify your pricing.

Bricks Bits makes it effortless to use Bricks’ built-in action classes. We include 97 classes that add animation simply by adding the class to an element. In 30 seconds, you can add multiple motion effects on a page that impress clients without overcomplicating your workflow.