Bricks Boilerplate Documentation
PricingDemo
  • Intro
  • Getting Started
    • Requirements
    • 5 minutes launch ⚡
    • Import into an existing project
  • Basics
    • Inside the package
    • Global Styles
      • General
      • CSS Variables
      • Buttons
      • Utility classes
    • Templates
    • ACF
      • Global topbar
    • Bricks Boilerplate Addon plugin
      • Wishlist
      • Variation swatches
      • Checkout
    • Code snippets
  • Tutorials
    • Blog in 5 minutes
    • Custom Off-canvas cart
    • Off-canvas cart without addon plugin
    • Custom Thank you page
    • Custom Checkout page
    • Custom Cart page
    • My account page
    • Product gallery with thumbnails
    • Custom query for product reviews
  • Advanced
    • Custom slider controls
    • Custom accordions
    • Megamenu
    • GSAP animations
  • Common issues
    • Custom CSS
    • Product galleries
    • Restoring site with WPvivid
Powered by GitBook
On this page
  • Theme
  • Font sizes
  • Spacings
  • Border radius
  • Colors
  • Transitions
  • Widths
  1. Basics
  2. Global Styles

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.

PreviousGeneralNextButtons

Last updated 7 months ago

Theme

Set up your max viewport size.

Variable name
Value

bt-page-width

1366px

Font sizes

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

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

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

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:

https://geary.co/clamp-calculator/
https://www.radix-ui.com/colors
https://noeldelgado.github.io/shadowlord/
https://www.radix-ui.com/colors