From 99301f7c90e6ebeba549c5cde550a11f9b04775c Mon Sep 17 00:00:00 2001 From: Jeremias Erbs Date: Sat, 7 Nov 2015 11:10:21 +0100 Subject: [PATCH] Fix README text --- README.md | 56 +++++++++++++++++++++++++++---------------------------- 1 file changed, 28 insertions(+), 28 deletions(-) diff --git a/README.md b/README.md index 418d589..0e2acdf 100644 --- a/README.md +++ b/README.md @@ -29,17 +29,15 @@ Add classes to create paddings and margins. The following header has a margin-top with the size of **xl** (which is 64px by default): ```html -
This is the header.
``` -This elements have no padding: +These elements have no padding: ```html - - +

Lorem ipsum

+

Dolor sit

``` @@ -53,7 +51,7 @@ This navigation is centered: ``` -All properties get `!important` as you should only +All properties have `!important` as you should only add those classes, if you definitely want a specific behavior. ### How it works @@ -61,30 +59,32 @@ All classes are composed of some simple parts. #### 1. Property shortcut ``` -m margin -OR -p padding +m margin + -OR- +p padding ``` #### 2. Direction ``` -t top -b bottom -r right -l left -v vertical -h horizontal +t top +b bottom +r right +l left + +v vertical +h horizontal + +(none) No direction specified means *all* directions (like in `margin: 8px;`) ``` -No direction specified means *all* directions (like in `margin: 8px;`) #### 3. Delimiter ``` -- normal delimiter --- negative value +- positive value +-- negative value ``` -Examples: +Example: ```css .mt-xs { margin-top: 4px } .mt--xs { margin-top: -4px } @@ -92,13 +92,13 @@ Examples: #### 4. Size ``` -xxs 2px -xs 4px -s 8px -m 16px -l 32px -xl 64px -xxl 128px +xxs 2px +xs 4px +s 8px +m 16px +l 32px +xl 64px +xxl 128px ``` #### Possible margin classes @@ -129,5 +129,5 @@ m-a margin: auto ## Individualize 1. Install Sass (google it). 2. Run `npm install` -3. Change things in `source/` +3. Change things in `source/` () 4. Run `gulp` or `gulp deploy`