From: harry Date: Fri, 24 Feb 2017 11:00:40 +0000 (+0530) Subject: Renamed(and recoded) font typescale to typescale X-Git-Tag: v6.4.0-rc1~23^2~20^2~25 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=9d9316e8e973e824bb7545f3f9eebcb349b636ba;p=thirdparty%2Ffoundation%2Ffoundation-sites.git Renamed(and recoded) font typescale to typescale `.font-h1` => `.h1` and so on like other frameworks! --- diff --git a/docs/pages/prototyping.md b/docs/pages/prototyping.md index e7f2f16ef..e8dc23d0b 100644 --- a/docs/pages/prototyping.md +++ b/docs/pages/prototyping.md @@ -197,17 +197,17 @@ You can use font styling to style your text. You can change the font styling by --- -## Font Typescale +## Typescale Adjust font-size by overriding an element’s default size. ```html_example -

Lorem Ipsum Dolor

-

Lorem Ipsum Dolor

-

Lorem Ipsum Dolor

-

Lorem Ipsum Dolor

-

Lorem Ipsum Dolor

-

Lorem Ipsum Dolor

+

Lorem Ipsum Dolor

+

Lorem Ipsum Dolor

+

Lorem Ipsum Dolor

+

Lorem Ipsum Dolor

+

Lorem Ipsum Dolor

+

Lorem Ipsum Dolor

``` --- @@ -221,23 +221,23 @@ Adjust font-size by overriding an element’s default size. #### Unordered Lists ```html - - - - + + + + ``` #### Ordered Lists ```html -
-
-
-
-
-
-
-
+
    +
      +
        +
          +
            +
              +
                +
                  ``` --- diff --git a/scss/prototype/_typescale.scss b/scss/prototype/_typescale.scss index 7b807e8d0..68698d25f 100644 --- a/scss/prototype/_typescale.scss +++ b/scss/prototype/_typescale.scss @@ -11,7 +11,7 @@ @include breakpoint($size) { @each $header, $header-defs in $headers { $font-size-temp: 1rem; - .font-#{$header} { + .#{$header} { @extend #{$header}; } } diff --git a/test/visual/prototype/font-typescale.html b/test/visual/prototype/typescale.html similarity index 67% rename from test/visual/prototype/font-typescale.html rename to test/visual/prototype/typescale.html index 139504d1f..269f871e0 100644 --- a/test/visual/prototype/font-typescale.html +++ b/test/visual/prototype/typescale.html @@ -11,12 +11,12 @@

                   

                  -

                  Font-H1: Lorem Ipsum Dolor

                  -

                  Font-H2: Lorem Ipsum Dolor

                  -

                  Font-H3: Lorem Ipsum Dolor

                  -

                  Font-H4: Lorem Ipsum Dolor

                  -

                  Font-H5: Lorem Ipsum Dolor

                  -

                  Font-H6: Lorem Ipsum Dolor

                  +

                  Lorem Ipsum Dolor

                  +

                  Lorem Ipsum Dolor

                  +

                  Lorem Ipsum Dolor

                  +

                  Lorem Ipsum Dolor

                  +

                  Lorem Ipsum Dolor

                  +

                  Lorem Ipsum Dolor