CSS Variables

Bricks Boilerplate layouts are powered by CSS variables. You can find them inside Bricks builder > Variables. Change their values to match your project.

Theme

Set up your max viewport size.

Variable name	Value
bt-page-width	1366px

Font sizes

Define your font sizes. By default Bricks Boilerplate uses fluid values. There are many sites where you can calculate and generate fluid sizes, e.g. this one: https://geary.co/clamp-calculator/

Just Bricks version calculates REM to PX as it is, meaning 1rem = 16px. It doesnt change the root font size to 62.5% but keep it as it is => 100%.

Variable name	Value
bt-text-s	clamp(0.875rem, 0.875rem + 0.000cqi, 0.875rem)
bt-text-m	clamp(1.000rem, 0.932rem + 0.225cqi, 1.125rem)
bt-text-l	clamp(1.250rem, 1.115rem + 0.450cqi, 1.500rem)
bt-h6	clamp(1.000rem, 0.932rem + 0.225cqi, 1.125rem)
bt-h5	clamp(1.000rem, 0.932rem + 0.225cqi, 1.125rem)
bt-h4	clamp(1.250rem, 1.115rem + 0.450cqi, 1.500rem)
bt-h3	clamp(1.563rem, 1.327rem + 0.787cqi, 1.999rem)
bt-h2	clamp(1.953rem, 1.569rem + 1.284cqi, 2.665rem)
bt-h1	clamp(2.441rem, 1.842rem + 2.003cqi, 3.552rem)
bt-h0	clamp(3.052rem, 2.143rem + 3.036cqi, 4.735rem)

Spacings

Used for paddings and margins...

Variable name	Value
bt-space-xxs	clamp(0.63rem, 0.52rem + 0.38cqi, 0.84rem)
bt-space-xs	clamp(0.84rem, 0.69rem + 0.51cqi, 1.13rem)
bt-space-s	clamp(1.13rem, 0.92rem + 0.68cqi, 1.5rem)
bt-space-m	clamp(1.5rem, 1.23rem + 0.90cqi, 2rem)
bt-space-l	clamp(2rem, 1.64rem + 1.20cqi, 2.67rem)
bt-space-xl	clamp(2.67rem, 2.19rem + 1.60cqi, 3.55rem)
bt-space-xxl	clamp(3.55rem, 2.91rem + 2.14cqi, 4.74rem)

For section spacings or larger spaces, you can use these:

Variable name	Value
bt-space-section-xxs	clamp(1.9rem, 1.56rem + 1.14cqi, 2.53rem)
bt-space-section-xs	clamp(2.53rem, 2.08rem + 1.52cqi, 3.38rem)
bt-space-section-s	clamp(3.38rem, 2.77rem + 2.03cqi, 4.5rem)
bt-space-section-m	clamp(4.5rem, 3.69rem + 2.71cqi, 6rem)
bt-space-section-l	clamp(6rem, 4.92rem + 3.61cqi, 8rem)
bt-space-section-xl	clamp(8rem, 6.56rem + 4.81cqi, 10.66rem)
bt-space-section-xxl	clamp(10.66rem, 8.74rem + 6.41cqi, 14.21rem)

Border radius

There are 2 variables for you to use for border radius. One is to unify all the border radius and second is to achieve circle borders.

Variable name	Value
bt-radius	0.375rem
bt-radius-circle	50%

Colors

Bricks Boilerplate comes with 2 sets of colors, each with 12 shades. Their origin is from https://www.radix-ui.com/colors where each shade has its own purpose.

Neutral colors:

Variable name	Value	Purpose
bt-neutral-1	#fcfcfc	Backgrounds
bt-neutral-2	#f9f9f9	Backgrounds
bt-neutral-3	#f0f0f0	Interactive components
bt-neutral-4	#e8e8e8	Interactive components
bt-neutral-5	#e0e0e0	Interactive components
bt-neutral-6	#d9d9d9	Borders and separators
bt-neutral-7	#cecece	Borders and separators
bt-neutral-8	#bbb	Borders, focus rings, disabled text
bt-neutral-9	#8d8d8d	Solid backgrounds, disabled text
bt-neutral-10	#838383	Solid backgrounds, disabled text
bt-neutral-11	#646464	Secondary text, links
bt-neutral-12	#202020	High-contrast text

Brand colors

Change this to match your project style. You can use this tool to generate shades and tints for your brand color: https://noeldelgado.github.io/shadowlord/ or pick one from Radix colors: https://www.radix-ui.com/colors

Main primary color is --bt-brand-9, so you should set your main shade for that css variable.

Variable name	Value	Purpose
bt-brand-1	#fdfdfe	Backgrounds
bt-brand-2	#f7f8ff	Backgrounds
bt-brand-3	#edeffe	Interactive components
bt-brand-4	#e1e5ff	Interactive components
bt-brand-5	#d2d7ff	Interactive components
bt-brand-6	#c1c8ff	Borders and separators
bt-brand-7	#abb4f9	Borders and separators
bt-brand-8	#8d99ef	Borders, focus rings, disabled text
bt-brand-9	#2c46fc	Solid backgrounds, disabled text - this is your primary brand color
bt-brand-10	#0037e9	Solid backgrounds, disabled text
bt-brand-11	#3a4cc7	Secondary text, links
bt-brand-12	#1f275c	High-contrast text

Transitions

Variable name	Value
bt-transition-fast	0.2s
bt-transition-medium	0.4s
bt-transition-slow	0.7s

Widths

Variable name	Value
bt-width-full	100%
bt-width-half-container	calc(var(--bt-page-width) / 2)
bt-width-s	25rem
bt-width-m	37.5rem
bt-width-l	56.25rem
bt-width-xl	70rem