typography.scss

In this example below you will see how to do a typography.scss with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by prebla, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright prebla ©
  • HTML
  • CSS
  • JavaScript
    

/*Downloaded from https://www.codeseek.co/prebla/typographyscss-EgVPQo */
    @import "compass/typography/vertical_rhythm";


@include establish-baseline();


html {
  /* Uncomment this to show the vertical grid during development */
  //@include baseline-grid-background();
  font-family: $base-font-family;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
//  -webkit-font-smoothing: antialiased;
}

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */

h1 {
  /* Set the font-size and line-height while keeping a proper vertical rhythm. */
  @include adjust-font-size-to(map_get($font-sizes, h1));
  /* Set 1 unit of vertical rhythm on the top and bottom margins. */
//  @include leader(1, map_get($font-sizes, h1));
  @include trailer(1, map_get($font-sizes, h1));
}

h2 {
  @include adjust-font-size-to(map_get($font-sizes, h2));
//  @include leader(1, map_get($font-sizes, h2));
  @include trailer(1, map_get($font-sizes, h2));
}

h3 {
  @include adjust-font-size-to(map_get($font-sizes, h3));
//  @include leader(1, map_get($font-sizes, h3));
  @include trailer(1, map_get($font-sizes, h3));
  font-weight: bold;
}

h4 {
  @include adjust-font-size-to(map_get($font-sizes, h4));
//  @include leader(1, map_get($font-sizes, h4));
  @include trailer(1, map_get($font-sizes, h4));
  font-weight: bold;
}

h5 {
  @include adjust-font-size-to(map_get($font-sizes, h5));
//  @include leader(1, map_get($font-sizes, h5));
  @include trailer(1, map_get($font-sizes, h5));
  font-weight: bold;
}

h6 {
  @include adjust-font-size-to(map_get($font-sizes, h6));
//  @include leader(1, map_get($font-sizes, h6));
  @include trailer(1, map_get($font-sizes, h6));
  font-weight: bold;
}

/**
 * Set 1 unit of vertical rhythm on the top and bottom margin.
 */

p,
pre {
  @include output-rhythm(margin, rhythm(1) 0);
}


/*Downloaded from https://www.codeseek.co/prebla/typographyscss-EgVPQo */
    

Comments