Installation & Setup

Installing the Stylesheet

There are multiple ways to add the stylesheet to your project. The most common setups are outlined below.

Option 1: Using a Package Manager & Bundler

This option uses your package manager to download the stylesheet, and your project’s existing build tooling to bundle it into the final output. This is the recommended approach if you’re already using these tools.

First, install @jrgermain/stylesheet as a dependency. For example, if you’re using NPM, you’d run the following command:

npm install @jrgermain/stylesheet

Next, in the entry point of your project (typically a file named root, index, or main), add the following import statements:

import "@jrgermain/stylesheet"; // Adds CSS styles
import "@jrgermain/stylesheet/enhance"; // Adds UX enhancements

You might have to fiddle with the imports here. For example, the enhance script (which needs to run in the browser) might need to be imported in a different file than the main CSS stylesheet (which can be processed at build time). You may also run into an issue where your build tooling can’t resolve the first import because it doesn’t know to treat it as CSS. In this case, you can replace it with the following equivalent import: @jrgermain/stylesheet/stylesheet.css.

Option 2: Manual Installation

This option is useful if you aren’t using the tools mentioned above.

First, download the latest release of the stylesheet from the releases page on GitHub.

Next, extract the contents and copy the following files into your project:

stylesheet.css
enhance.js
stylesheet.css.map (optional, for debugging)
enhance.js.map (optional, for debugging)

Lastly, add a <link> tag and a <script> tag to your document head to reference the files you just copied.

<head>
  ...
  <link
    rel="stylesheet"
    type="text/css"
    href="/path/to/stylesheet.css"
  />
  <script src="/path/to/enhance.js" async></script>
  ...
</head>

Setup

Recommended `head` Elements

It’s recommended to set the theme-color meta tag. To do this, copy the following into your document head: