Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Merge remote branch 'frankzilla/modular-scale-mixin'

  • Loading branch information...
commit 96659a2f75f6ec8d1f0b1617c32794be1e42c74a 2 parents c0a6331 + 7d701f5
Phil LaPier authored
View
2  app/assets/stylesheets/_bourbon.scss
@@ -1,6 +1,6 @@
// Custom Functions
@import "functions/deprecated-webkit-gradient";
-@import "functions/golden-ratio";
+@import "functions/modular-scale";
@import "functions/grid-width";
@import "functions/tint-shade";
View
31 app/assets/stylesheets/functions/_golden-ratio.scss
@@ -1,31 +0,0 @@
-@function golden-ratio($value, $increment) {
- @if $increment > 0 {
- @for $i from 1 through $increment {
- $value: ($value * 1.618);
- }
- }
-
- @if $increment < 0 {
- $increment: abs($increment);
- @for $i from 1 through $increment {
- $value: ($value / 1.618);
- }
- }
-
- @return $value;
-}
-
-// div {
-// Increment Up GR with positive value
-// font-size: golden-ratio(14px, 1); // returns: 22.652px
-//
-// Increment Down GR with negative value
-// font-size: golden-ratio(14px, -1); // returns: 8.653px
-//
-// Can be used with ceil(round up) or floor(round down)
-// font-size: floor( golden-ratio(14px, 1) ); // returns: 22px
-// font-size: ceil( golden-ratio(14px, 1) ); // returns: 23px
-// }
-//
-// modularscale.com
-// goldenratiocalculator.com
View
40 app/assets/stylesheets/functions/_modular_scale.scss
@@ -0,0 +1,40 @@
+@function modular-scale($value, $increment, $ratio) {
+ @if $increment > 0 {
+ @for $i from 1 through $increment {
+ $value: ($value * $ratio);
+ }
+ }
+
+ @if $increment < 0 {
+ $increment: abs($increment);
+ @for $i from 1 through $increment {
+ $value: ($value / $ratio);
+ }
+ }
+
+ @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
View
3  readme.md
@@ -92,13 +92,14 @@ Bourbon aims to provide support for CSS3 properties that are not yet fully suppo
# All Supported Functions, Mixins, and Addons
-[View the Bourbon documentation](http://thoughtbot.com/bourbon)
+[View the Bourbon documentation](http://thoughtbot.com/bourbon)
*@ denotes a mixin and must be prefaced with @include*
#Functions
--------------------------------
compact(*args)
+ modular-scale(*args)
golden-ratio(*args)
grid-width(*args)
linear-gradient(*args)
Please sign in to comment.
Something went wrong with that request. Please try again.