Merge pull request #33 from ianrose/additional-ms-sizes

adds more default ms sizes
ianrose · Mar 29, 2015 · a37b549 · a37b549
2 parents 3bff516 + 3b4d133
commit a37b549
Show file tree

Hide file tree

Showing 8 changed files with 260 additions and 28 deletions.
diff --git a/_typesettings.scss b/_typesettings.scss
@@ -67,22 +67,24 @@ $base-em-font-size: 1em;
 // Generates modular scale values in Ems. [Note]If you need more size up and/or down
 // then add more sizes.
 // [1] One step down in the modular scale in EMs
-// [2] Two steps down in the modular scale in EMs
-// [3] Three steps down in the modular scale in EMs
-// [4] One step up in the modular scale in EMs
-// [5] Two steps up in the modular scale in EMs
-// [6] Three steps up in the modular scale in EMs
-// [7] Four steps up in the modular scale in EMs
+// [2] One step up in the modular scale in EMs
 $ms-down1: $base-em-font-size / $ms-ratio; // [1]
-$ms-down2: $ms-down1 /$ms-ratio; // [2]
-$ms-down3: $ms-down2 / $ms-ratio; // [3]
-$ms-up1: $base-em-font-size * $ms-ratio; // [4]
-$ms-up2: $ms-up1 * $ms-ratio; // [5]
-$ms-up3: $ms-up2 * $ms-ratio; // [6]
-$ms-up4: $ms-up3 * $ms-ratio; // [7]
+$ms-down2: $ms-down1 /$ms-ratio;
+$ms-down3: $ms-down2 / $ms-ratio;
+$ms-down4: $ms-down3 / $ms-ratio;
+$ms-up1: $base-em-font-size * $ms-ratio; // [2]
+$ms-up2: $ms-up1 * $ms-ratio;
+$ms-up3: $ms-up2 * $ms-ratio; 
+$ms-up4: $ms-up3 * $ms-ratio;
+$ms-up5: $ms-up4 * $ms-ratio;
+$ms-up6: $ms-up5 * $ms-ratio;
+$ms-up7: $ms-up6 * $ms-ratio;
+$ms-up8: $ms-up7 * $ms-ratio;
+$ms-up9: $ms-up8 * $ms-ratio;
+$ms-up10: $ms-up9 * $ms-ratio;
 
 // Warning text for when an integer is not used in rhythm functions
-$not-integer-txt: ' value breaks vertical rhythm. Use an interger (whole number) for $lines.';
+$not-integer-txt: ' value breaks vertical rhythm. Use an integer (whole number) for $lines.';
 
 //==============================================================================
 // Helper function(s)

diff --git a/_typesettings.styl b/_typesettings.styl
@@ -66,22 +66,24 @@ $base-em-font-size= 1em;
 // Generates modular scale values in Ems. [Note]If you need more size up and/or down
 // then add more sizes.
 // [1] One step down in the modular scale in EMs
-// [2] Two steps down in the modular scale in EMs
-// [3] Three steps down in the modular scale in EMs
-// [4] One step up in the modular scale in EMs
-// [5] Two steps up in the modular scale in EMs
-// [6] Three steps up in the modular scale in EMs
-// [7] Four steps up in the modular scale in EMs
+// [2] One step up in the modular scale in EMs
 $ms-down1= $base-em-font-size / $ms-ratio; // [1]
-$ms-down2= $ms-down1 /$ms-ratio; // [2]
-$ms-down3= $ms-down2 / $ms-ratio; // [3]
-$ms-up1= $base-em-font-size * $ms-ratio; // [4]
-$ms-up2= $ms-up1 * $ms-ratio; // [5]
-$ms-up3= $ms-up2 * $ms-ratio; // [6]
-$ms-up4= $ms-up3 * $ms-ratio; // [7]
+$ms-down2= $ms-down1 /$ms-ratio;
+$ms-down3= $ms-down2 / $ms-ratio; 
+$ms-down4= $ms-down3 / $ms-ratio; 
+$ms-up1= $base-em-font-size * $ms-ratio; // [2]
+$ms-up2= $ms-up1 * $ms-ratio;
+$ms-up3= $ms-up2 * $ms-ratio;
+$ms-up4= $ms-up3 * $ms-ratio;
+$ms-up5= $ms-up4 * $ms-ratio;
+$ms-up6= $ms-up5 * $ms-ratio;
+$ms-up7= $ms-up6 * $ms-ratio;
+$ms-up8= $ms-up7 * $ms-ratio;
+$ms-up9= $ms-up8 * $ms-ratio;
+$ms-up10= $ms-up9 * $ms-ratio;
 
 // Warning text for when an integer is not used in rhythm functions
-$not-integer-txt= ' value breaks vertical rhythm. Use an interger (whole number) for $lines.';
+$not-integer-txt= ' value breaks vertical rhythm. Use an integer (whole number) for $lines.';
 
 //==============================================================================
 // Helper function(s)

diff --git a/test/index.html b/test/index.html
@@ -26,6 +26,22 @@ <h4>Heading 4</h4>
 <h5>Heading 5</h5>
 <h6>Heading 6</h6>
 
+<div class="ms-up10">Scale</div>
+<div class="ms-up9">Scale</div>
+<div class="ms-up8">Scale</div>
+<div class="ms-up7">Scale</div>
+<div class="ms-up6">Scale</div>
+<div class="ms-up5">Scale</div>
+<div class="ms-up4">Scale</div>
+<div class="ms-up3">Scale</div>
+<div class="ms-up2">Scale</div>
+<div class="ms-up1">Scale</div>
+<div class="base-font-size">Scale</div>
+<div class="ms-down1">Scale</div>
+<div class="ms-down2">Scale</div>
+<div class="ms-down3">Scale</div>
+<div class="ms-down4">Scale</div>
+
 <small class="to-top"><a href="#top">[top]</a></small>
 <hr/>
 

diff --git a/test/scss/styles.css b/test/scss/styles.css
@@ -163,3 +163,59 @@ hr {
 
 .div {
   margin-bottom: 0.215625em; }
+
+.ms-up10 {
+  line-height: 1;
+  font-size: 31.9517091765em; }
+
+.ms-up9 {
+  line-height: 1;
+  font-size: 22.5966825859em; }
+
+.ms-up8 {
+  line-height: 1;
+  font-size: 15.9806807538em; }
+
+.ms-up7 {
+  line-height: 1;
+  font-size: 11.3017544228em; }
+
+.ms-up6 {
+  line-height: 1;
+  font-size: 7.9927541887em; }
+
+.ms-up5 {
+  line-height: 1;
+  font-size: 5.6525842918em; }
+
+.ms-up4 {
+  line-height: 1;
+  font-size: 3.9975843648em; }
+
+.ms-up3 {
+  line-height: 1;
+  font-size: 2.827145944em; }
+
+.ms-up2 {
+  line-height: 1;
+  font-size: 1.999396em; }
+
+.ms-up1 {
+  line-height: 1;
+  font-size: 1.414em; }
+
+.ms-down1 {
+  line-height: 1;
+  font-size: 0.7072135785em; }
+
+.ms-down2 {
+  line-height: 1;
+  font-size: 0.5001510456em; }
+
+.ms-down3 {
+  line-height: 1;
+  font-size: 0.3537136108em; }
+
+.ms-down4 {
+  line-height: 1;
+  font-size: 0.2501510684em; }
diff --git a/test/scss/styles.scss b/test/scss/styles.scss
@@ -7,5 +7,75 @@ $base-font-size: 16px;
 }
 
 .div {
-  margin-bottom: emRhythm(2.3, 4, false);
+  margin-bottom: emRhythm(2.3, 4, true);
 }
+
+.ms-up10 {
+  line-height: 1;
+  font-size: $ms-up10;
+}
+
+.ms-up9 {
+  line-height: 1;
+  font-size: $ms-up9;
+}
+
+.ms-up8 {
+  line-height: 1;
+  font-size: $ms-up8;
+}
+
+.ms-up7 {
+  line-height: 1;
+  font-size: $ms-up7;
+}
+
+.ms-up6 {
+  line-height: 1;
+  font-size: $ms-up6;
+}
+
+.ms-up5 {
+  line-height: 1;
+  font-size: $ms-up5;
+}
+
+.ms-up4 {
+  line-height: 1;
+  font-size: $ms-up4;
+}
+
+.ms-up3 {
+  line-height: 1;
+  font-size: $ms-up3;
+}
+
+.ms-up2 {
+  line-height: 1;
+  font-size: $ms-up2;
+}
+
+.ms-up1 {
+  line-height: 1;
+  font-size: $ms-up1;
+}
+
+.ms-down1 {
+  line-height: 1;
+  font-size: $ms-down1;
+}
+
+.ms-down2 {
+  line-height: 1;
+  font-size: $ms-down2;
+}
+
+.ms-down3 {
+  line-height: 1;
+  font-size: $ms-down3;
+}
+
+.ms-down4 {
+  line-height: 1;
+  font-size: $ms-down4;
+}
diff --git a/test/styl.html b/test/styl.html
@@ -26,6 +26,22 @@ <h4>Heading 4</h4>
 <h5>Heading 5</h5>
 <h6>Heading 6</h6>
 
+<div class="ms-up10">Scale</div>
+<div class="ms-up9">Scale</div>
+<div class="ms-up8">Scale</div>
+<div class="ms-up7">Scale</div>
+<div class="ms-up6">Scale</div>
+<div class="ms-up5">Scale</div>
+<div class="ms-up4">Scale</div>
+<div class="ms-up3">Scale</div>
+<div class="ms-up2">Scale</div>
+<div class="ms-up1">Scale</div>
+<div class="base-font-size">Scale</div>
+<div class="ms-down1">Scale</div>
+<div class="ms-down2">Scale</div>
+<div class="ms-down3">Scale</div>
+<div class="ms-down4">Scale</div>
+
 <small class="to-top"><a href="#top">[top]</a></small>
 <hr/>
 

diff --git a/test/styl/styles.css b/test/styl/styles.css
diff --git a/test/styl/styles.styl b/test/styl/styles.styl
@@ -7,3 +7,73 @@
 .div {
   margin-bottom: emRhythm(2.3, 4, false);
 }
+
+.ms-up10 {
+  line-height: 1;
+  font-size: $ms-up10;
+}
+
+.ms-up9 {
+  line-height: 1;
+  font-size: $ms-up9;
+}
+
+.ms-up8 {
+  line-height: 1;
+  font-size: $ms-up8;
+}
+
+.ms-up7 {
+  line-height: 1;
+  font-size: $ms-up7;
+}
+
+.ms-up6 {
+  line-height: 1;
+  font-size: $ms-up6;
+}
+
+.ms-up5 {
+  line-height: 1;
+  font-size: $ms-up5;
+}
+
+.ms-up4 {
+  line-height: 1;
+  font-size: $ms-up4;
+}
+
+.ms-up3 {
+  line-height: 1;
+  font-size: $ms-up3;
+}
+
+.ms-up2 {
+  line-height: 1;
+  font-size: $ms-up2;
+}
+
+.ms-up1 {
+  line-height: 1;
+  font-size: $ms-up1;
+}
+
+.ms-down1 {
+  line-height: 1;
+  font-size: $ms-down1;
+}
+
+.ms-down2 {
+  line-height: 1;
+  font-size: $ms-down2;
+}
+
+.ms-down3 {
+  line-height: 1;
+  font-size: $ms-down3;
+}
+
+.ms-down4 {
+  line-height: 1;
+  font-size: $ms-down4;
+}