https://github.com/peter554/cssutils
CSS utility class generator
https://github.com/peter554/cssutils
css design-tokens funcional-css responsive utility-classes utility-first
Last synced: 6 months ago
JSON representation
CSS utility class generator
- Host: GitHub
- URL: https://github.com/peter554/cssutils
- Owner: Peter554
- License: mit
- Created: 2020-06-24T11:22:18.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-06-21T05:26:58.000Z (over 4 years ago)
- Last Synced: 2025-04-22T20:18:45.861Z (6 months ago)
- Topics: css, design-tokens, funcional-css, responsive, utility-classes, utility-first
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/@peter554/cssutils
- Size: 165 KB
- Stars: 7
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# cssutils
`npm install --save-dev @peter554/cssutils`
A CSS utility class generator. User friendly, simple, powerful. Inspired by [tailwindcss](https://github.com/tailwindcss/tailwindcss) and [gordon](https://github.com/hankchizljaw/goron).
## Usage
- `cssutils --help` (CLI)
- `const cssutils = require("@peter554/cssutils")` (API)
- Check out the tests for the full features.
### CSS variables
- `cssutils variables --config ./config.yml`
- `cssutils.variables(config)`
```yml
variables:
color:
red: '#f00'
green: '#0f0'
grey:
light: '#eee'
mid: '#999'
```
```css
:root { --color-green: #0f0; }
:root { --color-grey-light: #eee; }
:root { --color-grey-mid: #999; }
:root { --color-red: #f00; }
```
### SASS/SCSS variables
- `cssutils sassvariables --config ./config.yml`
- `cssutils.sassVariables({configPath: "./config.yml"})`
```yml
variables:
color:
red: '#f00'
green: '#0f0'
grey:
light: '#eee'
mid: '#999'
```
```scss
$color-green: #0f0;
$color-grey-light: #eee;
$color-grey-mid: #999;
$color-red: #f00;
```
### Utility classes
- `cssutils utilities --config ./config.yml`
- `cssutils.utilities({configPath: "./config.yml"})`
```yml
variables:
color:
red: '#f00'
green: '#0f0'
utilities:
background-color:
alias: bgclr
from: color
padding:
alias: p
from:
0: 0
1: 0.25rem
```
```css
.bgclr-green { background-color: #0f0; }
.bgclr-red { background-color: #f00; }
.p-0 { padding: 0; }
.p-1 { padding: 0.25rem; }
```
#### Responsive utility classes
```yml
utilities:
background-color:
alias: bgclr
from:
red: '#f00'
breakpoints: [md, lg]
breakpoints:
md: 800px
lg: 1200px
xl: 1600px
```
```css
.bgclr-red { background-color: #f00; }
@media (min-width: 800px) { .md\:bgclr-red { background-color: #f00; } }
@media (min-width: 1200px) { .lg\:bgclr-red { background-color: #f00; } }
```
#### Pseudo utility classes
```yml
utilities:
background-color:
alias: bgclr
from:
red: '#f00'
pseudo: [hcs]
pseudo:
hcs: [hover, focus]
act: [active]
```
```css
.bgclr-red { background-color: #f00; }
.hcs\:bgclr-red:hover { background-color: #f00; }
.hcs\:bgclr-red:focus { background-color: #f00; }
```
#### Rotations
```yml
utilities:
padding:
alias: pad
from:
1: 0.25rem
rotations: true
```
```css
.pad-1 { padding: 0.25rem; }
.pad-b-1 { padding-bottom: 0.25rem; }
.pad-l-1 { padding-left: 0.25rem; }
.pad-r-1 { padding-right: 0.25rem; }
.pad-t-1 { padding-top: 0.25rem; }
.pad-x-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
.pad-y-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
```