Add automatic type scaling based on modular scales

.gitignore

@@ -0,0 +1,2 @@
+
+style/typecsset.css

README.md

@@ -63,15 +63,25 @@ This is the base line height you would like your project to take. Again, define
 this in pixels: Typecsset will convert it into a unitless value for you.
 
 This `$typecsset-base-line-height` value is the most important one in the whole
-library—it defines and underpins your whole vertical rhythm. Everything
+library - it defines and underpins your whole vertical rhythm. Everything
 (`margins`, `line-height`s, etc.) will be based upon units of this number in
 order to maintain a consistent and harmonious vertical rhythm.
 
-### `$typecsset-h[1–6]-size`
+### `$typecsset-h[1-6]-size`
 
 These settings, predictably, contain the desired font sizes for your headings
 one-through-six. Again, they are set in pixels because the library will pick
-them up and convert them into rems later on.
+them up and convert them into rems later on. *For automatic settings, see below.*
+
+### `$typecsset-auto-scale`
+
+This is a boolean toggle to allow your headings to be automatically scaled based on a modular scale. This is based on the principles outlined by [Tim Brown's aricle, "More Meaningful Typography"](http://alistapart.com/article/more-meaningful-typography).
+
+### `$typecsset-ratio`
+
+If you set `$typecsset-auto-scale = true`, you can also set the ratio at which your headings scale. The value of this can either be a list of two numbers (typically based on [musical intervals](http://en.wikipedia.org/wiki/Interval_(music\)) ) or a float(1.33). The default is 4,3 (a perfect fourth). See [Tim's aricle](http://alistapart.com/article/more-meaningful-typography) for some more useful intervals.
+
+*Note: 3,4 and 4,3 would result in the same scale. This is because Musical intervals are sometimes written in either order and a sub 1 scale would be fairly useless.*
 
 ### `$typecsset-indented-paragraphs`
 
@@ -198,3 +208,35 @@ background-image: url(http://basehold.it/i/#{$typecsset-baseline-size}); /* [3]
 
 [...]
 ```
+
+### `typecsset-scale()`
+
+This mixin takes a value and a property as in input and gives you a pixel and rem value based on your modular scale. The first value represents from where on your scale you want to pull.
+
+**Input:**
+
+```scss
+$typecsset-base-font-size:      16px;
+$typecsset-base-line-height:    24px;
+$typecsset-auto-scale:          true;
+$typecsset-ratio:               4,3;
+
+[...]
+
+.foo {
+    @include typecsset-scale(1, margin-left);
+}
+```
+
+**Output:**
+
+```css
+.foo {
+    margin-left: 21.3333px;
+    margin-left: 1.3333rem;
+}
+```
+
+As an added bonus, you can go down your scale as well by using negative numbers.
+
+*Note: If font-size is used, line-height will also be included*

typecsset.scss

@@ -34,16 +34,39 @@ $typecsset-h6-size:             18px !default;
 // Would you like indented (rather than spaced) paragraph delimiting?
 $typecsset-indented-paragraphs: false !default;
 
+// Would you like to automatically scale your Heading sizes?
+// (This can provide a more elegant typographic rhythm)
+$typecsset-auto-scale:          false !default;
+
+// Set the ratio by which your type should grow.
+// Accepts two numbers, representing a ratio, typically associated with
+// music intervals. You may also use floats (1.33).
+// Common intervals: Perfect fourth (4,3)[default], Perfect Fifth (3,2),
+// Perfect Octave (2,1), Major Third (5,4), Major Sixth (5,3).
+// The Golden Ratio is (1.618,1).
+$typecsset-ratio:               4,3   !default;
+
 // Would you like to show a baseline grid? This is handy during development.
 $typecsset-show-baseline:       false !default;
 
 // Do not modify these variables; they are internal settings upon which the
 // library depends.
 $typecsset-magic-number:        $typecsset-base-line-height;
 $typecsset-magic-ratio:         $typecsset-base-line-height / $typecsset-base-font-size;
-
-
-
+$typecsset-headings:            6,5,4,3,2,1;
+$typecsset-modular-scale:       0;
+
+//Checking for floats in $typecsset-ratio
+@if length($typecsset-ratio) == 2{
+// Making sure we don't have a ratio below 1.
+    @if nth($typecsset-ratio,1) < nth($typecsset-ratio,2){
+        $typecsset-modular-scale:   nth($typecsset-ratio, 2)/nth($typecsset-ratio, 1);
+    }@else{
+        $typecsset-modular-scale:   nth($typecsset-ratio, 1)/nth($typecsset-ratio, 2);
+    }
+} @else {
+    $typecsset-modular-scale:   $typecsset-ratio;
+}
 
 
 //------------------------------------\\
@@ -86,10 +109,45 @@ $typecsset-magic-ratio:         $typecsset-base-line-height / $typecsset-base-fo
     @return $number / ($number * 0 + 1);
 }
 
+// Exponent function used for modular scaling of type (removes Compass dependancy)
+@function exponent($base, $exponent){
+      $value: $base;
+      @if $exponent > 1{
+        @for $i from 2 through $exponent{
+          $value: $value * $base;
+        }
+      }
+      @if $exponent < 1{
+        @for $i from 0 through -$exponent{
+          $value: $value / $base;
+        }
+       }
+      @return ($value);
+}
 
+// Modular scale function to scale type up or down.
+// But first, we need strip base-type-size of its units.
+$stripped-base-font-size: typecsset-strip-units($typecsset-base-font-size);
+@function modular-scale($i){
+    @return exponent($typecsset-modular-scale, $i)*($stripped-base-font-size)*1px;
+}
 
-
-
+// This mixin can be used externally
+// by using @include modular-scale([scale number, property]);.
+@mixin typecsset-scale($i, $property){
+    @if $typecsset-auto-scale == false{
+        @warn "Please set $typecsset-auto-scale to true or else typecsset-scale is fairly meaningless.";
+    }
+    @if $property == "font-size"{
+        $font-size: modular-scale($i);
+        @include typecsset-font-size($font-size);
+    }
+    @else{
+        $m-scale: modular-scale($i);
+        #{$property}: $m-scale;
+        #{$property}: ($m-scale / $typecsset-base-font-size) * 1rem;
+    }
+}
 /*------------------------------------*\
     #SHARED
 \*------------------------------------*/
@@ -109,9 +167,6 @@ $typecsset-magic-ratio:         $typecsset-base-line-height / $typecsset-base-fo
 }
 
 
-
-
-
 /*------------------------------------*\
     #BASE
 \*------------------------------------*/
@@ -129,6 +184,8 @@ $typecsset-magic-ratio:         $typecsset-base-line-height / $typecsset-base-fo
  */
 }
 
+
+
 html {
     font-size: $typecsset-base-font-size / 16px + em; /* [1] */
     line-height: $typecsset-base-line-height / $typecsset-base-font-size; /* [2] */
@@ -154,6 +211,31 @@ body {
 /*------------------------------------*\
     #HEADINGS
 \*------------------------------------*/
+
+@if $typecsset-auto-scale == true {                         /* [1] */
+/**
+ * 1. If you've chosen to automatically scale your type, we set that up here.
+ * 2. Using heading numbers[6-1], we create a loop.
+ * 3. Use the current scale number to exponentially scale up our base-font-size.
+ * 4. Invert the current value of the loop($i) for an more traditionally ordered
+ *    output (h1,h2,h3,h4,h5,h6).
+ * 5. Use our new modular values for input into typecsset mixins to generate our
+ *    desired, modularly-scaled css.
+ */
+    @each $i in $typecsset-headings{                         /* [2] */
+            $font-size: modular-scale($i);                   /* [3] */
+            $current-heading: nth($typecsset-headings,$i);   /* [4] */
+                                                             /* [5] */
+            h#{$current-heading} {
+                @extend %typecsset-vertical-rhythm;
+                @include typecsset-font-size($font-size);
+            };
+            $i: $i + 1;
+    };
+
+}
+@else{
+
 h1 {
     @extend %typecsset-vertical-rhythm;
     @include typecsset-font-size($typecsset-h1-size);
@@ -183,7 +265,7 @@ h6 {
     @extend %typecsset-vertical-rhythm;
     @include typecsset-font-size($typecsset-h6-size);
 }
-
+}