]> git.ipfire.org Git - thirdparty/foundation/foundation-sites.git/commitdiff
Added font typescale!
authorharry <harmanmanchanda182@gmail.com>
Mon, 6 Feb 2017 20:32:36 +0000 (02:02 +0530)
committerharry <harmanmanchanda182@gmail.com>
Mon, 6 Feb 2017 20:32:36 +0000 (02:02 +0530)
docs/pages/prototyping.md
scss/prototype/_prototype.scss
scss/prototype/_typescale.scss [new file with mode: 0644]

index d460883bccc69b78fc890e88aab7871009c2f961..5066ffdcce64ff3b66b253b21c456a82cbdab271 100644 (file)
@@ -87,6 +87,21 @@ You can use font styling to style a text. You can change the font styling by add
 
 ---
 
+## Font Typescale
+
+Adjust font-size by overriding an element’s default size.
+
+```html_example
+<p class="font-h1">Lorem Ipsum Dolor</p>
+<p class="font-h2">Lorem Ipsum Dolor</p>
+<p class="font-h3">Lorem Ipsum Dolor</p>
+<p class="font-h4">Lorem Ipsum Dolor</p>
+<p class="font-h5">Lorem Ipsum Dolor</p>
+<p class="font-h6">Lorem Ipsum Dolor</p>
+```
+
+---
+
 ## List Styling
 
 <div class="primary callout">
index 5a3b3e6f55914cd26c9db0e548373a9b8a3fcfaf..23fde760866ba6ab43df8191b70be14d68bd6a6b 100644 (file)
@@ -6,6 +6,9 @@
 /// @group prototype
 ////
 
+// Typescale
+@import 'typescale';
+
 // Text utilities
 @import 'text-utilities';
 
@@ -40,6 +43,7 @@
 @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
new file mode 100644 (file)
index 0000000..49c8359
--- /dev/null
@@ -0,0 +1,20 @@
+// 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;
+        .font-#{$header} {
+          @extend #{$header};
+        }
+      }
+    }
+  }
+}
\ No newline at end of file