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 the default theme. A grid-flush modifier is available if you don’t want any gap.

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.

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 default .wrap_content has a max width of 800px by default (see below to customize) and there is a modifier .wrap_content-fullBleed that will extend to the full size of the viewport. See demo.

Syntax

<div class="wrap">
  <section class="wrap_content">
    <!-- 800px wide content -->
  </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 the default theme.

• 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 make spacing between paragraphs, lists, tables, etc. consistant. 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.