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
  1. Ordered List
  2. Ordered List
  3. 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:

  1. Theme Customizer
  2. GenerateBlocks Global Styles
  3. 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.