Skip to content
This repository has been archived by the owner on Sep 13, 2024. It is now read-only.

Commit

Permalink
Added scaling variabled. Put golden ratio into own partial
Browse files Browse the repository at this point in the history
  • Loading branch information
Phil LaPier committed Jun 14, 2013
1 parent eb883dd commit 5bdaa07
Show file tree
Hide file tree
Showing 3 changed files with 32 additions and 27 deletions.
1 change: 1 addition & 0 deletions app/assets/stylesheets/_bourbon.scss
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
@import "functions/compact";
@import "functions/flex-grid";
@import "functions/grid-width";
@import "functions/golden-ratio";
@import "functions/linear-gradient";
@import "functions/modular-scale";
@import "functions/px-to-em";
Expand Down
3 changes: 3 additions & 0 deletions app/assets/stylesheets/functions/_golden-ratio.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
@function golden-ratio($value, $increment) {
@return modular-scale($value, $increment, $golden)
}
55 changes: 28 additions & 27 deletions app/assets/stylesheets/functions/_modular-scale.scss
Original file line number Diff line number Diff line change
@@ -1,11 +1,34 @@
// Scaling Varaibles
$golden: 1.618;
$minor-second: 1.067;
$major-second: 1.125;
$minor-third: 1.2;
$major-third: 1.25;
$perfect-fourth: 1.333;
$augmented-fourth: 1.414;
$perfect-fifth: 1.5;
$minor-sixth: 1.6;
$major-sixth: 1.667;
$minor-seventh: 1.778;
$major-seventh: 1.875;
$octave: 2;
$major-tenth: 2.5;
$major-eleventh: 2.667;
$major-twelfth: 3;
$double-octave: 4;

@function modular-scale($value, $increment, $ratio) {
$v1: nth($value, 1);
$v2: nth($value, length($value));
$value: $v1;

// scale $v2 to just above $v1
@while $v2 > $v1 { $v2: ($v2 / $ratio); } // will be off-by-1
@while $v2 < $v1 { $v2: ($v2 * $ratio); } // will fix off-by-1
@while $v2 > $v1 {
$v2: ($v2 / $ratio); // will be off-by-1
}
@while $v2 < $v1 {
$v2: ($v2 * $ratio); // will fix off-by-1
}

// check AFTER scaling $v2 to prevent double-counting corner-case
$double-stranded: $v2 > $v1;
Expand All @@ -24,7 +47,9 @@

@if $increment < 0 {
// adjust $v2 to just below $v1
@if $double-stranded { $v2: ($v2 / $ratio); }
@if $double-stranded {
$v2: ($v2 / $ratio);
}

@for $i from $increment through -1 {
@if $double-stranded and ($v1 / $ratio) < $v2 {
Expand All @@ -39,27 +64,3 @@

@return $value;
}

// div {
// Increment Up GR with positive value
// font-size: modular-scale(14px, 1, 1.618); // returns: 22.652px
//
// Increment Down GR with negative value
// font-size: modular-scale(14px, -1, 1.618); // returns: 8.653px
//
// Can be used with ceil(round up) or floor(round down)
// font-size: floor( modular-scale(14px, 1, 1.618) ); // returns: 22px
// font-size: ceil( modular-scale(14px, 1, 1.618) ); // returns: 23px
// }
//
// modularscale.com

@function golden-ratio($value, $increment) {
@return modular-scale($value, $increment, 1.618)
}

// div {
// font-size: golden-ratio(14px, 1); // returns: 22.652px
// }
//
// goldenratiocalculator.com

1 comment on commit 5bdaa07

@ldexterldesign
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

https://twitter.com/ldexterldesign/status/346934986433236992

Big up, thanks for this :)

Best regards,

Please sign in to comment.