Sass typography and vertical rhythm example

SassMeister-input-HTML.html

<!--
http://sassmeister.com/gist/680859146a5a951c19d5

http://browsershots.org/http://paolo.php3.it/paolo/tipo-1/
http://www.browserstack.com/screenshots/9d960023f026c09729729eb067721d845c3829a7

Live example
http://paolo.php3.it/paolo/typo-1/
-->
<main class="va-debug">
<section id="intro">
<h1>Typography showcase</h1>
<p><strong>WORK IN PROGRESS.</strong><br/>Inspired by <a href="http://www.cascade-framework.com/typography.html">Cascade Framework</a></p>
<p>
  <strong>HUGE CREDITS: </strong>
  <a href="https://gist.github.com/ry5n/2026666">ry5n</a>, 
  <a href="https://github.com/ianrose/typesettings">typesettings</a>, 
  <a href="https://gist.github.com/victorbstan/889463">victorbstan</a>
</p>

<p>
  <strong>TODO:</strong> cleanup and define variables for colors etc
</p>
</section>

<section>
<h1 class="h3">Headers</h1>
<p>Herebelow is an example of the different headings.</p>

<div class="box">
<h1>Heading 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

<h2>Heading 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

<h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

<h4>Heading 4</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

<h5>Heading 5</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

<h6>Heading 6</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</section>

<section>
<h1 class="h3">Inline elements</h1>
<p>Herebelow is an example of inline elements.</p>

<div class="box">
<p><span class="note">TODO</span></p>
</div>
</section>

<section>
<h1 class="h3">Preformatted text</h1>
<p>Most useful for poetry and code.</p>

<div class="box">
<pre>
This is
   pre-formatted text. It preserves both
   
           spaces and line breaks.
</pre>
</div>
</section>

<section>
<h1 class="h3">Lists</h1>
<p>Default list styles.</p>

<div class="box">
<h1 class="h3">Unordered</h1>
<ul>
  <li>Lorem ipsum dolor sit amet</li>
  <li>consectetur adipisicing elit
    <ul>
      <li>sed do eiusmod tempor incididunt ut</li>
      <li>labore et dolore magna aliqua
        <ul>
          <li>Ut enim ad minim veniam</li>
          <li>quis nostrud exercitation ullamco laboris
            <ul>
              <li>nisi ut aliquip ex ea commodo consequat</li>
              <li>Proin quam magna</li>
              <li>bibendum vitae leoVestibulum a congue quam
              </li>
            </ul>
          </li>
          <li>aliquet vel elementum ut</li>
        </ul>
      </li>
      <li>Nunc ornare mi non gravida lacinia.
    </ul>
  </li>
  <li>Three.</li>
  <li>Four.</li>
  <li>Five.</li>
  <li>Six.</li>
  <li>Seven.</li>
  <li>Eight.</li>
</ul>

<h1 class="h3">Ordered</h1>
<ol>
  <li>One.</li>
  <li>Two.</li>
  <li>Three.</li>
  <li>Four.</li>
  <li>Five.</li>
  <li>Six.
    <ol>
      <li>sed do eiusmod tempor incididunt ut</li>
      <li>labore et dolore magna aliqua
        <ol>
          <li>Ut enim ad minim veniam</li>
          <li>quis nostrud exercitation ullamco laboris
            <ol>
              <li>nisi ut aliquip ex ea commodo consequat</li>
              <li>Proin quam magna</li>
              <li>bibendum vitae leoVestibulum a congue quam</li>
            </ol>
          </li>
          <li>aliquet vel elementum ut</li>
        </ol>
      </li>
      <li>Nunc ornare mi non gravida lacinia.
    </ol>
  </li>
  <li>Seven.</li>
  <li>Eight.</li>
</ol>

<h1 class="h3">Definition list</h1>
<dl>
  <dt>Lorem</dt>
  <dd>ipsum dolor sit amet.</dd>
  
  <dt>consectetur</dt>
  <dd>adipiscing elit.</dd>
  
  <dt>Vestibulum</dt>
  <dd>suscipit justo mollis porttitor ultricies.</dd>
</dl>
</div>
</section>

<section>
<h1 class="h3">Quotes</h1>
<p>A very basic quote</p>

<div class="box">
<h1 class="h3">Short quote</h1>
<blockquote>
<p>The art is long, life is short.</p>
<small>Hippocrates</small>
</blockquote>

<h1 class="h3">Long quote</h1>
<blockquote>
<p>If education is always to be conceived along the same antiquated lines of a mere transmission of knowledge, there is little to be hoped from it in the bettering of man's future. For what is the use of transmitting knowledge if the individual's total development lags behind?</p>
<small>Maria Montessori</small>
</blockquote>

<h1 class="h3">Two paragraphs quote</h1>
<blockquote>
<p>Great spirits have always encountered violent opposition from mediocre minds.</p>
<p>The mediocre mind is incapable of understanding the man who refuses to bow blindly to conventional prejudices and chooses instead to express his opinions courageously and honestly.</p>
<small>Albert Einstein</small>
</blockquote>
</div>
</section>

<section>
<h1 class="h3">Baseline</h1>
<p>Font size and Baseline tweakings.</p>

<div class="box lg-baseline">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

<div class="box xl-baseline">
<p>A Bibliography of Humor and the Law</p>
</div>
</section>

<!-- THE END. -->
<section>
<h1 class="h3">Final paragraph</h1>
<p>Enjoy.</p>

<div class="box last">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</section>
</main>

SassMeister-input.scss

// ----
// Sass (v3.3.8)
// Compass (v1.0.0.alpha.19)
// Normalize SCSS (v3.0.0.alpha.2)
// ----

/*********
SASS example of typography with vertical rhythm.

It's not perfect but can still be useful.

WORK IN PROGRESS

Credits:
https://gist.github.com/ry5n/2026666
https://github.com/ianrose/typesettings
https://gist.github.com/victorbstan/889463
*****************************************************************/
@import "normalize-scss";

// rounded corners default
$default_rounded_amount: 8px;

// Vertical rhythm configurable variables
// ⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻
// Absolute height of body text, in pixels
$base-font-size: 12px;

// Absolute height of one line of type, in pixels
$base-line-height: 28px;

// The font unit to use when returning values in rhythm functions
$rhythm-font-unit: px !default;

// Allows the `adjust-font-size-to` mixin and the `lines-for-font-size` function
// to round the line height to the nearest half line height instead of the
// nearest integral line height to avoid large spacing between lines.
$round-to-nearest-half-line: false;

// Ensure there is at least this many pixels
// of vertical padding above and below the text.
$min-line-padding: 2px !default;


// Constants
// ⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻

// Most (all?) browsers use a default of 16px for type.
$browser-default-font-size: 16px;

// The height of one line of type, in rems.
$rem-line-height: $base-line-height / $base-font-size * 1rem;


// Moving parts
// ⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻

// Given pixel inputs, print rem values with pixel fallbacks.
// Based on Bitmanic's rem mixin (https://github.com/bitmanic/rem)
// 
// $property  - The css property name
// $px-values - The value or values (space-separated list) for $property, in pixels
@mixin px-to-rem($property, $px-values) {
  // Number of pixels in 1rem (default: 16px/rem)
  // When converting to rems, we must divide by this ratio.
  $px-per-rem: $base-font-size / 1rem;
  
  // Print the pixel fallback declaration first so we can override it in capable browsers.
  #{$property}: $px-values;
  
  // If there is only one value, print the declaration with the value converted to rems.
  @if type-of($px-values) == "number" {
    #{$property}: $px-values / $px-per-rem;
  }
  @else {
    // Otherwise, we've got a list and we'll need to convert each value in turn.
    // Create an empty list that we can dump values into.
    $rem-values: ();
    @each $value in $px-values {
      // If the value is zero, a string or a color, leave it be.
      @if $value == 0 or type-of($value) == "string" or type-of($value) == "color" {
        $rem-values: append($rem-values, $value);
      } @else {
        $rem-values: append($rem-values, $value / $px-per-rem);
      }
    }
    // Print the property and its list of converted values.
    #{$property}: $rem-values;
  }
}

// Return the height of n baselines.
// Returns px or rem based on the value of $rhythm-font-unit.
@function rhythm($lines: 1) {
	$line-height: if($rhythm-font-unit != px, $rem-line-height, $base-line-height);
	@return $line-height * $lines;
}

// Calculate the number of baselines required to accomodate a
// given pixel-based font size.
@function lines-for-font-size($font-size) {
	$lines: if(
		$round-to-nearest-half-line,
		ceil(2 * $font-size / $base-line-height) / 2,
		ceil($font-size / $base-line-height)
	);
	@if $lines * $base-line-height - $font-size < $min-line-padding * 2 {
		$lines: $lines + if($round-to-nearest-half-line, 0.5, 1);
	}
	@return $lines;
}

// Set type size and baseline grid on the root element.
@mixin establish-baseline {
	html {
		$new-font-size: $base-font-size / $browser-default-font-size * 100%;	// eg. 16px ÷ 16px * 100%
		// Only set the font size if it differs from the browser default
		@if $new-font-size != 100% {
			font-size: $new-font-size;
		}
		@include set-leading(1);
	}
}

// Set the font size to the specified number of pixels while
// maintaining the vertical rhythm.
//
// $to-size - Desired font size, in pixels
// $lines   - Desired leading, expressed in baselines (can fractional)
@mixin set-font-size($to-size, $lines: lines-for-font-size($to-size)) {
	@include px-to-rem(font-size, $to-size);
	@include set-leading($lines);
}

// Adjust the leading to a new multiple of the baseline
@mixin set-leading($lines) {
	@include px-to-rem(line-height, $base-line-height * $lines);
}

// Apply leading whitespace
@mixin leader($lines: 1, $property: margin) {
	@include px-to-rem(#{$property}-top, rhythm($lines));
}

// Apply trailing whitespace
@mixin trailer($lines: 1, $property: margin) {
	@include px-to-rem(#{$property}-bottom, rhythm($lines));
}

// Apply leading whitespace as padding
@mixin padding-leader($lines: 1) {
	@include leader($lines, padding);
}

// Apply trailing whitespace as padding
@mixin padding-trailer($lines: 1) {
	@include trailer($lines, padding);
}

// Apply leading and trailing whitespace together.
// Defaults to equal margins above and below and no padding.
@mixin rhythm-spacing($leader: 1, $trailer: $leader, $padding-leader: 0, $padding-trailer: $padding-leader) {
	@include leader($leader);
	@include trailer($trailer);
	@include padding-leader($padding-leader);
	@include padding-trailer($padding-trailer);
}

// Apply a border to one side of an element without throwing off
// the vertical rhythm. The available space ($lines) must be 
// greater than the width of your border.
@mixin side-rhythm-border($side, $lines: 1, $border: $rule-width $rule-style $rule-color) {
	$width: nth($border, 1);
	$style: nth($border, 2);
	$color: nth($border, 3);
	@include px-to-rem(border-#{$side}, $width $style $color);
	
	$padding: ($base-line-height - $width) * $lines;
	@include px-to-rem(padding-#{$side}, $padding);
}

// Apply a leading rhythm border
@mixin leading-border($lines: 1, $border: $rule-width $rule-style $rule-color) {
	@include side-rhythm-border(top, $lines, $border);
}

// Apply a trailing rhythm border
@mixin trailing-border($lines: 1, $border: $rule-width $rule-style $rule-color) {
	@include side-rhythm-border(bottom, $lines, $border);
}

// Apply borders equally to all sides with padding to maintain the vertical rhythm
@mixin rhythm-borders($lines: 1, $border: $rule-width $rule-style $rule-color) {
	$width: nth($border, 1);
	$style: nth($border, 2);
	$color: nth($border, 3);
	@include px-to-rem(border, $width $style $color);
	
	$padding: ($base-line-height - $width) * $lines;
	@include px-to-rem(padding, $padding);
}
@include establish-baseline;

// Modular scale representing all the different font sizes
// http://modularscale.com/scale/?px1=11&px2=18&ra1=1.067&ra2=0
$ms-xl: 33.123px;
$ms-lg: 22.446px;
$ms-up6: 18px; 
$ms-up5: 17.318px;
$ms-up4: 16.870px;
$ms-up3: 16.231px;
$ms-up2: 15.212px;
$ms-up1: 13.016px;
$ms-base: $base-font-size;
$ms-down1: 10.715px;
$ms-down2: 10.042px;
$ms-down3: 9.662px;
/*
18.000 	1.636 	1.125 	138.462
17.318 	1.574 	1.082 	133.215
16.870 	1.534 	1.054 	129.769
16.231 	1.476 	1.014 	124.854
15.811 	1.437 	0.988 	121.623
15.212 	1.383 	0.951 	117.015
14.818 	1.347 	0.926 	113.985
14.257 	1.296 	0.891 	109.669
13.888 	1.263 	0.868 	106.831
13.362 	1.215 	0.835 	102.785
13.016 	1.183 	0.814 	100.123
12.523 	1.138 	0.783 	96.331
12.199 	1.109 	0.762 	93.838
11.737 	1.067 	0.734 	90.285
11.433 	1.039 	0.715 	87.946
11.000 	1 	0.688 	84.615
10.715 	0.974 	0.67 	82.423
10.309 	0.937 	0.644 	79.300
10.042 	0.913 	0.628 	77.246
9.662 	0.878 	0.604 	74.323
9.411 	0.856 	0.588 	72.392
9.055 	0.823 	0.566 	69.654
*/

// Round corner at position by amount.
@mixin round-corner($position, $amount: $default_rounded_amount) {
  border-#{$position}-radius: $amount;
  -webkit-border-#{$position}-radius: $amount;
}

@mixin round-corner-mozilla($position, $amount: $default_rounded_amount) {
  -moz-border-radius-#{$position}: $amount;
}

// Round left corners by amount
@mixin round-left-corners($amount: $default_rounded_amount) {
  @include round-corner("top-left", $amount);
  @include round-corner("bottom-left", $amount);
  @include round-corner-mozilla("topleft", $amount);
  @include round-corner-mozilla("bottomleft", $amount);
}

// Round right corners by amount
  @mixin round-right-corners($amount: $default_rounded_amount) {
  @include round-corner("top-right", $amount);
  @include round-corner("bottom-right", $amount);
  @include round-corner-mozilla("topright", $amount);
  @include round-corner-mozilla("bottomright", $amount);
}

// Round top corners by amount
  @mixin round-top-corners($amount: 5px) {
  @include round-corner("top-left", $amount);
  @include round-corner("top-right", $amount);
  @include round-corner-mozilla("topleft", $amount);
  @include round-corner-mozilla("topright", $amount);
}

// Round bottom corners by amount
  @mixin round-bottom-corners($amount: $default_rounded_amount) {
  @include round-corner("bottom-left", $amount);
  @include round-corner("bottom-right", $amount);
  @include round-corner-mozilla("bottomleft", $amount);
  @include round-corner-mozilla("bottomright", $amount);
}

// Round all corners by amount
@mixin round-corners($amount: $default_rounded_amount) {
  border-radius: $amount;
  -moz-border-radius: $amount;
  -webkit-border-radius: $amount;
}

// DROP SHADOW/////////////////////
@mixin box-shadow($top, $left, $blur, $color, $inset:"") {
  -webkit-box-shadow:$top $left $blur $color #{$inset};
  -moz-box-shadow:$top $left $blur $color #{$inset};
  box-shadow:$top $left $blur $color #{$inset};
}

// DEBUG ///////////////////////////
// Creates base type baseline overlay and veritcal unit overlay.
// To use on the body tag for example, body { @include debug-vertical-alignment(); } and add class debug to the body tag
// DEBUG
// Creates base type baseline overlay and vertical unit overlay.
// To use on the body tag for example: body { @include debug-vertical-alignment(); } and add class va-debug to the body tag
@mixin debug-vertical-alignment($opacity: 0.8, $vertical-unit:  rhythm(), $type-baseline: $base-line-height) {
  position: relative;

  &:before, &:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    display: none;
  }

  &:before {
    z-index: 10;
    background-image: -webkit-linear-gradient(rgba(233, 0, 0, $opacity) 1px, rgba(0, 0, 0, 0) 1px);
    background-image: linear-gradient(rgba(233, 0, 0, $opacity) 1px, rgba(0, 0, 0, 0) 1px);
    //background-size: 100% ($base-line-height * 1em);
    //background-size: 100% (16 * 1em);
  }

  &:after {
    z-index: 9;
    background-image: -webkit-linear-gradient(rgba(0, 233, 0, $opacity) 1px, rgba(0, 0, 0, 0) 1px);
    background-image: linear-gradient(rgba(0, 233, 0, $opacity) 1px, rgba(0, 0, 0, 0) 1px);
    background-size: 100% $vertical-unit;
  }

  &.va-debug:before, &.va-debug:after {
    display: block;
    pointer-events: none;
  }
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
  @include rhythm-spacing();
  text-transform: uppercase;
}

h1, .h1 {
  @include set-font-size($ms-up6);
}
#intro h1 {
  @include set-font-size($ms-xl);
}
h2, .h2 {
  @include set-font-size($ms-up5);
}
h3, .h3 {
  @include set-font-size($ms-up4);
}
h4, .h4 {
  @include set-font-size($ms-up3);
}
h5, .h5 {
  @include set-font-size($base-font-size);
}
h6, .h6 {
  @include set-font-size($base-font-size);
}

p {
  @include rhythm-spacing();
  @include set-font-size($base-font-size);
}

pre {
  @include round-corners();
  @include rhythm-spacing();
  @include leader(0); @include trailer(0);
  @include set-font-size($base-font-size);
  
  background: rgb(255, 152, 51); // #f93
  background: rgba(255, 152, 51, 0.42);
  padding: rhythm(1);
}

hr {
  @include rhythm-spacing();
  @include set-font-size($base-font-size);
}

ul, ol, dl {
  @include rhythm-spacing();
  @include set-font-size($base-font-size);
}
ul ul, ol ol {
  @include leader(0);
  @include trailer(0);
  padding-left: rhythm();
}

dt {
  font-weight: bold;
}
dd {
  margin-left: rhythm(1);
}
blockquote {
  @include rhythm-spacing();
  margin-left: rhythm(1/3);
  @include trailer(2);
  font-style: italic;
  
  p {
    @include set-font-size($ms-up1);
    padding-left: rhythm(2/3);
    border-left: 4px solid #ccc;
    color: #666;
  }
  
  small {
    @include set-font-size($ms-down1);
    text-align: right;
    position: relative;
    top: -1 * rhythm();
    float: right;
  }
}

// CONTAINERS /////////////////////////////////////
main {
  @include debug-vertical-alignment();
  > section {
    width: 40%;
    margin: 0 auto;
  }
}

.box + .box {
  @include leader(-1);
}
.box {
  @include rhythm-borders($border: 1px solid #666);
  @include trailer(3);
  @include box-shadow(0px, 0px, 20px, #222);
}


.lg-baseline p {
  text-align: center;
  @include set-font-size($ms-lg, 2);
  @include leader(0);
  @include trailer(0);
}

.xl-baseline p {
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  @include set-font-size($ms-xl, 3);
  @include leader(0);
  @include trailer(0);
}

.box.last {
  @include trailer(0);
}

.note {
  color: #fff;
  background: #32608C;
  padding: 4px;
  font-weight: bold;
}

SassMeister-output.css

/*********
SASS example of typography with vertical rhythm.

It's not perfect but can still be useful.

WORK IN PROGRESS

Credits:
https://gist.github.com/ry5n/2026666
https://github.com/ianrose/typesettings
https://gist.github.com/victorbstan/889463
*****************************************************************/
/* normalize-scss 3.0.0-alpha.2+normalize.3.0.0 | MIT/GPLv2 License | bit.ly/normalize-scss */
/* Base
   ========================================================================== */
/**
 * Establish a vertical rhythm unit using $base-font-size, $base-line-height,
 * and $rhythm-unit variables. Also, correct text resizing oddly in IE 6/7 when
 * body `font-size` is set using `em` units.
 */
html {
  font-size: 100%;
  line-height: 1.5em;
}

/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}

/**
 * Remove default margin.
 */
body {
  margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined in IE 8/9. Correct `block` display
 * not defined on `summary` and `details` in IE and Firefox and on `main` in IE.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
  display: inline-block;
  /* 1 */
  *display: inline;
  *zoom: 1;
  vertical-align: baseline;
  /* 2 */
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 */
[hidden] {
  display: none;
}

/**
 * Hide the `template` element in IE, Safari, and Firefox < 22.
 */
template {
  display: none;
}

/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background: transparent;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */
a:active,
a:hover {
  outline: 0;
}

/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE, Safari 5, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
 */
b,
strong {
  font-weight: bold;
}

/**
 * Set 1 unit of vertical rhythm on the top and bottom margin.
 */
blockquote {
  margin: 1.5em 40px;
}

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, serif;
  font-size: 1em;
}

/**
 * Address styling not present in Safari 5 and Chrome.
 */
dfn {
  font-style: italic;
}

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari 5, and Chrome.
 */
h1 {
  /* Set the font-size and line-height while keeping a proper vertical rhythm. */
  font-size: 2em;
  line-height: 1.5em;
  /* Set 1 unit of vertical rhythm on the top and bottom margins. */
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}

h2 {
  font-size: 1.5em;
  line-height: 2em;
  margin-top: 1em;
  margin-bottom: 1em;
}

h3 {
  font-size: 1.17em;
  line-height: 1.28205em;
  margin-top: 1.28205em;
  margin-bottom: 1.28205em;
}

h4 {
  font-size: 1em;
  line-height: 1.5em;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
}

h5 {
  font-size: 0.83em;
  line-height: 1.80723em;
  margin-top: 1.80723em;
  margin-bottom: 1.80723em;
}

h6 {
  font-size: 0.67em;
  line-height: 2.23881em;
  margin-top: 2.23881em;
  margin-bottom: 2.23881em;
}

/**
 * Address styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000;
}

/**
 * Set 1 unit of vertical rhythm on the top and bottom margin.
 */
p,
pre {
  margin: 1.5em 0;
}

/**
 * Contain overflow in all browsers.
 */
pre {
  overflow: auto;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* Lists
   ========================================================================== */
/**
 * Address margins set differently in IE 6/7.
 */
dl,
menu,
ol,
ul {
  margin: 1.5em 0;
}

dd {
  margin: 0 0 0 40px;
}

/**
 * Address paddings set differently in IE 6/7.
 */
menu,
ol,
ul {
  padding: 0 0 0 40px;
}

/**
 * Correct list images handled incorrectly in IE 7.
 */
nav ul,
nav ol {
  list-style: none;
  list-style-image: none;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9/10.
 */
img {
  border: 0;
  /* Improve image quality when scaled in IE 7. */
  -ms-interpolation-mode: bicubic;
}

/**
 * Correct overflow displayed in IE.
 */
svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari 5.
 */
figure {
  margin: 1.5em 40px;
}

/**
 * Address differences between Firefox and other browsers.
 */
hr {
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * Correct margin displayed oddly in IE 6/7.
 */
form {
  margin: 0;
}

/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
 * 4. Address `font-family` inconsistency between `textarea` and other form in IE 7
 * 5. Improve appearance and consistency with IE 6/7.
 */
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  /* 1 */
  font: inherit;
  /* 2 */
  margin: 0;
  /* 3 */
  *font-family: sans-serif;
  /* 4 */
  *vertical-align: middle;
  /* 5 */
}

/**
 * Address `overflow` set to `hidden` in IE.
 */
button {
  overflow: visible;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select {
  text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 * 4. Remove inner spacing in IE 7 without affecting normal text inputs.
 *    Known issue: inner spacing remains in IE 6.
 */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */
  *overflow: visible;
  /* 4 */
}

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
  line-height: normal;
}

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 * 3. Remove excess padding in IE 7.
 *    Known issue: excess padding remains in IE 6.
 */
input[type="checkbox"],
input[type="radio"] {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
  *height: 13px;
  /* 3 */
  *width: 13px;
  /* 3 */
}

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */
input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  /* 2 */
  /**
   * Remove inner padding and search cancel button in Safari and Chrome on OS X.
   * Safari (but not Chrome) clips the cancel button when the search input has
   * padding (and `textfield` appearance).
   */
}
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  margin: 0 2px;
  /* Apply borders and padding that keep the vertical rhythm. */
  border-color: #c0c0c0;
  border-top-width: 0.0625em;
  border-top-style: solid;
  padding-top: 0.4625em;
  border-bottom-width: 0.0625em;
  border-bottom-style: solid;
  padding-bottom: 0.9125em;
  border-left-width: 0.0625em;
  border-left-style: solid;
  padding-left: 0.875em;
  border-right-width: 0.0625em;
  border-right-style: solid;
  padding-right: 0.875em;
}

/**
 * 1. Correct `color` not being inherited in IE.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 * 3. Correct alignment displayed oddly in IE 6/7.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */
  *margin-left: -7px;
  /* 3 */
}

/**
 * Remove default vertical scrollbar in IE.
 */
textarea {
  overflow: auto;
}

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
  font-weight: bold;
}

/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

html {
  font-size: 75%;
  line-height: 28px;
  line-height: 2.33333rem;
}

/*
18.000 	1.636 	1.125 	138.462
17.318 	1.574 	1.082 	133.215
16.870 	1.534 	1.054 	129.769
16.231 	1.476 	1.014 	124.854
15.811 	1.437 	0.988 	121.623
15.212 	1.383 	0.951 	117.015
14.818 	1.347 	0.926 	113.985
14.257 	1.296 	0.891 	109.669
13.888 	1.263 	0.868 	106.831
13.362 	1.215 	0.835 	102.785
13.016 	1.183 	0.814 	100.123
12.523 	1.138 	0.783 	96.331
12.199 	1.109 	0.762 	93.838
11.737 	1.067 	0.734 	90.285
11.433 	1.039 	0.715 	87.946
11.000 	1 	0.688 	84.615
10.715 	0.974 	0.67 	82.423
10.309 	0.937 	0.644 	79.300
10.042 	0.913 	0.628 	77.246
9.662 	0.878 	0.604 	74.323
9.411 	0.856 	0.588 	72.392
9.055 	0.823 	0.566 	69.654
*/
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
  margin-top: 28px;
  margin-top: 2.33333rem;
  margin-bottom: 28px;
  margin-bottom: 2.33333rem;
  padding-top: 0px;
  padding-top: 0rem;
  padding-bottom: 0px;
  padding-bottom: 0rem;
  text-transform: uppercase;
}

h1, .h1 {
  font-size: 18px;
  font-size: 1.5rem;
  line-height: 28px;
  line-height: 2.33333rem;
}

#intro h1 {
  font-size: 33.123px;
  font-size: 2.76025rem;
  line-height: 56px;
  line-height: 4.66667rem;
}

h2, .h2 {
  font-size: 17.318px;
  font-size: 1.44317rem;
  line-height: 28px;
  line-height: 2.33333rem;
}

h3, .h3 {
  font-size: 16.87px;
  font-size: 1.40583rem;
  line-height: 28px;
  line-height: 2.33333rem;
}

h4, .h4 {
  font-size: 16.231px;
  font-size: 1.35258rem;
  line-height: 28px;
  line-height: 2.33333rem;
}

h5, .h5 {
  font-size: 12px;
  font-size: 1rem;
  line-height: 28px;
  line-height: 2.33333rem;
}

h6, .h6 {
  font-size: 12px;
  font-size: 1rem;
  line-height: 28px;
  line-height: 2.33333rem;
}

p {
  margin-top: 28px;
  margin-top: 2.33333rem;
  margin-bottom: 28px;
  margin-bottom: 2.33333rem;
  padding-top: 0px;
  padding-top: 0rem;
  padding-bottom: 0px;
  padding-bottom: 0rem;
  font-size: 12px;
  font-size: 1rem;
  line-height: 28px;
  line-height: 2.33333rem;
}

pre {
  border-radius: 8px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  margin-top: 28px;
  margin-top: 2.33333rem;
  margin-bottom: 28px;
  margin-bottom: 2.33333rem;
  padding-top: 0px;
  padding-top: 0rem;
  padding-bottom: 0px;
  padding-bottom: 0rem;
  margin-top: 0px;
  margin-top: 0rem;
  margin-bottom: 0px;
  margin-bottom: 0rem;
  font-size: 12px;
  font-size: 1rem;
  line-height: 28px;
  line-height: 2.33333rem;
  background: #ff9833;
  background: rgba(255, 152, 51, 0.42);
  padding: 28px;
}

hr {
  margin-top: 28px;
  margin-top: 2.33333rem;
  margin-bottom: 28px;
  margin-bottom: 2.33333rem;
  padding-top: 0px;
  padding-top: 0rem;
  padding-bottom: 0px;
  padding-bottom: 0rem;
  font-size: 12px;
  font-size: 1rem;
  line-height: 28px;
  line-height: 2.33333rem;
}

ul, ol, dl {
  margin-top: 28px;
  margin-top: 2.33333rem;
  margin-bottom: 28px;
  margin-bottom: 2.33333rem;
  padding-top: 0px;
  padding-top: 0rem;
  padding-bottom: 0px;
  padding-bottom: 0rem;
  font-size: 12px;
  font-size: 1rem;
  line-height: 28px;
  line-height: 2.33333rem;
}

ul ul, ol ol {
  margin-top: 0px;
  margin-top: 0rem;
  margin-bottom: 0px;
  margin-bottom: 0rem;
  padding-left: 28px;
}

dt {
  font-weight: bold;
}

dd {
  margin-left: 28px;
}

blockquote {
  margin-top: 28px;
  margin-top: 2.33333rem;
  margin-bottom: 28px;
  margin-bottom: 2.33333rem;
  padding-top: 0px;
  padding-top: 0rem;
  padding-bottom: 0px;
  padding-bottom: 0rem;
  margin-left: 9.33333px;
  margin-bottom: 56px;
  margin-bottom: 4.66667rem;
  font-style: italic;
}
blockquote p {
  font-size: 13.016px;
  font-size: 1.08467rem;
  line-height: 28px;
  line-height: 2.33333rem;
  padding-left: 18.66667px;
  border-left: 4px solid #ccc;
  color: #666;
}
blockquote small {
  font-size: 10.715px;
  font-size: 0.89292rem;
  line-height: 28px;
  line-height: 2.33333rem;
  text-align: right;
  position: relative;
  top: -28px;
  float: right;
}

main {
  position: relative;
}
main:before, main:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  display: none;
}
main:before {
  z-index: 10;
  background-image: -webkit-linear-gradient(rgba(233, 0, 0, 0.8) 1px, transparent 1px);
  background-image: linear-gradient(rgba(233, 0, 0, 0.8) 1px, rgba(0, 0, 0, 0) 1px);
}
main:after {
  z-index: 9;
  background-image: -webkit-linear-gradient(rgba(0, 233, 0, 0.8) 1px, transparent 1px);
  background-image: linear-gradient(rgba(0, 233, 0, 0.8) 1px, rgba(0, 0, 0, 0) 1px);
  background-size: 100% 28px;
}
main.va-debug:before, main.va-debug:after {
  display: block;
  pointer-events: none;
}
main > section {
  width: 40%;
  margin: 0 auto;
}

.box + .box {
  margin-top: -28px;
  margin-top: -2.33333rem;
}

.box {
  border: 1px solid #666666;
  border: 0.08333rem solid #666666;
  padding: 27px;
  padding: 2.25rem;
  margin-bottom: 84px;
  margin-bottom: 7rem;
  -webkit-box-shadow: 0px 0px 20px #222222 ;
  -moz-box-shadow: 0px 0px 20px #222222 ;
  box-shadow: 0px 0px 20px #222222 ;
}

.lg-baseline p {
  text-align: center;
  font-size: 22.446px;
  font-size: 1.8705rem;
  line-height: 56px;
  line-height: 4.66667rem;
  margin-top: 0px;
  margin-top: 0rem;
  margin-bottom: 0px;
  margin-bottom: 0rem;
}

.xl-baseline p {
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  font-size: 33.123px;
  font-size: 2.76025rem;
  line-height: 84px;
  line-height: 7rem;
  margin-top: 0px;
  margin-top: 0rem;
  margin-bottom: 0px;
  margin-bottom: 0rem;
}

.box.last {
  margin-bottom: 0px;
  margin-bottom: 0rem;
}

.note {
  color: #fff;
  background: #32608C;
  padding: 4px;
  font-weight: bold;
}

SassMeister-rendered.html

<!--
http://sassmeister.com/gist/680859146a5a951c19d5

http://browsershots.org/http://paolo.php3.it/paolo/tipo-1/
http://www.browserstack.com/screenshots/9d960023f026c09729729eb067721d845c3829a7

Live example
http://paolo.php3.it/paolo/typo-1/
-->
<main class="va-debug">
<section id="intro">
<h1>Typography showcase</h1>
<p><strong>WORK IN PROGRESS.</strong><br/>Inspired by <a href="http://www.cascade-framework.com/typography.html">Cascade Framework</a></p>
<p>
  <strong>HUGE CREDITS: </strong>
  <a href="https://gist.github.com/ry5n/2026666">ry5n</a>, 
  <a href="https://github.com/ianrose/typesettings">typesettings</a>, 
  <a href="https://gist.github.com/victorbstan/889463">victorbstan</a>
</p>

<p>
  <strong>TODO:</strong> cleanup and define variables for colors etc
</p>
</section>

<section>
<h1 class="h3">Headers</h1>
<p>Herebelow is an example of the different headings.</p>

<div class="box">
<h1>Heading 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

<h2>Heading 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

<h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

<h4>Heading 4</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

<h5>Heading 5</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

<h6>Heading 6</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</section>

<section>
<h1 class="h3">Inline elements</h1>
<p>Herebelow is an example of inline elements.</p>

<div class="box">
<p><span class="note">TODO</span></p>
</div>
</section>

<section>
<h1 class="h3">Preformatted text</h1>
<p>Most useful for poetry and code.</p>

<div class="box">
<pre>
This is
   pre-formatted text. It preserves both
   
           spaces and line breaks.
</pre>
</div>
</section>

<section>
<h1 class="h3">Lists</h1>
<p>Default list styles.</p>

<div class="box">
<h1 class="h3">Unordered</h1>
<ul>
  <li>Lorem ipsum dolor sit amet</li>
  <li>consectetur adipisicing elit
    <ul>
      <li>sed do eiusmod tempor incididunt ut</li>
      <li>labore et dolore magna aliqua
        <ul>
          <li>Ut enim ad minim veniam</li>
          <li>quis nostrud exercitation ullamco laboris
            <ul>
              <li>nisi ut aliquip ex ea commodo consequat</li>
              <li>Proin quam magna</li>
              <li>bibendum vitae leoVestibulum a congue quam
              </li>
            </ul>
          </li>
          <li>aliquet vel elementum ut</li>
        </ul>
      </li>
      <li>Nunc ornare mi non gravida lacinia.
    </ul>
  </li>
  <li>Three.</li>
  <li>Four.</li>
  <li>Five.</li>
  <li>Six.</li>
  <li>Seven.</li>
  <li>Eight.</li>
</ul>

<h1 class="h3">Ordered</h1>
<ol>
  <li>One.</li>
  <li>Two.</li>
  <li>Three.</li>
  <li>Four.</li>
  <li>Five.</li>
  <li>Six.
    <ol>
      <li>sed do eiusmod tempor incididunt ut</li>
      <li>labore et dolore magna aliqua
        <ol>
          <li>Ut enim ad minim veniam</li>
          <li>quis nostrud exercitation ullamco laboris
            <ol>
              <li>nisi ut aliquip ex ea commodo consequat</li>
              <li>Proin quam magna</li>
              <li>bibendum vitae leoVestibulum a congue quam</li>
            </ol>
          </li>
          <li>aliquet vel elementum ut</li>
        </ol>
      </li>
      <li>Nunc ornare mi non gravida lacinia.
    </ol>
  </li>
  <li>Seven.</li>
  <li>Eight.</li>
</ol>

<h1 class="h3">Definition list</h1>
<dl>
  <dt>Lorem</dt>
  <dd>ipsum dolor sit amet.</dd>
  
  <dt>consectetur</dt>
  <dd>adipiscing elit.</dd>
  
  <dt>Vestibulum</dt>
  <dd>suscipit justo mollis porttitor ultricies.</dd>
</dl>
</div>
</section>

<section>
<h1 class="h3">Quotes</h1>
<p>A very basic quote</p>

<div class="box">
<h1 class="h3">Short quote</h1>
<blockquote>
<p>The art is long, life is short.</p>
<small>Hippocrates</small>
</blockquote>

<h1 class="h3">Long quote</h1>
<blockquote>
<p>If education is always to be conceived along the same antiquated lines of a mere transmission of knowledge, there is little to be hoped from it in the bettering of man's future. For what is the use of transmitting knowledge if the individual's total development lags behind?</p>
<small>Maria Montessori</small>
</blockquote>

<h1 class="h3">Two paragraphs quote</h1>
<blockquote>
<p>Great spirits have always encountered violent opposition from mediocre minds.</p>
<p>The mediocre mind is incapable of understanding the man who refuses to bow blindly to conventional prejudices and chooses instead to express his opinions courageously and honestly.</p>
<small>Albert Einstein</small>
</blockquote>
</div>
</section>

<section>
<h1 class="h3">Baseline</h1>
<p>Font size and Baseline tweakings.</p>

<div class="box lg-baseline">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

<div class="box xl-baseline">
<p>A Bibliography of Humor and the Law</p>
</div>
</section>

<!-- THE END. -->
<section>
<h1 class="h3">Final paragraph</h1>
<p>Enjoy.</p>

<div class="box last">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</section>
</main>