utilitycss3 v0.0.1
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
6 years ago