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.
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
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
index.html in your browser of choice and verify that the page looks like this:
Continue to the Guides section to learn how to integrate Hacss into your project and to configure it to fit your needs.