UtilityCss

Utility Css is basic utility css generator for your code.

What is Utility CSS

This framework created based on Scss mixin for your css. This framework can generate margin, padding and some basic extraa css and minify it based on your requirement.

Folder Stucture

.
├── css-dist                                              # Contains Compiled Minified Css
│     ├── utilitycss-margin-v0.0.1.min.css                # Contains Minified Css For Margin
│     ├── utilitycss-padding-v0.0.1.min.css               # Contains Minified Css For Padding
│     └── utilitycss-v0.0.1.min.css                       # Contains Minified Css For All CSS
├── css                                                   # Contains Css Generated by Run Command
│     ├── utilitycss-margin-v0.0.1.css                    # Contains Css For Margin
│     ├── utilitycss-padding-v0.0.1.css                   # Contains Css For Padding
│     └── utilitycss-v0.0.1.css                           # Contains Css For All CSS
├── scss                                                  # Contains Scss. Change here to update your css
│     ├── extra.scss                                      # Extra contains some basic css styles that needs
│     ├── margin.scss                                     # Margin Mixing. Change your Code For margin here
│     ├── padding.scss                                    # Padding Mixin. Change Your Code For padding here
│     ├── utilitycss-v0.0.1.scss                          # Compiles all SCSS here
│     └── variable.scss                                   # Contains Variable such as Loop count, Range etc change here
├── .gitignore                                            # Contains gitignore like node_modules
├── LICENSE                                               # Contains gitignore like node_modules
├── README.md                                             # Readme.md for project
├── index.md                                              # index page for github page
├── package-lock.json                                     # npm package-lock.json
└── package.json                                          # contains packages used from npm

This Stucture is updated on December 31, 2017. LICENSE, README.md

This framework created based on Scss mixin for your css. This framework can generate margin, padding and some basic extraa css and minify it based on your requirement.

How to use it

Use 600px range css from here:

Minified

For all classes:

<link href="https://raw.githubusercontent.com/sazzadsazib/UtilityCss/master/css-dist/utilitycss-v0.0.1.min.css" rel="stylesheet">

For margin:

<link href="https://raw.githubusercontent.com/sazzadsazib/UtilityCss/master/css-dist/utilitycss-margin-v0.0.1.min.css" rel="stylesheet">

For padding:

<link href="https://raw.githubusercontent.com/sazzadsazib/UtilityCss/master/css-dist/utilitycss-padding-v0.0.1.min.css" rel="stylesheet">

How Do I Customize it?

Here is the procedure.

First Clone Repository:

$ git clone https://github.com/sazzadsazib/UtilityCss.git

Then Install Packages:

$ npm install

this will install all packages from package.json

Then go to: scss -> Variable.scss Change $i to your starting point for loop and change $range from 600 to any px size you want and change $increment to change increment value

Then use this command

$ npm run compile

To compile all SCSS ( will be heavy ) and will be available on css-dist > utilitycss-v0.0.1.min.css

$ npm run compile-margin

To compile Margin scss ( will compile margin ) and will be available on css-dist > utilitycss-margin-v0.0.1.min.css

$npm run compile-padding

To compile Margin scss ( will compile padding ) and will be available on css-dist > utilitycss-padding-v0.0.1.min.css

$ npm run test

This will compile scss to css of utilitycss-v0.0.1.scss and will be available on css > utilitycss-v0.0.1.css Note: this will only compile scss to css for all classes.

$ npm run min This will compile css to min.css of `utilitycss-v0.0.1.css` and will be available on ``css-dist > utilitycss-v0.0.1.min.css``  Note: this will only compile css to minified css for all classes.

How To Use Css Class

If Increment value is 5 then use:

`mt-Xpx`

where X is multiply of 5 . Here is the all list of css classes

Margin

m-X                 # margin 0
m-X-a               # margin 0 auto
mt-Xpx              # margin top X px 
mb-Xpx              # margin bottom X px
ml-Xpx              # margin left X px
mr-Xpx              # margin right X px
mt--Xpx             # margin top Negetive X px
mb--Xpx             # margin bottom Negetive X px
ml--Xpx             # margin left Negetive X px
mr--Xpx             # margin right Negetive X px

Padding

pt--Xpx             # padding top X px
pb--Xpx             # padding bottom X px
pl--Xpx             # padding left X px
pr--xpx             # padding right X px

Extra

float-l              # float left
float-r              # float right
t-align-c            # text align center
t-align-l            # text align left
t-align-r            # text align right
display-none         # display none
display-inline       # display inline
display-inline-block # display inline block    
display-block        # display block

Note: Remeber You can always change class name X value from scss class and compile it using npm run compile or other command provided.

Packages Used

NPM

"css-minify": "^1.0.1", "npm-sass": "^2.2.1"

If you find any bug feel free to add on issue. Thank You

This site is open source. Improve this page.