Vertical Rhythm

vertical_rhythm.sass

$fz-mobile: percentage(28/1.6/16);
$fz-desktop: percentage(32/1.6/16);

$lh: 1.6rem;

$h1: 2rem;
$h2: 1.5rem;
$h3: 1.25rem;
$h4: 1rem;
$h5: .875rem;
$h6: .75rem;

// Show vertical rythm
$vertical-rythm: true;

// Breakpoints
$breakpoints: (
  'large': (min-width: 1024px)
);

@mixin mq($breakpoint) {
  $raw-query: map-get($breakpoints, $breakpoint);
  $query: if(type-of($raw-query) == 'string', unquote($raw-query), inspect($raw-query));
  @media #{$query} {
    @content;
  }
}


*,
*:before,
*:after {
  box-sizing: inherit;
  padding: 0;
  margin: 0;
}

html {
  box-sizing: border-box;
  height: 100%;
  font-size: $fz-mobile;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smoothing: antialiased;
  // https://bocoup.com/weblog/text-rendering/
  text-rendering: optimizeLegibility;

  @include mq(large) {
    font-size: $fz-desktop;
  }
}

*,
*:before,
*:after {
  box-sizing: inherit;
  padding: 0;
  margin: 0;
}

body {
  font-size: 1rem;
  line-height: $lh;
  @if $vertical-rythm == true {
    background-image: linear-gradient(rgba(50, 50, 50, .15) 1px, transparent 1px);
    background-size: 100% $lh;
  }
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: $lh;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  // color: ;
  vertical-align: middle;
}

h1 {
  font-size: $h1;
}

h2 {
  font-size: $h2;
}

h3 {
  font-size: $h3;
}

h4 {
  font-size: $h4;
}

h5 {
  font-size: $h5;
}

h6 {
  font-size: $h6;
}

.col {
  max-width: 30rem;
  margin: 0 auto;
  padding: 0 1rem;
}