Skip to content

@saviomuc /Vertical Rythm
Created

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Vertical Rythm Generator (SCSS)
// ==========================================================================//
//
// ♪♫♪♫ 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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.