1.0.2 • Published 5 years ago
@goranmedic/css-utilities v1.0.2
Avoid unnecessary rewrite of CSS classes every time you start a new project and maintain consistency between your projects with this small lib.
Installation
npm i --save @goranmedic/css-utilities
How to add styles to your project
You can add everything by including ./node_modules/@goranmedic/css-utilities/dist/index.css
or separate files by including the file you need:
./node_modules/@goranmedic/css-utilities/dist/paddings.css
for paddings.
Includes:
* margins from 0 to 50 in increments of 5
* paddings from 0 to 50 in increments of 5
* 9 variations of 11 colors
* font sizes from 8 to 36 in increments of 2
* flexbox classes (including order,grow and shrink attributes from 0 to 10 in increments of 1)
* borders from 1 to 5 in increments of 1
* border radiuses from 0 to 14 in increments of 2
* colored borders
* colored backgrounds
* colored text
How to use
All classes have .mod-
prefix, followed by attribute and value
Some examples:
* `margin-top: 20px` is `.mod-margin-top-20`
* `margin: 20px` is `.mod-margin-20`
* `padding-bottom: 10px` is `.mod-padding-bottom-10`
* `padding: 10px` is `.mod-padding-10`
* `border-color: #868e97` is `.mod-border-color-gray-6`
* `border: 5px solid #ced4db` is `.mod-border-5`
* `border-radius: 12px` is `.mod-border-radius-12`
* `background-color: #ff8788` is `.mod-background-color-red-4`
* `color: #dee2e7` is `.mod-color-gray-3`
* `font-size: 10px` is `.mod-font-10`
* `display: flex` is `.mod-display-flex`
* `justify-content: center` is `.mod-justify-content-center`
* `flex-direction: column-reverse` is `.mod-flex-direction-column-reverse`
* `flex-grow: 6` is `.mod-flex-grow-6`
I'll try to add more classes in the following versions.