Abrusco

Hackable CSS toolbox.

Getting Started

npm install abrusco --save-dev

Or use the CDN Link.

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

CLI

This package is meant to be installed globally.

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

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

Example
  $ 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>
<html>
<head>
  <meta charset="utf-8">
  <link href="https://unpkg.com/abrusco@0.7.2/css/abrusco.min.css" rel="stylesheet">
  <style>
  :root {
    --h1: 5rem; /* your custom h1 size */
  }
  </style>
</head>
<body>

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

</body>
</html>

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 master.css -o bundle.css