Style Guide
The overall design for a website starts with raw building materials, quite similar to building and construction. The style guide provides a structured layout for these design materials, with a focus on typography and font styles, color palette, and container spacing. The style guide also includes styles for buttons, forms, modal windows, and WordPress core blocks. It is a handy one-page preview of the websites’ styles, colors, sizing, and spacing.
Typography
The “Font Family” is set inside the Customizer > Typography > Font Manager. The font manager applies the HTML for the body font, and the All Headings for the heading font.
A modern, responsive, fluid typography system based on clamp(). The CSS file is located inside the Dashboard > WPCodeBox > Design Framework. The heading and body font names must match those set in the font manager. The font sizes can be updated as needed, simply using a clamp CSS generator.
Body
Font: Source Sans Pro
Headlines
Font: Montserrat
Headline XXL
Headline XL
Headline H1
Looks Like H1
Headline H2
Looks Like H2
Headline H3
Looks Like H3
Headline H4
Looks Like H4
Headline H5
Looks Like H5
Headline H6
Looks Like H6
Headline Small
HEADLINE PRE
Body XXL
Body XL
Body L
Body M (Default)
Body Default (Gutenberg)
Body Default (GenerateBlocks)
Body S
Body XS
Body XXS
Colors
The “Global Colors” are set inside the Customizer > Colors > Global Colors. Global Colors is a dynamic color system managing the colors of the structural elements across the website.
The color scheme is a starting point that uses a palette of accent colors that match brand colors, along with complimentary base and contrast color palettes.
In general, colors will follow the 60-30-10 design principle. Base colors will be used 60%, contrast colors will be used 30%, and accent colors will be used 10%.
Contrast-600
Contrast-400
Contrast-200
Base-600
Base-400
Base-200
Primary
Secondary
Accent
Primary Color Gradient
Primary / Secondary Color Gradient
Buttons
Buttons are managed inside the Dashboard > GenerateBlocks > Global Styles > Buttons. The CSS utility classes are also located inside the Dashboard > WPCodeBox > Button Styles, to match Button styles to plugins and hooked elements, via CSS varaiables and classes.
Icons
Icons are built into GenerateBlocks Headline and Button blocks. As well, the icon SVG file can be uploaded to the media library, and used as an inline image or background.
Icons available in the GenerateBlocks editor panel are managed inside the Dashboard > GenerateBlocks > Asset Library.
Any SVG icon can be added to the Asset Library, multicolor, single color, or black and white. In order for the color picker in the editor to control the color of the icon, the SVG must not have an attached color style.
Icon Libraries
Bootstrap Icons
Phosphor Icons
The Noun Project
Iconify Design
Containers
GP + GB sections need to be crafted in a specific way to maintain consistency throughout the site.
To set content “contained” (as opposed to full-width), the padding is applied to the “Inner-Container”.
For consistency, use one of the “Global Styles” set up for the Sections. Container padding styles are integrated through the Design Framework located inside the Dashboard > WPCodeBox > Design Framework.
Global Styles control the padding and background colors for sections and containers and are available in XXS, XS, S, M, D, L, XL, XXL.
Section XXS (0.75rem / 0.75rem)
Section XS (1rem / 1rem)
Section S (1.25rem / 1.25rem)
Section M (2.5rem / 2rem)
Section D (5rem / 2rem)
Section L (7.5rem / 2rem)
Section XL (10rem / 2rem)
Blocks
Inside the WordPress Block Editor (Gutenberg), blocks are the components inserted into a page or post, which provide the structure for a particular type of content.
By default, WordPress includes 90+ core blocks, however GenerateBlocks replaces the majority of the core blocks, and will be the preferred page builder.
GenerateBlocks will cover 99% of use cases, but for simple data insertion, three core WordPress Blocks will be used; Blockquote, Lists, and Tables.
WP Core Block CSS is located inside the Dashboard > WPCodeBox > WP Core Block Styles.
This is an example of a block quote. The block quote is a core WordPress block. The styling is achieved through custom CSS. Additional block quote designs could be created via Local Patterns for use throughout the website.
Citation Source
List Unordered
- Item 1
- Item 2
- Item 3
List Ordered
- Item 1
- Item 2
- Item 3
List w/ Icon
List No Marker
- Item 1
- Item 2
- Item 3
| First Last | 800-555-1234 | [email protected] |
| First Last | 800-555-1234 | [email protected] |
| First Last | 800-555-1234 | [email protected] |
| First Last | 800-555-1234 | [email protected] |
| Name | Phone | |
|---|---|---|
| First Last | 800-555-1234 | [email protected] |
| First Last | 800-555-1234 | [email protected] |
| First Last | 800-555-1234 | [email protected] |
| First Last | 800-555-1234 | [email protected] |
Forms
Forms are managed inside Dashboard > Fluent Forms Pro > Forms. CSS is located inside Dashboard > WPCodeBox > Fluent Forms and can be updated to match the design and style of the website.
Forms can be used for contact forms, newsletter signups, data collection, accepting payments, surveys, and post creation.
Modal
Modal windows are crafted with some CSS and JS. Modal windows use a specific GB Layout to structure the required classes and attributes. The master copy is saved in Dashboard > GenerateBlocks > Local Patterns.
The CSS and JS are located inside Dashboard > WPCodeBox > Modals and can be deactivated if a modal is not being used.
Modals are best created in GP Elements to have the most flexibility and control.
Modal Successful
This is just placeholder text. Don’t be alarmed, this is just here to fill up space.