Style Guide
Basic design system for site-wide styling
ReadMe
- There is a custom css embed element in the site's navbar that applies font-size: 62.5% to the html tag which makes 1rem = 10px.
If your site isn't going to have a navbar, make sure to add that code in a different custom css embed element.
Guidelines
- All lower case classes, no spaces, use dashes or underscores
- Use rem values mainly for font sizes
- When to use dashes vs. underscores
- Words before the underscore (if there is one) will use dashes and will describe what the element is in relation to the section it’s in; basically what it does or is. For instance, if there’s a section about “Our Benefits”, and that section had a grid. The grid could be called benefits_grid or benefits-grid_wrap.
- Then say that grid has a list of benefits, each of those could have a class such as benefits-list_item.
- the words after the underscore can be used to describe the element name, basically what it is. examples include: hero, item, checkbox, wrap, wrapper, block, etc.
Utility Class Names
- How to create them
- Only on style guide page
- When to use them
- One offs
- When not to use them
- Repeating elements
Combo Class Names
- How to create them
- Prefix your combo classes with cc-
- When to use them
- Whenever you want, as long as it’s not the first class
- When not to use them
- Don’t use the cc- prefix if it’s the first class
Typeface Montserrat
When it comes to typography, accessibility and inclusive design are important to consider when designing for the web.
Format your text with search engines and accessibility in mind.
Heading
Montserrat
Body
Color Palettes
Set color swatches to be "global," so that if you edit them in one place, they update across your whole site wherever they appear. It's like symbols, but for color.
#000000
#ffffff
#fafafa
#f5f5f5
#e5e5e5
#d4d4d4
#a3a3a3
#737373
#525252
#404040
#262626
#171717
Typography
Think of headings as content guides — anyone should be able to understand the way you’ve organized your content by glancing at your headings. So make sure your headings are clear and descriptive.
Great video on the top 10 rules for typography made by thefutur.
Did you know - A text block is a generic text element, best used for text that isn't a heading, paragraph, or link. Use text blocks for copyright notices, tags, numbers, field labels, badges, etc.
H1
H2
H3
H4
H5
H6
hero-title
section-title
Paragraph-lg
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Paragraph
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
headline
text-7xl
text-6xl
text-5xl
text-4xl
text-3xl
text-2xl
text-xl
text-lg
text-base
text-sm
text-xs
text-xxs
Text Align
Lists
- List item
- List item
- List item
- List item
- List item
- List item
Spacers
Margins
Icons
.svg){kind=icon}
Maps
Sizing
max-w-xs
max-w-sm
max-w-md
max-w-lg
max-w-xl
max-w-2xl
max-w-3xl
max-w-4xl
max-w-5xl
max-w-6xl
max-w-7xl
w-full
w-screen
h-full
w-screen
Effects
u-shadow-sm
u-shadow
u-shadow-md
u-shadow-lg
u-shadow-xl
u-shadow-2xl
Sections and wrappers
section
section-center
flex-center
flex_wrapper
Cards
card-sm
card
card-lg
cc-primary
Forms
Columns
How to use columns:
Give Columns element a class of columns_wrapper and the columns the class of column.
From there, apply combo class on columns_wrapper and give it a negative left margin. This number will act as the space between the columns. In the example below, it has a -4rem left margin.
Next, give each column a combo class that gives a left padding of the same value that you gave the columns_wrapper. In the example, each column has a left padding of 4rem.
Doing this cancels out the -4rem margin that the wrapper applied. From there, just revert the columns and wrapper back to 0 left margin and left padding whenever you decide they should stack. When they do stack, give the lower columns a margin top to separate the columns.