Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
79 lines (67 sloc) 1.64 KB
// Grid settings
// =============
//
// This is, in short, a SASS implementation of Gridlover, which is one of many
// implementations of vertical rhythms out there.
// Display scales.
$displays: (
small: (
font-size: 15px,
unit: 15px * 1.4,
scale: 1.25
),
medium: (
font-size: 18px,
unit: 18px * 1.5,
scale: 1.3
),
large: (
font-size: 20px,
unit: 20px * 1.5,
scale: 1.4
)
);
// A power calculation function. See:
// http://sassmeister.com/gist/10620fefd1ed75189f1b
@function pow($x, $y) {
$ret: 1;
@if $y > 0 {
@for $i from 1 through $y {
$ret: $ret * $x;
}
}
@else {
@for $i from $y to 0 {
$ret: $ret / $x;
}
}
@return $ret;
}
// This function outputs a unit suitable for using in proportional paddings
// and margins.
@function font-scale($x, $size: 'medium') {
$display: map-get($displays, $size);
$scale: map-get($display, 'scale');
$font-size: map-get($display, 'font-size');
@return round($font-size * pow($scale, $x));
}
// Yields a grid unit of space.
@function units($x, $size: 'medium') {
$display: map-get($displays, $size);
@return map-get($display, 'unit') * $x;
}
@function columns($x, $size: 'medium') {
@return units(4, $size) * $x;
}
// A helper for setting an appropriate font size and line-height for it.
// NOTE: ALWAYS use this for sizing fonts anywhere.
@mixin font-size($units, $size: 'medium') {
$display: map-get($displays, $size);
$unit: map-get($display, 'unit');
$lh: $unit;
@while $lh < font-scale($units, $size) {
$lh: $lh + $unit;
}
font-size: font-scale($units, $size);
line-height: $lh;
}