https://github.com/sazzadsazib/utilitycss
This is a Css framework based on scss mixin for margin, padding etc
https://github.com/sazzadsazib/utilitycss
Last synced: 2 months ago
JSON representation
This is a Css framework based on scss mixin for margin, padding etc
- Host: GitHub
- URL: https://github.com/sazzadsazib/utilitycss
- Owner: sazzadsazib
- License: mit
- Created: 2017-12-30T15:56:26.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-12-31T19:25:38.000Z (over 7 years ago)
- Last Synced: 2024-12-13T15:33:59.787Z (6 months ago)
- Language: CSS
- Homepage: https://sazzadsazib.github.io/UtilityCss/
- Size: 75.2 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# [UtilityCss](https://sazzadsazib.github.io/UtilityCss/) · [](https://github.com/sazzadsazib/UtilityCss/blob/master/LICENSE)
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:
```
```
For margin:
```
```
For padding:
```
```
### 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