Getting Started

You can start tinkering in the Basement without installing anything. When you are ready to use Hacss in your own environment, the instructions that follow will guide you through installation and basic usage.

Installation

First, ensure that you are running Node.js version 10 or later. Hacss can be installed globally for CLI use or project-locally to use via the CLI, Webpack, or the API. The easiest way to get started is a global installation:

npm install -g @hacss/cli

Testing It Out

This exercise will involve two files: an HTML document that you will create and a CSS file that you will generate with Hacss.

First, create a file called index.html with the following content:

<link rel="stylesheet" href="ha.css" />
<h1 class="color:#f00; font-family:sans-serif; font-weight:normal; margin:0;">
  Hacss works!
</h1>

Next, generate the style sheet ha.css referenced in line 1 above:

hacss --output ha.css index.html

Finally, open index.html in your browser of choice and verify that the page looks like this:

Hacss works!

Next Steps

Continue to the Guides section to learn how to integrate Hacss into your project and to configure it to fit your needs.

Hacss
Overview Getting Started Guides Basement GitHub