Typography
The font sizes are set in the customizer, with GenerateBlock Global Styles set up for the “Looks Hx” elements – this is to allow you to assign a different headline style to a headline element so that headline hierarchy can be respected.
Headline XXL
Headline XL
Headline H1
Looks H1
Headline H2
Looks H2
Headline H3
Looks H3
Headline H4
Looks H4
Headline H5
Looks H5
Headline H6
Looks H6
Headline S
Headline PRE
Body XXL
Body XL
Body L
Body Default (Gutenberg)
Body Default (GenerateBlocks)
Body S
Body XS
Paragraph Looks Headline
- This is a list
- This is a list
- This is a list
- This is a list
This is a block quote
This is the citation
Colors
Colors are fickle. Here’s a starting point that uses a primary brand color, a contrast color, plus surface colors.
In general, surface colors should be used on 60% of the area, primary colors should be used on 30% of the area, and contrast colors should be used on 10% of the area.
Buttons
These are set up using Global Styles, though you might want to make a copy in CSS in case you need to match up the theme’s buttons or add a button to the header.
Sections & Containers
Due to some quirks in the way GP + GB interact, sections need to be crafted in a specific way to maintain consistency throughout the site.
If you want your content “contained” (as opposed to full-width), the padding needs to go on the “Inner-Container”.
For consistency, use one of the “Global Styles” set up for Sections.
These Global Styles control the padding in the section and are available in XXL, XL, L, D, M, S, XS.
Section XS (1rem / 1.5rem)
Section S (1.5rem / 1.5rem)
Section M (2.5rem / 1.5rem)
Section D (5rem / 1.5rem)
Section L (7.5rem / 1.5rem)
Section XL (10rem / 1.5rem)
Modals
Modals are done with some custom CSS and JS. It uses a specific GB layout. The master copy is saved in Local Patterns.
The custom code is located inside Code Snippets and can be deactivated if a modal is not being used.