If you’re looking for ways to speed up your development time when building new websites, having a starter site preconfigured with all of your settings, plugins, and theme ready to go is the biggest time-saver I recommend.
As part of my own starter site, I have 30 preconfigured global styles in GenerateBlocks already set up. These are the exact global styles I use on nearly every single website I build. Today, I’m going to walk through all 30 of them.
Viewing Global Styles in GenerateBlocks
In my starter site, under GenerateBlocks > Global Styles, you can see all of your published global style classes. I currently have 30 published.
Typography Styles
The first dozen or so styles in my list are all related to headlines and typography.
HL1 – HL5
These styles mimic the appearance of H1 through H5 headers while letting you use any semantic tag you want. For instance, if I want a heading to look like an H1 but not be one for SEO reasons, I simply apply the HL1 global style to paragraph text. This preserves semantic hierarchy while giving me full visual control.
Additional Typography Styles
- Small body
- Extra small body
- Large body
- Large heading
- Subheading
These come in handy across different content types—subtext, copyright lines, callout sections, and eyebrow text. Each has its own size and spacing rules for clarity and consistency across projects.
Button Styles
I have four main button styles saved as global styles:
- Primary button
- Secondary button
- White button
- Text underline button
Once my site’s fonts and colors are configured, I can apply any of these styles to GenerateBlocks buttons and they’ll look exactly as intended—no local overrides necessary.
Container Styles
These global styles are used for outer containers to define spacing and layout padding:
- Small container
- Medium container
- Large container
- Extra-large container
Each container has clamp-based padding settings that adapt responsively. Left and right paddings are consistent across styles, but the top and bottom paddings vary to suit different section types.
Additional Container Styles
- Extra top padding
- Extra bottom padding
- No top padding
- No bottom padding
These are useful for designs where content overlaps or needs special alignment without clashing with nearby sections.
Border Radius Styles
I have four border radius styles configured:
- Small
- Medium
- Large
- Extra large
These are used anywhere rounded corners are required. Also, yes—I did just realize I’ve been spelling “border” wrong in one of the style names. That’s now on my fix-it list.
Padding Utility Styles
Separate from the container spacing, these utility styles are for internal padding within cards or smaller modules:
- Small padding
- Medium padding
- Large padding
- Extra large padding
For example, if I’m styling a card component like a service block or newsletter CTA, I use one of these padding styles to apply consistent spacing inside the block.
Why These Global Styles Matter
I’ve been building and evolving this global styles list ever since GenerateBlocks introduced the feature. Every style is based on repeated needs I encounter across projects. Some styles may seem like they save only a few seconds, but those seconds add up.
Not having to remember specific spacing numbers or type styles means I can build faster and more consistently every time.
