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
├── pages                                                 # Contains Pages for github pages
|     └── documentation.html                              # Documentation for GITHUB PAGES
├── 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.html                                            # 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.

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