modular-scale 0.0.2 → 0.0.3

data/README.mdown

@@ -1,6 +1,6 @@
 # Sassy Modular Scale
 
-## A Sass mixin to calculate the incremental values of the modular scale.
+## Put down the calculator and let Sass do the work.
 
 Sassy Modular Scale is a Sass based mixin that calculates the incremental values of the modular scale in proportion to a set size and ratio. It was inspired by and adapted from Tim Brown's modularscale.com.
 
@@ -27,39 +27,74 @@ Sassy Modular Scale can be used as a function, mixin or a mixin that generates a
 
 Examples using the Sass syntax:
 
-    // Use as a function. Fill in the multiple, base-size, and ratio
-    height: modular-scale(7, 14px, $golden)
-    
-    // Use as a mixin. Fill in the property, multiple, base-size, and ratio
-    +modular-scale(line-height, 1, 14px, $golden)
-    
-    // This method will generate a range of classes to `@extend`
-    +modular-scale-classes(6)
+```sass
+// Use as a function. Fill in the multiple, base-size, and ratio
+height: modular-scale(7, 14px, $golden)
 
-    [role="main"]
-      h1
-        @extend .ms-2
-      h2
-        @extend .ms-1
-      h3
-        @extend .ms-0
+// Use as a mixin. Fill in the property, multiple, base-size, and ratio
++modular-scale(line-height, 1, 14px, $golden)
 
-Examples using the SCSS syntax:
+// This method will generate a range of classes to `@extend`
++modular-scale-classes(6)
 
-    // Use as a function. Fill in the multiple, base-size, and ratio
-    height: modular-scale(7, 14px, $golden);
+h1
+  @extend .ms-2
+h2
+  @extend .ms-1
+h3
+  @extend .ms-0
     
-    // Use as a mixin. Fill in the property, multiple, base-size, and ratio
-    @include modular-scale(line-height, 1, 14px, $golden);
+// You can also 'lace' multiple ratios together by 
+// passing them in as a list (space-separated)
+.lace
+  width: ms(7, 14px, $golden $fourth)
+  
+// You can also set the $base-size variable to a list
+// to interrelate two significant known sizes in your design
+// note: the starting point of the scale will always be the *lowest* value in this list
+.multibases 
+  width: ms(7, 14px 300px, $golden)
+
+// You can use multiple $base-sizes and multiple $ratios together
+.multibase-multiratio
+  width: ms(7, 14px 300px, $golden $fourth)
+```
+
+Examples using the SCSS syntax:
+
+```scss
+// Use as a function. Fill in the multiple, base-size, and ratio
+height: modular-scale(7, 14px, $golden);
+
+// Use as a mixin. Fill in the property, multiple, base-size, and ratio
+@include modular-scale(line-height, 1, 14px, $golden);
+
+// This method will generate a range of classes to `@extend`
+@include modular-scale-classes(6);
+
+h1 { @extend .ms-2; }
+h2 { @extend .ms-1; }
+h3 { @extend .ms-0; }
+
+// You can also 'lace' multiple ratios together by 
+// passing them in as a list (space-separated)
+.lace {
+  width: ms(7, 14px, $golden $fourth);
+}
 
-    // This method will generate a range of classes to `@extend`
-    @ionclude modular-scale-classes(6);
+// You can also set the $base-size variable to a list
+// to interrelate two significant known sizes in your design
+// note: the starting point of the scale will always be the *lowest* value in this list
+.multibases {
+  width: ms(7, 14px 300px, $golden);
+}
+  
+// You can use multiple $base-sizes and multiple $ratios together
+.multibase-multiratio {
+  width: ms(7, 14px 300px, $golden $fourth);
+}
+```
 
-    [role="main"] {
-      h1 { @extend .ms-2; }
-      h2 { @extend .ms-1; }
-      h3 { @extend .ms-0; }
-    }
 
 ## Ratios
 
@@ -84,7 +119,7 @@ Sassy Modular Scale was adapted from [modularscale.com](http://modularscale.com/
 
 ## License
 
-Copyright (c) 2011 [Scott Kellum](http://www.scottkellum.com/) ([@scottkellum](http://twitter.com/scottkellum)), [Adam Stacoviak](http://adamstacoviak.com/) ([@adamstac](http://twitter.com/adamstac)) and [Mason Wendell](http://birdsandmonkeys.com/) ([@canarymason](http://twitter.com/canarymason))
+Copyright (c) 2011 [Scott Kellum](http://www.scottkellum.com/) ([@scottkellum](http://twitter.com/scottkellum)), [Adam Stacoviak](http://adamstacoviak.com/) ([@adamstac](http://twitter.com/adamstac)) and [Mason Wendell](http://thecodingdesigner.com/) ([@canarymason](http://twitter.com/canarymason))
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

data/lib/modular-scale.rb

@@ -3,7 +3,7 @@ Compass::Frameworks.register("modular-scale", :path => "#{File.dirname(__FILE__)
 
 module ModularScale
   
-  VERSION = "0.0.2"
+  VERSION = "0.0.3"
   DATE = "2011-08-14"
 
 end

data/stylesheets/_modular-scale.sass

@@ -20,22 +20,179 @@ $class-slug: ms !default
 
 // Modular Scale function
 @function modular-scale($multiple, $base-size, $ratio)
+  // return the $base-size if $multiple is zero
+  @if $multiple == 0
+    @if type-of($base-size) == 'list'
+      $base-size: sort-list($base-size)
+      @return nth($base-size, 1)
+    // return just the simple $base-size value if it's not a list
+    @return $base-size
 
-  // On init, $modular-scale equals the default value of $base-size or the value passed to the function
-  $modular-scale: $base-size
+  // if multiple base-sizes are passed in as a list
+  // and multiple ratios are passed in as a list
+  // calculate values in using each base-size / ratio combination
+  @if type-of($base-size) == 'list' and type-of($ratio) == 'list'
+    @return ms-multibase-multiratio($multiple, $base-size, $ratio)
+    
+  // if multiple base-sizes are passed in as a list
+  // calculate values in using each base-size
+  @if type-of($base-size) == 'list' and type-of($ratio) == 'number'
+    @return ms-multibase($multiple, $base-size, $ratio)
+      
+  // if multiple ratios are passed in as a list
+  // calculate values in using each ratio
+  @if type-of($base-size) == 'number' and type-of($ratio) == 'list'
+    @return ms-multiratio($multiple, $base-size, $ratio)
+    
+  // If there are no lists just run the simple function
+  @return exponent($ratio, $multiple) * $base-size
+  
+  
+// calculate values in using each base-size / ratio combination
+@function ms-multibase-multiratio($multiple, $base-size, $ratio)
+  // start with an empty list to place all values in
+  $scale-values: ()
+  // make sure base sizes are in ascending order
+  $base-size: sort-list($base-size)
+  // take each base-size in turn
+  $k: 1
+  @while $k <= length($base-size)
+    // add each $base-size to the list except the first
+    @if $k > 1
+      $scale-values: append($scale-values, nth($base-size, $k))
+    // take each ratio in turn
+    $j: 1
+    @while $j <= length($ratio)
+      // reset $modular-scale for each set
+      $modular-scale: nth($base-size, $k)
+      // do the scale for each base-size using this ratio 
+      @if $multiple > 0
+        // up $multiple times
+        // and add the result to $scale-values        
+        @for $i from 1 through $multiple
+          $modular-scale: exponent(nth($ratio, $j), $i) * nth($base-size, $k)
+          $scale-values: append($scale-values, $modular-scale)
+        // and down until the value is lower than the lowest $base-size
+        // and add the result to $scale-values
+        $i: -1
+        $modular-scale: nth($base-size, $k)
+        @while $modular-scale >= nth($base-size, 1)
+          $modular-scale: exponent(nth($ratio, $j), $i) * nth($base-size, $k)
+          $scale-values: append($scale-values, $modular-scale)
+          $i: $i - 1
+      @if $multiple < 0
+        // do the scale down for each set to below 1px
+        $i: -1
+        $modular-scale: nth($base-size, $k)
+        @while $modular-scale > 1
+          $modular-scale: exponent(nth($ratio, $j), $i) * nth($base-size, $k)
+          $scale-values: append($scale-values, $modular-scale)
+          $i: $i - 1
+      $j: $j + 1
+    $k: $k + 1
+  // return trimmed and sorted final list
+  @return trim-sort($multiple, $scale-values, $base-size)
+    
+    
+// calculate values in using each base-size
+@function ms-multibase($multiple, $base-size, $ratio)
+  // start with an empty list to place all values in
+  $scale-values: ()
+  // make sure base sizes are in ascending order
+  $base-size: sort-list($base-size)
+  // take each base-size in turn
+  $k: 1
+  @while $k <= length($base-size)
+    // add each $base-size to the list except the first
+    @if $k > 1
+      $scale-values: append($scale-values, nth($base-size, $k))
+    // reset $modular-scale for each set
+    $modular-scale: nth($base-size, $k)
+    // do the scale for each base-size using this ratio 
+    @if $multiple > 0
+      // up $multiple times
+      // and add the result to $scale-values        
+      @for $i from 1 through $multiple
+        $modular-scale: exponent($ratio, $i) * nth($base-size, $k)
+        $scale-values: append($scale-values, $modular-scale)
+      // and down until the value is lower than the lowest $base-size
+      // and add the result to $scale-values
+      $i: -1
+      $modular-scale: nth($base-size, $k)
+      @while $modular-scale >= nth($base-size, 1)
+        $modular-scale: exponent($ratio, $i) * nth($base-size, $k)
+        $scale-values: append($scale-values, $modular-scale)
+        $i: $i - 1
+    @if $multiple < 0
+      // do the scale down for each set to below 1px
+      $i: -1
+      $modular-scale: nth($base-size, $k)
+      @while $modular-scale > 1
+        $modular-scale: exponent($ratio, $i) * nth($base-size, $k)
+        $scale-values: append($scale-values, $modular-scale)
+        $i: $i - 1
+    $k: $k + 1
+  // return trimmed and sorted final list
+  @return trim-sort($multiple, $scale-values, $base-size)
 
+    
+// calculate values in using each ratio
+@function ms-multiratio($multiple, $base-size, $ratio)
+  // start with an empty list to place all values in
+  $scale-values: ()
   // If $multiple is a positive integer (up the scale)
   @if $multiple > 0
-    @for $i from 1 through $multiple
-      $modular-scale: $modular-scale * $ratio
-
+    // take each ratio in turn
+    $j: 1
+    @while $j <= length($ratio)
+      // reset $modular-scale for each set
+      $modular-scale: $base-size
+      // do the scale using this ratio thru the multiple, and add the result to $scale-values
+      @for $i from 1 through $multiple
+        $modular-scale: exponent(nth($ratio, $j), $i) * $base-size
+        $scale-values: append($scale-values, $modular-scale)
+      $j: $j + 1
+    // sort acsending      
+    $scale-values: sort-list($scale-values)
+    // return the final value using the laced list
+    @return nth($scale-values, $multiple)
   // If $multiple is a negative integer (down the scale)
   @if $multiple < 0
-    @for $i from 1 through ($multiple * -1)
-      $modular-scale: $modular-scale / $ratio
-
-  // Return the new or unchanged value of $modular-scale
-  @return $modular-scale
+    // take each ratio in turn
+    $j: 1
+    @while $j <= length($ratio)
+      // reset $modular-scale for each set
+      $modular-scale: $base-size
+      // do the scale using this ratio thru the multiple, and add the result to $scale-values
+      @for $i from 1 through ($multiple * -1)
+        $modular-scale: exponent(nth($ratio, $j), -$i) * $base-size
+        $scale-values: append($scale-values, $modular-scale)
+      $j: $j + 1
+    // sort decending
+    $scale-values: sort-list($scale-values, 'dec')
+    // return the final value using the laced list
+    @return nth($scale-values, $multiple * -1)
+    
+    
+// trim and sort the final list
+@function trim-sort($multiple, $scale-values, $base-size)
+  @if $multiple > 0
+    // trim list so we can count from the lowest $base-size
+    $scale-values: trim-list($scale-values, nth($base-size, 1))
+    // sort acsending      
+    $scale-values: sort-list($scale-values)
+    // return the final value using the laced list
+    @return nth($scale-values, $multiple)
+  @else
+    // trim list so we can count from the lowest $base-size
+    $scale-values: trim-list($scale-values, nth($base-size, 1), 'dec')
+    // sort acsending      
+    $scale-values: sort-list($scale-values, 'dec')
+    // return the final value using the laced list
+    @return nth($scale-values, -$multiple)
+  
+  
+/////////////////////////////////////////////////////////////////////////
   
 // Shortcut
 @function ms($multiple, $base-size, $ratio)
@@ -48,9 +205,90 @@ $class-slug: ms !default
   #{$property}: modular-scale($multiple, $base-size, $ratio)
 
 // Classes Mixin
-=modular-scale-classes($multiple, $property)
-
+=modular-scale-classes($multiple, $property, $class-slug, $base-size, $ratio)
   // Loop from 0 through the value of $multiple and generate a range of classes
   @for $i from 0 through $multiple
     .#{$class-slug}-#{$i}
-      +modular-scale($property, $i)
+      +modular-scale($property, $i, $base-size, $ratio)
+
+/////////////////////////////////////////////////////////////////////////
+
+
+// Sass exponent support
+@function exponent($base, $exponent)
+  // reset value
+  $value: $base
+  // positive intergers get multiplied
+  @if $exponent > 1
+    @for $i from 2 through $exponent
+      $value: $value * $base
+  // negitive intergers get divided. A number divided by itself is 1
+  @if $exponent < 1
+    @for $i from 0 through -$exponent
+      $value: $value / $base
+  // return the last value written
+  @return $value
+
+
+// Sass list sorting support
+@function sort-list($list, $dir: 'asc')
+  // built-in list sorting in Sass would make this go away.
+  // declare some empty lists to put our new order and temporary values 
+  $new-order: ()
+  $temp: ()
+  // fill $temp with the contents of $list
+  $temp: join($temp, $list)
+  // if sorting ascending
+  @if $dir == 'asc'
+    // loop through all values in $list
+    @for $i from 1 through length($list)
+      // impossibly high starter value to compare
+      $low: 1000000
+      // check for lowest value in $temp
+      @for $j from 1 through length($temp)
+        @if nth($temp, $j) < $low
+          $low: nth($temp, $j)
+      // add lowest value to $new-order
+      $new-order: append($new-order, $low)
+      // empty $temp for the next comparison
+      $temp: ()
+      // re-populate $temp with remaining values to sort
+      @for $k from 1 through length($list)
+        @if nth($list, $k) > $low
+          $temp: append($temp, nth($list, $k))
+  @if $dir == 'dec'
+    // loop through all values in $list
+    @for $i from 1 through length($list)
+      // 0 starter value
+      $high: 0
+      // check for highest value in $temp
+      @for $j from 1 through length($temp)
+        @if nth($temp, $j) > $high
+          $high: nth($temp, $j)
+      $new-order: append($new-order, $high)
+      // empty $temp for the next comparison
+      $temp: ()
+      // re-populate $temp with remaining values to sort
+      @for $k from 1 through length($list)
+        @if nth($list, $k) < $high
+          $temp: append($temp, nth($list, $k))
+  @return $new-order
+  
+  
+// Sass list trimming support
+@function trim-list($list, $start, $dir: 'asc')
+  // built-in list trimming in Sass would make this go away.
+  // declare some empty lists to put our trimmed values
+  $trimmed: ()
+  // if sorting ascending
+  @if $dir == 'asc'
+    // loop through all values in $list
+    @for $i from 1 through length($list)
+      @if nth($list, $i) >= $start
+        $trimmed: append($trimmed, nth($list, $i))
+  @if $dir == 'dec'
+    // loop through all values in $list
+    @for $i from 1 through length($list)
+      @if nth($list, $i) <= $start
+        $trimmed: append($trimmed, nth($list, $i))
+  @return $trimmed

metadata

@@ -2,7 +2,7 @@
 name: modular-scale
 version: !ruby/object:Gem::Version 
   prerelease: 
-  version: 0.0.2
+  version: 0.0.3
 platform: ruby
 authors: 
 - Scott Kellum
@@ -27,7 +27,7 @@ dependencies:
   version_requirements: *id001
 description: Sassy Modular Scale calculates the incremental values of the modular scale.
 email: 
-- scott@treesaver.net
+- scott@scottkellum.com
 - adam@stacoviak.com
 - mason@zivtech.com
 executables: []
@@ -53,7 +53,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
   requirements: 
   - - ">="
     - !ruby/object:Gem::Version 
-      hash: -2068545331778000288
+      hash: 2683294284608242582
       segments: 
       - 0
       version: "0"