Style guide
Spacing & structure
Working from a defined spacing system allows you to work faster and more consistently. Components in this free library utilize a simplified version of Finsweet's Client-first spacing system.
Global utility classes
Spacing (simple)
A simplified version of Finsweet's Client-first spacing system that keeps vertical and horizontal spacing global on your website and doesn't rely on a styleguide.
Core structures
Client-first defines a flexible core structure you can use on most pages. It's recommended that you don't delete these.
Containers
Client-first comes with 3 defined container sizes - small, medium, and large. It's recommended that you don't delete these.
Spacing (Finsweet Client-first only)
Spacing system (margin and padding) that keeps vertical and horizontal spacing global on your website. It's recommended that you don't delete these.
Responsive visibility
Show and hide elements by screen size. It's recommended that you don't delete these.
Advanced classes
More advanced but useful classes as you're building. Not required to use.
Global embed
Client-first comes with a 'global' symbol embed block. This embed block goes on every page and holds CSS styles that are used everywhere in the project.