Add text size classes

closes #743

diff --git a/docs/pages/typography.md b/docs/pages/typography.md
index e49be32b3308c22720c8abe22dacaa59ada0badd..2213a291bfb923cf56523d1adcac4e1c06b211e3 100644 (file)
--- a/docs/pages/typography.md
+++ b/docs/pages/typography.md
@@ -54,6 +54,26 @@ By inserting a `<small>` element into a header Foundation will scale the header
 
 ---
 
+## Text Sizes
+
+ You can change the size of text in paragraphs with `.text-` classes. These classes will apply to the large breakpoint as well as the small.
+
+ ```inky_example
+ <container>
+   <row>
+     <columns>
+       <p class="text-xs">Extra small</p>
+       <p class="text-sm">Small</p>
+       <p class="text-lg">Large</p>
+       <p class="text-xl">Extra large</p>
+       <p class="text-xxl">Extra extra large</p>
+     </columns>
+   </row>
+ </container>
+ ```
+
+ ---
+
 ## Links
 
 Links are very standard, and the color is preset to the Foundation primary color. [Learn more about Foundation's global colors](global.html).

diff --git a/scss/components/_typography.scss b/scss/components/_typography.scss
index 1b023b6236ec9bfd8fe7b7986369e51d059ccf1e..f0dfac41bb9fa51fe46bb9d7b541b5b576adc625 100755 (executable)
--- a/scss/components/_typography.scss
+++ b/scss/components/_typography.scss
@@ -82,6 +82,10 @@ $small-font-size: 80% !default;
 /// @type Color
 $small-font-color: $medium-gray !default;
 
+/// Default scaling coefficient for text sizes.
+/// @type Number
+$font-scale: 1.2 !default;
+
 /// Font size of lead paragraphs.
 /// @type Number
 $lead-font-size: $global-font-size * 1.25 !default;
@@ -292,6 +296,26 @@ p {
   }
 }
 
+.text-xs {
+  font-size: $global-font-size / ($font-scale * $font-scale);
+}
+
+.text-sm {
+  font-size: $global-font-size / $font-scale;
+}
+
+.text-lg {
+  font-size: $global-font-size * $font-scale;
+}
+
+.text-xl {
+  font-size: $global-font-size * ($font-scale * $font-scale);
+}
+
+.text-xxl {
+  font-size: $global-font-size * ($font-scale * $font-scale * $font-scale);
+}
+
 small,
 .small {
   font-size: $small-font-size;