[CLIENT NAME] Web Styleguide

Intro

This style guide is intended as a reference for content managers and developers to properly implement the styles, structures and methodology employed in the construction of the [CLIENT NAME] website.

Overview of styleguide content:

Typography

Font families, sizes and hex color values for headings and body text

Palette

Colors available on the site with their hex values

Pattern Library

Information about the various custom HTML components utilized on the site with example usage and code which can be copied/pasted

  • Some items in the Pattern Library may require back end development to function properly

Coding & Content

This section of your styleguide contains important information in managing and expanding upon the HTML and CSS of your website.

Typography

H1

Heading 1

H2

Heading 2

H3

Heading 3

H4

Heading 4

H5
Heading 5
H6
Heading 6
<h1>...</h1>
<h2>...</h2>
<h3>...</h3>
<h4>...</h4>
<h5>...</h5>
<h6>...</h6>
Paragraph/Body Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore linked text magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<p>...</p>

Palette

Brand Colors

This color palette contains automatically generated light - dark shades from [CLIENT NAME] base (500) brand colors for creative flexibility.

Allports
  • 50
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
Casablanca
  • 50
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
Gray
  • 50
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
Success
  • 50
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
Warning
  • 50
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
Danger
  • 50
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900

Card

This would be a reusable, documented component

Here's some helpful info about this UI pattern/code snippet

  • A helpful info point
  • An important message
  • An important ...er message
Basic Usage

example component here

<div class="card">..</div>

Naming Convention

This site uses a modified version of the BEM naming syntax for custom elements. The modified version used is based largely on Nicolas Gallagher's extended BEM syntax. The intention is to make the classes more understandable for humans, scoped where necessary, and also easily selectable in editors.

  • Note that class names composed of two or more words are written in camelCase as opposed to Gallagher's PascalCase
  • Note the major difference from BEM is the use of hyphens as opposed to underscores preceeding a descendant in a class name
  • This naming convention is to be used on custom elements only not Bootstrap components
  • Each custom component should have it's own SCSS partial in style/scss/components
  • Very helpful article in dealing with some of the trickier aspects of this naming convention Battling BEM (Extended Edition): 10 Common Problems And How To Avoid Them by Smashing Magazine
/* Component */
.componentName {}

/* Component modifier */
.componentName--modifierName {}

/* Component descendant */
.componentName-descendant {}

/* Component descendant modifier */
.componentName-descendant--modifierName {}

/* Component state (scoped to component) */
.componentName.is-stateOfComponent {}

Begin class names with the most abstract descriptor and then layer in specifics.

/* Basic nav style */
.nav {}

/* The main nav of the site */
.navMain {}

/* The secondary nav of the site */
.navSecondary {}

/* The footer nav */
.navFooter {}

Class names should be reusable and descriptive. We use the multi-class pattern where by laying class names onto an element we can achieve many different and reusable styles.

.btn { /* basic button styles */ }
.btn--secondary { /* styles specific to secondary button */ }

<a href='...' class="btn">...</a>
<a href='...' class="btn btn--secondary">...</a>

Use .is-stateName to reflect changes to a component's state. The state name must be camel case. Never style these classes directly; they should always be used as an adjoining class.

This means that the same state names can be used in multiple contexts, but every component must define its own styles for the state (as they are scoped to the component).

.tweet { /* ... */ }
.tweet.is-expanded { /* ... */ }

<article class="tweet is-expanded">...</article>

Helper Classes

Helper classes are trump classes that override existing CSS properties like text color, background color, etc.

Text Colors

.h-colorAllports50

Colors text

<div class="h-colorAllports50">..</div>
.h-colorAllports100

Colors text

<div class="h-colorAllports100">..</div>
.h-colorAllports200

Colors text

<div class="h-colorAllports200">..</div>
.h-colorAllports300

Colors text

<div class="h-colorAllports300">..</div>
.h-colorAllports400

Colors text

<div class="h-colorAllports400">..</div>
.h-colorAllports500

Colors text

<div class="h-colorAllports500">..</div>
.h-colorAllports600

Colors text

<div class="h-colorAllports600">..</div>
.h-colorAllports700

Colors text

<div class="h-colorAllports700">..</div>
.h-colorAllports800

Colors text

<div class="h-colorAllports800">..</div>
.h-colorAllports900

Colors text

<div class="h-colorAllports900">..</div>
.h-colorCasablanca50

Colors text

<div class="h-colorCasablanca50">..</div>
.h-colorCasablanca100

Colors text

<div class="h-colorCasablanca100">..</div>
.h-colorCasablanca200

Colors text

<div class="h-colorCasablanca200">..</div>
.h-colorCasablanca300

Colors text

<div class="h-colorCasablanca300">..</div>
.h-colorCasablanca400

Colors text

<div class="h-colorCasablanca400">..</div>
.h-colorCasablanca500

Colors text

<div class="h-colorCasablanca500">..</div>
.h-colorCasablanca600

Colors text

<div class="h-colorCasablanca600">..</div>
.h-colorCasablanca700

Colors text

<div class="h-colorCasablanca700">..</div>
.h-colorCasablanca800

Colors text

<div class="h-colorCasablanca800">..</div>
.h-colorCasablanca900

Colors text

<div class="h-colorCasablanca900">..</div>
.h-colorGray50

Colors text

<div class="h-colorGray50">..</div>
.h-colorGray100

Colors text

<div class="h-colorGray100">..</div>
.h-colorGray200

Colors text

<div class="h-colorGray200">..</div>
.h-colorGray300

Colors text

<div class="h-colorGray300">..</div>
.h-colorGray400

Colors text

<div class="h-colorGray400">..</div>
.h-colorGray500

Colors text

<div class="h-colorGray500">..</div>
.h-colorGray600

Colors text

<div class="h-colorGray600">..</div>
.h-colorGray700

Colors text

<div class="h-colorGray700">..</div>
.h-colorGray800

Colors text

<div class="h-colorGray800">..</div>
.h-colorGray900

Colors text

<div class="h-colorGray900">..</div>
.h-colorSuccess50

Colors text

<div class="h-colorSuccess50">..</div>
.h-colorSuccess100

Colors text

<div class="h-colorSuccess100">..</div>
.h-colorSuccess200

Colors text

<div class="h-colorSuccess200">..</div>
.h-colorSuccess300

Colors text

<div class="h-colorSuccess300">..</div>
.h-colorSuccess400

Colors text

<div class="h-colorSuccess400">..</div>
.h-colorSuccess500

Colors text

<div class="h-colorSuccess500">..</div>
.h-colorSuccess600

Colors text

<div class="h-colorSuccess600">..</div>
.h-colorSuccess700

Colors text

<div class="h-colorSuccess700">..</div>
.h-colorSuccess800

Colors text

<div class="h-colorSuccess800">..</div>
.h-colorSuccess900

Colors text

<div class="h-colorSuccess900">..</div>
.h-colorWarning50

Colors text

<div class="h-colorWarning50">..</div>
.h-colorWarning100

Colors text

<div class="h-colorWarning100">..</div>
.h-colorWarning200

Colors text

<div class="h-colorWarning200">..</div>
.h-colorWarning300

Colors text

<div class="h-colorWarning300">..</div>
.h-colorWarning400

Colors text

<div class="h-colorWarning400">..</div>
.h-colorWarning500

Colors text

<div class="h-colorWarning500">..</div>
.h-colorWarning600

Colors text

<div class="h-colorWarning600">..</div>
.h-colorWarning700

Colors text

<div class="h-colorWarning700">..</div>
.h-colorWarning800

Colors text

<div class="h-colorWarning800">..</div>
.h-colorWarning900

Colors text

<div class="h-colorWarning900">..</div>
.h-colorDanger50

Colors text

<div class="h-colorDanger50">..</div>
.h-colorDanger100

Colors text

<div class="h-colorDanger100">..</div>
.h-colorDanger200

Colors text

<div class="h-colorDanger200">..</div>
.h-colorDanger300

Colors text

<div class="h-colorDanger300">..</div>
.h-colorDanger400

Colors text

<div class="h-colorDanger400">..</div>
.h-colorDanger500

Colors text

<div class="h-colorDanger500">..</div>
.h-colorDanger600

Colors text

<div class="h-colorDanger600">..</div>
.h-colorDanger700

Colors text

<div class="h-colorDanger700">..</div>
.h-colorDanger800

Colors text

<div class="h-colorDanger800">..</div>
.h-colorDanger900

Colors text

<div class="h-colorDanger900">..</div>

Background Colors

.h-fillAllports50Applies background color 
<div class="h-fillAllports50">..</div>
.h-fillAllports100Applies background color 
<div class="h-fillAllports100">..</div>
.h-fillAllports200Applies background color 
<div class="h-fillAllports200">..</div>
.h-fillAllports300Applies background color 
<div class="h-fillAllports300">..</div>
.h-fillAllports400Applies background color 
<div class="h-fillAllports400">..</div>
.h-fillAllports500Applies background color 
<div class="h-fillAllports500">..</div>
.h-fillAllports600Applies background color 
<div class="h-fillAllports600">..</div>
.h-fillAllports700Applies background color 
<div class="h-fillAllports700">..</div>
.h-fillAllports800Applies background color 
<div class="h-fillAllports800">..</div>
.h-fillAllports900Applies background color 
<div class="h-fillAllports900">..</div>
.h-fillCasablanca50Applies background color 
<div class="h-fillCasablanca50">..</div>
.h-fillCasablanca100Applies background color 
<div class="h-fillCasablanca100">..</div>
.h-fillCasablanca200Applies background color 
<div class="h-fillCasablanca200">..</div>
.h-fillCasablanca300Applies background color 
<div class="h-fillCasablanca300">..</div>
.h-fillCasablanca400Applies background color 
<div class="h-fillCasablanca400">..</div>
.h-fillCasablanca500Applies background color 
<div class="h-fillCasablanca500">..</div>
.h-fillCasablanca600Applies background color 
<div class="h-fillCasablanca600">..</div>
.h-fillCasablanca700Applies background color 
<div class="h-fillCasablanca700">..</div>
.h-fillCasablanca800Applies background color 
<div class="h-fillCasablanca800">..</div>
.h-fillCasablanca900Applies background color 
<div class="h-fillCasablanca900">..</div>
.h-fillGray50Applies background color 
<div class="h-fillGray50">..</div>
.h-fillGray100Applies background color 
<div class="h-fillGray100">..</div>
.h-fillGray200Applies background color 
<div class="h-fillGray200">..</div>
.h-fillGray300Applies background color 
<div class="h-fillGray300">..</div>
.h-fillGray400Applies background color 
<div class="h-fillGray400">..</div>
.h-fillGray500Applies background color 
<div class="h-fillGray500">..</div>
.h-fillGray600Applies background color 
<div class="h-fillGray600">..</div>
.h-fillGray700Applies background color 
<div class="h-fillGray700">..</div>
.h-fillGray800Applies background color 
<div class="h-fillGray800">..</div>
.h-fillGray900Applies background color 
<div class="h-fillGray900">..</div>
.h-fillSuccess50Applies background color 
<div class="h-fillSuccess50">..</div>
.h-fillSuccess100Applies background color 
<div class="h-fillSuccess100">..</div>
.h-fillSuccess200Applies background color 
<div class="h-fillSuccess200">..</div>
.h-fillSuccess300Applies background color 
<div class="h-fillSuccess300">..</div>
.h-fillSuccess400Applies background color 
<div class="h-fillSuccess400">..</div>
.h-fillSuccess500Applies background color 
<div class="h-fillSuccess500">..</div>
.h-fillSuccess600Applies background color 
<div class="h-fillSuccess600">..</div>
.h-fillSuccess700Applies background color 
<div class="h-fillSuccess700">..</div>
.h-fillSuccess800Applies background color 
<div class="h-fillSuccess800">..</div>
.h-fillSuccess900Applies background color 
<div class="h-fillSuccess900">..</div>
.h-fillWarning50Applies background color 
<div class="h-fillWarning50">..</div>
.h-fillWarning100Applies background color 
<div class="h-fillWarning100">..</div>
.h-fillWarning200Applies background color 
<div class="h-fillWarning200">..</div>
.h-fillWarning300Applies background color 
<div class="h-fillWarning300">..</div>
.h-fillWarning400Applies background color 
<div class="h-fillWarning400">..</div>
.h-fillWarning500Applies background color 
<div class="h-fillWarning500">..</div>
.h-fillWarning600Applies background color 
<div class="h-fillWarning600">..</div>
.h-fillWarning700Applies background color 
<div class="h-fillWarning700">..</div>
.h-fillWarning800Applies background color 
<div class="h-fillWarning800">..</div>
.h-fillWarning900Applies background color 
<div class="h-fillWarning900">..</div>
.h-fillDanger50Applies background color 
<div class="h-fillDanger50">..</div>
.h-fillDanger100Applies background color 
<div class="h-fillDanger100">..</div>
.h-fillDanger200Applies background color 
<div class="h-fillDanger200">..</div>
.h-fillDanger300Applies background color 
<div class="h-fillDanger300">..</div>
.h-fillDanger400Applies background color 
<div class="h-fillDanger400">..</div>
.h-fillDanger500Applies background color 
<div class="h-fillDanger500">..</div>
.h-fillDanger600Applies background color 
<div class="h-fillDanger600">..</div>
.h-fillDanger700Applies background color 
<div class="h-fillDanger700">..</div>
.h-fillDanger800Applies background color 
<div class="h-fillDanger800">..</div>
.h-fillDanger900Applies background color 
<div class="h-fillDanger900">..</div>