From: harry Date: Mon, 6 Feb 2017 18:39:01 +0000 (+0530) Subject: Added spacing utilities to protypes docs X-Git-Tag: v6.4.0-rc1~23^2~20^2~99 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=15cb949136d584683399f93e96502e05fe1ee652;p=thirdparty%2Ffoundation%2Ffoundation-sites.git Added spacing utilities to protypes docs --- diff --git a/docs/pages/prototyping.md b/docs/pages/prototyping.md index da88ee23f..ab3b59338 100644 --- a/docs/pages/prototyping.md +++ b/docs/pages/prototyping.md @@ -117,9 +117,161 @@ You can use font styling to style a text. You can change the font styling by add --- +## Margin Helpers + +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. + +#### 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 Helpers + +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. + +#### Padding (All Sides) + +```html +
+
+
+
+
+``` + +#### Padding Top + +```html +
+
+
+
+
+``` + +#### Padding Bottom + +```html +
+
+
+
+
+``` + +#### Padding Left + +```html +
+
+
+
+
+``` + +#### Padding Right + +```html +
+
+
+
+
+``` + +#### Padding Left Right (Horizontal Axis) + +```html +
+
+
+
+
+``` + +#### Padding Top Bottom (Vertical Axis) + +```html +
+
+
+
+
+``` + +--- + ## Sizing Classes -These width and height classes helps you to easily make an element as wide or as tall as per your need relative to its parent. By default it supports `25%`, `50%`, `75%` and `100%`. You can add more sizes through Sass Variables. +These width and height classes helps you to easily make an element as wide or as tall as per your need relative to its parent. By default it supports `25%`, `50%`, `75%` and `100%`. You can add more sizes though, through Sass Variables. #### Width