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: import

This option uses your package manager and bundler to add the stylesheet to your project. 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

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

import "@jrgermain/stylesheet";

If you get a compilation error, you can try the following equivalent import statement:

import "@jrgermain/stylesheet/index.css";

Option 2: <link> Tags

Alternatively, you can add a <link> tag to your document head with a href that references the stylesheet. This is useful if you don’t have a build step, or if you aren’t using the tools mentioned above.

You can either copy the CSS files (index.css and optionally index.css.map) into your public directory and reference the local copy or link to a CDN.

<!-- Use stylesheet that was copied into $PUBLIC_DIR/styles -->
<link
  rel="stylesheet"
  type="text/css"
  href="/styles/index.css"
/>

<!-- Pull version 0.3.0 of stylesheet from a CDN -->
<link
  rel="stylesheet"
  type="text/css"
  href="https://cdn.jsdelivr.net/npm/@jrgermain/[email protected]"
/>

Setup

Recommended head Elements

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

<meta name="theme-color" content="#fff" />
<meta
  name="theme-color"
  media="(prefers-color-scheme: dark)"
  content="#010203"
/>