Docs :: Global Styles

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.

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

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.

• More info on themes.
• More info on responsive setup.

This is where your global layouts should go. It’s probably too project specific for mCSS to ship with really useful default layouts. But this will change as more components become available.

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.

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