ONE CSS FILE · ZERO DEPENDENCIES

Readable app structure from one CSS file.

LayoutKit is a tiny pure-CSS layout vocabulary: developer-readable lk-* wrappers for stacks, rows, grids, centers, and scroll areas inside native semantic HTML.

Install LayoutKit GitHub npm

What it is

A tiny CSS vocabulary that makes layout intent visible in markup without adding runtime JavaScript, dependencies, or a framework contract.

What it is not

Not a component library, design system, substitute for semantic HTML, button kit, form kit, theme, icon set, animation library, or JavaScript app shell.

INSTALL

Load the CSS early

Use a normal stylesheet link for CDN or direct browser usage. In frameworks, import LayoutKit at the root or global CSS layer. There is no JavaScript fallback by design.

npm install layoutkit-css

import "layoutkit-css/layoutkit.css";

<link rel="stylesheet" href="https://unpkg.com/layoutkit-css/layoutkit.css">

Use layout wrappers around semantic HTML

Browsers and assistive technologies do not understand lk-* tags as native landmarks, headings, controls, lists, or forms. Keep the native elements.

<main>
  <section aria-labelledby="dashboard-heading">
    <lk-stack gap="lg">
      <h1 id="dashboard-heading">Dashboard</h1>
      <lk-grid cols="3" responsive>
        <article>
          <h2>Open orders</h2>
          <p>128</p>
        </article>
      </lk-grid>
    </lk-stack>
  </section>
</main>

Accessibility guidance

Use native HTML first. Do not put click handlers on lk-* elements; use button or a.

Do not add ARIA roles just to make layout wrappers seem semantic. If a wrapper has no semantic purpose, it usually does not need ARIA.

LayoutKit should not change focus order. Avoid hidden overflow that traps keyboard users, and keep scroll containers usable.