# ExpressiveCSS

> A Material Design 3 front-end framework for the web: design tokens, light and dark themes, a responsive grid, styled form controls, and interactive components, built with Sass and TypeScript.

Package `@expressivecss/expressive`, version 0.9.1. Distributed as compiled CSS, Sass sources, and JavaScript in ES module, CommonJS, and browser IIFE form. Targets the last five Chrome and Firefox versions.

Read the two primary documents in order. `m3-guidelines.md` decides *which*
component a job calls for, how it is structured, and where it sits;
`llm.md` states the markup, class names, tokens, and JavaScript APIs this
framework actually ships. Where they disagree with the Material 3 spec,
`llm.md` wins on what exists and the spec wins on design intent.

The public surface is not Materialize's. There is no `.btn`, `.card-content`,
`.nav-wrapper`, `.brand-logo`, `.modal-header`, `.lever`, or `.filled-in` --
components are carried by the HTML element (`<button>`, `<article>`,
`<dialog>`, `<footer>`), and a class modifies a component rather than making
one. Icons are Material Symbols in a `<span class="material-symbols">`.

## Primary documentation

- [Material 3 design guidelines](https://www.expressivecss.com/m3-guidelines.md): Which component to use, its anatomy, placement, adaptive behavior, and the mistakes generated Material UIs make most often. Read this first.
- [Markup and JavaScript API reference](https://www.expressivecss.com/llm.md): Every component: class names, canonical markup, options, methods, events, and CSS custom properties.

## Start

- [Getting started](https://www.expressivecss.com/index.html.md): Learn how to start using Expressive and integrate it into your project.
- [Auto Init](https://www.expressivecss.com/auto-init.html.md): Initialize every registered component with one function call.

## Foundations

- [Color](https://www.expressivecss.com/color.html.md): One system: the Material Design 3 theme tokens.
- [Themes](https://www.expressivecss.com/themes.html.md): Light and dark schemes, the theme attribute, and custom tokens.
- [Typography](https://www.expressivecss.com/typography.html.md): Material Design 3 type, from the HTML.
- [Icons](https://www.expressivecss.com/icons.html.md): Material Symbols, outlined by default. Axes and style are CSS variables.
- [Elevation](https://www.expressivecss.com/shadow.html.md): Raise or flatten an element with the z-depth elevation classes.
- [Grid](https://www.expressivecss.com/grid.html.md): Use Expressive's CSS Grid system to format a page in an ordered, comfortable way.
- [Helpers](https://www.expressivecss.com/helpers.html.md): An overview of the helper classes for alignment, visibility, spacing, and common CSS properties.
- [Media styles](https://www.expressivecss.com/media-css.html.md): Responsive images and videos ready to be seen on many devices.
- [Table](https://www.expressivecss.com/table.html.md): Organize data with a few utility classes on a standard HTML table.
- [Transitions](https://www.expressivecss.com/css-transitions.html.md): Animate content in and out with a few CSS classes.
- [State layers](https://www.expressivecss.com/state-layers.html.md): The translucent overlay a component paints over itself for hover, focus, pressed and dragged.

## Structure

- [App bar](https://www.expressivecss.com/navbar.html.md): Material Design 3 top app bars, from the HTML.
- [Bottom app bar](https://www.expressivecss.com/bottom-app-bar.html.md): This screen's commands at the bottom edge, with an optional FAB — not its destinations.
- [Navigation bar](https://www.expressivecss.com/navigation-bar.html.md): Switch between UI views on compact and medium screens.
- [Navigation rail](https://www.expressivecss.com/navigation-rail.html.md): Switch between UI views on mid-sized devices.
- [Sidenav](https://www.expressivecss.com/sidenav.html.md): A slide-out menu, or a fixed sidebar on Expanded and wider screens.
- [Panes](https://www.expressivecss.com/panes.html.md): Material 3 canonical layouts, from the HTML.
- [Footer](https://www.expressivecss.com/footer.html.md): Site navigation and extra information at the end of a page.
- [Tabs](https://www.expressivecss.com/tabs.html.md): Material Design 3 tabs, from the HTML.
- [Breadcrumbs](https://www.expressivecss.com/breadcrumbs.html.md): The path to this page, from the HTML.
- [Pagination](https://www.expressivecss.com/pagination.html.md): A list of pages. The HTML is the component.
- [Menu](https://www.expressivecss.com/menu.html.md): Material Design 3 menus, from the HTML.
- [Scrollspy](https://www.expressivecss.com/scrollspy.html.md): Highlight the table of contents as the page scrolls.

## Components

- [Buttons](https://www.expressivecss.com/buttons.html.md): Material Design 3 common buttons, icon buttons, and FABs — from the HTML.
- [Icon buttons](https://www.expressivecss.com/icon-buttons.html.md): A single icon as the whole control, in four styles and five sizes.
- [Segmented buttons](https://www.expressivecss.com/segmented-buttons.html.md): Two to five connected options, one choice or several, with no script behind them.
- [Button groups](https://www.expressivecss.com/button-groups.html.md): Related buttons that bump and reshape against each other, in two variants and five sizes.
- [Split button](https://www.expressivecss.com/split-button.html.md): A lead action and a trailing half that opens a menu of related ones, in five sizes.
- [FAB](https://www.expressivecss.com/floating-action-button.html.md): A circular action that can open a menu of related shortcuts.
- [Cards](https://www.expressivecss.com/cards.html.md): Material Design 3 cards, from the HTML.
- [Lists](https://www.expressivecss.com/lists.html.md): Continuous vertical indexes of text and images.
- [Dialogs](https://www.expressivecss.com/dialogs.html.md): Important prompts in a user flow. Dedicated to a single task.
- [Bottom sheet](https://www.expressivecss.com/bottom-sheet.html.md): Secondary content anchored to the bottom of the screen.
- [Side sheet](https://www.expressivecss.com/side-sheet.html.md): Optional content and actions, without interrupting the main view.
- [Floating sheet](https://www.expressivecss.com/floating-sheet.html.md): Secondary content on a surface that floats free of every window edge.
- [Drag handle](https://www.expressivecss.com/drag-handle.html.md): The bar that says a thing can be dragged — and nothing that does the dragging.
- [Badges](https://www.expressivecss.com/badges.html.md): Notifications, counts, or status on navigation items and icons.
- [Tooltips](https://www.expressivecss.com/tooltips.html.md): Material Design 3 tooltips, from the HTML.
- [Snackbar](https://www.expressivecss.com/snackbar.html.md): Material Design 3 snackbars, from the HTML.
- [Banners](https://www.expressivecss.com/banners.html.md): A prominent message that stays put until the user deals with it.
- [Preloader](https://www.expressivecss.com/preloader.html.md): Activity and progress. The HTML is the indicator.
- [Loading indicator](https://www.expressivecss.com/loading-indicator.html.md): A shape that morphs while it spins, for waits under five seconds.
- [Carousel](https://www.expressivecss.com/carousel.html.md): Material 3 adaptive carousels for visual collections.
- [Lightbox](https://www.expressivecss.com/media.html.md): Lightbox for enlarge-on-click images.
- [Toolbars](https://www.expressivecss.com/toolbars.html.md): Frequently used actions for the current page.
- [Search](https://www.expressivecss.com/search.html.md): A search bar, and the view it expands into.

## Forms

- [Fieldsets](https://www.expressivecss.com/fieldsets.html.md): Grouped form sections, from the HTML.
- [Text fields](https://www.expressivecss.com/text-inputs.html.md): Material Design 3 text fields, from the HTML.
- [Select](https://www.expressivecss.com/select.html.md): Choose one option, or several, from a styled menu.
- [Checkboxes](https://www.expressivecss.com/checkboxes.html.md): Material Design 3 checkboxes, from the HTML.
- [Radio](https://www.expressivecss.com/radio-buttons.html.md): Material Design 3 radios, from the HTML.
- [Switches](https://www.expressivecss.com/switches.html.md): Material Design 3 switches, from the HTML.
- [Slider](https://www.expressivecss.com/slider.html.md): Selections from a range of values.
- [Chips](https://www.expressivecss.com/chips.html.md): Small blocks for contacts, tags, and filters.
- [Autocomplete](https://www.expressivecss.com/autocomplete.html.md): Suggest values under a text field as the user types.
- [Date picker](https://www.expressivecss.com/datepicker.html.md): Select a date, a range, or several dates from a calendar.
- [Time picker](https://www.expressivecss.com/timepicker.html.md): Pick a time from a clock face, in 12-hour or 24-hour form.

## Optional

- [Complete documentation, single file](https://www.expressivecss.com/llms-full.txt): Both primary documents concatenated for one-fetch ingestion.
- [Source repository](https://github.com/BaezFJ/ExpressiveCSS): issues, source, and the build.
- [Changelog](https://www.expressivecss.com/CHANGELOG.md): releases, and the migration notes for every breaking change.
- [HTML semantics standard](https://www.expressivecss.com/SEMANTICS.md): the element and ARIA contract each component is written against.
- [npm package](https://www.npmjs.com/package/@expressivecss/expressive): install and version history.