Package Exports

size-css

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (size-css) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Size-CSS

Helpful classes for make margin, padding, font-size and some other styles

Feel free to let me know what else you want added via:

Issues

Installation:

You can use npm for install tha package

npm install --save size-css

Or just download *.css or *.scss files

wget https://raw.githubusercontent.com/ancor-dev/size-css/master/dist/size-css.min.css
wget https://raw.githubusercontent.com/ancor-dev/size-css/master/dist/size-css.min.css.map

Usage

Simple usage

Just include the style

<link rel="stylesheet" href="node_modules/size-css/dist/size-css.min.css">

and add css classes where you need.

<div>Some text</div>
<div class="offset-sm-top">...<span class="fz-20">...</span>...</div>

Customize (using SASS preprocessor)

Copy size-css/sass/_variables.scss to your style directory
Update sizes
Import your sizes @import 'variables';
Import main size-css file @import '~size-css/sass/size-css';

Documentation:

Sizes

Default sizes:

xs: 10px // extra small
sm: 15px // small
  : 20px // default
md: 25px // middle
lg: 30px // large
el: 40px // extra large

Vertical offsets(top & bottom):

.offset-xs
.offset-sm
.offset
.offset-md
.offset-lg
.offset-el

Horizontal offsets(left & right):

.offset-xs-h
.offset-sm-h
.offset-h
.offset-md-h
.offset-lg-h
.offset-el-h

Offset for only one side:

.offset-xs-(top|bottom|left|right)
.offset-sm-(top|bottom|left|right)
.offset-(top|bottom|left|right)
.offset-md-(top|bottom|left|right)
.offset-lg-(top|bottom|left|right)
.offset-el-(top|bottom|left|right)

If you want to remove offset specify prefix no-:

.no-offset
.no-offset-h
.no-offset-(top|bottom|left|right)

Useing padding

For use padding instead of margin just write inset instead of offset.
Examples:

.inset-sm
.inset
.inset-h
.inset-md-h
.inset-xs-top
.no-inset-h
.no-inset-top

Font-sizes

Default sizes: fromm 8px to 40px with 2px step

.fz-8
.fz-10
.fz-12
.fz-...
.fz-40

Make a build

Requirements:

Nodejs v6.0+ with npm

Do the steps:

Clone the repository git clone https://github.com/ancor-dev/size-css.git
Go to repository directory cd size-css
Install node-js dependencies npm install
Make a build npm run css