SCSS Vertical Rhythm & Elastic Layout Research

README.md

Articles

Some related articles, you will like!

• http://inlehmansterms.net/2014/06/09/groove-to-a-vertical-rhythm
• http://csswizardry.com/2012/06/single-direction-margin-declarations
• https://kmturley.blogspot.de/2015/05/css-vertical-rhythm-with-typography.html
• https://pilot.co/blog/implementing-baseline-rhythm-in-css

More:

• http://www.lauradhamilton.com/the-golden-ratio-and-typography
• http://smad.jmu.edu/shen/webtype/baseline_example.html
• http://www.smashingmagazine.com/2012/12/css-baseline-the-good-the-bad-and-the-ugly/
• http://csswizardry.com/2012/06/single-direction-margin-declarations
• http://www.sitepoint.com/using-sass-build-custom-type-scale-vertical-rhythm/
• https://medium.com/written-in-code/aligning-type-to-baseline-the-right-way-using-sass-e258fce47a9b#.ybhzbk4hx

Layout

• http://v1.jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-with-css

Compass

• http://www.developerdrive.com/2015/02/control-vertical-rhythm-using-sass-and-compass/
• http://inlehmansterms.net/2014/06/09/groove-to-a-vertical-rhythm/

Helper

Some related helper, you will like!

• https://gist.github.com/beaucharman/5459188
• https://gist.github.com/razwan/10662500

Inuit

• https://github.com/inuitcss/generic.shared/blob/master/_generic.shared.scss
• http://csswizardry.com/2012/06/single-direction-margin-declarations/

Compass

• https://gist.github.com/ry5n/2026666
• https://gist.github.com/ericam/3601836
• https://gist.github.com/glueckpress/46641be5f56472c04904

Approaches

• http://jsbin.com/xikiyepaku/1/edit
• http://jsbin.com/sibepetiju/1/edit

Tools

• http://lamb.cc/typograph/
• http://www.pearsonified.com/typography/
• http://soqr.fr/vertical-rhythm/
• http://www.gridlover.net/app/
• https://drewish.com/tools/vertical-rhythm/
• http://type-scale.com/

Clarification

• https://j.eremy.net/confused-about-rem-and-em/

baseline.js

// Keep a nice vertical rhythm with elements that don't have one.
// https://github.com/Gaya/jQuery--Keep-the-Rhythm
function baseline(element, line, align, spacing) {
  line = line || 24;
  align = align || 'center';
  spacing = spacing || 'padding';

  var h = element.clientHeight;
  var r = line - (h % line);
  var top = 0;
  var bottom = r;

  // If the element is in rhythm: do nothing.
  if (r == line) {
    r = bottom = 0;
  }

  // If verticalAlignment is set to center; spread the padding to both top and bottom
  if (align == 'center') {
    top = r / 2;
    bottom = r - top;
  }

  // If the alignment is bottom; set to padding to the top!
  if (align == 'bottom') {
    top = r;
    bottom = 0;
  }

  if (spacing == 'margin') {
    element.style.marginTop = top + "px"
    element.style.marginBottom = bottom + "px"
  } else {
    element.style.paddingTop = top + "px"
    element.style.paddingBottom = bottom + "px"
  }
}

baseline.scss

// Aligning type to baseline the right way with sass
// https://gist.github.com/razwan/10662500
$base-font-size: 16px;
$base-line-height: 24px;
$base-line-height: $base-line-height / $base-font-size; // 1.5

// this value may vary for each font
// unitless value relative to 1em
$cap-height: 0.68;

@mixin baseline($font-size, $scale: 2) {

  // rhythm unit
  $rhythm: $base-line-height * $font-size / $scale;

  // number of rhythm units that can fit the font-size
  $lines: ceil(($font-size + 0.001px) / $rhythm);

  // calculate the new line-height
  $line-height: $rhythm * $lines / $font-size;

  // use the results
  font-size: $font-size;
  line-height: $line-height;

  $baseline-distance: ($line-height - $cap-height) / 2;

  // METHOD 1
  // Can relatively move down elements you may not want to
  // ---
  // position: relative;
  // top: $baseline-distance + em;

  // METHOD 2
  // If you use this mixin only on elements that have one direction margins
  // http://csswizardry.com/2012/06/single-direction-margin-declarations/
  // you can use this method with no worries. 
  // this method assumes the direction is down and the margin is $base-line-height
  padding-top: $baseline-distance + em;
  margin-bottom: $base-line-height - $baseline-distance + em;
}

getElementLineHeight.js

function getElementLineHeight(element) {
  return parseFloat((element.currentStyle || getComputedStyle(element)).lineHeight) || 24
}

index.js

window.addEventListener('resize', (function resize() {
  var all = document.querySelectorAll('iframe, img, video')

  Array.prototype.forEach.call(all, function (node) {
    rhythme(node, 24)
  })

  return resize
}()), false)

index.scss

* {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}

html {
  font-size: 125%;
  line-height: $line-height-ratio;
}

body {
  background-image: linear-gradient(#eee, 1px, transparent 1px);
  background-size: 100% 1.5em;
  padding: $line-height-base;
}

h1 { @include rhythme(6em); }
h2 { @include rhythme(5em); }
h3 { @include rhythme(4em); }
p, ul, ol { @include rhythme(1em); }

.box {
  @include rhythme(8em, true);
  background-color: blue;
  width: 16em;
}

rhythme.js

// https://github.com/Gaya/jQuery--Keep-the-Rhythm
function rhythme(node, baseLine, align, spacing) {

  var height = node.clientHeight
  var ratio = baseLine - (height % baseLine)

  // element is in rhythm, do nothing.
  if (ratio == baseLine) {
    ratio = 0
  }

  var top = 0
  var bottom = ratio

  if (align == 'center') {
    // spread the padding to both top and bottom
    top = ratio / 2
    bottom = ratio - top
  } else if (align == 'bottom') {
    // set to padding to the top
    top = ratio
    bottom = 0
  }

  if (spacing == 'padding') {
    node.style.paddingTop = top + 'px'
    node.style.paddingBottom = bottom + 'px'
  } else {
    node.style.marginTop = top + 'px'
    node.style.marginBottom = bottom + 'px'
  }
}

rhythme.scss

// http://codepen.io/lowercase/pen/tHunj
// http://inlehmansterms.net/2014/06/09/groove-to-a-vertical-rhythm/
$base-font-size: 16px;
$line-height-ratio: 1.5;
$line-height-base:  * $line-height-ratio;

@mixin rhythme($font-size, $use-height: false, $bottom-rows: 1, $top-rows: 0, $border: 0em) {
  $lines: ceil($font-size / $line-height-base) + 0.001;
  $ratio: ($line-height-base / $font-size);

  @if $use-height {
    $leftover: $line-height-base * $lines - $font-size;
    height: $font-size;
    margin-top: $line-height-base * $top-rows + $leftover / 2;
    margin-bottom: $line-height-base * $bottom-rows + $leftover / 2;
  } @else {
    font-size: $font-size;
    line-height: $ratio * $lines;
    margin-top: $ratio * $top-rows * 1em;
    margin-bottom: $ratio * $bottom-rows - $border * 1em;
  }
}