Skip to content

Instantly share code, notes, and snippets.

@dotnetCarpenter
Forked from gregrickaby/_golden-ratio.scss
Created May 8, 2013 23:51
Show Gist options
  • Save dotnetCarpenter/5544572 to your computer and use it in GitHub Desktop.
Save dotnetCarpenter/5544572 to your computer and use it in GitHub Desktop.
//
// Golden Ratio Typography
// --------------------------------------------------
// Golden Ratio Math
//
// Let's do some math so we can build beautiful typography and vertical rhythm.
// For any magic to happen, set the $ContentWidth variable on _variables.scss
// to match your content box width (normally this is 640px, 740px, etc...).
//
// Many thanks to Chris Pearson's scary math skills http://t.co/KoeUoEWrNS
// and his Golden Ratio Calculator http://t.co/6MyXPtRrlu
//
// @author Greg Rickaby
// @since 1.0
// @requires $ContentWidth
// ----------------------------------
$phi: (1 + sqrt(5)) / 2; // 1.61803398874989 or "The Golden Ratio"
$xoo: 1 / (2 * $phi);
$yoo: sqrt($ContentWidth) / $phi; // Line-height
$zoo: $phi - $xoo * (1 - ($ContentWidth / $yoo));
// Title Size
//
// Calculated title size based on $ContentWidth.
//
// @author Greg Rickaby
// @since 1.0
//
// Usage: @include grTitleSize();
// --------------------------------
@function calcTitleSize() {
$foo: calcFontSize() * pow($phi, 2);
@return round($foo);
}
@mixin grTitleSize() {
font-size: calcTitleSize() + px;
font-size: (calcTitleSize() / calcFontSize()) + rem;
line-height: calcTitleSize() / $yoo;
}
// Headline Size
//
// Calculated headline size based on $ContentWidth.
//
// @author Greg Rickaby
// @since 1.0
//
// Usage: @include grHeadlineSize
// --------------------------------
@function calcHeadlineSize() {
$foo: calcFontSize() * pow($phi, 1);
@return round($foo);
}
@mixin grHeadlineSize() {
font-size: calcHeadlineSize() + px;
font-size: (calcHeadlineSize() / calcFontSize()) + rem;
line-height: calcHeadlineSize() / $yoo;
}
// Sub-headline Size
//
// Caclulated sub-headline size based on $ContentWidth.
//
// @author Greg Rickaby
// @since 1.0
//
// Usage: @include grSubHeadlineSize();
// --------------------------------
@function calcSubHeadlineSize() {
$foo: calcFontSize() * sqrt($phi);
@return round($foo);
}
@mixin grSubHeadlineSize() {
font-size: calcSubHeadlineSize() + px;
font-size: (calcSubHeadlineSize() / calcFontSize()) + rem;
line-height: calcSubHeadlineSize() / $yoo;
}
// Font Size
//
// Calculated font size based on $ContentWidth.
//
// @author Greg Rickaby
// @since 1.0
//
// Usage: @include grFontSize();
// --------------------------------
@function calcFontSize() {
$foo: sqrt($ContentWidth) / $phi;
@return round($foo);
}
@mixin grFontSize() {
font-size: calcFontSize() + px;
font-size: (calcFontSize() / calcFontSize()) + rem;
line-height: calcFontSize() / $yoo;
}
// Secondary Text
//
// Calculated secondary text size based on $ContentWidth.
//
// @author Greg Rickaby
// @since 1.0
//
// Usage: @include grSecondaryText();
// --------------------------------
@function calcSecondaryText() {
$foo: calcFontSize() * (1 / sqrt($phi));
@return round($foo);
}
@mixin grSecondaryText() {
font-size: calcSecondaryText() + px;
font-size: (calcSecondaryText() / calcFontSize()) + rem;
line-height: calcSecondaryText() / $yoo;
}
// Default Line Height
//
// Calculate default line-height based on $ContentWidth.
//
// @author Greg Rickaby
// @since 1.0
//
// Usage: @include grBaseLineHeight();
// --------------------------------
@function calcBaseLineHeight() {
$foobar: sqrt($ContentWidth) / $phi;
$foo: calcFontSize() * ($phi - $xoo * (1 - ($ContentWidth / pow(calcFontSize() * $phi, 2))));
$fo: $foo / $foobar;
@return $fo;
}
@mixin grBaseLineHeight() {
line-height: calcBaseLineHeight();
}
// Custom Line Height
//
// Calculate a Golden Ratio line-height based on a custom
// value specified by you.
//
// @author Greg Rickaby
// @since 1.0
//
// Usage: @include grCustomLineHeight(26);
// --------------------------------
@function calcCustomLineHeight($target) {
$foobar: sqrt($ContentWidth) / $phi;
$foo: $target / $foobar;
@return $foo;
}
@mixin grCustomLineHeight($target) {
line-height: calcCustomLineHeight($target);
}
@nedzen
Copy link

nedzen commented Jul 12, 2016

thanks ! this is awesome !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment