Installation
Grab the CSS file, or the source if you want to build your own.
Get the Iris CSS file
One .css file holds all of Iris CSS. It is plain CSS,
so there is nothing to compile.
Option 1: use a CDN
Recommended. Import it from jsDelivr in your CSS, or link it in the
<head> of your page.
CSS @import
@import "https://cdn.jsdelivr.net/npm/iriscss@0.1.0/dist/iris.min.css";
HTML <link />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/iriscss@0.1.0/dist/iris.min.css">
There is no separate right to left build. Iris CSS uses logical
properties, so dir="rtl" on the page is all it takes.
Option 2: download the GitHub release
Download iris-0.1.0.zip from the
GitHub releases
page, copy iris.min.css into your project and link it.
<link rel="stylesheet" href="css/iris.min.css">
Files
| File | Contents |
|---|---|
iris.css | The full framework, readable |
iris.min.css | The full framework, minified |
Get the Iris CSS source
The source is a set of native CSS files, one per element or component. Use it to import only the parts you need or to build your own version.
Option 1: install the npm package
Recommended.
npm
npm install iriscss
yarn
yarn add iriscss
pnpm
pnpm add iriscss
The package ships the built files in dist/ and the
source in src/. Import the stylesheet from your bundler:
@import "iriscss";
Option 2: clone the GitHub repository
Clone it with SSH, HTTPS or the GitHub CLI.
SSH
git clone git@github.com:iriscss/iriscss.git
HTTPS
git clone https://github.com/iriscss/iriscss.git
GitHub CLI
gh repo clone iriscss/iriscss
Then build it. You need Node.js 24 and npm. The stylesheets are
written to dist/.
cd iriscss
npm install
npm run build
The repository also holds the tests and tooling, so it is larger than the npm package.