Numbers of albums recorded
Musician	Instrument	Albums
Sonny Rollins	Saxophone	60
John Coltrane	Saxophone	56
Joe Henderson	Saxophone	25
Wayne Shorter	Saxophone	36
Total Albums	177

The file structure is a simplified [ITCSS][1]: files are organized in [layers][layers] going from broad and generic (tokens, element defaults) to specific and local (components, one-off helpers). When done right, it takes care of all the common "shortcomings" of CSS such as [specificity][3] 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 or 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. ### Two folders The styles live in two folders, and the split is the methodology in miniature: - **[`framework/`][framework-src]**: mCSS itself, every file in a named layer. You copy it and mostly leave it alone: customization goes through the `settings.*` tokens, a [theme](/docs/themes), or your own CSS, not through edits scattered across framework files. - **[`site/`][site-src]**: this site's own CSS, imported **unlayered, after the framework**, so it wins without specificity games. Because those files are unlayered, the order you import them in is important so make sure you have a clear mental model of [ITCSS][1] principles before delving in. You can also refer to mCSS [own `/site`'s setup][4] as a reference. ### The layers, in order Each layer only ever loses to the ones after it. The sections below detail each one; most have full docs in the sidebar.

| Layer | Files | What lives there | | ------------- | ------------- | -------------------------------------------------------- | | `settings` | `settings.*` | Tokens, interface tokens, media queries, mixins | | `base` | `base.*` | Reset/normalize | | `elements` | `elements.*` | Default styling of bare HTML elements | | `global` | `global.*` | Grid, wrap, layout scaffolds, prose, a11y | | `components` | `component.*` | One self-contained block per file | | `theme` | `theme.*` | At most one active theme (token overrides + style rules) | | `helpers` | `help.*` | `!important` one-off overrides, last resort | | _(unlayered)_ | your own CSS | Beats every layer above, except helpers |

The framework's own entry, [`framework/mcss.css`][mcss-entry], makes the split concrete: it declares the layer order and puts every core framework file in its layer. You never edit it: ```css /* framework/mcss.css (abridged) */ @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.text.css) layer(elements); @import url(./global.grid.css) layer(global); @import url(./help.spacing.css) layer(helpers); /* etc. — note: no component.* and no theme.* imports here */ ``` Two layers are declared but never filled by this entry. The `theme` slot is yours (see below), and the `components` slot belongs to the component library, which lives in its own entry, [`framework/mcss.components.css`][mcss-components-entry]. Import it alongside `mcss.css` for the full library, or skip it and build your own components; the layer order declared in `mcss.css` decides priority either way, so import order between the two doesn't matter. Your site's entry (this site's is [`_global.css`][4]) pulls in the framework, activates at most one theme, then imports your own CSS unlayered: ```css /* your entry file */ @import url(./framework/mcss.css); /* Optional: the mCSS component library. Skip it if you build your own components. */ @import url(./framework/mcss.components.css); /* Optional: activate ONE theme, a swappable style. Theme files are self-layered (@layer theme inside the file), so no layer() annotation. None imported = the default look. */ /* @import url(./framework/theme.wireframe.css); */ /* Your own CSS: 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/global.layout.css); @import url(./site/component.header.css); @import url(./site/page.blog.css); /* etc. */ ``` [cascade-layers]: https://developer.mozilla.org/en-US/docs/Web/CSS/@layer [mcss-entry]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/mcss.css [mcss-components-entry]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/mcss.components.css ## Detailed description of each layer

### 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 included 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. It ships in its own entry file (`mcss.components.css`, or `dist/mcss.components.css` as a drop-in): `mcss.css` only declares the `components` layer slot, so the library is opt-in. 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 `
### Meter ```html 2 out of 10 5 out of 10 8 out of 10 ```
2 out of 10

5 out of 10

8 out of 10
### Progress
Uploading Document: 70% 70%
## Media
| File name | Source | | -------------------- | ------------------ | | `elements.media.css` | [Github][srcMedia] | [srcMedia]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/elements.media.css

Plain `` element

`
` element with `` element

`
` element with `` and `
` elements

Here is a caption for this image.

`
` element with a `` element

### Audio
### Video
### Canvas
### Inline Frame
### Inline SVG ## Interactive
| File name | Source | | -------------------- | ------------------ | | `elements.interactive.css` | [Github][srcInteractive] | [srcInteractive]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/elements.interactive.css ### Details & Summary

Expand for details

Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, odio! Odio natus ullam ad quaerat, eaque necessitatibus, aliquid distinctio similique voluptatibus dicta consequuntur animi. Quaerat facilis quidem unde eos! Ipsa.

### Dialog
A random quote you might enjoy…

If you want to awaken all of humanity, then awaken all of yourself. If you want to eliminate the suffering of the world, then eliminate all that is negative in yourself. Truly the greatest gift you have to give is that of your own self-transformation.
--- # Global Styles > Part of mCSS (mcss.dev). Rendered page: https://mcss.dev/docs/global ## Grid

| File name | Source | | ----------------- | ----------------- | | `global.grid.css` | [Github][srcGrid] |
[srcGrid]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/global.grid.css The grid system is extremely easy to use, light weight, and very flexible. It uses the [CSS grid property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid) under the hood, but it lets you set up your layouts directly into your HTML. The implementation is heavily inspired by [Raster](https://github.com/rsms/raster). ### Syntax It's composed of 2 classes: `.grid` for the container, and `.grid_item` for each grid item. The default grid gap is defined as a custom property in [`settings.ui.css`](/docs/tokens#interface-tokens) and is responsive: `16px` (`--sm1`) on small screens, stepping up to `24px` (`--sm3`) at the `--md` breakpoint (768px). You can override `--grid-column-gap` and `--grid-row-gap` globally in your own theme, or on a specific `.grid` element. A `grid-flush` modifier is available if you don't want any gap. Because `.grid` reads its gaps from those two custom properties, overriding a specific grid is just a matter of setting them on the element. Add a class of your own: ```css .photoWall { --grid-column-gap: var(--xs2); --grid-row-gap: var(--xs2); } ``` ```html
...
``` You define the amount of columns of your grid with a custom `col` attribute and the position/width of your grid_items with the custom `span` attribute. The `span` property syntax follows these 5 patterns: - `row`: the grid_item spans a full row - `3`: the grid_item start in the next column and spans 3 columns. - `3-5`: the grid_item starts in column 3 and ends in column 5. - `3+5`: the grid_item starts in column 3 and spans for 5 columns. - `3..`: the grid_item starts in column 3 and spans the remainder of rows. Both the `col` and `span` attributes have responsive versions, which use [the "mobile first" approach][1] of the `--*-n-above` media queries. The available tiers are **`-md`, `-lg`, and `-xl`** (`col-md`, `span-lg`, etc.); other suffixes like `col-sm` or `col-xxl` don't exist and are silently ignored. Grids support up to 24 columns. (The file is generated by `src/tools/generate.global.grid.cjs`; add a tier there if you need one.) [1]: /docs/media-queries#recommended-responsive-setup The custom attribute will not validate. If this is important to you, you'll need to change the attributes to `data-col` and `data-span` in both the CSS and HTML. I personally prefer to use shorter, more legible attributes. Check this thread on Github if you'd like to read more than you've ever wanted to know about [custom attributes and validation](https://github.com/whatwg/html/issues/2271). ### Examples #### Different types of spans 9 colum grid, with all types of spans.

2

4-5

6..

2-3

5..

2+3

6+2

row

4+2

```html

2

4-5

6..

2-3

5..

2+3

6+2

row

4+2

``` #### Responsive grid The grid layout follows a "mobile first" approach using `--*-n-above` media queries. The following example goes from 1 → 4 → 9 → 12 columns. (Resize window to see it in action.)

1

2

3

4

5

6

7

8

9

10

11

12

```html
[…]
``` ## Wrap

| File name | Source | | ----------------- | ----------------- | | `global.wrap.css` | [Github][srcWrap] |
[srcWrap]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/global.wrap.css The `.wrap` global class is a simple content wrapper that will center your content on the page and add some left/right padding on small viewports. The content column comes in three width presets, set with a modifier on the wrapper: `.wrap-sm`, `.wrap-md`, and `.wrap-lg`. A bare `.wrap` uses the `md` width (`minmax(200px, 70ch)`). There is also a `.wrap_content-fullBleed` modifier for children that should extend to the full size of the viewport. See [demo](/demos/wrap). ### Syntax ```html

``` ### Settings You can customize 3 diffent sizes of left/right padding for responsive designs as well as the width of your content. The values below are set in `settings.ui.css`.
| token | value | Description | | ----------------- | ---------------------- | -------------------------------- | | `wrap-spacing` | `var(--sm1)` | default left/right padding | | `wrap-md-spacing` | `var(--sm3)` | left/right padding tablet and up | | `wrap-lg-spacing` | `0` | left/right padding laptop and up | | `wrap-width-sm` | `minmax(200px, 55ch)` | narrow column (`.wrap-sm`) | | `wrap-width-md` | `minmax(200px, 70ch)` | reading column (`.wrap-md`) | | `wrap-width-lg` | `minmax(200px, 900px)` | wide column (`.wrap-lg`) | | `wrap-width` | `var(--wrap-width-md)` | width of a bare `.wrap` |
- More info on [themes](/docs/themes). - More info on [responsive setup](/docs/media-queries#recommended-responsive-setup). ## Layouts

| File name | Source | | ------------------- | ------------------- | | `global.layout.css` | [Github][srcLayout] |
[srcLayout]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/global.layout.css Page-level scaffolds: the skeleton between your `body` tag and your content. Every variant extends the same `.layout` base, an app shell with a header, a stretching content area, and a sticky footer. ### Syntax ```html
…

…

…

…
``` The header and footer are optional: a bare `.layout` with only `.layout_content` still gives you a full-height page (that's what `.layout-cover` relies on). ### The layouts Each thumbnail links to a full-page demo built from labeled color blocks. The demos are the honest version: resize the window to see the breakpoint collapses, sticky footer, and full-viewport behavior that a static diagram can't show.

| Class | What it's for | | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `.layout` | The base app shell: header / content / footer with a sticky footer. Required by every variant, usable alone. | | `.layout-centered` | A single centered reading column (articles, blog posts, legal pages). Width capped at `--layout-content-width`. | | `.layout-sidebar` | Aside + main from the `--md` breakpoint, single column below it (aside follows source order). | | `.layout-sidebar-end` | Compose with `.layout-sidebar` to move the aside to the reading end. ("End", not "right": columns follow the writing direction.) | | `.layout-docs` | Documentation shell: nav aside + main + TOC aside (`.layout_content_aside-toc`). One column below `--md` with the asides hidden, nav + main from `--md`, TOC from `--lg`. | | `.layout-split` | Two equal full-height panes (the direct children of `.layout_content`), stacked below `--md`. Auth screens, image + content landings. | | `.layout-cover` | Full-viewport (`100dvh`) cover with content centered both ways. Landing, 404, coming-soon pages. |
`.layout-docs` hides both asides below the `--md` breakpoint. That's deliberate: docs navigation belongs in your header menu on small screens (that's how mcss.dev does it). If your aside content has no other way in, use `.layout-sidebar`, which stacks instead of hiding. ### The main column is a container Every scaffold's main column (`.layout_content_main`) is a named [size container](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries) (`container: main / inline-size`). Container-responsive components ([Tiles](/components/tiles)) pick their column count from it instead of the viewport, and your own rules can respond to it with `@container main (width >= …)`. ### Settings Column widths come from three tokens in `settings.ui.css`. `--layout-toc-width` accepts any grid track size; the `1fr` default lets the TOC absorb whatever space the main column doesn't use.
| token | value | Description | | ------------------------ | ------- | ---------------------------------------------------------- | | `--layout-content-width` | `70ch` | main column cap (`.layout-centered`, `.layout-docs`) | | `--layout-aside-width` | `245px` | aside column (`.layout-sidebar`, `.layout-docs`) | | `--layout-toc-width` | `1fr` | TOC column (`.layout-docs`) |
Override them globally in your [theme](/docs/themes), or per-layout with a scoped rule. mcss.dev itself runs its docs on `.layout-docs` and layers its own specifics on top ([source][srcSiteLayout]): a wider `77ch` reading column and sticky side navs. That file is the pattern to copy when a scaffold gets you 90% of the way. [srcSiteLayout]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/site/global.layout.css ## Prose

| File name | Source | | ------------------ | ------------------ | | `global.prose.css` | [Github][srcProse] |
[srcProse]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/global.prose.css The global `.prose` class can be used anywhere you need basic typography for long form text, like articles, blog posts, etc. It makes spacing between paragraphs, lists, tables, etc. consistent. This spacing can be modified in your [theme](/docs/themes) via the `--prose-spacing` token. The `.prose` class also adds extra styling for `ol`, `ul`, and `code` elements. ## Accessibility

| File name | Source | | ----------------- | ----------------- | | `global.a11y.css` | [Github][srcA11y] |
[srcA11y]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/global.a11y.css This is where accessibility specific classes go. Currently a WIP as [components are being created](/components/start). ## Animation

| File name | Source | | ---------------------- | ---------------------- | | `global.animation.css` | [Github][srcAnimation] |
[srcAnimation]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/global.animation.css Basic fade in/out animations with flexible start/end opacity values. (More info about [forwards](/blog/css-animation-fill-modes)) ```css .element { opacity: 0.8; animation: fadeToTransparent 1s forwards; } ``` --- # Helpers > Part of mCSS (mcss.dev). Rendered page: https://mcss.dev/docs/helpers Helpers are classes for very targeted "one-off" local overrides. Every helper declaration uses `!important`, and because they live in an mCSS [cascade layer](/docs/start#mcss-file-structure), that beats everything: all framework layers, your own unlayered CSS, even normal inline styles. Think of a helper as inline styling for a single element. That power is exactly why they should be used as little as possible, but they're useful for things like: - Designer's request to "make an exception" - Quick fix until refactor - Temporary test/design Let's say the request is: _"This component just doesn't look right in that context, can we just increase the top and bottom padding?"_ You would use the spacing helper this way: ```html

Content goes here.

``` Using helpers is optional and mCSS will work just fine without them. None of the mCSS components rely on them. If you do use them in your project, it's recommended to use [PurgeCSS](https://purgecss.com/getting-started.html) to keep your CSS size to a minimum. For Astro users, the [astro-purgecss integration](https://github.com/codiume/orbit/tree/main/packages/astro-purgecss) does everything for you out of the box once you install it. Below is a list of all the available helpers. mCSS doesn't include every single CSS property like utility classes frameworks do. It only includes the ones you actually need in those "one-off" situations. I've never needed more than that, but I'm open to add anything that would be useful. Just [open an issue on Github](https://github.com/minimaldesign/mCSS/issues) with your use case and I'll add it in. ## Spacing | File name | Source | | ------------------ | -------------------- | | `help.spacing.css` | [Github][srcSpacing] | [srcSpacing]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/help.spacing.css ### width, height, margin, and padding You can combine these properties with any [dimension token](/docs/tokens#dimension) as well as `0`: | CSS property | Class prefix | | ---------------------- | ------------ | | `width` | `w` | | `height` | `h` | | `margin` | `m` | | `margin-top` | `mt` | | `margin-bottom` | `mb` | | `margin-left` | `ml` | | `margin-right` | `mr` | | `margin-inline-start` | `mis` | | `margin-inline-end` | `mie` | | `padding` | `p` | | `padding-top` | `pt` | | `padding-bottom` | `pb` | | `padding-left` | `pl` | | `padding-right` | `pr` | | `padding-inline-start` | `pis` | | `padding-inline-end` | `pie` | Both directional sets exist on purpose. Use the logical helpers (`mis`, `mie`, `pis`, `pie`) when the spacing follows the reading direction: an icon gap, a list indent, anything that should flip in a right-to-left layout. Use the physical helpers (`ml`, `mr`, `pl`, `pr`) when the offset is a purely visual choice that should stay on the same side no matter the script direction. In a left-to-right layout they resolve identically. #### Examples | Class | Value | | --------- | ---------------------------------- | | `w-lg1` | `width: var(--lg1)` | | `ml-0` | `margin-left: 0` | | `mb-sm1` | `margin-bottom: var(--sm1)` | | `pis-md1` | `padding-inline-start: var(--md1)` | ```html
A component with an extra bottom margin of 48px.

A component with an extra padding of 28px.
``` ## Colors | File name | Source | | ----------------- | ------------------- | | `help.colors.css` | [Github][srcColors] | [srcColors]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/help.colors.css ### color, background-color, and border-color You can combine this properties with any [color token](/docs/tokens#color): | CSS property | Class prefix | | ------------------ | ------------ | | `color` | `c` | | `background-color` | `bgc` | | `border-color` | `bdc` | #### Examples
| Class | Value | | --------------- | ----------------------------------- | | `bgc-base-200` | `background-color: var(--base-200)` | | `bdc-yes-500` | `border-color: var(--yes-500)` | | `c-primary-500` | `color: var(--primary-500)` |

A block with custom colors.

```html

A block with custom colors.

``` ## Layout | File name | Source | | ----------------- | ------------------- | | `help.layout.css` | [Github][srcLayout] | [srcLayout]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/help.layout.css ### overflow
| CSS property | CSS value | Class | Short class | | ------------ | --------- | --------------------- | --------------- | | `overflow` | `auto` | `.overflow-auto` | `.of-auto` | | `overflow` | `hidden` | `.overflow-hidden` | `.of-hidden` | | `overflow` | `clip` | `.overflow-clip` | `.of-clip` | | `overflow` | `visible` | `.overflow-visible` | `.of-visible` | | `overflow` | `scroll` | `.overflow-scroll` | `.of-scroll` | | `overflow-x` | `auto` | `.overflow-x-auto` | `.of-x-auto` | | `overflow-y` | `auto` | `.overflow-y-auto` | `.of-y-auto` | | `overflow-x` | `hidden` | `.overflow-x-hidden` | `.of-x-hidden` | | `overflow-y` | `hidden` | `.overflow-y-hidden` | `.of-y-hidden` | | `overflow-x` | `clip` | `.overflow-x-clip` | `.of-x-clip` | | `overflow-y` | `clip` | `.overflow-y-clip` | `.of-y-clip` | | `overflow-x` | `visible` | `.overflow-x-visible` | `.of-x-visible` | | `overflow-y` | `visible` | `.overflow-y-visible` | `.of-y-visible` | | `overflow-x` | `scroll` | `.overflow-x-scroll` | `.of-x-scroll` | | `overflow-y` | `scroll` | `.overflow-y-scroll` | `.of-y-scroll` |
### position Helper classes for the `position` property.
| CSS value | Class | | ---------- | -------------------- | | `static` | `.position-static` | | `fixed` | `.position-fixed` | | `absolute` | `.position-absolute` | | `relative` | `.position-relative` | | `sticky` | `.position-sticky` |
### visibility Helper classes for the `visibility` property.
| CSS value | Class | | ---------- | ---------------------- | | `visible` | `.visibility-visible` | | `hidden` | `.visibility-hidden` | | `collapse` | `.visibility-collapse` |
### z-index Helper classes for the `z-index` property. See also the [z-index token docs](docs/tokens#z-index).
| Custom Property | CSS Value | Class | | --------------- | ----------- | ----------- | | `--z-bottom` | -1000000000 | `.z-bottom` | | `--z-0` | 0 | `.z-0` | | `--z-1` | 10 | `.z-1` | | `--z-2` | 20 | `.z-2` | | `--z-3` | 30 | `.z-3` | | `--z-4` | 40 | `.z-4` | | `--z-5` | 50 | `.z-5` | | `--z-top` | 1000000000 | `.z-top` |
## Aspect ratios | File name | Source | | ----------------- | ------------------- | | `help.ratios.css` | [Github][srcRatios] | [srcRatios]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/help.ratios.css
| Custom Property | CSS Value | Class | | ----------------- | --------- | ---------------- | | `--ar-square` | 1 | `.ar-square` | | `--ar-landscape` | 4/3 | `.ar-landscape` | | `--ar-portrait` | 3/4 | `.ar-portrait` | | `--ar-widescreen` | 16/9 | `.ar-widescreen` | | `--ar-golden` | 1.618/1 | `.ar-golden` |
## Opacity | File name | Source | | ------------------ | -------------------- | | `help.opacity.css` | [Github][srcOpacity] | [srcOpacity]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/help.opacity.css | Custom Property | CSS Value | Class | | --------------- | --------- | ------ | | `--o-0` | 0 | `.o-0` | | `--o-1` | 0.2 | `.o-1` | | `--o-2` | 0.4 | `.o-2` | | `--o-3` | 0.6 | `.o-3` | | `--o-4` | 0.8 | `.o-4` | | `--o-5` | 1 | `.o-5` | ## Typography | File name | Source | | --------------------- | ----------------------- | | `help.typography.css` | [Github][srcTypography] | [srcTypography]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/help.typography.css ### font-family See the [font stack tokens](/docs/tokens#font-stack) for details.
| Custom Property | Class | | --------------- | --------------- | | `--text` | `.font-text` | | `--display` | `.font-display` | | `--mono` | `.font-mono` |
### font-style | CSS value | Class | | --------- | -------------- | | `italic` | `.font-italic` | | `normal` | `.font-normal` | ### font-weight See the [font weight tokens](/docs/tokens#font-weight) for details.
| Custom Property | Class | | --------------- | ------------------- | | `--extra-light` | `.font-extra-light` | | `--light` | `.font-light` | | `--book` | `.font-book` | | `--semi-bold` | `.font-semi-bold` | | `--bold` | `.font-bold` | | `--black` | `.font-black` |
### font-size See the [font size tokens](/docs/tokens#font-size) for details. | Custom Property | Class | | --------------- | ------------- | | `--text-xs` | `.text-xs` | | `--text-sm` | `.text-sm` | | `--text-md` | `.text-md` | | `--text-lg` | `.text-lg` | | `--text-xl` | `.text-xl` | | `--display-sm` | `.display-sm` | | `--display-md` | `.display-md` | | `--display-lg` | `.display-lg` | | `--display-xl` | `.display-xl` | ### line-height See the [line height tokens](/docs/tokens#line-height) for details. | Custom Property | Class | | --------------- | -------------- | | `--leading-xs` | `.leading-xs` | | `--leading-sm` | `.leading-sm` | | `--leading-md` | `.leading-md` | | `--leading-lg` | `.leading-lg` | | `--leading-xl` | `.leading-xl` | | `--leading-xxl` | `.leading-xxl` | ### text-align | CSS value | Class | | --------- | --------------- | | `left` | `.text-left` | | `center` | `.text-center` | | `right` | `.text-right` | | `justify` | `.text-justify` | | `start` | `.text-start` | | `end` | `.text-end` | Same split as the spacing helpers: `.text-start` and `.text-end` follow the reading direction (they flip in a right-to-left layout), `.text-left` and `.text-right` always mean the visual side. ### text-transform | CSS value | Class | | ------------ | ------------------ | | `uppercase` | `.text-uppercase` | | `lowercase` | `.text-lowercase` | | `capitalize` | `.text-capitalize` | --- # AI Agents > Part of mCSS (mcss.dev). Rendered page: https://mcss.dev/docs/ai mCSS is built to be easy for AI coding agents (Claude, Cursor, Copilot, etc.) to work with. The docs are available in machine-readable form, and this page includes a rules block you can paste into your project's agent instructions so generated markup follows mCSS methodology. ## Machine-readable docs Three things exist specifically for agents: - `/llms.txt`: an index of every docs and components page with one-line descriptions, following the [llms.txt](https://llmstxt.org) convention. Most agent tooling checks for this automatically. - `/llms-full.txt`: the entire reference (docs and all components) concatenated into a single markdown file. Point an agent [here](/llms-full.txt) when it needs the whole framework in one fetch. - **Markdown twins**: every docs and components page is also served as plain markdown at the same URL but with the `.md` extension. These are a fraction of the size of the HTML pages. Make sure you tell your agent to fetch the `.md` URLs, not the HTML. ## Add mCSS rules to your agent instructions Paste the block below into your project's `CLAUDE.md`, `AGENTS.md`, or equivalent. It compresses the conventions that matter most when writing mCSS markup and CSS on top of it. ````md ## mCSS conventions This project uses mCSS (https://mcss.dev), a CSS framework copied into the repo. There is no npm package: the files are project code, and the framework's defaults are overridden, never edited. Full reference in one fetch: https://mcss.dev/llms-full.txt Per-page docs: append `.md` to any mcss.dev docs or components URL (e.g. https://mcss.dev/components/card.md). ### Mental model: layers from default to deliberate All framework CSS lives in native cascade layers, declared in `mcss.css` in priority order (later wins): `settings, base, elements, global, components, theme, helpers`. `mcss.css` only declares the `components` slot; the component library fills it from a second entry, `mcss.components.css`, imported alongside (skip it in projects that build their own components). - `settings` through `components` are the framework defaults: what things look like when nobody has an opinion. Never edit these files to restyle; override them from further up the order. - `theme` holds at most one theme file: a deliberate opinion about the defaults. An empty theme layer IS the default look. - Your own unlayered CSS is more deliberate still: it beats every layer, by design. Never use `!important` to win against the framework. - `helpers` (`help.*` files: spacing, color, typography utilities) are the one exception: every declaration carries `!important`, which inverts the cascade, so they beat even unlayered CSS, like inline styles. Use sparingly. `!important` is banned everywhere else. ### Restyling, in order of preference 1. **Theme token overrides.** A theme is one file that restyles the whole site: `@layer theme { :root { ... } }` (self-layered, so it slots correctly however it's loaded). Copy `theme.default.css` to start one; activate exactly one from your CSS entry point, after `mcss.css` (which never imports themes itself). Anything the theme doesn't mention falls back to the defaults. Pick the blast radius per override: raw tokens (`--base-*`, `--text`) shift the whole palette or type scale, interface tokens (`--ui-border-color`, `--heading-font`) change every surface that shares the meaning, component tokens (`--bt-border-radius`, `--card-*`) turn one knob. Most themes never need a selector. 2. **Theme style rules**, only for what tokens can't express (pseudo-elements, `nth-child` rhythm, `text-decoration`). Theme files are the ONE place allowed to select component classes from outside. No `!important` in themes. 3. **Unlayered project CSS** for what belongs to your project rather than to the design: page layouts, one-off blocks. 4. **Helpers** for element-level one-offs. Edit framework files only for structural change: adding a component, or adding a missing token or `Class` prop to an existing one. ### Tokens - `settings.tokens.css`: raw primitives (palettes, type scale, spacing, radii). - `settings.ui.css`: interface tokens, the public API of every component (semantic aliases plus all component defaults). Interface tokens only ever take another token as value; raw values live in `settings.tokens.css`. - Grammar: `--component-part-property`, longhand, kebab-case, no abbreviations: `--bt-background-color-hover`, `--notice-border-width`. - Feedback colors: use the semantic aliases `--success-*`, `--danger-*`, `--warning-*`, not the raw scales they point at. ### Class naming (BEM-like, different separators) - Block: `.componentName` (camelCase for multi-word names) - Element: `.componentName_element` (underscore marks hierarchy inside one block; chains may nest as deep as the block's structure needs) - Modifier: `.componentName-modifier` (hyphen), for build-time variants chosen in markup - State: `.is-*` (`.is-active`, `.is-open`), only for things that change at runtime, always scoped inside the block (`.avatar.is-online`) - Prefer styling an existing ARIA attribute over inventing a state class: `[aria-current]`, `[aria-expanded="true"]`, `[aria-disabled="true"]` - A nested component starts its own block: `.themeToggle_text`, never `.header_nav_themeToggle_text` ### Never couple classes across components (CRITICAL) A selector may only contain classes from its own block. Never write a selector that reaches into another component: not its block, not its elements. Instead, mix your own block's classes onto the component's markup and style those: ```html

Pro

``` ```css /* Don't: couple your block to the card's classes */ .pricing .card { border-color: var(--primary-500); } .pricing .card_title { color: var(--primary-500); } /* Do: style the classes you mixed on */ .pricing_planTitle { color: var(--primary-500); } /* Do: or turn the component's own token knobs from your class */ .pricing_planCard { --card-border-color: var(--primary-500); } ``` When the markup comes from a component you don't write inline, its `Class` props (`titleClass`, `iconClass`, ...) mix your class onto the part the same way. If the prop or token you need doesn't exist, add it to the component; don't reach in with a selector. Bare HTML tags, `.is-*` states, and ARIA attribute selectors are fine inside your own block. Theme files are the only sanctioned exception to this rule. ### Transitions Never `transition: all`; list the properties that actually animate. ```` ## MCP and tooling There is no mCSS MCP server yet. For now, `llms-full.txt` plus the rules block above is the recommended setup. If your agent supports fetching URLs at runtime, the markdown twins are the cheapest way to pull a single component's markup reference into context. --- # Getting started > Part of mCSS (mcss.dev). Rendered page: https://mcss.dev/components/start The mCSS component library is entirely built with the [mCSS framework](/docs/start), and you **own the code**: instead of installing a package, you copy the pieces you want into your project and edit them like anything else you wrote. Every component's docs page starts with a table listing exactly which files, dependencies, and interface tokens it needs. Each component comes in two flavors: - **Plain HTML + CSS.** Copy the `component.*.css` file (or grab the compiled version from [`dist/css/`](https://github.com/minimaldesign/mCSS/tree/main/dist/css); the whole library in one file is [`dist/mcss.components.css`](https://github.com/minimaldesign/mCSS/blob/main/dist/mcss.components.css)) and use the documented markup. Works with any framework, or none. - **Astro.** Copy the `.astro` file(s) for typed props, slots, and sensible accessibility defaults out of the box. Components stay as pure HTML/CSS as possible. The exceptions ship only the few lines they need: the [header](/components/header)'s mobile menu, the dismissible [banner](/components/banner), the [hero](/components/hero)'s slideshow, the [table of contents](/components/toc)' scrollspy, and the [read progress bar](/components/readprogressbar)'s fallback for browsers without scroll-driven animations. Styling lives in [cascade layers](/docs/start), so your own unlayered CSS always wins, and every visual knob is a documented `--component-*` [interface token](/docs/tokens#interface-tokens). You can see some of the Astro components in action on the [Marketing Template](/templates/marketing) ([code](https://github.com/minimaldesign/mCSS/blob/main/src/pages/templates/marketing.astro)). Spotted a bug, or built something worth sharing? [Issues and discussions](https://github.com/minimaldesign/mCSS/issues) are open. --- # Avatar > Part of mCSS (mcss.dev). Rendered page: https://mcss.dev/components/avatar The `.avatar` component is a visual representation of a user. It shows the user's initials or an image thumbnail. Its default size is 56px. (See the [HTML](#html) section below for all options.) SR
| File | Description | Source | | ---------------------- | ----------- | ----------- | | `component.avatar.css` | All avatar styles (`.avatar`) | [Github][1] |
[1]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/component.avatar.css ## Playground
{content}
`} baseClasses="avatar" snippets={{ initials: { preview: "SR", code: "SR" }, image: { preview: ``, code: ``, }, }} controls={[ { heading: "Variation", items: [ { type: "select", name: "size", label: "Size", default: "", options: [ { label: "Default", value: "" }, { label: "Small", value: "avatar-sm" }, { label: "Medium", value: "avatar-md" }, { label: "Large", value: "avatar-lg" }, { label: "Extra large", value: "avatar-xl" }, ]}, ]}, { heading: "State", items: [ { type: "select", name: "status", label: "Status", default: "", options: [ { label: "None", value: "" }, { label: "Online", value: "is-online" }, { label: "Offline", value: "is-offline" }, ]}, ]}, { heading: "Content", items: [ { type: "select", name: "content", label: "Show", snippet: "content", default: "initials", options: [ { label: "Initials", value: "initials", class: "", snippet: "initials" }, { label: "Image", value: "image", class: "", snippet: "image" }, ]}, ]}, ]} /> ## HTML ### Available modifiers
| Available modifiers | Description | | ----------------------------- | -------------------------- | | `.avatar` | Default - 56px | | `.avatar` + `.avatar-sm` | Small - 24px | | `.avatar` + `.avatar-md` | Medium - 36px | | `.avatar` + `.avatar-lg` | Large - 80px | | `.avatar` + `.avatar-xl` | Extra large - 128px | | `.avatar` + `.is-online` | User is online - green dot | | `.avatar` + `.is-offline` | User is offline - grey dot |
### Custom properties The following custom properties are available in [`settings.ui.css`](/docs/tokens#interface-tokens):
| Property | Color | | ----------------------------------- | --------------------------------- | | `--avatar-color` | Text color (when no image). | | `--avatar-background-color` | Background color (when no image). | | `--avatar-border-color` | Border color. | | `--avatar-border-width` | Border width. | | `--avatar-radius` | Radius. (`0` = square). | | `--avatar-status-dot-color-offline` | Status dot color: offline. | | `--avatar-status-dot-color-online` | Status dot color: online. |
## Astro component
| Prop | Type | Default | Description | | ------------ | --------- | --------- | ----------------------------------------------------------- | | `size` | `string` | undefined | `sm`, `md`, `lg`, `xl` ([px values](#html)) | | `imageSrc` | `string` | undefined | Optional image. | | `status` | `'online' \| 'offline'` | `undefined` | Shows a status dot (green online / grey offline) | | `class` | `string` | undefined | Additional CSS classes, useful for [helper classes](/docs/helpers). |
## Examples

### Full name vs initials Sonny Rollins SR ```astro --- import Avatar from "../../components/Avatar.astro"; --- Sonny Rollins SR ``` The astro component can take initials or a full name and will output initials if an image is not provided. It will output the full name in the `alt` attribute if an image is provided.

### Offline large avatar Sonny Rollins ```astro --- import Avatar from "../../components/Avatar.astro"; import imageSrc from "../../assets/images/sonny.png"; --- Sonny Rollins ```

### HTML examples

SR ```html

SR

```

--- # Badge > Part of mCSS (mcss.dev). Rendered page: https://mcss.dev/components/badge The badge is a small label for statuses, categories, and "new" markers. It is a [CSS-only component](/docs/start#components): there is no Astro file because a `` with the `.badge` class is already the whole API.
default primary success danger warning

| File | Description | Source | | ---------------------------------- | ------------------------------ | ----------- | | `component.badge.css` | All badge styles | [Github][1] | | `--badge-*` block in `settings.ui.css` | Interface tokens (see table below) | [Github][2] |
[1]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/component.badge.css [2]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/settings.ui.css ## Playground {label}'} baseClasses="badge" controls={[ { heading: "Variation", items: [ { type: "select", name: "color", label: "Color", default: "", options: [ { label: "Default", value: "" }, { label: "Primary", value: "badge-primary" }, { label: "Success", value: "badge-success" }, { label: "Danger", value: "badge-danger" }, { label: "Warning", value: "badge-warning" }, ]}, ]}, { heading: "Content", items: [ { type: "text", name: "label", label: "Label", default: "new" }, ]}, ]} /> ## HTML ```html default shipped ``` ### Available modifiers
| Class | Description | | ---------------------------- | --------------------------------- | | `.badge` | Default style. Neutral colors. | | `.badge` + `.badge-primary` | Primary colors. | | `.badge` + `.badge-success` | Positive feedback. Greens. | | `.badge` + `.badge-danger` | Negative feedback. Reds. | | `.badge` + `.badge-warning` | Warning. Oranges. |
One-off colors work like every other variant in mCSS: override the local custom property. ```html custom ``` ### Custom properties The following custom properties are available in [`settings.ui.css`](/docs/tokens#interface-tokens):
| Property | Description | | ------------------------------------ | ------------------------------ | | `--badge-font-size` | Font size. | | `--badge-border-radius` | Border radius. | | `--badge-color` | Default text color. | | `--badge-background-color` | Default background color. | | `--badge-primary-color` | Primary variant text color. | | `--badge-primary-background-color` | Primary variant background. | | `--badge-success-color` | Success variant text color. | | `--badge-success-background-color` | Success variant background. | | `--badge-danger-color` | Danger variant text color. | | `--badge-danger-background-color` | Danger variant background. | | `--badge-warning-color` | Warning variant text color. | | `--badge-warning-background-color` | Warning variant background. |
--- # Banner > Part of mCSS (mcss.dev). Rendered page: https://mcss.dev/components/banner The `.banner` component is the thin announcement bar at the very top of the page, optionally dismissible (remembered in `localStorage`).
mCSS v1 is out! Read the announcement

| File | Description | Source | | ----------------------------------- | ------------------------------ | ----------- | | `component.banner.css` | All banner styles | [Github][1] | | `Banner.astro` | The Astro component | [Github][2] | | `icons/x.svg` | Dismiss icon | [Github][3] | | `--banner-*` block in `settings.ui.css` | Interface tokens (see table below) | [Github][4] |
[1]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/component.banner.css [2]: https://github.com/minimaldesign/mCSS/blob/main/src/components/Banner.astro [3]: https://github.com/minimaldesign/mCSS/tree/main/src/assets/icons [4]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/settings.ui.css ## Playground

{content}

{close} `} snippets={{ close: { preview: ``, code: '', }, }} controls={[ { heading: "Behavior", items: [ { type: "checkbox", name: "close", label: "Dismissible", snippet: "close", default: true }, ]}, { heading: "Content", items: [ { type: "text", name: "content", label: "Text", default: "mCSS v1 is out!" }, ]}, ]} /> The playground's dismiss button is inert: the persistence script lives in Banner.astro (see below). ## HTML ```html

mCSS v1 is out! Read the announcement

``` For a dismissible plain-HTML banner, copy the small inline script from the bottom of [Banner.astro][2]: it removes the banner when the stored key exists (before paint, so an already-dismissed banner never flashes) and stores the key on click. Looking for the big closing call-to-action band instead? That's a [Section recipe](/components/section), not a separate component. ### Custom properties The following custom properties are available in [`settings.ui.css`](/docs/tokens#interface-tokens):
| Property | Description | | --------------------------- | ------------------- | | `--banner-color` | Banner text color. | | `--banner-background-color` | Banner background. |
## Astro component
| Prop | Type | Default | Description | | -------------- | --------- | ------------------------- | -------------------------------------------------------- | | `id` | `string` | `undefined` | Required when dismissible; keys the `localStorage` entry (`mcss-banner-`). Use a new id per campaign so a new announcement shows again. | | `dismissible` | `boolean` | `false` | Adds the close button + persistence script. | | `dismissLabel` | `string` | `"Dismiss announcement"` | Accessible name of the close button. | | `class` | `string` | `undefined` | Additional CSS classes. |
The default slot is the banner content. Place the banner as the first child of ``, above the header. ## Examples

A dismissible banner. Close it and it stays closed on reload (per browser).
```astro --- import Banner from "../components/Banner.astro"; ---
mCSS v1 is out! Read the announcement
```

--- # Breadcrumbs > Part of mCSS (mcss.dev). Rendered page: https://mcss.dev/components/breadcrumbs The `.breadcrumbs` component is a `nav > ol` trail with CSS-only separators, and optional [BreadcrumbList JSON-LD](https://developers.google.com/search/docs/appearance/structured-data/breadcrumb) for search engines.
| File | Description | Source | | ---------------------------------------- | ------------------------------ | ----------- | | `component.breadcrumbs.css` | All breadcrumb styles | [Github][1] | | `Breadcrumbs.astro` | The Astro component | [Github][2] | | `--breadcrumbs-*` block in `settings.ui.css` | Interface tokens (see table below) | [Github][3] |
[1]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/component.breadcrumbs.css [2]: https://github.com/minimaldesign/mCSS/blob/main/src/components/Breadcrumbs.astro [3]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/settings.ui.css ## Playground

Home

Components

Breadcrumbs

`} baseClasses="breadcrumbs" controls={[ { heading: "Style", items: [ { type: "text", name: "sep", label: "Separator", default: "/" }, ]}, ]} /> ## HTML ```html

Home

Components

Breadcrumbs

``` The last crumb is text, not a link, marked with `aria-current="page"`; the separators are generated content with empty alt text, so screen readers read the trail as a clean list. The separator lives in CSS, not the markup — change it by overriding one token: ```css :root { --breadcrumbs-separator: "→"; } ``` ### Custom properties
| Property | Description | | ------------------------------- | ---------------------------------- | | `--breadcrumbs-separator` | Separator string (default `/`). | | `--breadcrumbs-separator-color` | Separator color. | | `--breadcrumbs-color` | Link color. | | `--breadcrumbs-color-current` | Current page (last crumb) color. |
## Astro component
| Prop | Type | Default | Description | | ----------- | --------------------------- | --------------- | ------------------------------------------------------------------ | | `items` | `{ label, href? }[]` | — | The trail. The last item (or any item without `href`) is text. | | `ariaLabel` | `string` | `"Breadcrumbs"` | The nav's accessible name. | | `jsonLd` | `boolean` | `false` | Emit BreadcrumbList structured data (hrefs resolved to absolute). | | `class` | `string` | `undefined` | Additional CSS classes. |
## Examples

```astro --- import Breadcrumbs from "../components/Breadcrumbs.astro"; --- ```

--- # Button > Part of mCSS (mcss.dev). Rendered page: https://mcss.dev/components/button The button is a [CSS-only component](/docs/start#components) using the `.bt` class (canonical; `.button` is kept as an alias). Apply it to `
| File | Description | Source | | ----------------- | ----------- | ----------- | | `component.button.css` | All button styles (`.button` or `.bt`) | [Github][1] | [1]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/component.button.css
## Playground {icon}{label}'} baseClasses="bt" snippets={{ icon: { preview: mail, code: " " } }} controls={[ { heading: "Variation", items: [ { type: "select", name: "size", label: "Size", default: "", options: [ { label: "Default", value: "" }, { label: "Medium", value: "bt-md" }, { label: "Large", value: "bt-lg" }, ]}, { type: "select", name: "color", label: "Color", default: "", options: [ { label: "Default", value: "" }, { label: "Primary", value: "bt-primary" }, { label: "Yes", value: "bt-yes" }, { label: "Maybe", value: "bt-maybe" }, { label: "No", value: "bt-no" }, { label: "White", value: "bt-white", previewSurface: "dark" }, { label: "White outline", value: "bt-outline-white", previewSurface: "dark" }, ]}, ]}, { heading: "Modifiers", items: [ { type: "checkbox", name: "outline", label: "Outline", value: "bt-outline", default: false }, { type: "checkbox", name: "text", label: "Text button", value: "bt-text", default: false }, { type: "checkbox", name: "icon", label: "Icon", snippet: "icon", default: false }, { type: "checkbox", name: "tightIcon", label: "Tight icon", value: "bt-tightIcon", default: false }, ]}, { heading: "Content", items: [ { type: "text", name: "label", label: "Label", default: "Button" }, ]}, { heading: "State", items: [ { type: "checkbox", name: "disabled", label: "Disabled", attr: "disabled", default: false }, ]}, ]} /> ## HTML You can combine modifiers in any way you like (see [examples](#examples)). The `.bt-outline-white` and `.bt-white` (solid, primary text) are special case buttons useful for dark/image/gradient backgrounds such as [Heroes](/components/hero) and don't change between light/dark themes.
| Available modifiers | Style | | -------------------------------------- | -------------------------------------------------------------------------------------- | | `.bt` | | | `.bt.bt-md` | | | `.bt.bt-lg` | | | `.bt.bt-outline` | | | `.bt.bt-outline-white` | | | `.bt.bt-white` | | | `.bt.bt-primary` | | | `.bt.bt-yes` | | | `.bt.bt-maybe` | | | `.bt.bt-no` | | | SVG inline inside button | | | `.bt.bt-tightIcon` | | | `.bt.bt-text` | | | `disabled` attribute | | | `` as button | Link Button | | `` as button (with `aria-disabled`) | Disabled Link Button |
### Custom properties The following custom properties are available in [`settings.ui.css`](/docs/tokens#interface-tokens):
| Property | Description | | ------------------------------------- | --------------------------------- | | `--bt-font-size` | Font size. | | `--bt-font-size-lg` | Large font size. | | `--bt-font-weight` | Font weight. | | `--bt-color` | Text color. | | `--bt-color-hover` | Text color (hover). | | `--bt-background-color` | Background color. | | `--bt-background-color-hover` | Background color (hover). | | `--bt-border-color` | Border color. | | `--bt-border-width` | Border width. | | `--bt-border-radius` | Border radius. | | `--bt-border-radius-lg` | Large border radius. | | `--bt-outline-color-hover` | Outline text color (hover). | | `--bt-outline-background-color-hover` | Outline background color (hover). | | `--bt-outline-border-color` | Outline border color. | | `--bt-primary-color` | Primary text color. | | `--bt-primary-color-hover` | Primary text color (hover). | | `--bt-primary-background-color` | Primary background color. | | `--bt-primary-background-color-hover` | Primary background color (hover). | | `--bt-primary-border-color` | Primary border color. | | `--bt-primary-border-color-hover` | Primary border color (hover). |
### Examples

This is a Link ```html This is a Link ```

```html ```

```html ```

--- # Card > Part of mCSS (mcss.dev). Rendered page: https://mcss.dev/components/card The `.card` component, in its simplest form, is a container with 3 style options: - **Default:** transparent background, border outline. - **Filled:** solid background color. - **Raised:** drop shadow and hover effect. Make sure you check out the [Tiles](/components/tiles) component to see how to lay cards out in equal-height, container-responsive columns. (See [below](/components/card#blog-index-pattern) and [this site's own blog index](/blog) for examples.)

Natural Law, is a set of universal, non-man-made, binding and unchangeable conditions which govern the consequence of our actions.

Natural Law, is a set of universal, non-man-made, binding and unchangeable conditions which govern the consequence of our actions.

| File | Description | Source | | ------------------------------------- | ---------------------------------------------- | ----------- | | `component.card.css` | All card styles (`.card`) | [Github][1] | | `Card.astro` | The Astro component | [Github][3] | | `Tags.astro`, `Avatar.astro` | Composed components (dependencies) | [Github][3] | | [Tiles](/components/tiles) | Equal-height, container-responsive list layout | [Github][2] | | `--card-*` block in `settings.ui.css` | Interface tokens (see below) | [Github][4] |
[1]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/component.card.css [2]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/component.tiles.css [3]: https://github.com/minimaldesign/mCSS/tree/main/src/components [4]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/settings.ui.css ## Playground {media}{tags}

{title}

{subtitle}

{badges}

{body}

{byline}{actions} `} baseClasses="card" snippets={{ mediaInset: { preview: `
`, code: `
`, }, mediaFlush: { preview: `
`, code: `
`, }, badges: { preview: '
new
', code: '
new
', }, tags: { preview: '
css
learn
', code: '
css
learn
', }, byline: { preview: '
SR
Sonny RollinsMay 2, 2026
', code: '
SR
Sonny RollinsMay 2, 2026
', }, actions: { preview: '
Details
', code: '
Details
', }, }} controls={[ { heading: "Variation", items: [ { type: "select", name: "variant", label: "Variant", default: "", options: [ { label: "Default", value: "" }, { label: "Filled", value: "card-filled" }, { label: "Raised", value: "card-raised" }, ], }, { type: "select", name: "media", label: "Image", default: "", snippet: "media", options: [ { label: "None", value: "" }, { label: "Inset", value: "inset", class: "", snippet: "mediaInset", }, { label: "Flush", value: "flush", class: "", snippet: "mediaFlush", }, ], }, ], }, { heading: "Parts", items: [ { type: "checkbox", name: "badges", label: "Badges", snippet: "badges", default: false, }, { type: "checkbox", name: "tags", label: "Tags", snippet: "tags", default: false, }, { type: "checkbox", name: "byline", label: "Byline", snippet: "byline", default: false, }, { type: "checkbox", name: "actions", label: "Actions", snippet: "actions", default: false, }, ], }, { heading: "State", items: [ { type: "checkbox", name: "disabled", label: "Disabled", value: "is-disabled", default: false, }, ], }, { heading: "Content", items: [ { type: "text", name: "title", label: "Title", default: "Card title" }, { type: "text", name: "subtitle", label: "Subtitle", default: "Category", }, { type: "text", name: "body", label: "Body", default: "This is where the content goes!", }, ], }, ]} /> ## HTML ### Available modifiers
| Available modifiers | Description | | ----------------------------------- | -------------------------------------------------- | | `.card` | Default style. Transparent background with border. | | `.card` + `.card-filled` | Filled with a background color. | | `.card` + `.card-raised` | Drop shadow, animated on hover. | | `.card` + `.is-disabled` | Lowered opacity. Interactivity disabled. | | `.card_media` + `.card_media-flush` | Edge-to-edge image on top of the card. |
### Clickable cards A card carries **one** link: put `.card_link` on a real anchor (usually the title link) and it stretches over the whole card with a `::after`, so screen readers hear one link named by the title. Actions stay clickable because `.card_actions` is positioned and comes later in the DOM; tags stay clickable through their own z-index bump. The blog-index pattern combines this with a flush image, tags, and a byline, on a [Tiles](/components/tiles) list. Tiles is container-responsive: columns appear as the column the list sits in crosses the size's container thresholds, so this site's blog index gets its 4-up laptop layout purely by widening the page column (`--layout-content-width`), no per-list tuning: ```html

css

Designing with cascade layers

Why layer order beats specificity wars.

Sonny Rollins May 2, 2026

``` ### Custom properties The following custom properties are available in [`settings.ui.css`](/docs/tokens#interface-tokens):
| Property | Color | | ----------------------------- | ----------------------------------------------- | | `--card-spacing` | General padding inside the card. | | `--card-color` | Text color. | | `--card-secondary-text-color` | Subtitle, date, and secondary text color. | | `--card-bg-color` | Background color of the "filled" variant. | | `--card-border-radius` | Border radius. | | `--card-border-color` | Border color. | | `--card-border-width` | Border width. | | `--card-shadow` | Default drop shadow or the "raised" variant. | | `--card-shadow-hover` | Hover state drop shadow. | | `--card-aspect-ratio` | Image aspect ratio (defaults to `--ar-golden`). | | `--card-loading-bg` | Loading skeleton background color. |
Badge colors come from the [badge component](/components/badge)'s `--badge-*` tokens. ## Astro component **Card** Every part is optional; render only what you pass. Badges and tags can coexist, but they compete for attention: badges are non-interactive status labels pinned top-right, tags are taxonomy links in the content flow. Prefer one or the other on a given card.
| Prop | Type | Default | Description | | -------------- | ------------------------- | -------------- | ------------------------------------------------------------------- | | `variant` | `string` | undefined | Card’s visual style: `filled`, `raised`. | | `isDisabled` | `boolean` | `false` | Disabled style. Disabled interactions. | | `isLoading` | `boolean` | `false` | Loading state with skeleton UI. | | `href` | `string` | undefined | Makes the whole card clickable (through the title link, if any). | | `title` | `string` | undefined | Header title text. | | `subtitle` | `string` | undefined | Header subtitle text. | | `headingLevel` | `number` | `2` | Heading level of the title: `2`, `3`, or `4`. | | `imageSrc` | `ImageMetadata \| string` | undefined | Add an image to the card (imported asset or URL/path). | | `imageAlt` | `string` | `''` | Alt text for the image. | | `aspectRatio` | `string` | `golden` | Image aspect ratio (available [aspect ratios][ar]). | | `flushImage` | `boolean` | `false` | Edge-to-edge image on top of the card instead of inset. | | `badges` | `array` | `[]` | Array of objects (see example below). | | `tags` | `string[]` | `[]` | Tag names, rendered with the Tags component. | | `tagsUrl` | `string` | `'/blog/tags'` | Base URL for tag links. | | `author` | `string` | undefined | Byline name (also feeds the Avatar initials). | | `avatarSrc` | `ImageMetadata \| string` | undefined | Byline avatar image. | | `date` | `Date` | undefined | Publication date, rendered as a `` in the byline. | | `locale` | `string` | `'en-US'` | Locale for the formatted date. | | `data-testid` | `string` | `'card'` | Test ID for testing frameworks. | | `class` | `string` | undefined | Additional CSS classes, useful for [helper classes](/docs/helpers). | [ar]: /docs/tokens#aspect-ratio
**Tiles** Lists of cards go in a [Tiles](/components/tiles) component: a `ul` whose items stretch, so cards in a row share the same height, with a container-responsive column count. See its page for the sizes, thresholds, and container rules. ### Slots The `Card` component supports the following slots for content projection: - **Default slot**: Main content area (e.g., text or paragraphs). - **Actions slot**: Action buttons or links in the footer. It is recommended to use the [button component](/components/button) in the `actions` slot, e.g.: ```astro Cancel ``` ### Badge Styling The `badges` prop takes an array of objects. Each object consists of a `label` property which defines the badge's text, and an optional `color` property that defines the badge's background color. If no `color` is provided, it defaults to `--badge-background-color` from the [badge component](/components/badge).

This is where the content goes. Unless you only want a bunch of badges!

```astro
This is where the content goes. Unless you only want a bunch of badges!
``` ## Examples

### Blog-index pattern

Why layer order beats specificity wars, and how mCSS hands the final word to your unlayered CSS.

One file of custom properties is the whole theming story.

```astro --- import Card from '../components/Card.astro'; import Tiles from '../components/Tiles.astro'; ---

Why layer order beats specificity wars.

```
### Card with image and actions

This is a extremely detailed description of the product.
View Details

```astro --- import placeholder from "../../assets/images/image.png"; import Card from '../../components/Card.astro'; ---
This is a extremely detailed description of the product.
View Details ```

### Loading state

This is what the card looks like without the `isLoading` prop.

This is what the card looks like without the `isLoading` prop.

```astro --- import placeholder from "../../assets/images/image.png"; import Card from '../../components/Card.astro'; ---
This is what the card looks like without the `isLoading` prop.
```

### Disabled state

With the `isDisabled` prop, the link doesn't work anymore.

Witout the `isDisabled` prop, the link is clickable.

```astro --- import placeholder from "../../assets/images/image.png"; import Card from '../../components/Card.astro'; ---
With the `isDisabled` prop, the link doesn't work anymore.
```

### HTML example

This is a extremely detailed description of the product.
View Details

```html

Product Name

Category

new

This is a extremely detailed description of the product.

View Details

```

--- # FAQ > Part of mCSS (mcss.dev). Rendered page: https://mcss.dev/components/faq The `.faq` component groups `details`/`summary` disclosures into the classic FAQ accordion — native behavior, zero JavaScript.
No. The browser's own details element does all the work.

Every item in this group shares name="demo", so the browser only keeps one open. Remove the name and items open independently.

Natively: the summary is focusable and toggles with Enter/Space.

| File | Description | Source | | -------------------------------- | --------------------------------------- | ----------- | | `component.faq.css` | Group spacing | [Github][1] | | `elements.interactive.css` | The `details`/`summary` styling + chevron | [Github][2] | | `Faq.astro`, `FaqItem.astro` | The Astro components | [Github][3] | | `--faq-spacing` in `settings.ui.css` | Interface token | [Github][4] |
[1]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/component.faq.css [2]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/elements.interactive.css [3]: https://github.com/minimaldesign/mCSS/tree/main/src/components [4]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/settings.ui.css ## Playground

Does this need JavaScript?

No. The browser's own details element does all the work.

How does exclusive-open work?

Every item shares the same name attribute.

`} snippets={{ group: { preview: ' name="faq"', code: ' name="faq"' }, open: { preview: " open", code: " open" }, }} controls={[ { heading: "Behavior", items: [ { type: "checkbox", name: "group", label: "Exclusive open", snippet: "group", default: true }, { type: "checkbox", name: "open", label: "First item open", snippet: "open", default: false }, ]}, ]} /> ## HTML ```html

Does this need JavaScript?

No. The browser's own details element does all the work.

How does exclusive-open work?

Every item shares the same name attribute.

``` Giving every item the same `name` makes the group exclusive-open (opening one closes the others). It is a progressive enhancement: browsers that don't support exclusive accordions simply let several items stay open, which is a perfectly fine FAQ too. ### Custom properties
| Property | Description | | --------------- | ------------------- | | `--faq-spacing` | Gap between items. |
The item visuals come from the `details` element styling; there is nothing FAQ-specific to retheme. ## Astro component **Faq** takes only `class` and passes everything else to its root `
`. Items go in the default slot. **FaqItem**
| Prop | Type | Default | Description | | ---------- | --------- | ----------- | ---------------------------------------------------------------- | | `question` | `string` | — | The summary text. Required. | | `open` | `boolean` | `false` | Render the item open. | | `name` | `string` | `undefined` | Same name on every item of a group = native exclusive-open. | | `class` | `string` | `undefined` | Additional CSS classes. |
The default slot is the answer. ## Examples

No `name`, so this group lets several items stay open at once.

The first item above renders open.
```astro --- import Faq from "../components/Faq.astro"; import FaqItem from "../components/FaqItem.astro"; ---
No `name`, so several items can stay open at once.

The first item above renders open.
```

--- # Feature Grid > Part of mCSS (mcss.dev). Rendered page: https://mcss.dev/components/featuregrid export const check = ``; The feature grid is the classic marketing "three columns of icon + title + text" pattern: `.featureItem` blurbs on a small-size [Tiles](/components/tiles) list. The layout is container-responsive: columns appear as the nearest size container gets wider, so the count answers the space the grid actually has, not the viewport.
Just an unordered list and the tiles you already have.

1, 2, then n columns as its container grows.

Icon box size and colors come from the theme.

| File | Description | Source | | -------------------------------------------- | ---------------------------------- | ----------- | | `component.featureItem.css` | Feature item styles | [Github][1] | | `FeatureItem.astro` | The Astro component | [Github][2] | | `--featureItem-*` block in `settings.ui.css` | Interface tokens (see table below) | [Github][3] | | [Tiles](/components/tiles) | The container-responsive layout | [Github][2] |
Depends on [Tiles](/components/tiles) for the layout. Icons are yours to bring; [Lucide](https://lucide.dev/) is a great resource. [1]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/component.featureItem.css [2]: https://github.com/minimaldesign/mCSS/tree/main/src/components [3]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/settings.ui.css ## Playground

Zero JavaScript

Just an unordered list and the tiles you already have.

Responsive by default

1, 2, then n columns as its container grows.

Tokenized icons

Icon box size and colors come from the theme.

`} baseClasses="tiles" snippets={{ check: { preview: check, code: "" }, }} controls={[ { heading: "Layout", items: [ { type: "select", name: "size", label: "Tile size", default: "sm", options: [ { label: "sm (the pattern)", value: "sm", class: "tiles-sm" }, { label: "md", value: "md", class: "" }, ], }, ], }, ]} /> ## HTML One `.featureItem` per `
`, on a `.tiles-sm` list: small tiles, so its container thresholds sit lower and columns appear sooner than for card-sized ones. The count comes from the width of the column the list sits in; see [Tiles](/components/tiles) for the thresholds and the container rules. ```html

Zero JavaScript

Just an unordered list and the tiles you already have.

``` The icon box is `aria-hidden`: feature icons are decoration next to a real heading, so screen readers skip them. ### Custom properties The following custom properties are available in [`settings.ui.css`](/docs/tokens#interface-tokens):
| Property | Description | | ------------------------------------- | ---------------------------- | | `--featureItem-icon-box-size` | Icon container width/height. | | `--featureItem-icon-size` | SVG width/height. | | `--featureItem-icon-color` | Icon (stroke/fill) color. | | `--featureItem-icon-background-color` | Icon container background. | | `--featureItem-icon-border-radius` | Icon container radius. |
## Astro component The list is the [Tiles](/components/tiles) component with `size="sm"`. **FeatureItem**
| Prop | Type | Default | Description | | ------------ | -------- | ----------- | -------------------------------------------- | | `title` | `string` | `undefined` | The item's `h3`. | | `class` | `string` | `undefined` | Additional CSS classes. | | `titleClass` | `string` | `undefined` | Extra classes added to `.featureItem_title`. | | `iconClass` | `string` | `undefined` | Extra classes added to `.featureItem_icon`. |

| Slot | Description | | --------- | ------------------------------------------------ | | `icon` | An SVG icon, rendered in the tokenized icon box. | | (default) | The item's body text. |
## Examples

Pin the count with `--tiles-columns` on a class of yours when the thresholds shouldn't decide.

Skip the `icon` slot and the box disappears.
```astro --- import Tiles from "../components/Tiles.astro"; import FeatureItem from "../components/FeatureItem.astro"; import zap from "../assets/icons/zap.svg?raw"; ---
Pin the count with `--tiles-columns` on a class of yours when the thresholds shouldn't decide.

Skip the `icon` slot and the box disappears.
``` ```css .perks { --tiles-columns: 2; } ```

--- # Form Field > Part of mCSS (mcss.dev). Rendered page: https://mcss.dev/components/field The `.field` component composes the bare [form elements](/docs/elements) into label + control + hint + error message, with validation states driven entirely by CSS.
Type something that isn't an email address and tab away: the hint swaps for the error and the border turns red, no JavaScript involved.
| File | Description | Source | | ----------------------------------- | ---------------------------------------- | ----------- | | `component.field.css` | Field structure and states | [Github][1] | | `component.fieldRow.css` | fieldRow composition (own block) | [Github][5] | | `elements.form.css` | Bare element styles + `:user-invalid` border | [Github][2] | | `Field.astro` | The Astro component | [Github][3] | | `--field-*` block in `settings.ui.css` | Interface tokens (see table below) | [Github][4] |
[1]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/component.field.css [2]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/elements.form.css [3]: https://github.com/minimaldesign/mCSS/blob/main/src/components/Field.astro [4]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/settings.ui.css [5]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/component.fieldRow.css ## Playground {label} {hint} {error}
`} baseClasses="field" controls={[ { heading: "State", items: [ { type: "checkbox", name: "required", label: "Required", attr: "required", default: true }, { type: "checkbox", name: "disabled", label: "Disabled", attr: "disabled", default: false }, { type: "checkbox", name: "invalid", label: "Invalid", value: "is-invalid", default: false }, ]}, { heading: "Content", items: [ { type: "text", name: "label", label: "Label", default: "Email" }, { type: "text", name: "hint", label: "Hint", default: "We'll never share it.", markup: '{value}', attr: 'aria-describedby="pg-email-hint"' }, { type: "text", name: "error", label: "Error", default: "That doesn't look like an email address." }, ]}, ]} /> ## HTML ```html
Email We'll never share it. That doesn't look like an email address.
``` Errors use `:user-invalid`, so a pristine form never lights up red: only fields the user actually touched and got wrong. The error message is always in the markup and revealed by `.field:has(:user-invalid)`. Add `.is-invalid` on the `.field` wrapper to force the same presentation from markup, for server-side validation results, tests, and demos (that's what the playground's Invalid checkbox does). It is deliberately **not** referenced by `aria-describedby`: screen readers get the browser's native validation message on submit, so wiring the visual error in as a description would double-announce it. ### Custom properties
| Property | Description | | ------------------------------ | ------------------------------------------ | | `--field-spacing` | Gap between label, control, and messages. | | `--field-hint-color` | Hint text color. | | `--field-error-color` | Error text color. | | `--field-message-position` | `static` (default) keeps messages in flow under the control; `absolute` overlays them below the field so they can't move siblings. `.fieldRow` sets `absolute`. | | `--input-border-color-invalid` | Border color of a `:user-invalid` control. |
## Astro component
| Prop | Type | Default | Description | | ---------- | --------- | ---------------------- | ------------------------------------------------------------------ | | `label` | `string` | — | The visible label. Required. | | `hint` | `string` | `undefined` | Help text under the control. | | `error` | `string` | `"Please fill out…"` | Message revealed when the control is `:user-invalid`. | | `class` | `string` | `undefined` | Additional CSS classes on the `.field` wrapper. |
Everything else (`type`, `name`, `placeholder`, `required`, `pattern`, `minlength`…) is passed through to the ``. The label's `for` uses `id`, falling back to `name` — set at least one. To use another control (textarea, select…), put it in the default slot and give it the matching `id`: ```astro ``` ## Recipes ### Newsletter signup `.fieldRow` lines fields and buttons up on one wrapping row. Mix `.fieldRow_field` onto each field that should stretch. The row sets `--field-message-position: absolute`, so hints and errors overlay below the row instead of pushing the button out of line with the input (try it: type a bad address and tab away). Leave a little vertical room under the row for them:
```html

Email

``` ### Contact form Fieldset + the [grid system](/docs/global#grid) for the two-column row:

Contact us

```astro --- import Field from "../components/Field.astro"; ---

Contact us

``` --- # Footer > Part of mCSS (mcss.dev). Rendered page: https://mcss.dev/components/footer The `.footer` component is the site-wide bottom section: link columns on the right, a meta area (copyright, credits, version…) on the left. Pure HTML and CSS, no JavaScript.

Product

Features

Pricing

Company

About

Blog

© 2026 Acme Inc.

| File | Description | Source | | ----------------------------------- | ------------------------------ | ----------- | | `component.footer.css` | All footer styles | [Github][1] | | `Footer.astro` | The Astro component | [Github][2] | | `--footer-*` block in `settings.ui.css` | Interface tokens (see table below) | [Github][3] |
[1]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/component.footer.css [2]: https://github.com/minimaldesign/mCSS/blob/main/src/components/Footer.astro [3]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/settings.ui.css ## HTML The footer expects two regions: a `nav` with one `
` whose `
` children are the columns (a heading plus a link list each), and a `.footer_meta` section. Pick a real heading level for the column titles: the next one in your page's outline (usually `h2`), sized down with a [heading helper class](/docs/helpers) like `.h5`. Jumping straight to an `h5` for its looks would leave a heading-level gap for screen-reader users on every page. ```html

Documentation

Getting started

Tokens

Connect

Github

© 2026 Acme Inc.

``` ### Custom properties The following custom properties are available in [`settings.ui.css`](/docs/tokens#interface-tokens):
| Property | Description | | --------------------------- | ----------------------------------------------- | | `--footer-background-color` | Background color. | | `--footer-text-color` | Text color. | | `--footer-border-width` | Top border width. | | `--footer-border-color` | Top border color (transparent in light theme). | | `--footer-link-color` | Link color. | | `--footer-link-color-hover` | Link hover color. |
## Astro component
| Prop | Type | Default | Description | | ---------- | -------- | ----------- | ------------------------------------------------------------------- | | `navLabel` | `string` | `"Footer"` | `aria-label` for the footer nav. | | `class` | `string` | `undefined` | Additional CSS classes, useful for [helper classes](/docs/helpers). |
Any other attribute is passed through to the root `
` element.
| Slot | Description | | --------- | --------------------------------------------------------------------------- | | (default) | The link columns: one `
` with one `
` per column (heading + `
`). | | `meta` | The meta area: copyright, credits, socials… |
## Examples

Product

Features

Pricing

Company

About

Blog

© 2026 Acme Inc.

```astro --- import Footer from "../components/Footer.astro"; ---

Product

Features

Pricing

© 2026 Acme Inc.

```

This site's own footer is the same component; see [SiteFooter.astro](https://github.com/minimaldesign/mCSS/blob/main/src/components/SiteFooter.astro) for a full example with social icons and a version line in the `meta` slot.

--- # Header > Part of mCSS (mcss.dev). Rendered page: https://mcss.dev/components/header The `.header` component is the site-wide top bar: logo, primary navigation, optional actions, and a built-in mobile menu behind a hamburger button.
✻ Acme Sign up

| File | Description | Source | | ----------------------------------- | -------------------------------- | ----------- | | `component.header.css` | All header styles | [Github][1] | | `Header.astro` | The Astro component | [Github][2] | | `icons/menu.svg`, `icons/x.svg` | Mobile menu open/close icons | [Github][3] | | `--header-*` block in `settings.ui.css` | Interface tokens (see table below) | [Github][4] | | `scripts/utilities.js` (`throttle`) | Used by the sticky-shadow script | [Github][5] |
[1]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/component.header.css [2]: https://github.com/minimaldesign/mCSS/blob/main/src/components/Header.astro [3]: https://github.com/minimaldesign/mCSS/tree/main/src/assets/icons [4]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/settings.ui.css [5]: https://github.com/minimaldesign/mCSS/blob/main/src/scripts/utilities.js ## HTML The header is a flex row: logo first, desktop nav pushed to the right, actions last. Below the `--md` breakpoint the desktop nav and actions hide and the hamburger appears. ```html
✻ Acme

Home

Pricing

Home

Pricing

``` When using plain HTML you also need the small script that wires the hamburger; copy it from the bottom of [Header.astro][2]. It keeps the menu keyboard operable: `aria-expanded` reflects the state, focus moves into the menu on open and back to the trigger on close, and `Escape` closes it. ### Available modifiers
| Class / state | Description | | ---------------------------- | -------------------------------------------------------------------------- | | `.header` | Base block. Flex row, `--header-height` tall. | | `.header` + `.header-sticky` | Sticks to the top of the viewport with a shadow once the page is scrolled. | | `.is-top` | State set by the script while the page is scrolled to the very top (hides the sticky shadow). | | `a[aria-current]` | Current page (`page`) or section (`true`) links are highlighted. |
### Custom properties The following custom properties are available in [`settings.ui.css`](/docs/tokens#interface-tokens):
| Property | Description | | -------------------------------- | -------------------------------------------------- | | `--header-height` | Header height (grows at the `--md` breakpoint). | | `--header-padding` | Horizontal padding. | | `--header-background-color` | Background color. | | `--header-menu-background-color` | Mobile menu background (always dark by design). | | `--header-menu-color` | Mobile menu link color. | | `--header-menu-color-current` | Mobile menu current-page link color. | | `--header-menu-secondary-color` | Mobile menu sub-item link color. | | `--header-menu-border-color` | Mobile menu sub-list border. |
The mobile menu deliberately keeps the same dark surface in both themes; retheme it through the `--header-menu-*` tokens rather than a `light-dark()` override. ## Astro component
| Prop | Type | Default | Description | | ------------- | ----------- | ------------------- | ----------------------------------------------------------------- | | `navItems` | `NavItem[]` | `[]` | `{ label, href, children?, mobileOnly? }`. `children` renders as a sub-list in the mobile menu only; `mobileOnly` items are skipped in the desktop nav. | | `sticky` | `boolean` | `false` | Sticky positioning + scroll shadow. | | `currentPath` | `string` | `Astro.url.pathname`| Used to set `aria-current`: exact match gets `page`; the item whose `children` contain the page gets `true` (falling back to first-path-segment matching when none does). | | `navLabel` | `string` | `"Main"` | `aria-label` for the desktop nav. | | `menuLabel` | `string` | `"Main menu"` | `aria-label` for the mobile nav. | | `class` | `string` | `undefined` | Additional CSS classes, useful for [helper classes](/docs/helpers). |
Any other attribute is passed through to the root `
` element.
| Slot | Description | | --------- | ------------------------------------------------------------------ | | `logo` | Brand link. Use `class="header_logo"` on it to pick up the styles. | | `actions` | Right-hand side extras (theme toggle, CTA). Desktop only. | | `menu` | Extra content at the top of the mobile menu (e.g. a theme toggle). |
## Examples

✻ Acme
```astro --- import Header from "../components/Header.astro"; ---
✻ Acme
```

This site's own header is the same component; see [SiteHeader.astro](https://github.com/minimaldesign/mCSS/blob/main/src/components/SiteHeader.astro) for a full example with nested mobile navigation, `mobileOnly` sections, and theme toggles in the `actions` and `menu` slots.

--- # Hero > Part of mCSS (mcss.dev). Rendered page: https://mcss.dev/components/hero The `Hero` component offers highly flexible, accessible hero sections for landing pages, product sites, and marketing. It supports full, split, and slideshow layouts; accepts image, video, gradient, or canvas backgrounds; provides overlay and text color controls; allows custom aspect ratios and content/media ordering; supports parallax, rounded corners, and a flush layout for the split variant; and is fully slot-based for custom content. ([Full size demo](/demos/hero).)
Example Hero

This hero uses an animated canvas element as background.

| File | Description | Source | | -------------------- | ----------- | ----------- | | `component.hero.css` | All hero styles (`.hero`) | [Github][1] |
[1]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/component.hero.css #### Full layout (default) The full layout spans the entire viewport with content centered over a background image, video, gradient, or canvas element. Use the `height` prop to control min-height (in `svh` units). #### Split layout The Split layout features an asymmetric split (e.g., `70/30`, `80/20`, etc.) with content on one side and media on the other. The media section fills the available space with an image or video, cropping as needed. The `ratio` prop defines the grid layout, `contentFirst` controls the DOM order of content and media, and `reversed` visually reverses their order (while the grid ratio remains unchanged). #### Slideshow layout The Slideshow layout features rotating content and background (same options available as for the Full layout) with pagination dots. Each slide can have its own media and content. Each `Hero` instance generates its own unique `id`, so multiple heroes on one page (including JavaScript-driven ones like slideshows) never cross-wire. Pass an explicit `id` prop only if you need a stable anchor to link to. ## HTML ### Elements
| Class | Description | | --------------- | ------------------------------------------------------------------------------------------------- | | `.hero_actions` | Wrapping button row inside the hero content, centered on the full and slideshow variants (the hero twin of `.section_actions`). |
### Custom properties The following custom properties are available in [`settings.ui.css`](/docs/tokens#interface-tokens):
| Property | Description | | ------------------------------------ | ----------------------------------------------- | | `--hero-radius` | Border radius (on/off via `roundCorners` prop). | | `--hero-content-padding` | Padding for hero content area. | | `--hero-actions-spacing` | Space above the `.hero_actions` button row. | | `--hero-pagination-dot` | Pagination dot size. | | `--hero-pagination-dot-color` | Pagination dot background color. | | `--hero-pagination-dot-active-color` | Active pagination dot color. | | `--hero-pagination-opacity` | Pagination dot default opacity. |
## Astro component ### General props
| Prop | Type | Default | Description | | -------------- | ------- | ------- | ------------------------------------------------------------- | | `variant` | string | `full` | Layout variant: Full, Split, and Slideshow. | | `media` | object | — | Image, video, gradient, or canvas background. | | `roundCorners` | boolean | `false` | Whether the hero media has rounded corners. | | `textColor` | string | — | Text color (CSS variable or value). | | `class` | string | — | Additional CSS classes (see [helper classes](/docs/helpers)). |
### Split variant props
| Prop | Type | Default | Description | | -------------- | ------- | ------- | ---------------------------------------------------------------------------------- | | `ratio` | string | `62/38` | Split ratio, e.g. `70/30`, `40/60`, etc. | | `contentFirst` | boolean | `false` | If true, content appears before media in the DOM (left on desktop, top on mobile). | | `reversed` | boolean | `false` | Visually reverses the order set by `contentFirst` (does not change DOM order). | | `roundCorners` | boolean | `false` | If true, media has rounded corners. | | `flush` | boolean | `false` | Removes outer padding from the content section, making text flush with the edge. |
### Full and slideshow variant props
| Prop | Type | Default | Description | | --------------------- | ------- | ------------ | ------------------------------------ | | `parallax` | boolean | `false` | Parallax effect (full variant only). | | `height` | number | — | Sets `min-height` in `svh` (0-100). | | `overlayOpacity` | number | `0` | Overlay opacity. | | `overlayColor` | string | `--base-950` | Overlay color (CSS var or value). | | `roundCorners` | boolean | `false` | If true, hero has rounded corners. | | `textColor` | string | — | Text color (CSS var or value). | | `slideshowItems` | array | — | Array of objects (see example). | | `slideshowAutoplay` | boolean | `true` | Slideshow autoplay. | | `slideshowInterval` | number | `5000` | Slideshow interval (ms). | | `slideshowTransition` | number | `600` | Slideshow transition speed (ms). |
## Examples

### Animated Canvas
Animated Canvas Hero

This hero uses an animated canvas element as background.
Full Size Examples ```astro --- import Hero from "../../components/Hero.astro"; ---
Animated Canvas Hero

Organic Delaunay triangles animated with primary colors.
Full Size Demo ```

### Gradient background
Gradient Background Hero

Showcase your brand with a beautiful, vibrant gradient background.
Full Size Examples ```astro --- import Hero from "../../components/Hero.astro"; ---
Gradient Background Hero

Showcase your brand with a beautiful, vibrant gradient background.
Full Size Examples ```

### Background image
Image Background Hero

This hero uses a static image as the background.
Full Size Examples ```astro --- import Hero from "../../components/Hero.astro"; import triangle01 from "../../assets/images/triangles.svg"; ---
Image Background Hero

This hero uses a static image as the background.
Full Size Examples ```

### Slideshow

First Slide

This is the first slide of the slideshow.

Second Slide

This is the second slide of the slideshow.

Third Slide

This is the third slide of the slideshow.

```astro --- import Hero from "../../components/Hero.astro"; import triangle01 from "../../assets/images/triangle-01.svg"; import triangle02 from "../../assets/images/triangle-02.svg"; import triangle03 from "../../assets/images/triangle-03.svg"; ---

First Slide

This is the first slide of the slideshow.

Second Slide

This is the second slide of the slideshow.

Third Slide

This is the third slide of the slideshow.

```

### Default split
Split Hero (Content Right)

Default split with content on the right and media on the left.
```astro --- import Hero from "../../components/Hero.astro"; import triangle01 from "../../assets/images/triangles.svg"; ---
Split Hero (Content Right)

Default split with content on the right and media on the left.
```

### Content first split
Split Hero (Content First)

This example uses the contentFirst prop to place content before media in the DOM (left on desktop, top on mobile).
```astro --- import Hero from "../../components/Hero.astro"; import triangle01 from "../../assets/images/triangles.svg"; ---
Split Hero (Content First)

This example uses the contentFirst prop to place content before media in the DOM (left on desktop, top on mobile).
```

### Content first reversed split
Split Hero (Reversed)

This example uses the reversed prop to visually flip the order of content and media, without changing their DOM order. The flush prop removes left padding.
```astro --- import Hero from "../../components/Hero.astro"; import triangle01 from "../../assets/images/triangles.svg"; ---
Split Hero (Reversed)

This example uses the reversed prop to visually flip the order of content and media, without changing their DOM order. The flush prop removes left padding.
```

--- # Notice > Part of mCSS (mcss.dev). Rendered page: https://mcss.dev/components/notice The `.notice` component is useful to bring something to the attention of the reader/user, as well as provide feedback on user interaction.
This is the the default notice style, without a modifier class.

| File | Description | Source | | ---------------------- | ----------- | ----------- | | `component.notice.css` | All notice styles (`.notice`) | [Github][1] |
[1]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/component.notice.css ## Playground
{icon} {title}

{body}
`} baseClasses="notice" snippets={{ info: { preview: infoIcon, code: "" }, danger: { preview: dangerIcon, code: "" }, warning: { preview: warningIcon, code: "" }, confirm: { preview: confirmIcon, code: "" }, }} controls={[ { heading: "Variation", items: [ { type: "select", name: "type", label: "Type", snippet: "icon", default: "", options: [ { label: "Default", value: "", snippet: "info" }, { label: "Info", value: "notice-info", snippet: "info" }, { label: "Danger", value: "notice-danger", snippet: "danger" }, { label: "Warning", value: "notice-warning", snippet: "warning" }, { label: "Confirm", value: "notice-confirm", snippet: "confirm" }, ]}, ]}, { heading: "Content", items: [ { type: "text", name: "title", label: "Title", default: "Pro tip!" }, { type: "text", name: "body", label: "Body", default: "Notices work without JavaScript." }, ]}, ]} /> ## HTML ### Available modifiers
| Available modifiers | Description | | ----------------------------- | ----------------------------- | | `.notice` | Default style. Base colors. | | `.notice` + `.notice-info` | Information. Primary colors. | | `.notice` + `.notice-danger` | Error/Danger. Reds. | | `.notice` + `.notice-warning` | Warning. Oranges. | | `.notice` + `.notice-confirm` | Confirmation/Success. Greens. |
When using HTML, you'll need to include the SVG icons "manually." All the icons are [available on Github](https://github.com/minimaldesign/mCSS/tree/main/src/assets/icons). If you'd like to use different icons, [Lucide](https://lucide.dev/) is a great resource. ### Custom properties The following custom properties are available in [`settings.ui.css`](/docs/tokens#interface-tokens):
| Property | Color | | --------------------------- | ------------------------- | | `--notice-spacing` | Padding inside Notice. | | `--notice-text-color` | Default text color. | | `--notice-background-color` | Default background color. | | `--notice-border-color` | Default border color. | | `--notice-border-width` | Default border width. | | `--notice-border-radius` | Default border radius. |
## Astro component
| Prop | Type | Default | Description | | ------------ | -------- | ----------- | ----------------------------------------------------------- | | `title` | `string` | `undefined` | Text for the notice header. (Optional.) | | `type` | `string` | `undefined` | `info`, `danger`, `warning`, `confirm`. | | `class` | `string` | `undefined` | Additional CSS classes, useful for [helper classes](/docs/helpers). |
## Examples

This is a warning notice without a `title` prop.
```astro --- import Notice from "../../components/Notice.astro"; ---
This is a warning notice without a `title` prop.
```

You've read this notice until the end!
```astro --- import Notice from "../../components/Notice.astro"; ---
You've read this notice until the end!
```

### HTML examples

This is the the default notice style, without a modifier class.
```html

Default Notice

This is the the default […].

```

--- # Pagination > Part of mCSS (mcss.dev). Rendered page: https://mcss.dev/components/pagination Two navigation patterns for content sites: `.pagination` is the numbered kind for blog indexes, `.prevNext` the pair of cards at the bottom of a post. Both are pure HTML and CSS. `#page-${p}`} />
| File | Description | Source | | --------------------------------------------- | ------------------------------ | ----------- | | `component.pagination.css` | Numbered pagination styles | [Github][1] | | `component.prevNext.css` | Prev/next styles | [Github][2] | | `Pagination.astro`, `PrevNext.astro` | The Astro components | [Github][3] | | `icons/chevron-down.svg` | Arrow icon (rotated in CSS) | [Github][4] | | `--pagination-*`, `--prevNext-*` token blocks | Interface tokens (see table below) | [Github][5] |
[1]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/component.pagination.css [2]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/component.prevNext.css [3]: https://github.com/minimaldesign/mCSS/tree/main/src/components [4]: https://github.com/minimaldesign/mCSS/tree/main/src/assets/icons [5]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/settings.ui.css ## Playground The numbered pagination's markup is generated by windowing logic (see [HTML](#html)), so the playground covers the `.prevNext` pattern: toggle either link off and the layout holds its columns. {prev}{next} `} snippets={{ prev: { preview: 'PreviousDesigning with cascade layers', code: 'PreviousDesigning with cascade layers', }, next: { preview: 'NextTokens all the way down', code: 'NextTokens all the way down', }, }} controls={[ { heading: "Parts", items: [ { type: "checkbox", name: "prev", label: "Previous link", snippet: "prev", default: true }, { type: "checkbox", name: "next", label: "Next link", snippet: "next", default: true }, ]}, ]} /> ## HTML The numbers are windowed around the current page, so long lists stay short. ```html

1

4

5

6

12

``` At the ends, the arrows stay in place but become disabled `` elements instead of links, so the layout never jumps. Every target is at least `--pagination-size` (36px) square. ```html
Previous Designing with cascade layers Next Tokens all the way down
``` A lone next link keeps its right-hand column. ### Custom properties
| Property | Description | | -------------------------------------- | --------------------------------- | | `--pagination-size` | Minimum width/height of a target. | | `--pagination-border-radius` | Target border radius. | | `--pagination-color` | Number/arrow color. | | `--pagination-color-current` | Current page text color. | | `--pagination-background-color-current`| Current page background. | | `--pagination-background-color-hover` | Hover background. | | `--prevNext-border-color` | Card border. | | `--prevNext-border-color-hover` | Card border on hover. | | `--prevNext-label-color` | "Previous"/"Next" label color. |
## Astro component **Pagination**
| Prop | Type | Default | Description | | ------------- | -------------------------- | ---------------- | --------------------------------------------------------- | | `currentPage` | `number` | — | The page being rendered. Required. | | `lastPage` | `number` | — | Total number of pages. Required. | | `baseUrl` | `string` | — | Index URL; page 1 is `baseUrl`, page n is `baseUrl/n`. | | `pageUrl` | `(page: number) => string` | see `baseUrl` | Override the URL scheme entirely. | | `windowSize` | `number` | `1` | Pages shown on each side of the current one. | | `ariaLabel` | `string` | `"Pagination"` | The nav's accessible name. |
With Astro's `paginate()`, pass `page.currentPage`, `page.lastPage`, and your index route as `baseUrl`. **PrevNext**
| Prop | Type | Default | Description | | ----------- | -------------------------- | --------------------- | ---------------------------------- | | `prev` | `{ title, href }` | `undefined` | Previous post link. | | `next` | `{ title, href }` | `undefined` | Next post link. | | `prevLabel` | `string` | `"Previous"` | Small label above the prev title. | | `nextLabel` | `string` | `"Next"` | Small label above the next title. | | `ariaLabel` | `string` | `"Previous and next"` | The nav's accessible name. |
Renders nothing when both links are missing. ## Examples

`#page-${p}`} /> ```astro --- import Pagination from "../components/Pagination.astro"; const { page } = Astro.props; // from paginate() --- ```

```astro ```

--- # Pricing > Part of mCSS (mcss.dev). Rendered page: https://mcss.dev/components/pricing The `.pricingCard` component is one tier of a pricing table: name, price, feature list, and a CTA pinned to the bottom so a row of tiers lines up. A pricing table is a row of these on the [grid](/docs/global#grid), with `highlighted` marking the recommended tier.

| File | Description | Source | | ------------------------------------------ | ----------------------------------- | ----------- | | `component.pricing.css` | Tier layout + highlight styles | [Github][1] | | `component.card.css`, `component.badge.css`, `component.button.css` | Base visuals (dependencies) | [Github][2] | | `PricingCard.astro` | The Astro component | [Github][3] | | `icons/check.svg` | Feature list check icon | [Github][4] | | `--pricingCard-*` block in `settings.ui.css` | Interface tokens (see table below) | [Github][5] |
It extends the [card](/components/card) and uses the [badge](/components/badge) and [button](/components/button) components. [1]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/component.pricing.css [2]: https://github.com/minimaldesign/mCSS/tree/main/src/styles/framework [3]: https://github.com/minimaldesign/mCSS/blob/main/src/components/PricingCard.astro [4]: https://github.com/minimaldesign/mCSS/tree/main/src/assets/icons [5]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/settings.ui.css ## Playground

{name}
{badge}

{price} /month

{description}

10 sites

Email support

Get started
`} baseClasses="card pricingCard" snippets={{ check: { preview: checkIcon, code: "" }, badge: { preview: 'Popular', code: 'Popular' }, }} controls={[ { heading: "Modifiers", items: [ { type: "checkbox", name: "highlighted", label: "Highlighted", value: "pricingCard-highlighted", default: false }, ]}, { heading: "Content", items: [ { type: "checkbox", name: "badge", label: "Badge", snippet: "badge", default: false }, { type: "text", name: "name", label: "Name", default: "Pro" }, { type: "text", name: "price", label: "Price", default: "$29" }, { type: "text", name: "description", label: "Description", default: "For professionals." }, ]}, ]} /> ## HTML ```html

Pro
Popular

$29 /month

For professionals.

10 sites

Email support

Get started

``` The highlight is a border-color swap plus a same-color ring (`box-shadow`), so the highlighted tier doesn't shift the row's layout. ### Custom properties
| Property | Description | | ------------------------------------- | ------------------------------------ | | `--pricingCard-highlight-border-color` | Border/ring color of the highlight. | | `--pricingCard-check-color` | Feature list check icon color. |
Everything else comes from the [card tokens](/components/card). ## Astro component
| Prop | Type | Default | Description | | ------------- | ---------- | --------------- | ------------------------------------------------------- | | `name` | `string` | — | Tier name. Required. | | `price` | `string` | — | Price as text (`"$29"`, `"Free"`…). Required. | | `period` | `string` | `undefined` | Suffix after the price (`"/month"`). | | `description` | `string` | `undefined` | One-liner under the price. | | `features` | `string[]` | `[]` | Feature list, one check per entry. | | `ctaLabel` | `string` | `"Get started"` | CTA button text. | | `ctaHref` | `string` | `undefined` | CTA link; no CTA renders without it (or the `cta` slot).| | `highlighted` | `boolean` | `false` | Recommended tier: primary ring + primary CTA. | | `badge` | `string` | `undefined` | Badge text next to the name (`"Popular"`). | | `class` | `string` | `undefined` | Additional CSS classes. |

| Slot | Description | | ----- | ----------------------------------------------------- | | `cta` | Replace the default CTA button with your own markup. |
--- # Read Progress Bar > Part of mCSS (mcss.dev). Rendered page: https://mcss.dev/components/readprogressbar
The `.readProgressBar` component creates a reading progress bar at the top of the page that represents the user's scroll position, growing as the user scrolls down and decreasing as they scroll up. This helps users understand their progress through the content and how much remains to be read. This component uses pure CSS when supported by the browser, and has a polyfill for [browsers that don't support](https://caniuse.com/?search=animation-timeline) `animation-timeline`. (Scroll this page to see the component in action.)

| File | Description | Source | | ------------------------------- | ----------- | ----------- | | `component.readProgressBar.css` | All progress bar styles (`.readProgressBar`) | [Github][1] |
[1]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/component.readProgressBar.css
## HTML ### Custom properties The following custom properties are available in [`settings.ui.css`](/docs/tokens#interface-tokens): | Property | Description | | -------------------------- | ------------------------------ | | `--readProgressBar-height` | Progress bar height. | | `--readProgressBar-color` | Progress bar background color. | ## Examples

### Astro Component The live demo is the bar at the top of this very page (a fixed element can only be demoed once, so the examples below don't embed extra instances). ```astro --- import ReadProgressBar from '../components/ReadProgressBar.astro'; --- ```

### HTML ```html ``` If you're using HTML and would like to us the polyfill for [browsers that don't support](https://caniuse.com/?search=animation-timeline) `animation-timeline`, add the following JavaScript to your code: ```js function throttle(func, delay) { let lastCall = 0; let timerId; return function (...args) { const now = new Date().getTime(); if (now - lastCall < delay) { clearTimeout(timerId); timerId = setTimeout(() => { lastCall = now; func.apply(this, args); }, delay); } else { lastCall = now; func.apply(this, args); } }; } function supportsScrollTimeline() { return CSS.supports("animation-timeline: scroll(root y)"); } function updateProgressBar() { const bar = document.querySelector(".readProgressBar > div"); if (!bar) return; const scrollTop = window.scrollY || document.documentElement.scrollTop; const docHeight = document.documentElement.scrollHeight - window.innerHeight; const progress = docHeight > 0 ? scrollTop / docHeight : 0; bar.style.width = progress * 100 + "%"; } function enableJSProgressBar() { const bar = document.querySelector(".readProgressBar > div"); if (!bar) return; // Remove any inline width set by CSS animation bar.style.animation = "none"; bar.style.animationTimeline = "none"; updateProgressBar(); const throttledUpdate = throttle(updateProgressBar, 10); window.addEventListener("scroll", throttledUpdate, { passive: true }); window.addEventListener("resize", throttledUpdate); } if (typeof window !== "undefined" && !supportsScrollTimeline()) { document.addEventListener("DOMContentLoaded", enableJSProgressBar); } ```

--- # Section > Part of mCSS (mcss.dev). Rendered page: https://mcss.dev/components/section The `.section` component is the workhorse wrapper marketing pages are made of: a full-width band with vertical rhythm, an optional eyebrow/title/lede header, and background variants.

Section content goes here.

| File | Description | Source | | ---------------------------------------- | ---------------------------------- | ----------- | | `component.section.css` | All section styles | [Github][1] | | `Section.astro` | The Astro component | [Github][2] | | `--section-*` block in `settings.ui.css` | Interface tokens (see table below) | [Github][3] |
Depends on `.wrap` (`global.wrap.css`), part of the mCSS core: the header and the content each compose `.wrap` with their own [width preset](/docs/global#wrap), so a section pairs a reading-width header (`.wrap-md`) with a wider content column (`.wrap-lg`) by default. [1]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/component.section.css [2]: https://github.com/minimaldesign/mCSS/blob/main/src/components/Section.astro [3]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/settings.ui.css ## Playground

{eyebrow}

{title}

{lede}

Section content goes here.

`} baseClasses="section" controls={[ { heading: "Variation", items: [ { type: "select", name: "variant", label: "Variant", default: "", options: [ { label: "Default", value: "" }, { label: "Filled", value: "section-filled" }, { label: "Primary", value: "section-primary" }, ], }, ], }, { heading: "Content", items: [ { type: "text", name: "eyebrow", label: "Eyebrow", default: "Why mCSS", }, { type: "text", name: "title", label: "Title", default: "Everything is a section", }, { type: "text", name: "lede", label: "Lede", default: "Stack a few of these and you have a landing page.", }, ], }, ]} /> ## HTML ```html

Why mCSS

Everything is a section

Stack a few of these and you have a landing page.

``` The header and content each compose `.wrap` with a [width preset](/docs/global#wrap) (`.wrap-sm`, `.wrap-md`, `.wrap-lg`), so they can use different column widths. `wrap-md` on the header and `wrap-lg` on the content is the standard pairing; use `wrap-md` on the content too when it is text meant for reading (an FAQ, for example). ### Available modifiers
| Class | Description | | ------------------------------- | ---------------------------------------------------------------------- | | `.section` | Default. Transparent background, `--section-spacing` vertical padding. | | `.section` + `.section-filled` | Subtle filled band. | | `.section` + `.section-primary` | Primary-colored band; text and links switch to the inverted colors. |
### Elements
| Class | Description | | ------------------ | --------------------------------------------------------------------- | | `.section_header` | Centered eyebrow/title/lede block; composes `.wrap` + a width preset. | | `.section_content` | Content column; composes `.wrap` + a width preset. | | `.section_eyebrow` | Small uppercase kicker. | | `.section_title` | The `h2`. | | `.section_lede` | Intro paragraph. | | `.section_actions` | Centered, wrapping button row (see the closing-CTA recipe below). |
### Custom properties The following custom properties are available in [`settings.ui.css`](/docs/tokens#interface-tokens):
| Property | Description | | ------------------------------------ | ---------------------------------------- | | `--section-spacing` | Vertical padding of the band. | | `--section-header-spacing` | Space between the header and content. | | `--section-eyebrow-color` | Eyebrow text color. | | `--section-lede-color` | Lede text color. | | `--section-filled-background-color` | Background of the filled variant. | | `--section-primary-background-color` | Background of the primary variant. | | `--section-primary-text-color` | Text color on the primary variant. | | `--section-primary-link-color` | Link color on the primary variant. | | `--section-primary-link-color-hover` | Link hover color on the primary variant. | | `--section-primary-eyebrow-color` | Eyebrow color on the primary variant. | | `--section-primary-lede-color` | Lede color on the primary variant. |
## Astro component
| Prop | Type | Default | Description | | -------------- | -------- | ----------- | ------------------------------------------------------------------- | | `eyebrow` | `string` | `undefined` | Small uppercase kicker above the title. | | `title` | `string` | `undefined` | The section's `h2`. | | `lede` | `string` | `undefined` | Intro paragraph under the title. | | `variant` | `string` | `undefined` | `filled`, `primary`. | | `headerWrap` | `string` | `md` | Header column width preset: `sm`, `md`, `lg`. | | `contentWrap` | `string` | `lg` | Content column width preset: `sm`, `md`, `lg`. | | `headerClass` | `string` | `undefined` | Extra classes added to `.section_header`. | | `contentClass` | `string` | `undefined` | Extra classes added to `.section_content`. | | `class` | `string` | `undefined` | Additional CSS classes, useful for [helper classes](/docs/helpers). |
Any other attribute is passed through to the root `
` element (handy for `id` anchors). The default slot is the section content. ## Examples

Text and links flip to the inverted palette.

```astro --- import Section from "../components/Section.astro"; ---

Text and links flip to the inverted palette.

```

By default the content column is wider (`wrap-lg`) than the header (`wrap-md`); set `contentWrap="md"` to keep long-form content at reading width:

1

2

3

```astro

…

```

The closing CTA every marketing page ends on is not a separate component; it is a Section with a `.section_actions` row:

Get started

```astro

Get started

```

--- # Social Media Links > Part of mCSS (mcss.dev). Rendered page: https://mcss.dev/components/socialmedia
The `.socialMedia` component consists of an unordered list of links to social media accounts and their corresponding icons.

| File | Description | Source | | --------------------------- | ----------- | ----------- | | `component.socialMedia.css` | All social links styles (`.socialMedia`) | [Github][1] |
[1]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/component.socialMedia.css The following 4 sizes and 19 icons (18 social media platforms + 1 generic link icon) are available out of the box.

| Platform | Icon | | ----------- | -------------------------------------------- | | Unknown URL | | | Discord | | | Facebook | | | Github | | | Instagram | | | Linkedin | | | Pinterest | | | Reddit | | | Snapchat | | | Telegram | | | Tiktok | | | X | | | Youtube | | | Twitch | | | Odysee | | | Minds | | | Substack | | | Bitchute | | | Bastyon | |

## Playground
{x}

{github}

{youtube}
`} baseClasses="socialMedia" snippets={{ x: { preview: xIcon, code: "" }, github: { preview: githubIcon, code: "" }, youtube: { preview: youtubeIcon, code: "" }, }} controls={[ { heading: "Variation", items: [ { type: "select", name: "size", label: "Size", default: "", options: [ { label: "Default", value: "" }, { label: "Medium", value: "socialMedia-md" }, { label: "Large", value: "socialMedia-lg" }, { label: "Extra large", value: "socialMedia-xl" }, ]}, ]}, ]} /> ## HTML

| Available modifiers | Description | | ---------------------------------- | -------------- | | `.socialMedia` | Default - 24px | | `.socialMedia` + `.socialMedia-md` | 32px | | `.socialMedia` + `.socialMedia-lg` | 44px | | `.socialMedia` + `.socialMedia-xl` | 64px |
When using the HTML component you'll need to include the SVG icons "manually." All the icons are [available on Github](https://github.com/minimaldesign/mCSS/tree/main/src/assets/icons). If you'd like to use different icons, [Lucide](https://lucide.dev/) is a great resource.
## Astro component
The Astro component ([Github](https://github.com/minimaldesign/mCSS/blob/main/src/components/SocialMedia.astro)) takes 3 props:
| Prop | Type | Default | Description | | ------------ | -------- | --------- | ----------------------------------------------------------- | | `urls` | `array` | `[]` | An array of urls, or `{ url, label }` objects to override the accessible label (e.g. `"mCSS on GitHub"`). | | `size` | `string` | undefined | `md`, `lg`, `xl`. | | `newTab` | `boolean` | `true` | Open links in a new tab. Set to `false` to opt out. | | `class` | `string` | undefined | Additional CSS classes, useful for [helper classes](/docs/helpers). |

## Examples

```astro --- import SocialMedia from "../../components/SocialMedia.astro"; --- ```

```astro --- import SocialMedia from "../../components/SocialMedia.astro"; --- ```

### HTML examples

```html

```

--- # Tags > Part of mCSS (mcss.dev). Rendered page: https://mcss.dev/components/tags
The `.tags` component styles a list of tags. It supports both list and inline layouts, is accessible by default, and customizable via CSS custom properties.

| File | Description | Source | | -------------------- | ----------- | ----------- | | `component.tags.css` | All tags styles (`.tags`) | [Github][1] |
[1]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/component.tags.css
## Playground
css

astro

basics
`} baseClasses="tags" controls={[ { heading: "Variation", items: [ { type: "select", name: "layout", label: "Layout", default: "", options: [ { label: "List", value: "" }, { label: "Inline", value: "tags-inline" }, ]}, ]}, ]} /> ## HTML ### Custom properties The following custom properties are available in [`settings.ui.css`](/docs/tokens#interface-tokens): | Property | Description | | ------------------------------- | --------------------------- | | `--tags-padding` | Tag padding. | | `--tags-font-size` | Tag font size. | | `--tags-color` | Tag text color. | | `--tags-background-color` | Tag background color. | | `--tags-background-color-hover` | Tag hover background color. | | `--tags-radius` | Tag border radius. | ### Available modifiers
| Modifier | Description | | -------------- | ---------------------------- | | `.tags` | Default style (list layout). | | `.tags-inline` | Inline layout using flex. |
## Astro component
| Prop | Type | Default | Description | | ------------- | ---------- | ----------- | ----------------------------------------------------------- | | `tagList` | `string[]` | `[]` | Array of tag strings to display. | | `variant` | `string` | `inline` | Inline or list layout. | | `url` | `string` | `/blog/tags` | Base URL to prepend to each tag. | | `sort` | `boolean` | `false` | Sort tags alphabetically; input order is preserved by default. | | `class` | `string` | `undefined` | Additional CSS classes, useful for [helper classes](/docs/helpers). | | `ariaLabel` | `string` | `'Tags'` | Accessible label for the tag list. | | `data-testid` | `string` | `'tags'` | Test ID for testing purposes. |
## Examples

### Astro example (frontmatter metadata) ```astro --- import Tags from '../components/Tags.astro'; const { frontmatter } = Astro.props; --- ```

### HTML example (list layout)

css

astro

basics

```html

css

astro

basics

```

--- # Testimonial > Part of mCSS (mcss.dev). Rendered page: https://mcss.dev/components/testimonial The `.testimonial` component is a quote with attribution: a `figure` wrapping mCSS's already-styled `blockquote`, plus an [Avatar](/components/avatar) byline. Pure HTML and CSS.
We deleted four hundred lines of utility classes the week we switched. The cascade does the work now.

| File | Description | Source | | ----------------------------------------------- | ------------------------------------- | ----------- | | `component.testimonial.css` | Layout + byline styles | [Github][1] | | `elements.text.css` | The `blockquote` styling (dependency) | [Github][2] | | `Testimonial.astro`, `Avatar.astro` | The Astro components | [Github][3] | | `--testimonial-role-color` in `settings.ui.css` | Interface token | [Github][4] |
[1]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/component.testimonial.css [2]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/elements.text.css [3]: https://github.com/minimaldesign/mCSS/tree/main/src/components [4]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/settings.ui.css ## Playground

{quote}

{initials}

{name} {role}

`} controls={[ { heading: "Content", items: [ { type: "text", name: "quote", label: "Quote", default: "We deleted four hundred lines of utility classes the week we switched.", }, ], }, { heading: "Byline", items: [ { type: "text", name: "name", label: "Name", default: "Sonny Rollins" }, { type: "text", name: "role", label: "Role", default: "Design lead, Acme", }, { type: "text", name: "initials", label: "Initials", default: "SM" }, ], }, ]} /> ## HTML ```html

We deleted four hundred lines of utility classes the week we switched.

Sonny Rollins Design lead, Acme

``` ### Custom properties
| Property | Description | | -------------------------- | ---------------- | | `--testimonial-role-color` | Role text color. |
The quote itself is themed by the `blockquote` element styles. ## Astro component
| Prop | Type | Default | Description | | ----------- | ------------------------- | ----------- | ------------------------------------------------------------------------------ | | `name` | `string` | — | Who said it. Required (also feeds the Avatar initials when there is no photo). | | `role` | `string` | `undefined` | Title/company line. | | `avatarSrc` | `ImageMetadata \| string` | `undefined` | Photo for the Avatar. | | `class` | `string` | `undefined` | Additional CSS classes. |
The default slot is the quote. ## Examples A wall of quotes is just testimonials on the [grid](/docs/global#grid):

The copy-paste model means I actually own my components.

Readable class names. Imagine that.

Shipped our marketing site in a weekend.

```astro --- import Testimonial from "../components/Testimonial.astro"; ---

The copy-paste model means I actually own my components.

```

--- # Tiles > Part of mCSS (mcss.dev). Rendered page: https://mcss.dev/components/tiles The `.tiles` component lays out repeated, same-size items (cards, feature items, pricing tiers) in equal-height columns. It is container-responsive: columns appear as the nearest [size container](/docs/global#layouts) crosses the size's thresholds, so the count answers the space the list actually has, not the viewport. The same markup is 2-up in this docs column and 4-up on the wide [blog index](/blog), at the same window size.

Columns come from the width of the column the list lives in, not the viewport.

Tiles in a row stretch to the same height, however long their content runs.

Like the card right next to this one…

| File | Description | Source | | --------------------- | ----------------------------------------------------- | ----------- | | `component.tiles.css` | All tiles styles (`.tiles`), including the thresholds | [Github][1] | | `Tiles.astro` | The Astro component | [Github][2] |
No dependencies. The [card](/components/card) blog index and the [feature grid](/components/featuregrid) pattern are both built on it. [1]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/component.tiles.css [2]: https://github.com/minimaldesign/mCSS/tree/main/src/components ## Playground

One

Tiles share the row height.

Two

Resize the window to watch the columns respond to this docs column.

Three

The thresholds watch the container, not the browser window.

`} baseClasses="tiles" controls={[ { heading: "Layout", items: [ { type: "select", name: "size", label: "Tile size", default: "md", options: [ { label: "md (default)", value: "md", class: "" }, { label: "sm", value: "sm", class: "tiles-sm" }, ], } ], }, ]} /> ## HTML A `ul` with one tile per `
`. Items stretch, so tiles in a row share the same height. ```html

…

…

``` ### Available modifiers Sizes name the tile: each one is a set of container thresholds tuned to how much room that tile needs, and columns keep coming as the container crosses them. There is no column cap: the width of the column the list sits in is the cap.
| Available modifiers | Description | | ---------------------- | ---------------------------------------------------------------------------------------------------------------------- | | `.tiles` | Card-sized tiles, roughly `17rem` of room each: 2 columns from a `36rem` container, then 3/4/5/6 every `20rem`. | | `.tiles` + `.tiles-md` | The default size, spelled out. | | `.tiles` + `.tiles-sm` | Small tiles (icon + short copy, roughly `13rem`): 2 columns from `28rem`, then every `16rem`, so columns appear sooner. |
The thresholds are deliberately not the global `--md`/`--lg` viewport breakpoints: those can't see how wide the column is, and a tile's comfortable width is a property of the component, not of the page. Copy-it-you-own-it applies as usual: retune them in `component.tiles.css`. ### The container The column count responds to the nearest size container. Every [layout scaffold](/docs/global#layouts) declares its main column as one, so inside a `.layout` page it just works. Outside a scaffold the wrapper is required: without a container ancestor the queries never match and the list stays single-column. ```html

…

``` ### Custom properties
| Property | Description | | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `--tiles-columns` | The count the thresholds resolved. Pin it on a hook class of your own to opt out (your unlayered CSS wins), or set it from your own `@container`/`@media` rules. |
```css /* Exactly three pillars, whatever the container says */ .pillars { --tiles-columns: 3; } ``` Gaps come from the [grid system](/docs/global#grid)'s `--grid-column-gap` and `--grid-row-gap`, so tiles and grids share the same rhythm. ## Astro component Children go in the default slot; wrap each tile in an `
`.
| Prop | Type | Default | Description | | ------------- | -------- | ----------- | ---------------------------------------------------------------------------------- | | `size` | `string` | `undefined` | Tile size: `sm` or `md`. Omitted is `md`. | | `class` | `string` | `undefined` | Additional CSS classes. Pin the count by setting `--tiles-columns` on one of them. | | `data-testid` | `string` | `'tiles'` | Test ID for testing frameworks. |
## Examples The blog-index recipe lives on the [card page](/components/card#clickable-cards), the icon + blurb marketing pattern on the [feature grid page](/components/featuregrid). --- # Table of Content > Part of mCSS (mcss.dev). Rendered page: https://mcss.dev/components/toc
The `.toc` component is an "Astro only" client-side rendered component. It creates a table of content from the headings on the page it's on:

By default, the TOC includes `H2`s and `H3`s (customizable via props) that have an ` id` attribute and links to them. It's possible to add multiple TOC on the same page, but this will duplicate Javascript and it's not recommended. If you do need to include more than one TOC, you'll need to add a unique `id` to each instance of the component.
| File | Description | Source | | ------------------- | ----------- | ----------- | | `component.toc.css` | All TOC styles (`.toc`) | [Github][1] |
[1]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/component.toc.css
## HTML This component's main functionality is to create a table of content via JavaScript. It just renders a nested `ul` and it's most useful as an Astro component. ### Custom properties The following custom properties are available in [`settings.ui.css`](/docs/tokens#interface-tokens): | Property | Color | | ------------------- | ------------------------- | | `--toc-color` | Links color. | | `--toc-color-hover` | Links hover color. | | `--toc-spacing` | Links padding. | | `--toc-icon-size` | Icon size. | | `--toc-indentation` | Nested lists indentation. | ## Astro component
| Prop | Type | Default | Description | | -------------- | --------- | ------------- | ----------------------------------------------------------- | | `id` | `string` | `toc` | Needed to add more than one TOC. | | `selector` | `string` | `main` | HTML element to scan for headings. | | `headings` | `array` | `['h2','h3']` | Heading levels to include. | | `baseUrl` | `string` | `''` | Optional URL to prepend `#id` with. | | `scrollOffset` | `integer` | `0` | Scroll position offset from the top.. | | `description` | `string` | `undefined` | Text above the TOC. | | `icon` | `string` | `''` | Optional inline SVG. (See example.) | | `class` | `string` | `undefined` | Additional CSS classes, useful for [helper classes](/docs/helpers). |
## Examples

### TOC with only H2s ```astro --- import Toc from "../../components/Toc.astro"; --- ```

### TOC with H2 — h4 and a ♥︎ icon #### A H4 just as an example ```astro --- import heart from "../../assets/icons/arrow-right-small.svg?raw"; import Toc from "../../components/Toc.astro"; --- ```

--- # Toggle > Part of mCSS (mcss.dev). Rendered page: https://mcss.dev/components/toggle The toggle is a [CSS-only component](/docs/start#components) using the `.toggle` class on `` elements of the type `checkbox`.
| File | Description | Source | | ----------------- | ----------- | ----------- | | `component.toggle.css` | All toggle styles (`.toggle`) | [Github][1] |
[1]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/component.toggle.css ## Playground '} baseClasses="toggle" controls={[ { heading: "State", items: [ { type: "checkbox", name: "checked", label: "Checked", attr: "checked", default: true }, { type: "checkbox", name: "disabled", label: "Disabled", attr: "disabled", default: false }, ]}, ]} /> ## HTML

```html ```