Skip to content

Instantly share code, notes, and snippets.

@Gaya
Created November 21, 2014 21:37
Show Gist options
  • Save Gaya/5a7d5c8a990f34bc233e to your computer and use it in GitHub Desktop.
Save Gaya/5a7d5c8a990f34bc233e to your computer and use it in GitHub Desktop.
Vertical Rhytmn Mixin
/*
* Vertical Rhythmn in Sass with helpful mixins and helpers
* Author: Gaya Kessler
* Version: 0.0.2
* Date: 2014-11-20
*/
@if variable-exists(base-font-size) == false {
$base-font-size: 16px;
}
@if variable-exists(base-line) == false {
$base-line: 24px;
}
@if variable-exists(base-line-factor) == false {
$base-line-factor: 1.5;
}
$vr-base-browser: 10px;
@function px2rem($value) {
@if (unit($value) == px) {
$value: $value / 1px;
}
@return ($value / ($vr-base-browser / 1px)) * 1rem;
}
@mixin establish-baseline($font-size: $base-font-size, $line-height: $base-line) {
html {
font-size: 62.5%; /* Sets up the Base 10 stuff */
}
html body, html input, html textarea, html button {
font-size: px2rem($font-size);
line-height: px2rem($line-height);
}
}
@function get-line-height($font-size) {
@if ($font-size * $base-line-factor) > $base-line {
@return $base-line * ceil(($font-size * $base-line-factor) / $base-line);
} @else {
@return $base-line;
}
}
@mixin change-font-size($font-size) {
font-size: $font-size;
font-size: px2rem($font-size);
$line-height: get-line-height($font-size);
line-height: $line-height;
line-height: px2rem($line-height);
}
@function rhythm($amount: 1) {
@return px2rem($base-line * $amount);
}
@function rhythm-border($amount: 1, $width: 1px) {
@return px2rem(($base-line * $amount) - $width);
}
@mixin baseline-grid {
$baseline-color: rgba(56,255,255,.8);
background-image: -webkit-linear-gradient(top, rgba(0,0,0,0) 95%, $baseline-color 100%);
background-image: -moz-linear-gradient(top, rgba(0,0,0,0) 95%, $baseline-color 100%);
background-image: -o-linear-gradient(top, rgba(0,0,0,0) 95%, $baseline-color 100%);
background-size: 100% $base-line;
background-position: 10px 0px; // Use to offset and center your grid
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment