# mCSS: full reference
> 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. This file concatenates every docs and components page. A per-page index is at /llms.txt.
# Marketing Template
> Part of mCSS (mcss.dev). Rendered page: https://mcss.dev/docs/template
A complete marketing one-pager built from nothing but the framework and the component library: no site CSS, no custom components, no JavaScript beyond what the components ship with. It is both a working template and the proof that the library composes into a real page.
**[Open the live template](/templates/marketing)**, and use the switcher in its bottom corner to flip the whole page between the default look and the [wireframe theme](/docs/themes): same markup, one stylesheet swapped.
The copy is in on the joke. The structure is the one every one-pager uses (hero, feature grid, testimonials, three pricing tiers, FAQ, closing CTA) and the words point at each convention as it arrives. Replace them with your own and the page stops winking.
From top to bottom it composes: [Banner](/components/banner), [Header](/components/header) (sticky, with mobile menu), [Hero](/components/hero) (full variant on a gradient), [Section](/components/section) with a [FeatureGrid](/components/featuregrid), a filled Section of [Testimonials](/components/testimonial) on the grid, a [Pricing](/components/pricing) row, an [FAQ](/components/faq) with exclusive-open items, the closing-CTA Section recipe, and a [Footer](/components/footer).
## Using it
Copy [`marketing.astro`][srcTemplate] into your own `src/pages/` (as `index.astro`, most likely) and swap the copy, links, and pricing for your own. The placeholder copy is a bit, so all of it goes. Everything it needs is listed below; if you copied the whole framework and component library per [Getting started](/docs/start), you already have all of it.
Two blocks in the file exist for the docs demo and are safe to touch:
- The **theme switcher** at the bottom (marked with a comment) is demo chrome. Delete it, or keep the pattern if you want visitors to flip themes at runtime: it toggles the theme stylesheet's `media` attribute between `not all` and `all`. It avoids the `disabled` attribute because Chromium never loads a parser-created disabled stylesheet.
- The **inline `@layer` statement** at the top of `` pins the cascade-layer order before any stylesheet loads. Only needed when a theme is loaded as a separate `` (layer priority is set by first occurrence, and the theme link may parse first). If you activate your theme with an `@import` in your entry CSS instead, you can drop it.
| What | Files |
| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| The page | `src/pages/templates/marketing.astro` ([source][srcTemplate]) |
| Astro components | `Banner`, `Header`, `Hero`, `Section`, `FeatureGrid`, `FeatureItem`, `Testimonial`, `Avatar` (used by Testimonial), `PricingCard`, `Faq`, `FaqItem`, `Footer` ([source][srcComponents]) |
| Framework CSS | The framework entry `mcss.css` covers every component style used ([source][srcFramework]) |
| Theme (optional) | `theme.wireframe.css`, only if you keep the switcher ([source][srcWireframe]) |
| Icons | `menu`, `x`, `check`, `circle-check`, `moon-star`, `external-link`, `rotate-ccw`, `mail`, `heart` ([source][srcIcons]) |
| Scripts | `src/scripts/utilities.js` (the Header's scroll throttle) ([source][srcScripts]) |
[srcTemplate]: https://github.com/minimaldesign/mCSS/blob/main/src/pages/templates/marketing.astro
[srcComponents]: https://github.com/minimaldesign/mCSS/tree/main/src/components
[srcFramework]: https://github.com/minimaldesign/mCSS/tree/main/src/styles/framework
[srcWireframe]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/theme.wireframe.css
[srcIcons]: https://github.com/minimaldesign/mCSS/tree/main/src/assets/icons
[srcScripts]: https://github.com/minimaldesign/mCSS/blob/main/src/scripts/utilities.js
## Recipes worth stealing
Even if you don't use the whole page, three patterns in it transfer anywhere:
- **The closing CTA** is not a component; it is a `Section` with `variant="primary"` and a `.section_actions` row (see the [Section recipes](/components/section)).
- **The pricing row** is three [PricingCards](/components/pricing) on the plain [grid](/docs/global#grid) (`col="1" col-md="3"`), with `highlighted` on the recommended tier.
- **Exclusive-open FAQ** items share a `name`, so the browser closes one when another opens. Native ``, no JavaScript.
---
# Getting Started
> Part of mCSS (mcss.dev). Rendered page: https://mcss.dev/docs/start
mCSS is both a CSS framework and a methodology. You need to first understand the methodology to use the framework correctly. There are 3 main parts to the methodology.
1. The file structure
1. The CSS syntax
1. The component architecture
Once you've read through the basics below, the best way to understand how it all comes together is to have a look at the [source code][src]. (Video tutorial coming soon!)
## mCSS file structure
The file structure is based on [ITCSS][1], but with important differences detailed below. The basic idea is to organize your files in different [layers][layers] so that your CSS [rulesets][2] are organized from global low [specificity][3] to local high specificity. When done right, it takes care of all the common "shortcomings" of CSS such as specificity wars and cascading conflicts.
mCSS implements this with **native [CSS cascade layers][cascade-layers]**: every framework file is imported into a named `@layer`, and the layer order (not the import order, and not specificity) decides who wins. Anything you write *outside* the layers beats the framework by default, so mCSS always gets out of your way. The only exception is [helper classes][helpers], which use `!important` so they can override anything, including your own CSS. Below is an overview of each layer. The full documentation of most layers is available from the sidebar.
This is how mCSS is organized. ([Github source][4].)
```css
@layer settings, base, elements, global, components, theme, helpers;
/* Build-time only (media queries + mixins definitions) */
@import url(./settings.media-queries.css);
@import url(./settings.mixins.css);
@import url(./settings.tokens.css) layer(settings);
@import url(./settings.ui.css) layer(settings);
@import url(./base.reset.css) layer(base);
@import url(./elements.sectioning.css) layer(elements);
@import url(./elements.text.css) layer(elements);
/* etc. */
@import url(./global.grid.css) layer(global);
@import url(./global.wrap.css) layer(global);
/* etc. */
@import url(./component.button.css) layer(components);
@import url(./component.notice.css) layer(components);
/* etc. */
@import url(./help.spacing.css) layer(helpers);
/* etc. */
/* Optional: activate ONE theme, a swappable skin. Theme files are
self-layered (@layer theme), so no layer() annotation is needed.
None imported = the default look. */
@import url(./theme.wireframe.css);
/* Your site's own CSS imports UNLAYERED, after the framework.
Its normal declarations win over every mCSS layer without fighting
specificity. One exception: helpers are !important and beat
unlayered CSS too. */
@import url(./site/myComponent.css);
```
[cascade-layers]: https://developer.mozilla.org/en-US/docs/Web/CSS/@layer
The easiest ways to use mCSS in your own project:
- **Drop-in file**: grab [`dist/mcss.css`][dist-css] (or [`dist/mcss.min.css`][dist-min]), the whole framework in one file, no build step needed.
- **Individual files**: every framework file is also available pre-processed in [`dist/css/`][dist-dir] (with [`dist/css/mcss.css`][dist-index] as an `@import` index), so you can copy just the layers you need.
- **Source files**: copy [`src/styles/framework/`][framework-src] if you run PostCSS yourself (the source uses `@custom-media`, which needs [postcss-preset-env][7]).
Run `npm run build:css` in the repo to produce `dist/` from source.
[dist-css]: https://github.com/minimaldesign/mCSS/blob/main/dist/mcss.css
[dist-min]: https://github.com/minimaldesign/mCSS/blob/main/dist/mcss.min.css
[dist-dir]: https://github.com/minimaldesign/mCSS/tree/main/dist/css
[dist-index]: https://github.com/minimaldesign/mCSS/blob/main/dist/css/mcss.css
[framework-src]: https://github.com/minimaldesign/mCSS/tree/main/src/styles/framework
### Settings
Settings are where all custom properties are set.
- [Tokens][5] is where you set default values for sizes, font stacks, colors, transitions, etc. See [the docs][5] for all the values available by default.
- [Interface tokens][interfaceTokens] are an abstraction level to standardize common values across elements and components. For instance, components use `--ui-border-color` instead of the lower level token `--base-200`, so one override restyles every bordered surface.
- [Media queries][6] include responsive sizes, as well as user preferences like color schemes, reduced motion, etc. See [media queries docs][6].
- **Mixins** is optional. It is not used in other parts of mCSS by default but can be useful to streamline your own components' code. It requires a [PostCSS plugin][7] to work.
### Base
- Simple reset/normalize.
### HTML Elements
The default styling of all HTML elements, without classes.
- **Sectioning:** `header`, `footer`, etc.
- **Text:** `a`, `p`, etc.
- **Quotes:** adds the correct quotes depending on language.
- **Media:** `img`,`video`, etc.
- **Table:** `table`, `th`, etc.
- **Form:** `input`, `button`, etc.
- **Interactive:** `dialog`, `details`.
### Global
Global styles inlcluded out of the box:
- A responsive [grid system][grid].
- A full feature [wrapper][wrap].
- Common global site [layouts][layout].
- [Typography][prose], via the `.prose` class, for long form text, like articles, etc.
- [Accessibility][a11y] (A11Y) specific classes.
- Basic `@keyframes` animations (e.g., fade in/out)
### Components
Self-contained styles for single components, one block per file. The mCSS framework is designed to be used on its own, allowing you to create your own components, but a [collection of components][components] built on top of mCSS is included.
Some components are **CSS-only**: a single class on a single element, with no Astro component because there is no markup structure to encapsulate. For example, the `.badge` class on a `` is the whole badge, and the `.bt` class can style a `