public
Created

Vertical Rythm Generator (SCSS)

  • Download Gist
Vertical Rythm
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156
// ==========================================================================//
//
// ♪♫♪♫ Vertical Rythm Composer ♪♫♪♫
//
// What's the big deal?
// Vertical Rythm is one of many ways to create harmony in web type.
// Basically text is aligned to evenly spaced horizontal lines (think of lined paper)
// Vertical Rythm is affected by font-size, line height and margins.
// This partial's goal is to create very basic and easy to implement typographic vertical rythm.
//
// Usage:
// 1. Set variables to according values
// 2. include mixin @setFontSize to your selectors
// 3. Optionally set font-family and debugging mixins
//
// © 2013 WTFPL – Do What the Fuck You Want to Public License.
// - http://www.wtfpl.net
//
// References:
// - http://24ways.org/2006/compose-to-a-vertical-rhythm/
//
// ==========================================================================//
 
 
 
// ==========================================================================//
// $Summon Ingredients
// ==========================================================================//
 
$baseline: 28px; // the height of our 'baseline'-Unit
$base-fontSize: 16px; // the base font-size to calculate our rythm from.
$browser-defaultFontSize: 16px; // We assume the browser default is 16px.
 
$font-family-copy: Merriweather, sans-serif;
$font-family-headlines: Lato, serif;
 
 
// Typographic Scale
// Scaling according to:
// - http://typecast.com/blog/contrast-through-scale
//
// Variable names according to:
// - http://csswizardry.com/2012/02/pragmatic-practical-font-sizing-in-css/
$mega: 72px;
$kilo: 60px;
$alpha : 48px;
$beta: 40px;
$gamma: 32px;
$delta: 27px;
$epsilon: 21px;
$zeta: 18px;
 
// ==========================================================================//
// $Prepare the magic
// ==========================================================================//
 
 
// TargetContextResult-Calculator -- target ÷ context = result
@function returnResult($target, $context) {
@return ($target/$context)#{em};
}
 
// Calculate and set base fontSize
@mixin setBaseFontSize($fontSizeToSet: $base-fontSize ) {
font-size: returnResult($fontSizeToSet, $browser-defaultFontSize)
}
 
// Will be DEPRECATED in favor of REMS!
//
// Calculate and Set FontSize
// Important: Set floating point number precision in [your Ruby folder..]\lib\sass\script\number.rb to 10. Thank me later ;)
//
// Usage: @include setFontSize(48px,2,1,2);
//
// $targetSize: Target Font-Size
// $lines: Line-Height of Font in "$baseline"-Units. Default = 1
// $marginTopLines: Margin-Top of Font in "$baseline"-Units. Default = 1
// $marginBottomLines: Margin-Bottom of Font in "$baseline"-Units. Default = 1
//
@mixin setFontSize($targetSize, $lines: 1, $marginTopLines:1, $marginBottomLines:1) {
font-size: returnResult($targetSize, $base-fontSize);
line-height: returnResult($baseline * $lines, $targetSize);
margin-top: returnResult($baseline * $marginTopLines, $targetSize);
margin-bottom: returnResult($baseline * $marginBottomLines, $targetSize);
}
 
 
// ==========================================================================//
// $Debug this wizardry
// ==========================================================================//
 
// Overlay Verticl Grid for debugging purposes
@mixin debugShowVerticalGrid($verticalGridColor: red) {
position: relative;
&:after {
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
pointer-events: none;
background-image: -webkit-linear-gradient(rgba($verticalGridColor, 0.2) 1px, transparent 1px);
-webkit-background-size: 100% returnResult($baseline,$base-fontSize);
}
}
// Use this mixin so you can search through your debug styles fast
@mixin debugShowElementHeight ($elementBackgroundColor) {
background-color: $elementBackgroundColor;
}
 
 
// ==========================================================================//
// $Let the magic do its wonders
// ==========================================================================//
 
body {
 
@include debugShowVerticalGrid;
 
@media only screen and (max-width: 768px) {
/* Wide mobile (480px+) styles go here */
@include setBaseFontSize(14px);
}
}
 
p {
@include setFontSize($zeta);
//@include debugShowElementHeight(teal);
font-family: $font-family-copy;
}
h1 {
@include setFontSize($alpha,2,2,1);
font-family: $font-family-headlines;
}
h2 {
@include setFontSize($beta,2,2,1);
font-family: $font-family-headlines;
}
h3 {
@include setFontSize($gamma,2,1,1);
font-family: $font-family-headlines;
}
h4 {
@include setFontSize($delta,1,2,1);
font-family: $font-family-headlines;
}
h5 {
@include setFontSize($epsilon,1,1,1);
font-family: $font-family-headlines;
}
h6 {
@include setFontSize($zeta,1,1,1);
font-family: $font-family-headlines;
}

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.