Abrusco

Hackable CSS toolbox.

Getting Started

npm install abrusco --save-dev

Or use the CDN Link

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

Download directly

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

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

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 insite the HTML document.

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <link href="https://unpkg.com/abrusco@0.6.3/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>

</body>
</html>

Note that 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

Type

<h1 class="h1">Heading 1</h1>
<h2 class="h2">Heading 2</h2>
<h3 class="h3">Heading 3</h3>
<h4 class="h4">Heading 4</h4>
<h5 class="h5">Heading 5</h5>
<h6 class="h6">Heading 6</h6>

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

See all the typography classes and variables available.