Download

Nausikaä is one stylesheet. Download it, link it in your page and the HTML you already write is styled. There is nothing to install and no JavaScript to load.

nausikaa.min.css Version 1.1.0, 313 kB, 43 kB gzipped

The stylesheet

Put the file with the rest of your site and link it in the <head> of every page. The one file holds all five themes: light, dark, high contrast light and dark, and e-ink.

The viewport tag matters: without it, phones show a zoomed-out desktop page. Getting started explains the rest.

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/styles/nausikaa.min.css">

The typefaces

Nausikaä uses the IBM Plex typefaces. Load them from Google Fonts with this line, or host them yourself.

Without them the text falls back to Georgia and Arial, and everything keeps working.

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono:400,700|IBM+Plex+Sans:300,400,500,700|IBM+Plex+Serif:300,400,700">

The icons

The icons in the documentation come from one SVG file with 140 icons, 44 kB. They are optional: the stylesheet works without them.

icons.svg

See Icons for how to use them.

<button type="button">
  <svg class="icon" aria-hidden="true">
    <use xlink:href="/images/icons.svg#save"></use>
  </svg>
  Save
</button>

Build it yourself

The stylesheet is built from the source in the repository. After these commands it is in dist/nausikaa.min.css.

The source is plain CSS in small files, one per element, component or collection. Customizing shows which values you can change without building anything.

git clone https://github.com/mibdw/nausikaa.git
cd nausikaa
npm install
npm run build

Good to know

Nausikaä works in every browser released since early 2021; see browser support. What it does not get right yet is listed under known limitations.

Version
1.1.0
Built on
Size
313 kB, 43 kB gzipped
Questions
ben@mibdw.club