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:

Secondary:

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:

Second image:

Two images in a row:

Image in directory

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;
}