From d86b2ab73d3c53b00d149ee6fbc1910c37385091 Mon Sep 17 00:00:00 2001 From: harry Date: Tue, 7 Feb 2017 20:52:37 +0530 Subject: [PATCH] Moved font-wide to font styling and added negative margin to docs. --- docs/pages/prototyping.md | 97 ++++++++++++++++++++++++++----- scss/prototype/_font-styling.scss | 16 +++++ scss/prototype/_typescale.scss | 11 ---- 3 files changed, 98 insertions(+), 26 deletions(-) diff --git a/docs/pages/prototyping.md b/docs/pages/prototyping.md index b356f1d6d..9b8f642d8 100644 --- 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 +

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

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.

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

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?

@@ -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 -

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

-``` - ---- - ## 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 +
+
+
+
+
+``` + +#### Margin Top + +```html +
+
+
+
+
+``` + +#### Margin Bottom + +```html +
+
+
+
+
+``` + +#### Margin Left + +```html +
+
+
+
+
+``` + +#### Margin Right + +```html +
+
+
+
+
+``` + +#### Margin Left Right (Horizontal Axis) + +```html +
+
+
+
+
+``` + +#### Margin Top Bottom (Vertical Axis) + +```html +
+
+
+
+
+``` + +--- + +## 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 029f0d433..7f7c4021f 100644 --- 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 657810f92..7b807e8d0 100644 --- 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; - } } -- 2.47.2