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.
Last updated
Bricks Boilerplate layouts are powered by CSS variables. You can find them inside Bricks builder > Variables. Change their values to match your project.
Last updated
Set up your max viewport size.
bt-page-width
1366px
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)
Used for paddings and margins...
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:
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)
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.
bt-radius
0.375rem
bt-radius-circle
50%
Neutral colors:
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
Main primary color is --bt-brand-9, so you should set your main shade for that css variable.
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
bt-transition-fast
0.2s
bt-transition-medium
0.4s
bt-transition-slow
0.7s
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
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:
Bricks Boilerplate comes with 2 sets of colors, each with 12 shades. Their origin is from where each shade has its own purpose.
Change this to match your project style. You can use this tool to generate shades and tints for your brand color: or pick one from Radix colors:
