Docs :: Global Styles

Grid

File name	Source
`global.grid.css`	Github

The grid system is extremely easy to use, light weight, and very flexible. It uses the CSS grid property under the hood, but it lets you set up your layouts directly into your HTML. The implementation is heavily inspired by 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 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:

.photoWall {
  --grid-column-gap: var(--xs2);
  --grid-row-gap: var(--xs2);
}

<ul class="grid photoWall" col="2" col-lg="4">
  ...
</ul>

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 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.)

Examples

Different types of spans

9 colum grid, with all types of spans.

4-5

6..

2-3

5..

2+3

6+2

row

4+2

<div class="grid" col="9">
  <div class="grid_item" span="2">2</div>
  <div class="grid_item" span="4-5">4-5</div>
  <div class="grid_item" span="6..">6..</div>
  <div class="grid_item" span="2-3">2-3</div>
  <div class="grid_item" span="5..">5..</div>
  <div class="grid_item" span="2+3">2+3</div>
  <div class="grid_item" span="6+2">6+2</div>
  <div class="grid_item" span="row">row</div>
  <div class="grid_item" span="4+2">4+2</div>
</div>

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.)

<div class="grid" col="1" col-md="4" col-lg="9" col-xl="12">[…]</div>

Wrap

File name	Source
`global.wrap.css`	Github

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.

Syntax

<div class="wrap">
  <section class="wrap_content">
    <!-- Reading width content (md preset) -->
  </section>
</div>

<div class="wrap wrap-lg">
  <section class="wrap_content">
    <!-- Wider content (up to 900px) -->
  </section>
</div>

<div class="wrap">
  <section class="wrap_content wrap_content-fullBleed">
    <!-- Viewport width content -->
  </section>
</div>

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.
More info on responsive setup.

Layouts

File name	Source
`global.layout.css`	Github

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

<body class="layout layout-sidebar">
  <header>…</header>
  <div class="layout_content">
    <aside class="layout_content_aside">…</aside>
    <main class="layout_content_main">…</main>
  </div>
  <footer>…</footer>
</body>

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.

headermain.layout-centered

headernavmaintoc.layout-docs

panepane.layout-split

content.layout-cover

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.

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, or per-layout with a scoped rule. mcss.dev itself runs its docs on .layout-docs and layers its own specifics on top (source): 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.

Prose

File name	Source
`global.prose.css`	Github

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

This is where accessibility specific classes go. Currently a WIP as components are being created.

Animation

File name	Source
`global.animation.css`	Github

Basic fade in/out animations with flexible start/end opacity values. (More info about forwards)

.element {
  opacity: 0.8;
  animation: fadeToTransparent 1s forwards;
}