Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including @peter554/cssutils with all npm packages installed. Try it out:

var cssutils = require("@peter554/cssutils")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@peter554/cssutils v0.14.1

CSS utility class generator. User friendly, simple, powerful.

cssutils

CI

npm install --save-dev @peter554/cssutils

A CSS utility class generator. User friendly, simple, powerful. Inspired by tailwindcss and gordon.

Usage

  • cssutils --help
  • Check out the tests for the full features.

CSS variables

  • cssutils variables --config ./config.yml
variables:
  color:
    red: '#f00'
    green: '#0f0'
    grey:
      light: '#eee'
      mid: '#999'
: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
variables:
  color:
    red: '#f00'
    green: '#0f0'
    grey:
      light: '#eee'
      mid: '#999'
$color-green: #0f0;
$color-grey-light: #eee;
$color-grey-mid: #999;
$color-red: #f00;

Utility classes

  • cssutils utilities --config ./config.yml
variables:
  color:
    red: '#f00'
    green: '#0f0'
utilities:
  background-color:
    alias: bgclr
    from: color
  padding:
    alias: p
    from:
      0: 0
      1: 0.25rem
.bgclr-green { background-color: #0f0; }
.bgclr-red { background-color: #f00; }

.p-0 { padding: 0; }
.p-1 { padding: 0.25rem; }

Responsive utility classes

utilities:
  background-color:
    alias: bgclr
    from:
      red: '#f00'
    breakpoints: [md, lg]
breakpoints:
  md: 800px
  lg: 1200px
  xl: 1600px
.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

utilities:
  background-color:
    alias: bgclr
    from:
      red: '#f00'
    pseudo: [hcs]
pseudo:
  hcs: [hover, focus]
  act: [active]
.bgclr-red { background-color: #f00; }
.hcs\:bgclr-red:hover { background-color: #f00; }
.hcs\:bgclr-red:focus { background-color: #f00; }

Rotations

utilities:
  padding:
    alias: pad
    from:
      1: 0.25rem
    rotations: true
.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; }

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free