Layout primitives

Markup Refine keeps layout deliberately small and intrinsic instead of reproducing an atomic utility framework. These primitives describe layout relationships and are designed to compose with semantic HTML and components.

Live demo

The examples below are rendered by this Astro page with the same public classes available to consuming applications.

Stack

Vertical flow controlled by --mr-stack-gap.

First item
Stack owns the vertical spacing.

Second item
Children do not need margin utilities.

Third item
The relationship stays composable.

<section class="mr-stack">
  <article class="mr-card">First item</article>
  <article class="mr-card">Second item</article>
  <article class="mr-card">Third item</article>
</section>

Cluster

A wrapping horizontal group. Use mr-cluster--between,--center, --end, or --around only when the repeated alignment relationship calls for it.

Project status: ready

<div class="mr-cluster mr-cluster--between">
  <strong>Project status</strong>
  <div class="mr-cluster">
    <button>Run checks</button>
    <button class="mr-button--positive">Deploy</button>
  </div>
</div>

Inline

A non-wrapping inline-level relationship for small groups that should stay inside text flow.

Buildpassedview details

<p>
  Build
  <span class="mr-inline">
    <strong>passed</strong>
    <a href="#inline-demo">view details</a>
  </span>
</p>

Grid

Intrinsic auto-fit columns controlled by --mr-grid-min-column-sizeand --mr-grid-gap. Resize the viewport to see columns collapse without a library breakpoint class.

API
Healthy

Worker
Healthy

Database
Healthy

<section class="mr-grid">
  <article class="mr-card">API</article>
  <article class="mr-card">Worker</article>
  <article class="mr-card">Database</article>
</section>

Container

Bounded inline size with fluid padding and no dedicated mobile breakpoint.

Bounded content

The content remains centered and respects the configured maximum width.

<main class="mr-container">
  <h2>Bounded content</h2>
  <p>The container stays centered and gains fluid inline padding.</p>
</main>

Composition

Primitives are most useful together. This example composes Container, Stack, Cluster, and Grid without introducing a page-specific layout system.

Services

API

Worker

Database

<main class="mr-container">
  <section class="mr-stack">
    <div class="mr-cluster mr-cluster--between">
      <h2>Services</h2>
      <button>Add service</button>
    </div>
    <div class="mr-grid">
      <article class="mr-card">API</article>
      <article class="mr-card">Worker</article>
      <article class="mr-card">Database</article>
    </div>
  </section>
</main>

Public primitives

Primitive	Purpose	Main token
`.mr-stack`	Vertical flow	`--mr-stack-gap`
`.mr-cluster`	Wrapping horizontal grouping	`--mr-cluster-gap`
`.mr-inline`	Non-wrapping inline grouping	`--mr-inline-gap`
`.mr-grid`	Intrinsic responsive columns	`--mr-grid-min-column-size`
`.mr-container`	Centered bounded content	`--mr-container-max-width`

Deprecated Group migration

The historical .group helper is deprecated and no longer ships as a component or stable CSS selector. Its layout responsibility is covered by.mr-cluster. Migrate the old alignment modifiers as follows:

Deprecated	Use instead
`.group`	`.mr-cluster`
`.group-spaced-around`	`.mr-cluster--around`
`.group-spaced-between`	`.mr-cluster--between`
`.group-centered`	`.mr-cluster--center`
`.group-end`	`.mr-cluster--end`
`.group-fill`	`.mr-cluster--fill`

Group used to mix layout with button-specific presentation. The replacement is intentionally narrower: .mr-cluster owns layout only, while buttons use the normal Markup Refine button styling.

Admission rule

A new general primitive must solve a repeated layout relationship that the existing five cannot express cleanly without creating an atomic property or breakpoint catalog.

MarkupRefineLib

Menu