# Iris CSS

> Iris CSS is a CSS framework for semantic HTML. Plain HTML elements are styled, responsive and ready for light and dark mode with no classes and no JavaScript. Classes are optional modifiers.

- One stylesheet, `iris.min.css`, linked in the `<head>`. No JavaScript and no build step for your pages. See Installation below for where to get it.
- Write semantic HTML first: `<button>`, `<form>`, `<table>`, `<dialog>`, `<details>`, `<nav>`. Add a class only for a variant.
- Class names have no prefix, such as `.primary`, `.outlined` or `.large`. Custom properties use the `--i-` prefix, such as `--i-color-primary`.
- Do not use Bootstrap or Tailwind classes such as `.btn`, `.col-md-6` or `.mt-3`. They do nothing in Iris CSS.
- Every Iris rule is in a cascade layer, so plain CSS overrides it without `!important`.
- Each docs page has a Markdown copy at its URL plus `index.html.md`. [llms-full.txt](https://iriscss.com/llms-full.txt) has all of them in one file.

## Start here

- [Usage rules for AI assistants](https://iriscss.com/ai/iris-usage.md): how to write Iris CSS markup, the classes and attributes to use and the mistakes to avoid
- [Selectors](https://iriscss.com/reference/selectors.md): every element, class and attribute Iris CSS styles
- [CSS variables](https://iriscss.com/reference/variables.md): every custom property, with its light and dark values

## Overview

- [Installation](https://iriscss.com/documentation/overview/installation/index.html.md): Install Iris CSS from a CDN, a GitHub release, npm or the source repository.
- [Start](https://iriscss.com/documentation/overview/start/index.html.md): Get started with Iris CSS: link the stylesheet and write plain HTML.
- [Classless HTML](https://iriscss.com/documentation/overview/classless-html/index.html.md): What Iris CSS styles with no classes: page structure, text, forms, tables, media, details and dialogs.
- [Cascade layers](https://iriscss.com/documentation/overview/cascade-layers/index.html.md): How Iris CSS uses cascade layers, so your own CSS always wins without specificity tricks or !important.
- [Browser support](https://iriscss.com/documentation/overview/browser-support/index.html.md): Which browsers Iris CSS supports, and how newer features degrade in older ones.
- [AI assistants](https://iriscss.com/documentation/overview/ai-assistants/index.html.md): Give AI coding assistants the Iris CSS rules and docs, so they write correct markup instead of Bootstrap or Tailwind classes.

## Customize

- [CSS variables](https://iriscss.com/documentation/customize/css-variables/index.html.md): Iris CSS custom properties: how to override them on the page or on one element, how they are named, and the global tokens.
- [Themes](https://iriscss.com/documentation/customize/themes/index.html.md): Iris CSS light and dark themes: follow the system, force a theme on the page or on one element, and change the theme colors.
- [Color palette](https://iriscss.com/documentation/customize/color-palette/index.html.md): The Iris CSS color palette: 26 color families with 11 shades each, as variables and as text and background classes.

## Elements

- [Typography](https://iriscss.com/documentation/elements/typography/index.html.md): Iris CSS typography: headings, paragraphs, quotes, inline text and the root font size.
- [Link](https://iriscss.com/documentation/elements/link/index.html.md): Iris CSS links: colors, states and the current page.
- [List](https://iriscss.com/documentation/elements/list/index.html.md): Iris CSS lists: unordered, ordered, description lists and menu toolbars.
- [Button](https://iriscss.com/documentation/elements/button/index.html.md): Iris CSS buttons: colors, styles, sizes, states and groups.
- [Code](https://iriscss.com/documentation/elements/code/index.html.md): Iris CSS code styles: inline code, code blocks, keyboard keys, sample output and variables.
- [Table](https://iriscss.com/documentation/elements/table/index.html.md): Iris CSS tables: striped, hover, sticky header, sizes and responsive scrolling.
- [Media](https://iriscss.com/documentation/elements/media/index.html.md): Iris CSS media: responsive images, figures, video, audio, iframes and SVG.
- [Progress and meter](https://iriscss.com/documentation/elements/progress-and-meter/index.html.md): Iris CSS progress bars and meters: colors, indeterminate state, sizes and optimum ranges.
- [Popover](https://iriscss.com/documentation/elements/popover/index.html.md): Iris CSS popovers: native popover elements that fade in, centered or anchored to their button.

## Form

- [Controls](https://iriscss.com/documentation/form/controls/index.html.md): Iris CSS form controls: inputs, selects, textareas, labels, fieldsets, helper text, sizes and styles.
- [Input types](https://iriscss.com/documentation/form/input-types/index.html.md): Iris CSS special inputs: search, date and time, color, file and range.
- [Checkbox, radio and switch](https://iriscss.com/documentation/form/checkbox-radio-and-switch/index.html.md): Iris CSS checkboxes, radio buttons and switches: labels, colors, indeterminate and disabled states.
- [Validation](https://iriscss.com/documentation/form/validation/index.html.md): Iris CSS form validation: native constraint validation, aria-invalid, valid and invalid states and helper text.
- [Group](https://iriscss.com/documentation/form/group/index.html.md): Iris CSS groups: join inputs, selects and buttons into one row, and build search bars.

## Components

- [Accordion](https://iriscss.com/documentation/components/accordion/index.html.md): Iris CSS accordion: native details and summary elements that open and close with an animation.
- [Alert](https://iriscss.com/documentation/components/alert/index.html.md): Iris CSS alert: a tinted message box with a colored bar on the start edge.
- [Avatar](https://iriscss.com/documentation/components/avatar/index.html.md): Iris CSS avatars: round pictures or initials, sizes, colors and overlapping groups.
- [Badge](https://iriscss.com/documentation/components/badge/index.html.md): Iris CSS badges: small pills for counts and labels, in every color, filled or outlined.
- [Box](https://iriscss.com/documentation/components/box/index.html.md): Iris CSS box: a padded block with a background, rounded corners and a shadow, also as a clickable link.
- [Card](https://iriscss.com/documentation/components/card/index.html.md): Iris CSS cards: a padded block with header and footer bands, outlined, sizes and corner styles.
- [Carousel](https://iriscss.com/documentation/components/carousel/index.html.md): Iris CSS carousel: a row of slides that scrolls sideways and snaps, with CSS scroll buttons and markers.
- [Divider](https://iriscss.com/documentation/components/divider/index.html.md): Iris CSS divider: a horizontal rule with text in the middle.
- [Drawer](https://iriscss.com/documentation/components/drawer/index.html.md): Iris CSS drawer: a modal dialog that slides in from the end, the start or the bottom of the screen.
- [Dropdown](https://iriscss.com/documentation/components/dropdown/index.html.md): Iris CSS dropdown: a popover menu of links or choices, opened by a button.
- [Footer](https://iriscss.com/documentation/components/footer/index.html.md): Iris CSS footer: a responsive page footer with link columns and a bottom row, for mobile and desktop.
- [Icon](https://iriscss.com/documentation/components/icon/index.html.md): Iris CSS icon: a square box for an inline SVG or icon font, in four sizes, with an icon and label pattern.
- [Loader](https://iriscss.com/documentation/components/loader/index.html.md): Iris CSS loader: aria-busy shows a spinner on buttons, links, text and empty elements.
- [Modal](https://iriscss.com/documentation/components/modal/index.html.md): Iris CSS modal: a native dialog drawn as a card, opened with invoker commands or showModal().
- [Nav and breadcrumb](https://iriscss.com/documentation/components/nav/index.html.md): Iris CSS navigation: lists in a nav row, collapsing menus, vertical menus in aside and breadcrumbs.
- [Navbar](https://iriscss.com/documentation/components/navbar/index.html.md): Iris CSS navbar: a responsive top bar with a full width mobile menu and no JavaScript.
- [Pagination](https://iriscss.com/documentation/components/pagination/index.html.md): Iris CSS pagination: page links with a current page, disabled links, gaps and colors.
- [Skeleton](https://iriscss.com/documentation/components/skeleton/index.html.md): Iris CSS skeleton: shimmering placeholders for text, pictures and avatars while content loads.
- [Steps](https://iriscss.com/documentation/components/steps/index.html.md): Iris CSS steps: a numbered progress tracker for flows like checkout, with done and current steps.
- [Tabs](https://iriscss.com/documentation/components/tabs/index.html.md): Iris CSS tabs: details elements that share a name, laid out as tabs with no JavaScript.
- [Toast](https://iriscss.com/documentation/components/toast/index.html.md): Iris CSS toast: a short message in the bottom corner, as a popover or stacked in a live region.
- [Tooltip](https://iriscss.com/documentation/components/tooltip/index.html.md): Iris CSS tooltip: data-tooltip shows a short label on hover and focus, in four placements.

## Layout

- [Container and grid](https://iriscss.com/documentation/layout/container-and-grid/index.html.md): Iris CSS container and grid: centered content and columns that wrap on their own.
- [Primitives](https://iriscss.com/documentation/layout/primitives/index.html.md): Iris CSS layout primitives: stack, cluster, with-sidebar and switcher, layouts that adapt without media queries.
- [Hero](https://iriscss.com/documentation/layout/hero/index.html.md): Iris CSS hero: a large centered intro band at the top of a page, with optional color and gradient.

## Modifiers

- [Colors](https://iriscss.com/documentation/modifiers/colors/index.html.md): Iris CSS color classes: primary, secondary, contrast, accent, info, success, warning, danger and link, on any element.
- [Styles](https://iriscss.com/documentation/modifiers/styles/index.html.md): Iris CSS style modifiers: rounded, square, outlined, tint, deep, light and dark.
- [Sizes](https://iriscss.com/documentation/modifiers/sizes/index.html.md): Iris CSS size modifiers: small, medium and large on buttons, form controls, tables, cards and more.
- [States](https://iriscss.com/documentation/modifiers/states/index.html.md): Iris CSS state classes: hover, active, focus and disabled, to show a state without interaction.

## Helpers

- [Display and alignment](https://iriscss.com/documentation/helpers/display-and-alignment/index.html.md): Iris CSS display and alignment utilities: hidden, block, flex, visibility, centering text, items and blocks.
- [Overflow](https://iriscss.com/documentation/helpers/overflow/index.html.md): Iris CSS overflow utilities: scroll containers, clipping, single line truncation and multi line clamping.
- [Gradients](https://iriscss.com/documentation/helpers/gradients/index.html.md): Iris CSS gradient utilities: linear and radial gradients from any palette family, with direction and position classes.
- [Print](https://iriscss.com/documentation/helpers/print/index.html.md): Iris CSS print styles: black text on white paper, no navigation, link addresses and clean page breaks.

## Accessibility

- [ARIA attributes](https://iriscss.com/documentation/accessibility/aria-attributes/index.html.md): Every ARIA attribute and role Iris CSS styles: busy, invalid, current, disabled, controls, hidden and roles.
- [Focus and screen readers](https://iriscss.com/documentation/accessibility/focus-and-screen-readers/index.html.md): Iris CSS focus rings for keyboard users, the sr-only class, the skip link and touch and text direction defaults.
- [User preferences](https://iriscss.com/documentation/accessibility/user-preferences/index.html.md): How Iris CSS follows user preferences: color scheme, reduced motion, reduced transparency, more contrast and forced colors.

## Optional

- [Full docs in one file](https://iriscss.com/llms-full.txt): the usage rules, every docs page and the reference