Spacing Help

Spacing Help is a simple SASS/SCSS package who adds classes for Margin and Padding measured in pixels (px) so you can use on your own site without overflooding your default style file with classes for every spacing you need.

Quick install

To install the package in your project you should use:

NPM

npm install spacing-help --save

And after that, import this as any SASS/SCSS.

@import "~spacing-help/spacing-help.scss"

Classes

To apply a margin or padding from this package use the reference below:

CSS Prefix - Description

m - Margin p - Padding t - Top b - Bottom r - Right l - Left x - X Axis (Right and Left) y - Y Axis (Top and Bottom) 0 - Spacing 0 (Default 0px) 1 - Spacing 1 (Default 10px) 2 - Spacing 2 (Default 15px) 3 - Spacing 3 (Default 20px) 4 - Spacing 4 (Default 25px) 5 - Spacing 5 (Default 30px) 6 - Spacing 6 (Default 50px) 7 - Spacing 7 (Default 100px)

Use Example:

.mt0 = Margin Top of 0px
.mt1 = Margin Top of 10px
.mt4 = Margin Top of 25px
.mx1 = Margin Right and Left of 10px
.my1 = Margin Top and Bottom of 10px
------------------------------------
------------------------------------
------------------------------------
.pt0 = Padding Top of 0px
.pt1 = Padding Top of 10px
.pt4 = Padding Top of 25px
.px1 = Padding Right and Left of 10px
.py1 = Padding Top and Bottom of 10px

Modify Spacings

The sizes in px for the spacings 0-7 are defined in the var $sizes, so you can edit:

$sizes: (0,10,15,20,25,30,50,100);

Copyright and license

Code Copyright 2017 Kevin de Faveri Aguiar. Code released under the MIT license