Style guide

Or "you probably don't need to style that button" :-)

# Typography/Fonts

There are two heading font sets used: the default heading fonts and the custom heading fonts.

  • The custom heading fonts are used in the theme and can be activated by adding class="heading"
  • The 'default' heading fonts (without a class) are designed to make it easy for content editors to select in the Nationbuilder editor.

# "Headline" Heading Fonts

These are for non content headings (usually in templates). Add class="headline" to h1..h5 to activate these heading styles.

Generally use these headings in the theme.

<h1 class="headline"> - Open Sans - 50px, 800, Blue

 

<h2 class="headline"> - Open Sans - 40px - 800 - Blue

 

<h3 class="headline"> - Open Sans - 35px - 800 - Blue

 

<h4 class="headline"> - Open Sans - 25px - 800 - Blue

 

<h5 class="headline"> Medium Paragraph - Open Sans - 20px - 800 - Blue

 

# Content Heading Fonts

These default headings are for easy use with the Nationbuilder content editor. Generally these headings are used in page content.

 

<h1> - Open Sans - 50px, 800, Blue

The H1 is used as the page heading and is effectively 'reserved' and usually shouldn't be used in page content.

<h2> - Open Sans - 40px - 800 - 

 

<h3> - Open Sans - 35px - 800 - 

 

<h4> - Open Sans - 25px - 800 - 

 

<h5> Medium Paragraph - Open Sans - 20px - 800 - 

 

Normal paragraph text - Open Sans - 18px - 300

Link text - Open Sans - 18px - 300 - Blue

Strong paragraph text - wrap in html <strong> tag - Open Sans - 18px - 800

Small paragraph text - wrap in html <small> - Open Sans - 14px - 300

Blockquote - Font Size 25px, Font Weight Bold, 600

 

Font Modifiers

Fonts can also be modified with the following utility classes  

font-weight-light

font-weight-lighter

font-weight-normal

font-weight-bold

font-weight-bolder

font-italic

(note that the font weights depend on which fonts are loaded into the theme)

# Text Alignment

Text can be a aligned with the following utility classes

text-left - Left aligned text on all viewport sizes.

text-center - Center aligned text on all viewport sizes.

text-right - Right aligned text on all viewport sizes.

text-sm-left - Left aligned text on viewports sized SM (small) or wider.

text-md-left - Left aligned text on viewports sized MD (medium) or wider.

text-lg-left - Left aligned text on viewports sized LG (large) or wider.

text-xl-left - Left aligned text on viewports sized XL (extra-large) or wider.

Bootstrap text alignment documentation

 

# Media Queries

Many utilities have media queries built in. You can use -sm- -md- -lg- and -xl- in your utility class to avoid having to write specific media queries.

 

# Colors

If possible, avoid using specific color names in the theme and use generic primary, secondary, etc colors instead.

text-light - default theme light text

text-dark - default theme dark text

Primary Color - use class="text-primary"

Secondary Color - use class="text-secondary"

I've also introduced three more generic color classes. Sorry about the names, I'm just following the Bootstrap convention!

(The reason for using generic color names is for future projects - it makes it far easier to update the theme.)

Tertiary Color - use class="text-tertiary"

Quaternary Color - use class="text-quaternary"

Quinary Color - use class="text-quinary"

But if needed (or building a custom site), the color names can be can be used:

Blue - class="text-blue"

Red - class="text-red"

Green - class="text-green"

Light Green - class="text-lightgreen"

Pale Green - class="text-palegreen"

Yellow - class="text-yellow" (same as text-primary)

Orange - class="text-orange"

Pink - class="text-pink"

 

Grays have nine variants and are set from class="text-100" to class="text-900"

Gray 200 (Off White) - class="text-200" (background color also added for visibility)

Gray 500 - class="text-500"

 

# See _style_default.scss for a full list of colors

Headings can be colored in the same way, ie add class="text-red"

 

Coloring All Child Elements

text-[color] usually only is applied to the element the class is added to.

If you want to also set the default color of all children element types (p, h1..h5, label, etc) , use class="text-all-[color]"

Parent div has class="text-all-red". All children element types (p, h1..h5, label, span etc) are set to red too.

This link is red too

 

Background Colors

Background colors can be added by adding a class "bg-color"

Background primary - class="bg-primary"

Background secondary - class="bg-secondary"

Background transparent tertiary - class="bg-transparent-tertiary"

Background color red class="bg-red"  

Background color gray 500 class="bg-500"  

 

Background Gradients

Background gradient color primary to tertiary class="bg-gradient-primary"  

 

 

Bootstrap docs on color: https://getbootstrap.com/docs/4.0/utilities/colors/

Buttons

Primary Button class="btn btn-primary"

Secondary Button class="btn btn-secondary"

Button text color change be changed by adding text-color - class="btn btn-primary text-white"

Outline Button - class="btn btn-outline-primary"

Outline Button - class="btn btn-outline-secondary text-white"

 

Bootstrap button docs - https://getbootstrap.com/docs/4.0/components/buttons/

 

#Borders

Border primary - class="border border-primary"

 

Border secondary - class="border border-primary"

 

Border top only - class="border-top"

 

Rounded Edges Border - class="border rounded border-primary"

 

Circle Border - class="border rounded-circle border-primary"

 

Bootstrap border documentation: https://getbootstrap.com/docs/4.0/utilities/borders/

# Spacing/Padding

Bootstrap provides default padding and margin utilities for tweaking. 

Use p-1 to p-5 for minor tweaking. pt-X pads just the top, pl-X left, pr-X right, pb-X bottom, px-X both left & right, py-X top and bottom

Outer div p-1 (4px)
Outer div p-2 (8px)
Outer div p-3 (16px)
Outer div p-4 (24px)
Outer div p-5 (48px)
Outer div pt-3 (16px padding top only)

 

Note you can do the same thing with margins using m-X instead of p-X.

Also note you can target screen widths, such as pt-md-3, in which case the padding only applies to medium screens and larger

Bootstrap docs on spacing: https://getbootstrap.com/docs/4.0/utilities/spacing/

Custom Spacing

Additional custom spacer values are added to this theme. They are based on the spacing in the existing design.

Let me know if you think these can be improved

Outer div p-6 (70px)
Outer div p-7 (85px)
Outer div p-8 (100px)
Outer div p-9 (120px) - Normal Page Top Padding
Outer div p-10 (140px)
Outer div p-11 (160px)
Outer div p-12 (200px)

 

Flexbox Positioning

Bootstrap provides flexbox positioning utility classes

 

Center div - outer div class="d-flex justify-content-center align-items-center"

Centered flex item

 

Outer div class="d-flex flex-column"

Flex item 1
Flex item 2
Flex item 3

 

Outer div class="d-flex justify-content-center"

Flex item 1
Flex item 2
Flex item 3

 

Outer div class="d-flex justify-content-around"

Flex item 1
Flex item 2
Flex item 3

 

Bootstrap flex documentation: https://getbootstrap.com/docs/4.0/utilities/flex/

Additions

If you think something useful is missing, please let me know and we can work out a way to add it in.

Further Reading

Its worth understanding the more advanced guide to theming bootstrap.

Advanced Bootstrap Theming Docs https://getbootstrap.com/docs/4.0/getting-started/theming/