# Lism CSS

> Lism CSS is a lightweight, layout-first CSS framework for rapidly building the structural skeleton of websites. No build step required — just import the CSS. It also provides dedicated React and Astro components via npm.

- GitHub: https://github.com/lism-css/core
- npm: `lism-css` (core CSS + React components; Astro components via `lism-css/astro` subpath), `@lism-css/ui` (UI components)
- License: MIT

## Getting Started

- [What is Lism CSS?](https://lism-css.com/en/docs/overview.md): An overview of Lism CSS and its key features.
- [Installation](https://lism-css.com/en/docs/installation.md): Learn how to install Lism CSS and get started with the basics.
- [Changelog](https://lism-css.com/en/docs/changelog.md): A log of all notable changes and updates across Lism CSS releases.
- [Features of Lism CSS](https://lism-css.com/en/docs/features.md): An in-depth look at the design approach and key features of Lism CSS.
- [MCP Server](https://lism-css.com/en/docs/mcp.md): Learn how to set up the MCP server so AI coding tools can access Lism CSS documentation and API information.
- [Skills](https://lism-css.com/en/docs/skills.md): Place a SKILL.md file in your project to communicate Lism CSS design rules, Props, tokens, and naming conventions to AI agents.

## Documentation

- [@lism-css/icons](https://lism-css.com/en/docs/packages/icons.md): Learn how to install and use SVG icons in React and Astro.
- [AutoColumns (l--autoColumns)](https://lism-css.com/en/docs/primitives/l--autoColumns.md): l--autoColumns is a breakpoint-independent multi-column class where columns automatically wrap before shrinking below a specified minimum width.
- [Base Styles](https://lism-css.com/en/docs/base-styles.md): Learn about the Reset CSS and HTML element base styles defined in the lism-base layer.
- [Box (l--box)](https://lism-css.com/en/docs/primitives/l--box.md): l--box is a simple class that groups content without applying any particular layout behavior.
- [BoxLink (is--boxLink)](https://lism-css.com/en/docs/trait-class/is--boxLink.md): is--boxLink is a class that makes an entire box clickable.
- [Center (l--center)](https://lism-css.com/en/docs/primitives/l--center.md): l--center is a class for centering elements both horizontally and vertically.
- [Cluster (l--cluster)](https://lism-css.com/en/docs/primitives/l--cluster.md): l--cluster is a class that arranges multiple elements horizontally and wraps them to the next line when there are too many to fit.
- [Color Tokens](https://lism-css.com/en/docs/tokens/colors.md): A reference of semantic colors and palette color tokens defined in Lism CSS, along with customization examples.
- [Columns (l--columns)](https://lism-css.com/en/docs/primitives/l--columns.md): l--columns is a column class that displays content in the specified number of columns at each breakpoint.
- [Container (is--container)](https://lism-css.com/en/docs/trait-class/is--container.md): is--container is a class that declares container-type to enable container queries.
- [CSS File Types](https://lism-css.com/en/docs/css-files.md): Learn the differences between the CSS files bundled with Lism CSS and choose the right one for your needs.
- [CSS Methodology](https://lism-css.com/en/docs/css-methodology.md): An overview of the CSS layer structure and class design methodology behind Lism CSS.
- [CSS Purge](https://lism-css.com/en/docs/customize/purge.md): Set up CSS Purge to strip unused Lism CSS classes at build time and ship a leaner production CSS.
- [Customization Basics](https://lism-css.com/en/docs/customize.md): Learn how to choose a configuration method for Lism CSS and remove unused CSS with CSS Purge.
- [Decorator (a--decorator)](https://lism-css.com/en/docs/primitives/a--decorator.md): a--decorator is a class used as an empty element for decorating content.
- [Design Tokens](https://lism-css.com/en/docs/tokens.md): A reference of all design tokens in Lism CSS, including colors, spacing, and shadows.
- [Divider (a--divider)](https://lism-css.com/en/docs/primitives/a--divider.md): a--divider is a class for rendering a dividing line between content sections.
- [Flex (l--flex)](https://lism-css.com/en/docs/primitives/l--flex.md): l--flex is a class for arranging content using Flexbox.
- [Flow (l--flow)](https://lism-css.com/en/docs/primitives/l--flow.md): l--flow is a flow class that manages spacing between child elements using margin.
- [Frame (l--frame)](https://lism-css.com/en/docs/primitives/l--frame.md): l--frame is a class that fits the direct child media element (img, video, iframe) to its own size.
- [Grid (l--grid)](https://lism-css.com/en/docs/primitives/l--grid.md): l--grid is a class for arranging content using CSS Grid.
- [Group](https://lism-css.com/en/docs/core-components/group.md): A Lism component that outputs a <div> tag.
- [Half-Leading (line-height)](https://lism-css.com/en/docs/half-leading.md): How and why Lism CSS manages line-height through half-leading values.
- [Heading](https://lism-css.com/en/docs/core-components/heading.md): A Lism component that outputs heading tags (<h1> to <h6>).
- [Icon (a--icon)](https://lism-css.com/en/docs/primitives/a--icon.md): a--icon is a class for displaying icon elements.
- [Inline](https://lism-css.com/en/docs/core-components/inline.md): A Lism component that outputs a <span> tag.
- [Layer (is--layer)](https://lism-css.com/en/docs/trait-class/is--layer.md): is--layer is a class for creating overlay layers absolutely positioned on top of a parent element.
- [Link](https://lism-css.com/en/docs/core-components/link.md): A Lism component that outputs an <a> tag.
- [Lism](https://lism-css.com/en/docs/core-components/lism.md): A general-purpose component that accepts a wide range of props from the Lism CSS design system.
- [Lism Props](https://lism-css.com/en/docs/core-components/lism-props.md): A reference for the Lism CSS-specific props accepted by <Lism>-family components.
- [lism.config.js](https://lism-css.com/en/docs/customize/config.md): How to extend component props, tokens, traits, and breakpoints using lism.config.js and @lism-css/plugin.
- [List & ListItem](https://lism-css.com/en/docs/core-components/list.md): Lism components that output list tags (<ul>, <li>).
- [Media](https://lism-css.com/en/docs/core-components/media.md): A Lism component for outputting media elements such as images and videos.
- [Naming Conventions](https://lism-css.com/en/docs/naming.md): An explanation of the Prop-name and value-name abbreviation rules for Property Classes, along with the naming conventions for CSS variables in Lism CSS.
- [Primitives( l--*, a--* )](https://lism-css.com/en/docs/primitives.md): An overview of Lism CSS Primitive Classes (l--, a--) and their usage.
- [Property Class( -* )](https://lism-css.com/en/docs/property-class.md): A complete list of Property Classes that map to CSS properties, with usage examples.
- [Reset CSS](https://lism-css.com/en/docs/reset-css.md): Learn about the lightweight Reset CSS provided by Lism CSS and how to load it.
- [Responsive](https://lism-css.com/en/docs/responsive.md): Learn how Lism CSS handles responsive design with breakpoint classes and variables.
- [SCSS Customization](https://lism-css.com/en/docs/customize/scss.md): Learn how to override SCSS variables to adjust generated classes and breakpoints.
- [Set Class( set--* )](https://lism-css.com/en/docs/set-class.md): Learn about the set-- style classes for overriding base styles and redefining tokens.
- [Spacer (a--spacer)](https://lism-css.com/en/docs/primitives/a--spacer.md): a--spacer is a class for reserving space between elements.
- [Stack (l--stack)](https://lism-css.com/en/docs/primitives/l--stack.md): l--stack is a class that arranges multiple elements vertically using a Flex layout.
- [SwitchColumns (l--switchColumns)](https://lism-css.com/en/docs/primitives/l--switchColumns.md): l--switchColumns is a class that switches between multi-column and single-column without using container queries or media queries.
- [Text](https://lism-css.com/en/docs/core-components/text.md): A Lism component that outputs a <p> tag.
- [TileGrid (l--tileGrid)](https://lism-css.com/en/docs/primitives/l--tileGrid.md): l--tileGrid is a class for creating uniform tile-style grid layouts by specifying cols and rows.
- [Trait Class( is--*, has--* )](https://lism-css.com/en/docs/trait-class.md): Learn about Trait Classes: is--* for declaring roles and has--* for attaching features.
- [Typography Tokens](https://lism-css.com/en/docs/tokens/typography.md): An overview of typography design tokens in Lism CSS, including font-family, font-size, line-height, and more.
- [Utility Class( u--* )](https://lism-css.com/en/docs/utility-class.md): Learn about the utility classes in Lism CSS that apply bundled styles and decorations.
- [WithSide (l--withSide)](https://lism-css.com/en/docs/primitives/l--withSide.md): l--withSide is a two-column class that automatically switches between horizontal and vertical arrangements based on the main content width you want to keep.
- [Wrapper (is--wrapper)](https://lism-css.com/en/docs/trait-class/is--wrapper.md): is--wrapper is a class that collectively controls the width of its direct child content.

## UI Components

- [Accordion](https://lism-css.com/en/ui/accordion.md): A UI component that creates accordion elements with animated expanding and collapsing panels.
- [Alert](https://lism-css.com/en/ui/alert.md): A UI component that emphasizes short messages.
- [Avatar](https://lism-css.com/en/ui/avatar.md): A UI component that displays avatar images or initials.
- [Badge](https://lism-css.com/en/ui/badge.md): A UI component that displays short labels or status badges.
- [Button](https://lism-css.com/en/ui/button.md): A UI component that displays links styled as buttons.
- [Callout](https://lism-css.com/en/ui/callout.md): A UI component that highlights important points within an article.
- [Details](https://lism-css.com/en/ui/details.md): A UI component that creates collapsible content using the details and summary elements.
- [DummyText](https://lism-css.com/en/ui/dummytext.md): A UI component that outputs dummy text for prototyping and design mockups.
- [Modal](https://lism-css.com/en/ui/modal.md): A UI component that displays modals using the dialog element.
- [NavMenu](https://lism-css.com/en/ui/navmenu.md): A UI component that creates lists for navigation menus.
- [Popover](https://lism-css.com/en/ui/popover.md): A UI component that creates popovers that open and close on click.
- [ShapeDivider](https://lism-css.com/en/ui/shapedivider.md): A UI component that renders decorative dividers using SVG.
- [Tabs](https://lism-css.com/en/ui/tabs.md): A UI component that switches content panels with tabs.
- [Tooltip](https://lism-css.com/en/ui/tooltip.md): A UI component that displays supplementary text on hover or focus.

## Optional

- [-bd](https://lism-css.com/en/docs/property-class/bd.md): How to use the -bd Property Class and related CSS variables for border styling.
- [-hov](https://lism-css.com/en/docs/property-class/hov.md): How to use the -hov Property Class for controlling hover behavior and transitions.
- [-max-sz](https://lism-css.com/en/docs/property-class/max-sz.md): How to use the -max-sz class for controlling the maximum width of content.
- [Banner](https://lism-css.com/en/ui/examples/banner.md): Example implementation of banner link patterns using Lism CSS.
- [Breadcrumb](https://lism-css.com/en/ui/examples/breadcrumb.md): Example implementation of breadcrumb navigation using Lism CSS.
- [Card](https://lism-css.com/en/ui/examples/card.md): Example implementation of card-style content layouts using Lism CSS.
- [Chat](https://lism-css.com/en/ui/examples/chat.md): An example of a chat-style UI (b--chat) built with Lism CSS.
- [DividerLabel](https://lism-css.com/en/ui/examples/dividerlabel.md): Example implementation of a labeled divider component using Lism CSS.
- [Reel](https://lism-css.com/en/ui/examples/reel.md): Example implementation of a horizontally scrollable reel component using Lism CSS.