Style Guide


Intro:

When creating brands, quality brands will create a brand style guide; this is the same for websites, quality websites will create a web style guide. The purpose of this is to help new developers understand the components of the brand and how to add new components of the brand.

Colors:

Primary:

#323132 $black #EFEFEF $white; #00416A $dark-blue

Secondary:

#B7DCEE $light-blue #F16524 $orange #0000FF $blue

Fonts:

Headers: Bitter

Body Copy: Merriweather Sans


Headings:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph

Italic

Strong Text

Italic and bold


Lists:

Unordered:

  • Item 1

    • Item 1.1
    • Item 1.2
  • Item 2

Ordered:

  1. Item 1
  2. Item 2

Links:

Default link, literally default


Buttons:

Default button


Images:

First image: Placeholder Image

Second image: Placeholder Image

Two images in a row: Placeholder Image Placeholder Image

Image in directory Placeholder Image


Blockquote:

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.


Code formatting:

SCSS Code Styles:

// For any common style needs, name the selector based of the styles
.color-red {
  color: red;
}

.margin-bottom-16 {
  margin-bottom: pxToEm(16);
}

// Indent any multiple selector use
h1,
h2 {
  font-size: 1rem;
}

// Order of element/ child selectors
.main-element {
  color: white;

  // Child selectors
  &:first-child, &:last-child, &:nth-child(2) {}

  // Before/After selectors
  &:before, &:after {}

  // BEM Modifier
  &--modifier {}

  // BEM Element
  &__element {}
}

// When defining styles in your classes start with the more general styles first
.example-class {
  display: block;
  padding: 0 5px 0;
  color: green;
}

About the author

Written by Nicholas Diesslin Pizza acrobat 🍕, typographer, gardener, bicyclist, juggler, senior developer, web designer, all around whittler of the web.
Follow him on Twitter, I mean, if you want to.