Tutorial

LayoutKit arranges native HTML. The examples keep headings, links, buttons, lists, and landmarks as real HTML elements.

Step 1

Center a div

Use lk-center as a wrapper around meaningful content.

<lk-center>
  <section aria-labelledby="empty-heading">
    <h2 id="empty-heading">No results</h2>
  </section>
</lk-center>

No results

Step 2

Stack with consistent spacing

lk-stack is a vertical flex column; gap sets the rhythm.

<lk-stack gap="md">
  <p>Summary</p>
  <p>Details</p>
</lk-stack>

Summary

Details

Next steps

Step 3

A header with `lk-spread`

Push children to opposite ends — logo left, links right.

<lk-spread align="center">
  <a href="/">Logo</a>
  <nav aria-label="Primary">
    <lk-row gap="sm"><a href="/">Home</a><a href="/docs">Docs</a></lk-row>
  </nav>
</lk-spread>

Logo

Step 4

A responsive grid

responsive auto-fits columns by available width — no breakpoints. Resize the window.

<lk-grid responsive gap="md" style="--lk-min-child-width: 140px">
  <article><h3>Project</h3></article> …
</lk-grid>

Project 1

Project 2

Project 3

Step 5

Compose a page

fill grows a layout wrapper while the page keeps native landmarks.

<lk-stack style="height: 200px">
  <header><lk-spread padding="sm"><a href="/">App</a><button type="button">Menu</button></lk-spread></header>
  <main><lk-box fill><lk-center><h2>Content</h2></lk-center></lk-box></main>
</lk-stack>

App

Content

Try it in the Playground →