From 15cb949136d584683399f93e96502e05fe1ee652 Mon Sep 17 00:00:00 2001 From: harry Date: Tue, 7 Feb 2017 00:09:01 +0530 Subject: [PATCH] Added spacing utilities to protypes docs --- docs/pages/prototyping.md | 154 +++++++++++++++++++++++++++++++++++++- 1 file changed, 153 insertions(+), 1 deletion(-) 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 -- 2.47.2