Typography
These styles are to be set in the theme customizer to be applied as globally as possible.
Font sizes to be set in REM whenever possible.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
- Unordered List
- Unordered List
- Unordered List
- Ordered List
- Ordered List
- Ordered List
Body Text: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
This is a blockquote. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
– Citation
This is a pullquote. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
-Citation
Color Palette
This site’s color palette supplies you with 18 different colors to choose from. Each color is named by its function rather than its value to help futureproof the color system.
Every color on the website should be linked to a value in the color palette so it can be easily changed globally across the site whenever necissary.
Colors are set as variables in the root of the document using the following naming convetion:
Text: var(–text)
Heading: var(–heading)
Link Hover: var(–link-hover)
white
body
text
text-light
heading
heading-alt
link
link-hover
button-primary
button-primary-hover
button-primary-text
button-primary-text-hover
button-alt
button-alt-hover
button-alt-text
button-alt-text-hover
neutral-darker
neutral-dark
neutral
neutral-light
neutral-lighter
neutral-lightest
outside-container
Buttons
Standard button styles are configured using the GenerateBlocks Global Styles.
Buttons margin set for demo purposes only, remove on any global styles.
Badges, Pills, & Pre-Headers
Useful for meta data or smaller pre-heading style. Styles are configured using the GenerateBlocks Global Styles.
Badge Primary
Badge secondary
Badge Tirtiary
pill primary
pill secondary
pill tirtiary
pre-head primary
pre-head secondary
pre-head tirtiary
Forms
Basic CSS tweaks have been added to the Style.css stylesheet, including links to color variables.
To further customize any form styling, use the Style.css stylesheet inside the child theme.
Containers
This site is wrapped in a Site Wrapper (via GeneratePress Elements (Hook)) to contain the overall width of the website.
Standard containers have been setup via GenerateBlocks Global Styles and named according to the naming convention listed in this style guide.
Site Wrapper
1920px
Content Widths
X-Large: 1440px
Default: 1280px
Large: 1024px
Medium: 768px
Small: 640px
X-Small: 480px
Padding, Margin, & Spacing
This site uses an 8px grid system. To ensure consistency, please use multiples of 8 for any margin, padding, or other spacing settings.
8px to 32px: Typically used for space between related elements.
40px to 56px: Typically used for small columns.
64px to 80px: Typically used for large columns or small sections.
88px to 120px+: Typically used for sections.
8px
16px
24px
32px
40px
48px
56px
64px
72px
80px
88px
96px
104px
112px
120px
Helper Classes
The following helper classes have been added to the child theme Style.css file so they can be used globally throughout the site by imputing the class name under “Advanced > Additional CSS class(es)”
You can add additional styles by adding the CSS to the Style.css file and documenting it here.
.shadow-standard
A light box shadow that grows slightly on hover
[Example]
.max-width-1024
Sets the max-width to 1024 pixels (will not reflect in editor)
.max-width-768
Sets the max-width to 768 pixels (will not reflect in editor)
.max-width-640
Sets the max-width to 640 pixels (will not reflect in editor)
.max-width-480
Sets the max-width to 480 pixels (will not reflect in editor)
.margin-auto
Set left and right margin to “auto” to center an element in the available space (will not reflect in editor)
.relative
Sets the element’s position to “relative” (will not reflect in editor)
.absolute
Sets the element’s position to “absolute” (will not reflect in editor)
.sticky
Sets the element’s position to “sticky” with 24px top margin (will not reflect in editor)
.aspect-*-*
These are for IMAGE blocks only. There are 7 aspect ratios setup by default. They are as follows:
- 1/1
- 3/2
- 2/3
- 4/3
- 3/4
- 16/9
- 9/16
Managing Code
For the sake of consistency across the project and others designed and developed by OGAL Web Design, please use the following guidelines for managing CSS and scripts.
Global Styles
In order of hierarchy, global styles should be set at the highest possible level:
- Theme Customizer
- GenerateBlocks Global Styles
- CSS Stylesheet
When implementing styles that will appear globally, first try to set the styles in the Theme Customizer. If settings are not available in the Theme Customizer, attempt using GenerateBlocks Global Styles. If the settings are not available in GenerateBlocks Global Styles, use the child theme Style.css stylesheet.
CSS
When testing out CSS, you can use the Theme Customizer Additional CSS so you can see the changes being made in real time. Once the code has been finalized, it must be moved to the child theme Style.css stylesheet. The Customizer Additional CSS is for temporary use only.
All CSS must have comments that explain the purpose of the code as succinctly as possible while ensuring clarity.
Code Snippets
Any additional code snippets should be declared in the Code Snippets plugin.
All code snippets must come with a clear and succinct title.
Use the “description” meta field within code snippets to clearly state what the code snippet is for, where it originated, and what function it provides on the website.
