Make it mobile-first

Basically cut out else branches and re-introduce default values for
margin-top and margin-bottom. Update of docs.

diff --git a/docs/pages/typography-base.md b/docs/pages/typography-base.md
index 26b71661ee09029c0f2bbe7cc3d04179e1041d59..f7cb0863cf56009046f9f790dffa3adf343e0acf 100644 (file)
--- a/docs/pages/typography-base.md
+++ b/docs/pages/typography-base.md
@@ -112,9 +112,9 @@ $header-styles: (
 );
 ```
 
-The values for `'font-size'`/`'fs'`, `'margin-top'`/`'mt'` and `'margin-bottom'`/`'mb'` are transformed into 'rem's. You can use units, but if you don't, we assume that you mean 'px'. If you do not set the keys `'font-size'`/`'fs'` defaults to `1rem`, `'margin-top'`/`'mt'` to `0` and `'margin-bottom'`/`'mb'` tp `$header-margin-bottom`.
+The values for `'font-size'`/`'fs'`, `'margin-top'`/`'mt'` and `'margin-bottom'`/`'mb'` are transformed into 'rem's. You can use any unit, but if you don't, we assume that you mean 'px'. If you do not set the keys `'font-size'`/`'fs'` defaults to `1rem`, `'margin-top'`/`'mt'` to `0` and `'margin-bottom'`/`'mb'` tp `$header-margin-bottom` for size `'small'`. Thereafter the values for a larger size are inherited from the values of the smaller size.
 
-The value for `'line-height'`/`'lh'` is transformed into a unitless number, that expresses the line-height relative to the fonts-size. You can also input any unit. If you don't, we assume that for numbers smaller than 10, you mean a typical relative line-height. However, if you put in anything larger than 10, we assume you mean 'px', since we have not yet seen relative line-heights that were larger than 10. If you do not set `'line-height'`/`'lh'` it defaults to `$header-lineheight`. 
+The value for `'line-height'`/`'lh'` is transformed into a unitless number, that expresses the line-height relative to the fonts-size. You can also input any unit. If you don't, we assume that for numbers smaller than 10, you mean a typical relative line-height. However, if you put in anything larger than 10, we assume you mean 'px', since we have not yet seen relative line-heights that were larger than 10. If you do not set `'line-height'`/`'lh'` it defaults to `$header-lineheight` for size `'small'`. Thereafter the value for a larger size is inherited from the values of the smaller size.
 
 Warning. The `$header-styles` map has replaced `$header-sizes` map in version 6.3. `$header-styles` map is a more general map than `$header-sizes`. `$header-sizes` map is still working and is used to initialize the `$header-styles` map. In a future version `$header-sizes` is going to be depreciated.
 

diff --git a/scss/typography/_base.scss b/scss/typography/_base.scss
index 2639cd13d4d13d18179f7dbfe4f9e867c4cf1331..aba1bb650921fbec5a96b8f380ece102dcc0258a 100644 (file)
--- a/scss/typography/_base.scss
+++ b/scss/typography/_base.scss
@@ -309,6 +309,8 @@ $abbr-underline: 1px dotted $black !default;
   h4,
   h5,
   h6 {
+    margin-top: 0;
+    margin-bottom: $header-margin-bottom;
     font-family: $header-font-family;
     font-style: $header-font-style;
     font-weight: $header-font-weight;
@@ -317,31 +319,29 @@ $abbr-underline: 1px dotted $black !default;
     text-rendering: $header-text-rendering;
 
     small {
-      line-height: 0;
       color: $header-small-font-color;
     }
   }
 
   // Heading styles
-   @each $size, $headers in $header-styles {
+  @each $size, $headers in $header-styles {
     @include breakpoint($size) {
       @each $header, $header-defs in $headers {
         $font-size-temp: 1rem;
         #{$header} {
+
           @if map-has-key($header-defs, margin-top) {
             margin-top: rem-calc(map-get($header-defs, margin-top));
           } @else if map-has-key($header-defs, mt) {
             margin-top: rem-calc(map-get($header-defs, mt));
-          } @else {
-            margin-top: 0;
-          }
+          } 
+
           @if map-has-key($header-defs, margin-bottom) {
             margin-bottom: rem-calc(map-get($header-defs, margin-bottom));
           } @else if map-has-key($header-defs, mb) {
             margin-bottom: rem-calc(map-get($header-defs, mb));
-          } @else {
-            margin-bottom: rem-calc($header-margin-bottom);
-          }
+          } 
+
 
           @if map-has-key($header-defs, font-size) {
             $font-size-temp: rem-calc(map-get($header-defs, font-size));
@@ -349,16 +349,14 @@ $abbr-underline: 1px dotted $black !default;
           } @else if map-has-key($header-defs, fs) {
             $font-size-temp: rem-calc(map-get($header-defs, fs));
             font-size: $font-size-temp;
-          } @else {
-            font-size: $font-size-temp;
-          }
+          } 
+
           @if map-has-key($header-defs, line-height) {
             line-height: unitless-calc(map-get($header-defs, line-height), $font-size-temp);
           } @else if map-has-key($header-defs, lh) {
             line-height: unitless-calc(map-get($header-defs, lh), $font-size-temp);
-          } @else {
-            line-height: unitless-calc($header-lineheight, $font-size-temp);
-          }
+          } 
+
         }
       }
     }