Scale

Style

h1 Header one with a baseline

h2 Header two with a baseline

h3 Header three with a baseline

h4 Header four with a baseline

h5 Header five with a baseline
h6 Header six with a baseline

Uh listen, do you know where Riverside Drive is? Yeah, sure, okay.

What's going on? Where have you been all week? I'm sure that in 1985, plutonium is available at every corner drug store, but in 1955, it's a little hard to come by. Marty, I'm sorry, but I'm afraid you're stuck here. Because, you might regret it later in life.

Don't worry. As long as you hit that wire with the connecting hook at precisely 88 miles per hour, the instance the lightning strikes the tower, everything will be fine. Doc
  • Plutonium
    • Uranium
    • Neptunium
    • Américium
  • Oxygen
  • Carbon
  1. Plutonium
    1. Uranium
    2. Neptunium
    3. Américium
  2. Oxygen
  3. Carbon

Links

A note on using this style guide

When to use

Headings are used to denote different sections of content, usually consisting of related paragraphs and other HTML elements. They range from h1 to h6 and should be styled in a clear hierarchy (i.e., largest to smallest). Il you are looking for a good seo you must respect this :

  • One h1 per page
  • Follow a logic hierarchy
    • h1
      • p
      • h2
        • h3
        • p
        • h3
        • p
      • h2
      • p

When to use paragraphs

Paragraphs are groups of sentences, each with a lead (first sentence) and transition (last sentence). They are block level elements, meaning they stack vertically when repeated. Use them as such.

You can customise this variables available on type.scss

SCSS 

$font-family-sans-serif: sans-serif;
$font-family-serif: serif;

$body-font-family: $font-family-sans-serif;
$header-font-family: $font-family-serif;

$h1-font-size: rem-calc(44);
$h2-font-size: rem-calc(37);
$h3-font-size: rem-calc(27);
$h4-font-size: rem-calc(23);
$h5-font-size: rem-calc(18);

Follow naming convention

How can we split content and architecure for SEO ? Here is a solution, adopt a good typography naming.

I am the emperor

I am Darth Vador

I am Darth Maul

I am a sith

I am an acolyte

And i am a simple paragraph

@extend directive is a dark side power of the force, use it carefully

THE STAR WARS STYLING 

.emperor {
  @extend h1;
  text-transform: uppercase;
}
.vador {
  @extend h2;
  font-weight: $font-weight-bold;
}
.maul {
  @extend h3;
  font-style: italic;
}
.sith {
  @extend h4;
}
.acolyte {
  @extend h5;
}