Hackable & Functional CSS toolbox.

Getting Started

npm install abrusco --save-dev

Or use the CDN Link.

<link rel="stylesheet" href="https://unpkg.com/abrusco@0.9.0/css/abrusco.min.css">


This package is meant to be installed globally.

npm install abrusco-cli --global
  $ abrusco <input.css>

  -o, --output Output file
  -m, --minify Minify the output stylesheet
  -w, --watch  Watch CSS source directory for changes
  --novars     Do not preserve Custom Properties

  $ abrusco src/master.css -o dist/bundle.css
  $ abrusco src/master.css -o dist/bundle.css --minify
  $ abrusco src/master.css -o dist/bundle.css --watch

See Abrusco CLI GitHub page for more.

Hacking Abrusco

Many of the properties are set up as CSS custom variables.

.h1 { font-size: var(--h1); }
.h2 { font-size: var(--h2); }
.h3 { font-size: var(--h3); }
.h4 { font-size: var(--h4); }
.h5 { font-size: var(--h5); }
.h6 { font-size: var(--h6); }

:root {
  --h1: 2.5rem;
  --h2: 2.0rem;
  --h3: 1.5rem;
  --h4: 1.25rem;
  --h5: 1.125rem;
  --h6: 1.0625rem;

Abrusco is build in a way that you can adjust the properties even inside the HTML document. See the list of all Abrusco's custom properties available.

Note: Only root properties are currently supported.

<!doctype html>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://unpkg.com/abrusco@0.9.0/css/abrusco.min.css">
  :root {
    --h1: 5rem; /* your custom h1 size */

  <h1 class="h1">Heading 1 is 5rem now</h1>
  <h2 class="h2">Heading 2 is still Abrusco's default H2 size</h2>


Note: This example will not work in Internet Explorer. See the list of browsers supporting CSS variables. However you can create your own build if you have both abrusco and abrusco-cli installed.

/* import full abrusco build */
@include 'abrusco';

/* modify abrusco's internal variables */
:root {
  --text-color: var(--orange);
  --orange: var(255, 108, 47);

/* use abrusco's internal variables */
.your-class {
  color: var(--green);

Build your custom bundle using CLI:

abrusco input.css -o output.css