size-css
v1.0.3
Published
Helpful classes for make margin, padding, font-size and some other styles
Downloads
3
Maintainers
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:
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