Styles Cheatsheet

This site uses the Automatic CSS framework, a full reference can be found here:
https://automaticcss.com/cheat-sheet/

Colours

Primary
var(--primary)
Secondary
var(--secondary)
Accent
var(--accent)
Base
var(--base)
Shade
var(--shade)
Hover
Light
Ultra Light
Medium
Dark
Ultra Dark
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
Comp
Hover
Light
Ultra Light
Medium
Dark
Ultra Dark
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
Comp
Hover
Light
Ultra Light
Medium
Dark
Ultra Dark
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
Comp
Hover
Light
Ultra Light
Medium
Dark
Ultra Dark
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
Hover
Light
Ultra Light
Medium
Dark
Ultra Dark
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90

Using Colours (CSS classes and CSS variables)

Background CSS classes

Background classes exist for all colour variants. Transparent options exist for alot of the colour variants as well. Here are some examples:
bg--primary
bg--primary-light-trans-60
bg--base-medium
bg--accent

Overlay CSS Classes

Overlay classes can be used to overlay a transparent version of a colour on top of a background image or content. There are classes for all the main colours. Here are examples:
overlay--primary-trans-80
overlay--base-trans-40
overlay--accent-trans-60
overlay--secondary-light-trans-80

Typography Colour CSS classes

Text colour classes exist for all colour variants. Apply the text colour class to headings or text elements and even buttons to override their default colour. Here are some examples:
text--primary
text--base
text--base-light
text--accent
text--white

Link Colour CSS classes

Link colour classes are useful for changing the colour of links inside other elements. They can be used on link elements or other elements like text boxes with links inside them.
Text link with no class (site default)link--accentlink--secondary
This is a block of text with a link in it.

Colour CSS variables

CSS variables are created by AutomaticCSS for all colour variants. These can be used to style custom CSS classes created in oxygen (e.g. background or text colour). Here are some examples:
var(--primary)
var(--base-ultra-light)
var(--accent-trans-60)
var(--shade-white)

Quick styling classes

box-shadow--m
box-shadow--l
box-shadow--xl

Widths and spacing

Classes and CSS variables exist for consistent width and spacing. These are configured to work on a mathematical scale and can be adjusted in the AutomaticCSS settings. The CSS variable name is listed in the examples but you can use classes in Oxygen as well. E.g CSS class width--xs or CSS variable var(--width-xs)

Note: We find --width-l a good reading width for narrow text like blog post content

Widths

--width-xs
--width-s
--width-m
--width-l
--width-xl
--width-xxl
--width-50
None
XS
S
M

This is default for all new sections
L
XL
XXL
--space-xs
--space-s
--space-m
--space-l
--space-xl
--space-xxl

CSS grid layouts

We use CSS grid as our primary layout tool for site design.
Breakpoints in AutomaticCSS are refered to in the following way:

Desktop (larger than page width >1280px) = xxl = "grid--#"
Laptop (Less than 1280px) = xl = "grid--xl-#"
Tablet (Less than 992px) = l = "grid--l-#"
Small Tablet/Large Mobile (Less than 768px) = m = "grid--m-#"
Mobile (Less than 480px) = s = "grid--s-#"

Note: Mobile styling seems best set at "M" breakpoint for most use cases

Example 1: Desktop -  4 col, Tablet 2 col, Mobile 1 col (gap "M")

Desktop: class=grid--4
Desktop: class=gap--m
Tablet: class=grid--l-2
Mobile: class=grid--m-1

Example 2: Desktop -  1/3 2/3 cols, Tablet 2 col, Mobile 1 col (gap "S")

Desktop: class=grid--1-2
Desktop: class=gap--s
Tablet: class=grid--l-2
Mobile: class=grid--m-1

Example 3: Desktop -  3 cols, Tablet 2 col (with first item spannning 2 cols), Mobile 1 col (gap "L")

Desktop: class=grid--3
Desktop: class=gap--l
Tablet: class=grid--l-2
Mobile: class=grid--m-1
Make this first column span 2cols on tablet and back to 1col on mobile with the following classes
col-span--l-2
col-span--m-1

At table, move this column to be last with the following css class
order--last-l

At mobile, move this column to be the firs one with the following css class
order--first-m


There's lots to CSS grid and it's well supported by AutomaticCSS. There are also Auto grid classes that are responsive by default
AutomaticCSS cheatsheet - https://automaticcss.com/cheat-sheet/
CSS Tricks guide to flexbox - https://css-tricks.com/snippets/css/complete-guide-grid/

CSS flexbox

row based (put children elements side by side) -  flex--row
gap classes work on flexbox as well as grid - this is using gap--m
There's lots to flexbox and it's well supported by AutomaticCSS.
AutomaticCSS cheatsheet - https://automaticcss.com/cheat-sheet/
CSS Tricks guide to flexbox - https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Padding and owl spacing

Padding CSS classes

pad--none
pad--xs
pad--s
pad--m
pad--l
pad--xl
pad--xxl

Owl spacing classes

Owl spacing puts spacing between the items in a div. It adds margin-top to all items except the first one

No spacing

Item 1
Item 2
Item 3

Owl--xs

Item 1
Item 2
Item 3

Owl--s

Item 1
Item 2
Item 3

Owl--m

Item 1
Item 2
Item 3

Owl--l

Item 1
Item 2
Item 3

Owl--xl

Item 1
Item 2
Item 3

Owl--xl

Item 1
Item 2
Item 3