Permalink
Browse files

SASS version

  • Loading branch information...
1 parent 24feff2 commit 2bb4af67072f60128c95b34940025bc78655fd3d @jonschlinkert committed Sep 11, 2013
Showing with 240 additions and 0 deletions.
  1. +240 −0 vertical-rhythm.sass
View
@@ -0,0 +1,240 @@
+//
+// Vertical Rhythm
+// --------------------------------------------------
+
+
+
+// Variables
+// -------------------------------------------
+// Put your custom variables here. If you use
+// bootstrap, use those and add your own for
+// vertical rhythm
+
+$font-size-base: 14px
+$line-height-base: 20px
+
+
+
+// TYPOGRAPHY BASE
+// -------------------------------------------
+// First, we establish a baseline to normalize
+// typography. Credit: this BASE section is based
+// on Twitter Bootstrap's type.less but with
+// everything that isn't related to rhythm removed.
+
+
+
+// Headings
+// -------------------------------------------
+// normalize baselines for headings, remove
+// this block if you use Twitter Bootstrap
+
+h1, h2, h3, h4, h5, h6
+ margin: ($line-height-base / 2) 0
+ line-height: $line-height-base
+ small
+ line-height: 1
+
+
+h1, h2
+ margin-top: $line-height-base
+ margin-bottom: ($line-height-base / 2)
+ line-height: ($line-height-base * 2)
+
+h3, h4, h5, h6
+ margin-top: ($line-height-base / 2)
+ margin-bottom: ($line-height-base / 2)
+
+
+h1
+ font-size: $font-size-base * 2.75
+ font-size: 4rem // ~38px
+h2
+ font-size: $font-size-base * 2.25
+ font-size: 3rem // ~32px
+h3
+ font-size: $font-size-base * 1.75
+ font-size: 2.5rem // ~24px
+h4
+ font-size: $font-size-base * 1.25
+ font-size: 2rem // ~18px
+h5
+ font-size: $font-size-base
+ font-size: 1.6rem
+h6
+ font-size: $font-size-base * 0.85
+ font-size: 1.2rem // ~12px
+
+h1 small
+ font-size: $font-size-base * 1.75 // ~24px
+h2 small
+ font-size: $font-size-base * 1.25 // ~18px
+h3 small
+ font-size: $font-size-base
+h4 small
+ font-size: $font-size-base
+
+
+//
+// Lists
+// -------------------------------------------
+
+// Unordered and Ordered lists
+ul, ol
+ padding: 0
+ margin: 0 0 ($line-height-base / 2) 25px
+
+ul ul,
+ul ol,
+ol ol,
+ol ul
+ margin-bottom: 0
+
+li
+ line-height: $line-height-base
+
+
+// Description Lists
+dl
+ margin-bottom: $line-height-base
+
+dt, dd
+ line-height: $line-height-base
+
+dd
+ margin-left: ($line-height-base / 2)
+
+
+
+//
+// Misc.
+// -------------------------------------------
+
+// Horizontal rules
+hr
+ margin: $line-height-base 0
+ border: 0
+ border-top: 1px solid $hr-border
+ border-bottom: 1px solid #fff
+
+
+
+
+// VERTICAL RHYTHM
+// -------------------------------------------
+// Add .rhythm to parent elements when you
+// wish to apply vertical rhythm to child elements
+
+
+
+//
+// Body text & Misc
+// -------------------------------------------
+
+.rhythm
+ p, ul, ol, blockquote, address, pre, form
+ margin-bottom: $line-height-base
+
+ // And remove margin from last element
+ &:last-child
+ margin-bottom: 0
+
+
+
+// Headings & paragraphs
+// -------------------------------------------
+// Here we apply special spacing to certain
+// typographical patterns. It is impossible to
+// predict the patterns you require for your
+// project, so this is only a starting point.
+
+.rhythm
+ h1, h2, h3
+ margin-bottom: ($line-height-base / 4)
+
+ h1 + h2
+ margin-top: $line-height-base
+
+ h4
+ margin-bottom: ($line-height-base / 6)
+
+ h1 + p,
+ p + h4
+ margin-top: ($line-height-base * 1.5)
+
+ h2 + h3,
+ h2 + h4
+ margin-top: $line-height-base
+
+ h2 + p,
+ h3 + p
+ margin-top: ($line-height-base / 2)
+
+ p + h2
+ margin-top: ($line-height-base * 3)
+
+ h3 + h4
+ margin-top: ($line-height-base * 2)
+
+
+
+// Lists
+// -------------------------------------------
+// Special classes for numbered, bulleted,
+// and alpha lists.
+
+.rhythm
+ h3 + ul.bullet-list,
+ h3 + ul.numbered-list,
+ h3 + ul.alpha-list,
+ h3 + ol.numbered-list
+ margin-top: ($line-height-base / 2)
+
+ ul.bullet-list + h3,
+ ul.numbered-list + h3,
+ ul.alpha-list + h3
+ margin-top: ($line-height-base * 2)
+
+ h4 + ul.bullet-list,
+ h4 + ul.numbered-list,
+ h4 + ul.alpha-list,
+ h4 + ol.numbered-list
+ margin-top: ($line-height-base / 2)
+
+ .bullet-list
+ list-style-type: disc // bullets
+ padding-left: 1.25em
+
+ .numbered-list
+ list-style-type: decimal // numbers
+ padding-left: 1.5em
+
+ .alpha-list
+ list-style-type: lower-alpha // letters
+ padding-left: 1.5em
+
+ .bullet-list li,
+ .numbered-list li,
+ .alpha-list li
+ margin-bottom: ($line-height-base / 2)
+
+ .condensed-list li
+ margin-bottom: 0
+
+ .flush-list li
+ padding-left: 0
+
+
+//
+// Blockquotes
+// -------------------------------------------
+
+.rhythm blockquote
+ padding: $line-height-base $line-height-base 0
+
+
+
+
+
+
+

0 comments on commit 2bb4af6

Please sign in to comment.