From aa11366421fa4a864de958f331bf713dc09f28dc Mon Sep 17 00:00:00 2001
From: Bartlomiej Kozal <bkzl@me.com>
Date: Sat, 3 Jan 2015 00:02:41 +0100
Subject: [PATCH] Vertical rhythm based on gridism

---
 README.md                  |  1 +
 _hocus-pocus.sass          |  3 +++
 core/_base.sass            | 50 ++++++++++++++++++++++++++++++++++++--
 core/_functions.sass       | 16 ++++++++++++
 core/_settings.sass        | 10 ++++++++
 core/_vertical-rhythm.sass | 23 ++++++++++++++++++
 6 files changed, 101 insertions(+), 2 deletions(-)
 create mode 100644 core/_functions.sass
 create mode 100644 core/_settings.sass
 create mode 100644 core/_vertical-rhythm.sass

diff --git a/README.md b/README.md
index 9d3afe7..95d9ff3 100644
--- a/README.md
+++ b/README.md
@@ -94,6 +94,7 @@ $hp-base-font-family: "Open Sans", sans-serif
 
 1. Normalize
 2. Box-sizing global reset
+3. Vertical rhythm
 
 ## Contributing
 
diff --git a/_hocus-pocus.sass b/_hocus-pocus.sass
index 29a7c35..05a31ff 100644
--- a/_hocus-pocus.sass
+++ b/_hocus-pocus.sass
@@ -1,3 +1,6 @@
+@import 'core/settings'
+@import 'core/functions'
 @import 'core/normalize'
 @import 'core/box-sizing'
+@import 'core/vertical-rhythm'
 @import 'core/base'
diff --git a/core/_base.sass b/core/_base.sass
index 8610c58..78c5197 100644
--- a/core/_base.sass
+++ b/core/_base.sass
@@ -2,7 +2,53 @@
  * Remove margin and padding on base elements
  */
 
-blockquote, caption, dd, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr,
-legend, ol, p, pre, table, td, th, ul
+h1, h2, h3, h4, h5, h6,
+p, ul, ol, dl, dd, hr,
+blockquote, pre, table, th, td,
+form, fieldset, caption, legend
   margin: 0
   padding: 0
+
+/*
+ * Remove margin and padding on base elements
+ */
+
+body
+  @include hp-font-size($hp-base-font-size)
+
+h1
+  @include hp-font-size-step(3)
+
+h2
+  @include hp-font-size-step(2)
+
+h3
+  @include hp-font-size-step(1)
+
+h4, h5, h6
+  @include hp-font-size-step(0)
+
+p, ul, ol, dl, blockquote, pre, table
+  margin-bottom: $hp-spacing-unit
+
+hr
+  margin-top: -1px
+  margin-bottom: $hp-spacing-unit
+  border: 1px solid
+
+ul ul, ol ol, ul ol, ol ul
+  margin-top: 0
+  margin-bottom: 0
+
+strong, em, small, code
+  line-height: 1
+
+sup, sub
+  vertical-align: baseline
+  position: relative
+
+sup
+  top: -0.4em
+
+sub
+  top: 0.4em
diff --git a/core/_functions.sass b/core/_functions.sass
new file mode 100644
index 0000000..27e2c9c
--- /dev/null
+++ b/core/_functions.sass
@@ -0,0 +1,16 @@
+/*
+ * Private
+ */
+
+@function hp-vertical-rhythm-exponent($base, $exponent)
+  @if pow(2, 2) == 4
+    @return pow($base, $exponent)
+
+  $value: $base
+  @if $exponent > 1
+    @for $i from 2 through $exponent
+      $value: $value * $base
+  @if $exponent < 1
+    @for $i from 0 through -$exponent
+      $value: $value / $base
+  @return $value
diff --git a/core/_settings.sass b/core/_settings.sass
new file mode 100644
index 0000000..e6e147a
--- /dev/null
+++ b/core/_settings.sass
@@ -0,0 +1,10 @@
+$hp-base-font-size: 16 !default
+$hp-base-line-height: 1.4 !default
+$hp-vertical-align-factor: 1.5 !default
+
+/*
+ * Constants - don't change
+ */
+
+$hp-font-size-factor: 16
+$hp-spacing-unit: round($hp-base-font-size * $hp-base-line-height) / $hp-font-size-factor * 1rem
diff --git a/core/_vertical-rhythm.sass b/core/_vertical-rhythm.sass
new file mode 100644
index 0000000..083e2ec
--- /dev/null
+++ b/core/_vertical-rhythm.sass
@@ -0,0 +1,23 @@
+/*
+ * Source:
+ * http://www.gridlover.net
+ * https://github.com/hiulit/Sassy-Gridlover
+ */
+
+@mixin hp-font-size($font-size: $hp-base-font-size)
+  font-size: $font-size / $hp-font-size-factor * 1rem
+  line-height: round($font-size * $hp-base-line-height) / $hp-font-size-factor * 1rem
+
+@mixin hp-font-size-step($step)
+  $font-size: $hp-base-font-size
+  $line-height: round($font-size * $hp-base-line-height)
+  $computed-font-size: round($font-size * hp-vertical-rhythm-exponent($hp-vertical-align-factor, $step))
+
+  font-size: $computed-font-size / $hp-font-size-factor * 1rem
+  line-height: $line-height * ceil($computed-font-size / $line-height) / $hp-font-size-factor * 1rem
+  margin-bottom: $line-height / $hp-font-size-factor * 1rem
+
+  @if $step > 1
+    margin-top: $line-height * 2 / $hp-font-size-factor * 1rem
+  @else
+    margin-top: $line-height / $hp-font-size-factor * 1rem