Moved font-wide to font styling and added negative margin to docs.

diff --git a/docs/pages/prototyping.md b/docs/pages/prototyping.md
index b356f1d6d66ee1614c9c8a827d76fee793f38ac8..9b8f642d887cc97cfb3421ecba7fd1f83131b205 100644 (file)
--- a/docs/pages/prototyping.md
+++ b/docs/pages/prototyping.md
@@ -79,9 +79,10 @@ These `.rounded` classes helps to make an element round its corners. This will h
 
 ## Font Styling
 
-You can use font styling to style a text. You can change the font styling by adding `font-normal`, `font-bold`, `font-italic` to an element.
+You can use font styling to style a text. You can change the font styling by adding `font-normal`, `font-bold`, `font-italic` to an element. You can also wider the text of an element with `font-wide`.
 
 ```html_example
+<p class="font-wide">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
 <p class="font-normal">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
 <p class="font-bold">Perspiciatis tempore cumque, magni aspernatur, quidem. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse</p>
 <p class="font-italic">Lorem minus, placeat, cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.iure voluptas aliquam tempora neque?</p>
@@ -89,16 +90,6 @@ You can use font styling to style a text. You can change the font styling by add
 
 ---
 
-## Font Wide
-
-Wider the text of an element with `font-wide`.
-
-```html_example
-<p class="font-wide">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
-```
-
----
-
 ## Font Typescale
 
 Adjust font-size by overriding an element’s default size.
@@ -144,9 +135,9 @@ Adjust font-size by overriding an element’s default size.
 
 ---
 
-## Margin Helpers
+## Margin Helper Classes
 
-Generate spaces around the element with these easy to use margin classes. By default it supports `10`, `20`, `30`, `40` and `50`. You can add more values though, through Sass Variables.
+Generate spaces around the element with these easy to use margin classes. By default it  only supports `10`, `20`, `30`, `40` and `50`. You can add more values though, through Sass Variables.
 
 #### Margin (All Sides)
 
@@ -220,9 +211,85 @@ Generate spaces around the element with these easy to use margin classes. By def
 
 ---
 
-## Padding Helpers
+## Negative Margin
+
+Negative margins helps you to create complex layouts easily but please note that negative margins are not the answer for every single css so they should be applied with care. By default it only supports `10`, `20`, `30`, `40` and `50`. You can add more values though, through Sass Variables.
+
+#### Margin (All Sides)
+
+```html
+<div class="m-a-10n"></div>
+<div class="m-a-20n"></div>
+<div class="m-a-30n"></div>
+<div class="m-a-40n"></div>
+<div class="m-a-50n"></div>
+``` 
+
+#### Margin Top
+
+```html
+<div class="m-t-10n"></div>
+<div class="m-t-20n"></div>
+<div class="m-t-30n"></div>
+<div class="m-t-40n"></div>
+<div class="m-t-50n"></div>
+``` 
+
+#### Margin Bottom
+
+```html
+<div class="m-b-10n"></div>
+<div class="m-b-20n"></div>
+<div class="m-b-30n"></div>
+<div class="m-b-40n"></div>
+<div class="m-b-50n"></div>
+``` 
+
+#### Margin Left
+
+```html
+<div class="m-l-10n"></div>
+<div class="m-l-20n"></div>
+<div class="m-l-30n"></div>
+<div class="m-l-40n"></div>
+<div class="m-l-50n"></div>
+``` 
+
+#### Margin Right
+
+```html
+<div class="m-r-10n"></div>
+<div class="m-r-20n"></div>
+<div class="m-r-30n"></div>
+<div class="m-r-40n"></div>
+<div class="m-r-50n"></div>
+``` 
+
+#### Margin Left Right (Horizontal Axis)
+
+```html
+<div class="m-x-10n"></div>
+<div class="m-x-20n"></div>
+<div class="m-x-30n"></div>
+<div class="m-x-40n"></div>
+<div class="m-x-50n"></div>
+``` 
+
+#### Margin Top Bottom (Vertical Axis)
+
+```html
+<div class="m-y-10n"></div>
+<div class="m-y-20n"></div>
+<div class="m-y-30n"></div>
+<div class="m-y-40n"></div>
+<div class="m-y-50n"></div>
+``` 
+
+---
+
+## Padding Helper Classes
 
-Generate spaces around the content with these easy to use padding classes. By default it supports `10`, `20`, `30`, `40` and `50`. You can add more values though, through Sass Variables.
+Generate spaces around the content with these easy to use padding classes. By default it only supports `10`, `20`, `30`, `40` and `50`. You can add more values though, through Sass Variables.
 
 #### Padding (All Sides)
 

diff --git a/scss/prototype/_font-styling.scss b/scss/prototype/_font-styling.scss
index 029f0d433d2ffde4ad739ad9fe7b06e52ae5124c..7f7c4021f222e144006bb9b7e74fa9009b8aabb5 100644 (file)
--- a/scss/prototype/_font-styling.scss
+++ b/scss/prototype/_font-styling.scss
@@ -10,6 +10,14 @@
 /// @type Boolean
 $prototype-font-breakpoints: $global-prototype-breakpoints !default;
 
+/// Letter spacing for `.font-wide`
+/// @type Number
+$prototype-wide-letter-spacing: rem-calc(4px) !default;
+
+@mixin font-wide {
+  letter-spacing: $prototype-wide-letter-spacing;
+}
+
 @mixin font-normal {
   font-weight: $global-weight-normal;
 }
@@ -23,6 +31,10 @@ $prototype-font-breakpoints: $global-prototype-breakpoints !default;
 }
 
 @mixin foundation-prototype-font-styling {
+  .font-wide{
+    @include font-wide;
+  }
+
   .font-normal {
     @include font-normal;
   }
@@ -40,6 +52,10 @@ $prototype-font-breakpoints: $global-prototype-breakpoints !default;
     @each $size in $breakpoint-classes {
       @include breakpoint($size) {
         @if $size != $-zf-zero-breakpoint {
+          .#{$size}-font-wide{
+            @include font-wide;
+          }
+
           .#{$size}-font-normal {
             @include font-normal;
           }

diff --git a/scss/prototype/_typescale.scss b/scss/prototype/_typescale.scss
index 657810f925728b121f096a4a06d66e20a112e857..7b807e8d0760e838258d4b21b4c5d0ff7ab69c3c 100644 (file)
--- a/scss/prototype/_typescale.scss
+++ b/scss/prototype/_typescale.scss
@@ -6,14 +6,6 @@
 /// @group prototype-typescale
 ////
 
-/// Letter spacing for `.font-wide`
-/// @type Number
-$font-wide-letter-spacing: rem-calc(4px) !default;
-
-@mixin font-wide {
-  letter-spacing: $font-wide-letter-spacing;
-}
-
 @mixin foundation-prototype-typescale {
        @each $size, $headers in $header-styles {
     @include breakpoint($size) {
@@ -25,7 +17,4 @@ $font-wide-letter-spacing: rem-calc(4px) !default;
       }
     }
   }
-  .font-wide{
-    @include font-wide;
-  }
 }