Start

Link one stylesheet and write plain HTML.

Starter template

Once Iris CSS is installed, this is all a page needs. 

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="color-scheme" content="light dark">
    <link rel="stylesheet" href="css/iris.min.css">
    <title>Hello Iris!</title>
  </head>
  <body>
    <main class="container">
      <h1>Hello Iris!</h1>
    </main>
  </body>
</html>

Key ideas

Classless first
Forms, buttons, tables, cards, modals and navigation are styled from plain HTML.
Optional classes with no prefix
Short modifiers like .primary, .outlined or .large work on most elements.
HTML and ARIA attributes
aria-busy="true" shows a spinner, aria-invalid="true" marks a field with an error, data-tooltip adds a tooltip.
Light and dark mode
Every color is a light-dark() pair. Iris follows the system setting, and data-theme="light" or data-theme="dark" forces a scheme on the page or on any element.
Your CSS wins
Every Iris rule sits in a cascade layer, so your own styles override Iris without specificity tricks or !important.
Customize with variables
Every value comes from a --i- custom property. Override it on :root to change it everywhere, or on one element to change it locally.

Try it

Everything below is plain HTML with no classes.

Subscribe

Next steps