Iris css

Modern Responsive CSS Framework

No JavaScript, no SCSS and no classes required.
Just use plain simple HTML and you are ready to go!

Get started Documentation GitHub
CDN 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/iriscss@0.1.0/dist/iris.min.css">
npm 
npm install iriscss
yarn 
yarn add iriscss
pnpm 
pnpm add iriscss
Source 
git clone https://github.com/iriscss/iriscss.git
cd iriscss
npm install
npm run build
  • Pure CSS
  • Light and dark
  • 26 color families
  • MIT License
Modern Created in 2026 with the latest features. Simple and fast Works with plain HTML. Classes are optional. CSS only CSS only framework with modern features. No SCSS. Colors 26 color families with 11 shades each. Accessible We ship a few extra KB so no one gets left behind. Open source Created in Italy for EU software and digital independence. Right to left Ready for every language and culture, RTL included. AI friendly Rules for AI assistants, llms.txt and Markdown docs.

Built for the Modern Web

Iris CSS embraces the latest CSS features, designed from the ground up for 2026 and beyond. No legacy hacks, no vendor prefix bloat, just clean, modern stylesheets.

  • Native color-mix() derives hover, focus and border colors in the browser
  • Custom properties for theming with zero runtime cost
  • Logical properties for seamless RTL support
  • Built on modern selectors like :where(), :is() and :has()

Simple and Fast by Design

Drop in a single stylesheet and your HTML looks great immediately. No build step, no configuration, no class names to memorize. Semantic HTML is all you need.

  • Works out of the box with plain HTML elements
  • Classes are optional, use them only when you want to
  • Lightweight footprint with no runtime JavaScript
  • Automatic light and dark themes via system preferences

This just works. No classes needed.

Just CSS, Full Stop

One stylesheet, zero dependencies. No preprocessors to install, no JavaScript to bundle, no plugins to configure. Iris CSS is vanilla CSS that plugs into any stack.

  • A single file you can link, import or copy
  • No SCSS, Less or PostCSS required
  • Drop it into React, Vue, Astro, Rails or a plain HTML page
  • Override anything with standard CSS, every rule sits in a cascade layer

A Full Color Palette

26 color families with 11 shades each, ready as variables and as text and background classes.

See the color palette

Accessible by Default

Most frameworks cut accessibility features to shave kilobytes. We keep them because the web should work for everyone. Focus rings, screen reader helpers and contrast modes ship out of the box.

  • Styles that respond to ARIA attributes automatically
  • Clear :focus-visible indicators on every control
  • Built in screen reader class and skip navigation link
  • Support for high contrast and Windows forced colors
  • Honors reduced motion and reduced transparency settings

One Framework, Every Language

The web speaks Arabic, Hebrew, Persian and Urdu too. Iris CSS lays out right to left pages as well as left to right ones, so you can build for any language and culture with the same markup.

  • Set dir="rtl" and the whole layout mirrors
  • Logical properties instead of left and right
  • Drawers, carousels, breadcrumbs and progress bars flip with the text
  • Mix both directions on one page, per element

Built for AI Workflows

Iris CSS ships with rules for AI assistants, so they write Iris markup instead of guessing Bootstrap or Tailwind classes.

Set up your assistant

  • A rules file with every class, the markup for each component and the mistakes to avoid
  • Snippets for AGENTS.md, Claude Code, Cursor and GitHub Copilot
  • llms.txt and llms-full.txt for tools that look them up
  • A Markdown copy of every docs page
  • Semantic HTML first, so most markup needs no classes at all
  • Crawling and AI training allowed

Ready to write plain HTML again?

Link one stylesheet and start with the elements you already know.

Read the docs