Primer CSS States

States, or state indicators, inform users of the current status of a particular item. Included common states are Open, Closed, or Merged, each requiring it’s own modifier class.

This repository is a module of the full primer-css repository.

Install

This repository is distributed with npm. After installing npm, you can install primer-states with this command.

$ npm install --save primer-states

Usage

The source files included are written in Sass (scss) You can simply point your sass include-path at your node_modules directory and import it like this.

@import "primer-states/index.scss";

You can also import specific portions of the module by importing those partials from the /lib/ folder. Make sure you import any requirements along with the modules.

Build

For a compiled css version of this module, a npm script is included that will output a css version to build/build.css The built css file is also included in the npm package.

$ npm run build

Documentation

States, or state indicators, inform users of the current status of a particular item. Included common states are Open, Closed, or Merged, each requiring it's own modifier class.

Open (green)

<span class="state state-open">Open</span>
<span class="state state-proposed">Open</span>
<span class="state state-reopened">Open</span>

Closed (red)

<span class="state state-closed">Closed</span>

Merged (purple)

<span class="state state-merged">Merged</span>