headings

In Toadstool, presentation is 100% separated from content and markup, this goes for typography too. Heading styles are not beholden to heading tags, but applied via slient classes to the appropiate semantic markup or class as needed.

@extend %headings_1;

@extend %headings_2;

@extend %headings_3;

view

<h1>@extend %headings_1;</h1>
<h2>@extend %headings_2;</h2>

<article class="nested_article">
  <h1>This is a nested header</h1>
</article>

<div>Copy in here will look like the headings 1 style</div>

example markup

view

// Here is a pretty standard example use
h1 {
  @extend %headings_1;
}

h2 {
  @extend %headings_2;
}

// There may be times when you want a heading style on another selector
.nested_article {
  h1 {
    @extend %headings_3;
  }
}

div {
  @extend %headings_1;
}

example SCSS