Layout & Grid

Mode

Skin

Theme

Overview & Philosophy

Structural layout primitives: application shell layout with responsive collapsible sidebar, fluid CSS grid system, vertical stacks, horizontal rows, and constrained containers.

.grid (3 columns)

1
2
3
4
5
6

.grid-2 (2 columns)

Left
Right

.grid-4 (4 columns)

1
2
3
4

.stack, .row

stack (vertical)
Item 1
Item 2
Item 3
row (horizontal)
A
B
C

row-between
Left
Right

App Layout structure

<!-- Full app layout -->
<div class="app-wrapper">

    <aside class="sidebar">
        <header>
            <img class="logo" src="logo.svg">
            <span class="app-name">App Name</span>
        </header>
        <main>
            <nav class="nav">...</nav>
        </main>
        <footer>...</footer>
    </aside>

    <div class="main-panel">
        <header class="header">
            <div class="header-left">
                <h1>Page Title</h1>
            </div>
            <div class="header-right">...</div>
        </header>

        <div class="content">
            <!-- page content -->
        </div>

        <footer class="footer">
            <span>Footer text</span>
        </footer>
    </div>

</div>

Grid HTML

<!-- 3-column grid (responsive: 1→2→3) -->
<div class="grid">
    <div>...</div>
    <div>...</div>
    <div>...</div>
</div>

<!-- 2-column -->
<div class="grid-2">...</div>

<!-- 4-column -->
<div class="grid-4">...</div>

<!-- Stack (vertical) -->
<div class="stack">...</div>
<div class="stack-sm">...</div>  <!-- smaller gap -->

<!-- Row (horizontal) -->
<div class="row">...</div>
<div class="row-between">...</div>
<div class="row-center">...</div>