Layout

Ignix Lite layout primitives use semantic elements and data-layout attributes. They cover page structure, readable containers, spacing, responsive grids, sidebars, centered states, aspect-ratio media, pinned helpers, and form grouping. They are structural by design: use them for composition, not decoration.

---

App Shell

Preview

Ignix App

Dashboard

142 Users

$4,200

3 Issues

Ignix Lite — Zero classes, ~8KB CSS

Code

<div data-layout="app-shell">
  <header data-region="header">Header</header>
  <aside data-region="sidebar">Navigation</aside>
  <main data-region="main">Content</main>
  <footer data-region="footer">Footer</footer>
</div>

---

Container and Section

Preview

Page Title

Section description

Code

<main data-layout="container" data-size="lg">
  <section data-layout="section" data-size="lg">
    <header data-layout="header" data-stack="sm">
      <h1>Dashboard</h1>
      <button data-intent="primary">Create</button>
    </header>
  </section>
</main>

---

Box

Preview

Box Component

Width, padding, border, radius, and surface are all controlled via data attributes.

Code

<section data-layout="box" data-width="md" data-pad="lg" data-surface data-border data-radius>
  Content
</section>

---

Stack

Preview

First Item

Second Item

Third Item

Code

<section data-layout="stack" data-gap="md">
  <article>One</article>
  <article>Two</article>
  <article>Three</article>
</section>

---

Inline

Preview

Code

<div data-layout="inline" data-gap="sm" data-align="center">
  <button data-intent="primary">Save</button>
  <button data-intent="neutral">Cancel</button>
  <button data-intent="danger">Delete</button>
</div>

---

Cluster

Preview

ActivePendingOverdueDraft

Code

<div data-layout="cluster" data-gap="sm">
  <mark data-intent="success">Active</mark>
  <mark data-intent="warning">Pending</mark>
  <mark data-intent="danger">Overdue</mark>
  <mark data-intent="neutral">Draft</mark>
  <button data-intent="ghost">Reset</button>
</div>

---

Split

Preview

User Management

Critical3 unresolved incidents

Code

<header data-layout="split" data-stack="sm">
  <h2>Settings</h2>
  <button data-intent="primary">Save</button>
</header>

---

Sidebar

Preview

FILTERS

Article One

Article Two

Article Three

Code

<section data-layout="sidebar" data-gap="lg">
  <aside>Filters</aside>
  <main data-layout="auto-grid" data-min="md" data-gap="md">
    <article>Result 1</article>
    <article>Result 2</article>
  </main>
</section>

---

Center

Preview

No results found for this filter.

Try adjusting your search or filters.

Code

<section data-layout="center" data-height="content">
  <article>No results</article>
</section>

---

Grid

Preview

Card One

Card Two

Card Three

Full Width Banner

Code

<section data-layout="grid" data-cols="3" data-gap="md">
  <article>Card</article>
  <article>Card</article>
  <article data-span="2">Wide card</article>
</section>

---

Auto Grid

Preview

Analytics

Security

Performance

Support

Code

<section data-layout="auto-grid" data-min="md" data-gap="md">
  <article>Card</article>
  <article>Card</article>
  <article>Card</article>
</section>

---

Masonry

Preview

Short

Taller content here

Medium

Tall card

Short

Code

<section data-layout="masonry" data-cols="3">
  <article>Short</article>
  <article>Taller content</article>
  <article>Tall</article>
</section>

---

Aspect Ratio

Preview

16:9

Video

1:1

Square

Code

<figure data-layout="aspect" data-ratio="video">
  <img src="preview.jpg" alt="Preview" />
</figure>

<figure data-layout="aspect" data-ratio="square">
  <img src="thumbnail.jpg" alt="Thumbnail" />
</figure>

---

Form Layout

Preview

Email

Message

Code

<form data-layout="form">
  <label data-layout="field-group">
    Email
    <input type="email" required />
  </label>
  <button type="submit" data-intent="primary">Submit</button>
</form>

---

Spacer

Preview

Content above

Content below with extra breathing room

Code

<section data-layout="stack" data-gap="md">
  <p>Content above</p>
  <span data-layout="spacer" data-size="lg"></span>
  <p>Content below with extra breathing room</p>
</section>

---

Pin and Position

Preview

This container has a button pinned to its bottom-right corner using absolute positioning.

Code

<!-- Pin an element absolute or fixed in the page or parent container -->
<button data-pin="fixed" data-position="bottom-right" data-intent="primary">
  Help
</button>

---

Attributes

Attribute	Values	Description
data-layout	app-shell, box, container, section, header, stack, inline, cluster, split, center, sidebar, grid, auto-grid, masonry, aspect, spacer, field-group, form	Selects the layout primitive.
data-region	header, sidebar, main, footer	Places children inside app-shell.
data-size	xs, sm, md, lg, xl, full	Controls container width, section padding, or spacer size.
data-width	xs, sm, md, lg, fit, full	Controls box width.
data-pad	none, xs, sm, md, lg, xl	Controls box padding.
data-gap	none, xs, sm, md, lg, xl	Controls spacing between children.
data-align	start, center, end, stretch, baseline	Controls cross-axis alignment.
data-justify	start, center, end, between, around, evenly	Controls main-axis alignment.
data-cols	1, 2, 3, 4, 5, 6, auto, fill	Controls grid or masonry columns.
data-min	sm, md, lg, xl	Controls auto-grid minimum column width.
data-side	left, right	Chooses sidebar side.
data-height	screen, content	Sets center layout minimum height.
data-stack	sm, md	Stacks responsive flex layouts.
data-ratio	square, video, wide, portrait	Sets aspect ratio.
data-pin	absolute, fixed	Pins an element.
data-position	top-left, top-right, bottom-left, bottom-right	Sets pinned position.
data-hide	always, md, sm	Hides an element at a breakpoint.
data-debug	boolean	Shows dashed layout outlines for debugging.

Child Attributes

Attribute	Values	Description
data-grow	0, 1, 2	Flex grow factor.
data-shrink	0, 1	Flex shrink factor.
data-basis	0, auto, full	Flex basis.
data-span	1, 2, 3, 4, full	Grid column span.