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

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 entrypoint 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.

You can either copy the CSS files (index.min.css and optionally index.min.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.min.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="oklch(8% 2% 263deg)"
/>