# Global Styles

> Part of mCSS (mcss.dev). Rendered page: https://mcss.dev/docs/global

## Grid

<section class="docs_section prose">

<div class="docs_oversizedTable">

| File name         | Source            |
| ----------------- | ----------------- |
| `global.grid.css` | [Github][srcGrid] |

</div>

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

<Notice type="info" title="HTML Validation">
  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).
</Notice>

### Examples

#### Different types of spans

9 colum grid, with all types of spans.

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

```html
<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 docs_grid" col="1" col-md="4" col-lg="9" col-xl="12">
  <div class="grid_item docs_grid_item">1</div>
  <div class="grid_item docs_grid_item">2</div>
  <div class="grid_item docs_grid_item">3</div>
  <div class="grid_item docs_grid_item">4</div>
  <div class="grid_item docs_grid_item">5</div>
  <div class="grid_item docs_grid_item">6</div>
  <div class="grid_item docs_grid_item">7</div>
  <div class="grid_item docs_grid_item">8</div>
  <div class="grid_item docs_grid_item">9</div>
  <div class="grid_item docs_grid_item">10</div>
  <div class="grid_item docs_grid_item">11</div>
  <div class="grid_item docs_grid_item">12</div>
</div>

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

## Wrap

<section class="docs_section prose">

<div class="docs_oversizedTable">

| File name         | Source            |
| ----------------- | ----------------- |
| `global.wrap.css` | [Github][srcWrap] |

</div>

[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
<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`.

<div class="docs_oversizedTable">

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

</div>

- More info on [themes](/docs/themes).
- More info on [responsive setup](/docs/media-queries#recommended-responsive-setup).

## Layouts

<section class="docs_section prose">

<div class="docs_oversizedTable">

| File name           | Source              |
| ------------------- | ------------------- |
| `global.layout.css` | [Github][srcLayout] |

</div>

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

<div class="grid" col="2" col-lg="3">
  <div class="grid_item"><LayoutThumb variant="centered" /></div>
  <div class="grid_item"><LayoutThumb variant="sidebar" /></div>
  <div class="grid_item"><LayoutThumb variant="sidebar-end" /></div>
  <div class="grid_item"><LayoutThumb variant="docs" /></div>
  <div class="grid_item"><LayoutThumb variant="split" /></div>
  <div class="grid_item"><LayoutThumb variant="cover" /></div>
</div>

<div class="docs_oversizedTable">

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

</div>

<Notice type="info" title="Hidden asides need a menu">
  `.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.
</Notice>

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

<div class="docs_oversizedTable">

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

</div>

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

<section class="docs_section prose">

<div class="docs_oversizedTable">

| File name          | Source             |
| ------------------ | ------------------ |
| `global.prose.css` | [Github][srcProse] |

</div>

[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

<section class="docs_section prose">

<div class="docs_oversizedTable">

| File name         | Source            |
| ----------------- | ----------------- |
| `global.a11y.css` | [Github][srcA11y] |

</div>

[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

<section class="docs_section animation">

<div class="docs_oversizedTable">

| File name              | Source                 |
| ---------------------- | ---------------------- |
| `global.animation.css` | [Github][srcAnimation] |

</div>

[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;
}
```