# mCSS

> mCSS is a modern CSS framework and component library for websites: real CSS, real markup, zero build step, built on native cascade layers. It is not a dependency; you copy the files into your project and own them, editing them directly (starting with settings.tokens.css).

Every docs and components page has a markdown twin at the same URL with `.md` appended (e.g. /docs/tokens.md). Fetch those instead of the HTML pages. The complete reference in a single file is at /llms-full.txt.

## Docs

- [Getting Started](https://mcss.dev/docs/start.md): Copy mCSS into your project and learn the methodology: file structure, class syntax, components
- [Tokens](https://mcss.dev/docs/tokens.md): Design tokens: the CSS custom properties for color, typography, spacing, and more that customize the framework
- [Media Queries](https://mcss.dev/docs/media-queries.md): Breakpoints and custom media queries used across the framework
- [Themes](https://mcss.dev/docs/themes.md): Theme tokens: semantic aliases over raw tokens, plus light and dark themes
- [Reset](https://mcss.dev/docs/reset.md): The opinionated CSS reset in the base layer
- [HTML Elements](https://mcss.dev/docs/elements.md): Default styles for bare HTML elements: text, forms, media, tables
- [Global Styles](https://mcss.dev/docs/global.md): Structural patterns: grid, layout, prose, wrap, and accessibility utilities
- [Helpers](https://mcss.dev/docs/helpers.md): Utility classes (spacing, color, typography) that override everything via !important
- [AI Agents](https://mcss.dev/docs/ai.md): Machine-readable docs (llms.txt, markdown twins) and a ready-to-paste rules block for coding agents

## Components

- [Getting started](https://mcss.dev/components/start.md)
- [Badge](https://mcss.dev/components/badge.md) (atom)
- [Button](https://mcss.dev/components/button.md) (atom)
- [Toggle](https://mcss.dev/components/toggle.md) (atom)
- [Avatar](https://mcss.dev/components/avatar.md)
- [Banner](https://mcss.dev/components/banner.md)
- [Breadcrumbs](https://mcss.dev/components/breadcrumbs.md)
- [Card](https://mcss.dev/components/card.md)
- [FAQ](https://mcss.dev/components/faq.md)
- [Feature Grid](https://mcss.dev/components/featuregrid.md)
- [Form Field](https://mcss.dev/components/field.md)
- [Footer](https://mcss.dev/components/footer.md)
- [Header](https://mcss.dev/components/header.md)
- [Hero](https://mcss.dev/components/hero.md)
- [Notice](https://mcss.dev/components/notice.md)
- [Pagination](https://mcss.dev/components/pagination.md)
- [Pricing](https://mcss.dev/components/pricing.md)
- [Read Progress Bar](https://mcss.dev/components/readprogressbar.md)
- [Section](https://mcss.dev/components/section.md)
- [Social Media Links](https://mcss.dev/components/socialmedia.md)
- [Tags](https://mcss.dev/components/tags.md)
- [Testimonial](https://mcss.dev/components/testimonial.md)
- [Table of Content](https://mcss.dev/components/toc.md)

## Optional

- [Blog](https://mcss.dev/blog): release notes and articles
- [Source](https://github.com/minimaldesign/mCSS): copy dist/mcss.min.css as a drop-in, dist/css/ for individual files, or src/styles/framework/ if you run PostCSS yourself