# Documentation

Source: https://iriscss.com/documentation/

Write plain HTML and every element is styled, responsive and ready for light and dark mode. Classes are optional, use them when you want a variant.

## Overview

Link one stylesheet and start writing HTML.

- [Installation](https://iriscss.com/documentation/overview/installation/index.html.md)
- [Start](https://iriscss.com/documentation/overview/start/index.html.md)
- [Classless HTML](https://iriscss.com/documentation/overview/classless-html/index.html.md)
- [Cascade layers](https://iriscss.com/documentation/overview/cascade-layers/index.html.md)
- [Browser support](https://iriscss.com/documentation/overview/browser-support/index.html.md)
- [AI assistants](https://iriscss.com/documentation/overview/ai-assistants/index.html.md)

## Customize

Change any value with a `--i-` custom property.

- [CSS variables](https://iriscss.com/documentation/customize/css-variables/index.html.md)
- [Themes](https://iriscss.com/documentation/customize/themes/index.html.md)
- [Color palette](https://iriscss.com/documentation/customize/color-palette/index.html.md)

## Elements

Native HTML elements, styled without a single class.

- [Typography](https://iriscss.com/documentation/elements/typography/index.html.md)
- [Link](https://iriscss.com/documentation/elements/link/index.html.md)
- [List](https://iriscss.com/documentation/elements/list/index.html.md)
- [Button](https://iriscss.com/documentation/elements/button/index.html.md)
- [Code](https://iriscss.com/documentation/elements/code/index.html.md)
- [Table](https://iriscss.com/documentation/elements/table/index.html.md)
- [Media](https://iriscss.com/documentation/elements/media/index.html.md)
- [Progress and meter](https://iriscss.com/documentation/elements/progress-and-meter/index.html.md)
- [Popover](https://iriscss.com/documentation/elements/popover/index.html.md)

## Form

Inputs, selects, switches and native validation.

- [Controls](https://iriscss.com/documentation/form/controls/index.html.md)
- [Input types](https://iriscss.com/documentation/form/input-types/index.html.md)
- [Checkbox, radio and switch](https://iriscss.com/documentation/form/checkbox-radio-and-switch/index.html.md)
- [Validation](https://iriscss.com/documentation/form/validation/index.html.md)
- [Group](https://iriscss.com/documentation/form/group/index.html.md)

## Layout

Containers, grids and primitives that adapt without media queries.

- [Container and grid](https://iriscss.com/documentation/layout/container-and-grid/index.html.md)
- [Primitives](https://iriscss.com/documentation/layout/primitives/index.html.md)
- [Hero](https://iriscss.com/documentation/layout/hero/index.html.md)

## Modifiers

Short classes for color, style, size and state.

- [Colors](https://iriscss.com/documentation/modifiers/colors/index.html.md)
- [Styles](https://iriscss.com/documentation/modifiers/styles/index.html.md)
- [Sizes](https://iriscss.com/documentation/modifiers/sizes/index.html.md)
- [States](https://iriscss.com/documentation/modifiers/states/index.html.md)

## Components

Patterns you set up in one copy and paste.

- [Accordion](https://iriscss.com/documentation/components/accordion/index.html.md)
- [Alert](https://iriscss.com/documentation/components/alert/index.html.md)
- [Avatar](https://iriscss.com/documentation/components/avatar/index.html.md)
- [Badge](https://iriscss.com/documentation/components/badge/index.html.md)
- [Box](https://iriscss.com/documentation/components/box/index.html.md)
- [Card](https://iriscss.com/documentation/components/card/index.html.md)
- [Carousel](https://iriscss.com/documentation/components/carousel/index.html.md)
- [Divider](https://iriscss.com/documentation/components/divider/index.html.md)
- [Drawer](https://iriscss.com/documentation/components/drawer/index.html.md)
- [Dropdown](https://iriscss.com/documentation/components/dropdown/index.html.md)
- [Footer](https://iriscss.com/documentation/components/footer/index.html.md)
- [Icon](https://iriscss.com/documentation/components/icon/index.html.md)
- [Loader](https://iriscss.com/documentation/components/loader/index.html.md)
- [Modal](https://iriscss.com/documentation/components/modal/index.html.md)
- [Nav and breadcrumb](https://iriscss.com/documentation/components/nav/index.html.md)
- [Navbar](https://iriscss.com/documentation/components/navbar/index.html.md)
- [Pagination](https://iriscss.com/documentation/components/pagination/index.html.md)
- [Skeleton](https://iriscss.com/documentation/components/skeleton/index.html.md)
- [Steps](https://iriscss.com/documentation/components/steps/index.html.md)
- [Tabs](https://iriscss.com/documentation/components/tabs/index.html.md)
- [Toast](https://iriscss.com/documentation/components/toast/index.html.md)
- [Tooltip](https://iriscss.com/documentation/components/tooltip/index.html.md)

## Helpers

Single purpose utilities that win over components.

- [Display and alignment](https://iriscss.com/documentation/helpers/display-and-alignment/index.html.md)
- [Overflow](https://iriscss.com/documentation/helpers/overflow/index.html.md)
- [Gradients](https://iriscss.com/documentation/helpers/gradients/index.html.md)
- [Print](https://iriscss.com/documentation/helpers/print/index.html.md)

## Accessibility

ARIA styles, focus rings and user preferences.

- [ARIA attributes](https://iriscss.com/documentation/accessibility/aria-attributes/index.html.md)
- [Focus and screen readers](https://iriscss.com/documentation/accessibility/focus-and-screen-readers/index.html.md)
- [User preferences](https://iriscss.com/documentation/accessibility/user-preferences/index.html.md)