Foundations

Layout engine

Zones register themselves with their layout host, so a rail, a header and a main region agree on insets, sticky edges and widths without a single magic number. The grid on top of them is plain CSS — column counts and gutters come from breakpoints, not from script.

Open the wireframe gallery

Zones

A m-layout is a host; every zone inside it declares what it is and where it belongs. order breaks ties for the corners, sticky pins a zone to the viewport, and a size token lets a zone change its own width — the grid follows.

<m-layout>

The host. Collects its zones and writes one grid stylesheet during SSR.

full-height

<m-layout-header>

Top zone. Owns the block-start inset every sticky zone measures from.

order

<m-layout-aside>

Side zone, multi-instance. Position is logical, so it mirrors in RTL.

position · sticky · order · size-token

<m-layout-main>

The content region. Takes whatever the other zones left.

order

<m-layout-footer>

Bottom zone. Pinned or flowing, same registration contract.

order

app.vue

<template>
  <m-layout full-height>
    <m-layout-aside
      position="start"
      sticky
      :order="0"
    >
      <m-navigation-rail :items="items" />
    </m-layout-aside>

    <m-layout-header :order="1">
      <m-app-bar type="small">Docs</m-app-bar>
    </m-layout-header>

    <m-layout-main :order="2">
      <slot />
    </m-layout-main>
  </m-layout>
</template>

Grid

m-container is a 4 / 8 / 12-column grid, m-row is a subgrid row and m-col spans columns relative to the active breakpoint — a span of 2 is half of a 4-column phone and a sixth of a 12-column desktop.

4 / 4 / 8

4 / 4 / 4

2 / 4 / 6

Resize the window — the same markup re-flows without a media query of your own.

app.vue

<m-container>
  <m-row align="start">
    <m-col :cols="4" :tablet-xs="4" :desktop-xs="8">
      Main column
    </m-col>

    <m-col :cols="4" :tablet-xs="4" :desktop-xs="4">
      Sidebar
    </m-col>
  </m-row>
</m-container>

Breakpoints

Declared once in nuxt.config.ts and injected into Sass as $material-kit-breakpoints, so component styles and grid props always agree.

mobile-xs320px4 columns

mobile600px4 columns

tablet-xs905px8 columns

tablet1240px12 columns

desktop-xs1440px12 columns

desktop1920px12 columns

Wireframes

Nine full app shells assembled from these zones — Spotify, Gmail, Discord, a nested console and simpler baselines. Content is skeletons on purpose: only the structure reads.

Wireframe galleryOpen a shell, resize it, steal the markup.