Style guide
This page demonstrates all the visual styles of Stromlo Energy's website.
Wrapper system
The max-width system quickly provides a max-width to section content. This is distinct from using columns for flowing content or section containers.
At mobile sizes, all wrappers extend to the equivalent of 12col (100% of available width).
left-right margin: 0rem
left-right margin: 1.25rem
left-right margin: 1.25rem
left-right margin: 1.25rem
Spacer system
The spacer system is based on REM units.
Text system
All headings and text sizes are defined here. Each native element has an equally matched class, allowing its look to be replicated without breaking HTML semantics.
Headings
Heading 1
Heading 2
Heading 3
Heading 4
Text sizes
Text styles
Colour
The default colour swatches set three things:
1. A background-color
2. A matching border-color. Border-width/border-style are set to 0/none, respectively. If a border is required, these parameters are set with another class.
3. A default text color that meets at least a AA contrast ratio, ideally AAA
Text color
These swatches set the text color as desired.
Components
