Style Guide
This Style Guide is based on Advanced Themer Framework.
The framework is predominantly CSS variable based. CSS Variables are defined as Bricks CSS Variables using the Advanced Themer UI.
Classes are mostly Bricks Class System based. CSS rules that need to be global are defined in Advanced CSS.
Typography
Heading 1
..value..
Heading 2
..value..
Heading 3
..value..
Heading 4
..value..
Heading 5
..value..
Heading 6
..value..
Spacing
--at-space--3xs
--at-space--2xs
--at-space--xs
--at-space--s
--at-space--m
--at-space--l
--at-space--xl
--at-space--2xl
--at-space--3xl
Buttons
Button Styles are linked to the Bricks UI settings.
You may also use the class .at-btn for a standard primary button, .at-btn–secondary, .at-btn–light, .at-btn–dark .
Also use Bricks UI “outline” switch or .at-btn–outline
Framework Defaults for buttons are set in Bricks CSS Variables in teh Buttons category.
Buttons
Same notes as above. Dark BG for comparison
Icon Lists
Use a Bricks Rich Text Element and apply classes to change the way lists appear.