Getting started

Nausikaä is a single stylesheet. Add it to a page and the plain HTML you already write—headings, paragraphs, lists, tables, forms and buttons—is styled straight away. There is no JavaScript to load for the styling itself, and no build step is needed to use it.

This page shows how to add Nausikaä to a page, explains the idea of plain HTML first that runs through the whole framework, and lists the browsers it supports.

Link the stylesheet in the <head> of every page. Nausikaä uses the IBM Plex typefaces; load them from Google Fonts as in the example below, or host them yourself. Without them the text falls back to Georgia and Arial, and everything keeps working. The one stylesheet holds all three themes: light, dark and e-ink.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My page</title>

    <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">
    <link rel="stylesheet" href="/styles/nausikaa.min.css">
  </head>
  <body>
    <main>
      <article>
        <h1>Hello, Nausikaä</h1>
        <p>This page is already styled.</p>
      </article>
    </main>
  </body>
</html>

The stylesheet is built from the source in the Nausikaä repository: run npm install and npm run build, and it appears as public/styles/nausikaa.min.css. A ready-made download will be available on the Download page.

The viewport tag matters: without <meta name="viewport">, phones show a zoomed-out desktop page and the layouts for small screens never apply. See Responsive design.

Nausikaä styles HTML elements directly. A <button> looks like a button, a <table> like a table and a <dialog> like a dialog, without any classes. Classes are only needed where HTML has no word for something: a color, a size, or a layout pattern such as a navbar or a product card.

<form class="basic-form">
  <label for="name">Name</label>
  <input id="name" type="text">

  <label for="email">Email</label>
  <input id="email" type="email">

  <div class="controls">
    <button type="submit" class="primary">Subscribe</button>
    <button type="reset">Cancel</button>
  </div>
</form>

The inputs, labels and buttons need no classes at all. basic-form arranges them in two columns, and primary gives the main action its color. Writing plain, semantic HTML also means that browsers, search engines and assistive technology understand the page without extra work—see Accessibility.

The icons in these examples come from a single SVG sprite, /images/icons.svg, based on Google’s Material icons. Refer to an icon by its id with <use>, and give the <svg> the class icon so it takes on the size and color of the surrounding text.

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

Decorative or meaningful? When an icon sits next to a text that says the same thing, hide it from screen readers with aria-hidden="true". When an icon is the only content of a button, give the button an aria-label instead.

Nausikaä works in every browser released since early 2021, which covers the vast majority of visitors worldwide. The stylesheet is written in modern CSS and compiled so that these browsers understand it:

A few details are added only for browsers that support them, such as hiding the focus ring after a mouse click. Older browsers simply skip those details; nothing breaks.

Dialogs in older browsers: the <dialog> element arrived in Safari 15.4 and Firefox 98. For older versions, load the dialog polyfill, as this site does.