Merge pull request #10351 from zurb/hotfix/add-typescale

Hotfix: Move typescale from prototype to typography and enable default!

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.

diff --git a/scss/prototype/_prototype.scss b/scss/prototype/_prototype.scss
index 2ca0bed9918761ec7cb8b54345fd3e764343a21f..c0189db78cdad5f4a8b978db8e4e3d4122b700ce 100644 (file)
--- a/scss/prototype/_prototype.scss
+++ b/scss/prototype/_prototype.scss
@@ -15,9 +15,6 @@
 // Rotate Mixin
 @import 'rotate';
 
-// Typescale
-@import 'typescale';
-
 // Text utilities
 @import 'text-utilities';
 
@@ -70,7 +67,6 @@
 @import 'spacing';
 
 @mixin foundation-prototype-classes {
-  @include foundation-prototype-typescale;
   @include foundation-prototype-text-utilities;
   @include foundation-prototype-text-transformation;
   @include foundation-prototype-text-decoration;

diff --git a/scss/prototype/_typescale.scss b/scss/prototype/_typescale.scss
deleted file mode 100644 (file)
index 68698d2..0000000
--- a/scss/prototype/_typescale.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
-// Licensed under MIT Open Source
-
-////
-/// @group prototype-typescale
-////
-
-@mixin foundation-prototype-typescale {
-       @each $size, $headers in $header-styles {
-    @include breakpoint($size) {
-      @each $header, $header-defs in $headers {
-        $font-size-temp: 1rem;
-        .#{$header} {
-          @extend #{$header};
-        }
-      }
-    }
-  }
-}

diff --git a/scss/typography/_base.scss b/scss/typography/_base.scss
index 394614e80f9ca294cc430d3034b4267fe88ad954..cb47594c89b957265cd3d3e388c6760ae564f2b2 100644 (file)
--- a/scss/typography/_base.scss
+++ b/scss/typography/_base.scss
@@ -306,12 +306,12 @@ $abbr-underline: 1px dotted $black !default;
   }
 
   // Headings
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
+  h1, .h1,
+  h2, .h2,
+  h3, .h3,
+  h4, .h4,
+  h5, .h5,
+  h6, .h6 {
     font-family: $header-font-family;
     font-style: $header-font-style;
     font-weight: $header-font-weight;
@@ -329,7 +329,7 @@ $abbr-underline: 1px dotted $black !default;
     @include breakpoint($size) {
       @each $header, $header-defs in $headers {
         $font-size-temp: 1rem;
-        #{$header} {
+        #{$header}, .#{$header} {
 
           @if map-has-key($header-defs, font-size) {
             $font-size-temp: rem-calc(map-get($header-defs, font-size));