# 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

- [Marketing Template](https://mcss.dev/docs/template.md): A complete marketing one-pager built from nothing but the framework and the component library
- [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): Themes: swappable skins made of token overrides plus optional skin rules
- [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): How the mCSS component library works: copy the files you need into your project and own the code.
- [Avatar](https://mcss.dev/components/avatar.md): User avatar that shows an image thumbnail or the user's initials, in multiple sizes.
- [Badge](https://mcss.dev/components/badge.md) (CSS-only): Small CSS-only label for statuses, categories, and "new" markers.
- [Banner](https://mcss.dev/components/banner.md): Thin announcement bar at the very top of the page, optionally dismissible.
- [Breadcrumbs](https://mcss.dev/components/breadcrumbs.md): Navigation trail with CSS-only separators and optional BreadcrumbList JSON-LD.
- [Button](https://mcss.dev/components/button.md) (CSS-only): CSS-only buttons for button, submit, and link elements, with size, style, and icon options.
- [Card](https://mcss.dev/components/card.md): Flexible content container with border, shadow, image, and horizontal layout options.
- [FAQ](https://mcss.dev/components/faq.md): Native details/summary accordion for FAQ sections, zero JavaScript.
- [Feature Grid](https://mcss.dev/components/featuregrid.md): Responsive grid of feature blurbs with icons, titles, and short descriptions.
- [Form Field](https://mcss.dev/components/field.md): Form field composing label, control, hint, and error message, with CSS-driven validation states.
- [Footer](https://mcss.dev/components/footer.md): Site-wide footer with link columns and a meta area, pure HTML and CSS.
- [Header](https://mcss.dev/components/header.md): Site-wide top bar with logo, primary navigation, actions, and a built-in mobile menu.
- [Hero](https://mcss.dev/components/hero.md): Hero sections in full, split, and slideshow layouts with image, video, gradient, or canvas backgrounds.
- [Notice](https://mcss.dev/components/notice.md): Callout box that highlights information or gives feedback on user interaction.
- [Pagination](https://mcss.dev/components/pagination.md): Numbered pagination and prev/next cards for content sites, pure HTML and CSS.
- [Pricing](https://mcss.dev/components/pricing.md): Pricing tier card with feature list and bottom-pinned CTA, built to line up in a pricing table.
- [Read Progress Bar](https://mcss.dev/components/readprogressbar.md): Reading progress bar at the top of the page that tracks scroll position.
- [Section](https://mcss.dev/components/section.md): Full-width page band with vertical rhythm, an optional header, and background variants.
- [Social Media Links](https://mcss.dev/components/socialmedia.md): List of social media links with their corresponding icons.
- [Tags](https://mcss.dev/components/tags.md): Styled tag list for posts and archives, in list or inline form.
- [Testimonial](https://mcss.dev/components/testimonial.md): Quote with attribution: a figure wrapping a blockquote with an avatar byline.
- [Table of Content](https://mcss.dev/components/toc.md): Client-side table of contents generated from the headings on the page.
- [Toggle](https://mcss.dev/components/toggle.md) (CSS-only): CSS-only toggle switch for checkbox inputs.

## 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