Snippets – All PHP filters & functions and documentation should be in the Code Snippets
Built in Classes – GeneratePress has built in classes that maybe used to hide content ( .hide-on-desktop, .hide-on-tablet, .hide-on-mobile & .hide-on-all )
CSS – All CSS should be well organized and commented.
- Style.css – this is in child theme through the theme editor is the main where CSS should be written
- Customizer Additional CSS – Use this for testing CSS only. All production ready CSS should be moved to the child theme. CSS not used should be moved to the xxstyle.css file or deleted.
- Simple CSS – Some CSS maybe in the Simple CSS at the bottom of the edit page during development which effects that individual page
- xxstyle.css – This is file that I use to store CSS that may not be used and is archieved there.
Elements – Some content is displayed and hooked into the site using GeneratePress Elements. If an element is present on the page it will appear in the elements menu in the top WP admin bar. Also use the Internal Notes on each element for documentation.
Global Styles – Some content is controled in the GeneratePress Global Styles
Menu – If Menu (plugin) maybe used to control the visibility of menu items
Helpful GeneratePress Documentation – Hooks, SVG Headline icons (headline Block), Containers, Query Loop

Typography Details

These Values are all set in the customizer and should be REM/EM settings. Headings (H1, H2 etc.) should only be used when semantically necessary not as just for size.

The Looks Headings are set in the Global Styles for Typography.

In font size

Clamp Support

Headlines – Typeface

Headline XL – Lorem ipsum amet elit morbi dolor tortor.

Headline H1 – Lorem ipsum amet elit morbi dolor tortor.

Looks H1- Lorem ipsum amet elit morbi dolor tortor.

H2 – Lorem ipsum amet elit morbi dolor tortor. Vivamus eget mollis nostra sagittis nascetur ullam. Pharetra torquent auctor ultrice

Looks H2 – Lorem ipsum amet elit morbi dolor tortor.

H3 – Lorem ipsum amet elit morbi dolor tortor. Vivamus eget mollis nostra sagittis nascetur ullam corper.

Looks H3 – Lorem ipsum amet elit morbi dolor tortor.

H4 – Lorem ipsum amet elit morbi dolor tortor. Vivamus eget mollis nostra sagittis nascetur ullam corper.

Looks H4 – Lorem ipsum amet elit morbi dolor tortor. Vivamus eget mollis nostra sagittis nascetur ullam corper. Pharetra

H5 – Lorem ipsum amet elit morbi dolor tortor. Vivamus eget mollis nostra sagittis nascetur ullam corper. Pharetra

Looks H5 – Lorem ipsum amet elit morbi dolor tortor. Vivamus eget mollis nostra sagittis nascetur ullam corper. Pharetra

Body Text Typeface

Body Gutenberg Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Body GeneratePress elit morbi dolor tortor. Vivamus eget mollis nostra sagittis nascetur ullam corper. Pharetra torquent auctor ultrices metus felis nibh velit. Natoque tellus inceptos semper taciti volutpat nostra. Semper pharetra montes habitant congue integer nisi. Nullam placerat aliquet magnis consequat nulla pulvinar maximus. Integer primis cubilia aptent eros gravida. Nascetur velit metus nullam nostra auctor.

Lists

Standard Gutenberg list

Standard Gutenberg list
Sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor

GenerateBlocks with hack for

Nationwide Expertise, Community-Focused Service

Innovative Design & Implementation

Cutting-Edge Technology & Smart Automation

Advanced Integration for Seamless Experience

Other

This is a Footnote¹
Superscript²
Subscript₃

Text Special

Gradients

Gradient Text

This is a dev note class .devnote with :before text

Logo Details

Ideally these should be SVG versions of the Logos.

Containers

Containers Controlled with GeneratePress Global Styles

Color

In general, surface colors should be used on 60% of the area, primary colors should be used on 30% of the area and contrast color should be used on 10% of the area.

Primary

Primary Alt

Contrast

Contrast Alt

Surface 0

Surface 10

Surface 20

Surface 30

Surface 70

Surface 80

Surface 90

Surface 100

Buttons

These are set up in Goebel styles, though we should consider making a copy and CSS in case we need to …

Primary Primary Alt Contrast Ghost Button Primary Text COntrast Text

Block Quotes

Good resource and more styles here. CSS in Simple CSS at bottom of page ONLY

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

An ounce of prevention is worth a pound of cure.
Benjamin Franklin

Misc

Mail to Link Here

Link text

Forms

↩︎

Style Guide v1