Move docs from prototype to helpers!

diff --git a/docs/pages/prototyping-utilities.md b/docs/pages/prototyping-utilities.md
index 89656753605b7cd1872e448bbc332ba64a9451ef..bbbb3205a664f3dc4495c9adeb6283fd0be14eb3 100644 (file)
--- a/docs/pages/prototyping-utilities.md
+++ b/docs/pages/prototyping-utilities.md
@@ -274,37 +274,6 @@ You can use font styling to style your text. You can change the font styling by
 
 ---
 
-## Typescale
-
-Adjust font-size by overriding an element’s default size. This can be useful to size a `<p>` or `<h1>` through `<h6>` using Foundation's existing header sizes.
-
-<div class="callout primary">
-  <p><strong>Especially useful because:</strong> It's important to avoid skipping heading levels when structuring your document, as it confuses screen readers. For example, after using an <code>&lt;h2&gt;</code> in your code, the next heading used should be either <code>&lt;h2&gt;</code> or <code>&lt;h3&gt;</code>. If you need a heading to look bigger or smaller to match a specific style, use CSS to override the default size.</p>
-</div>
-
-For headers:
-
-```html
-<h2 class="h1">Lorem Ipsum Dolor</h2>
-<h3 class="h2">Lorem Ipsum Dolor</h3>
-<h4 class="h3">Lorem Ipsum Dolor</h4>
-<h5 class="h4">Lorem Ipsum Dolor</h5>
-<h6 class="h5">Lorem Ipsum Dolor</h6>
-```
-
-For text:
-
-```html_example
-<p class="h1">Lorem Ipsum Dolor</p>
-<p class="h2">Lorem Ipsum Dolor</p>
-<p class="h3">Lorem Ipsum Dolor</p>
-<p class="h4">Lorem Ipsum Dolor</p>
-<p class="h5">Lorem Ipsum Dolor</p>
-<p class="h6">Lorem Ipsum Dolor</p>
-```
-
----
-
 ## List Styling
 
 <div class="primary callout">

diff --git a/docs/pages/typography-helpers.md b/docs/pages/typography-helpers.md
index 8eb8bbcf4341c231850da1e18233c017e7d09fe4..bcae05388ba4830cd6c5d788b01c3200d664be78 100644 (file)
--- a/docs/pages/typography-helpers.md
+++ b/docs/pages/typography-helpers.md
@@ -140,6 +140,37 @@ In Foundation, the `<ul>` is a bulleted list and `<ol>` is a numbered list by de
 
 ---
 
+## Typescale
+
+Adjust font-size by overriding an element’s default size. This can be useful to size a `<p>` or `<h1>` through `<h6>` using Foundation's existing header sizes.
+
+<div class="callout primary">
+  <p><strong>Especially useful because:</strong> It's important to avoid skipping heading levels when structuring your document, as it confuses screen readers. For example, after using an <code>&lt;h2&gt;</code> in your code, the next heading used should be either <code>&lt;h2&gt;</code> or <code>&lt;h3&gt;</code>. If you need a heading to look bigger or smaller to match a specific style, use CSS to override the default size.</p>
+</div>
+
+For headers:
+
+```html
+<h2 class="h1">Lorem Ipsum Dolor</h2>
+<h3 class="h2">Lorem Ipsum Dolor</h3>
+<h4 class="h3">Lorem Ipsum Dolor</h4>
+<h5 class="h4">Lorem Ipsum Dolor</h5>
+<h6 class="h5">Lorem Ipsum Dolor</h6>
+```
+
+For text:
+
+```html_example
+<p class="h1">Lorem Ipsum Dolor</p>
+<p class="h2">Lorem Ipsum Dolor</p>
+<p class="h3">Lorem Ipsum Dolor</p>
+<p class="h4">Lorem Ipsum Dolor</p>
+<p class="h5">Lorem Ipsum Dolor</p>
+<p class="h6">Lorem Ipsum Dolor</p>
+```
+
+---
+
 ## Statistics
 
 If you're building a dashboard, you might need to display some important numbers *real big*. Just add the `.stat` class to any element to amp up the font size.