Layout — Veritheme

Breakpoints

Mobile-first: a prefixed class applies from its width up; an unprefixed class applies everywhere.

Name	Min width	Prefix	Description
sm	640px	`vt-sm:` `vt-col-sm-*`	Small phones (landscape) and up
md	768px	`vt-md:` `vt-col-md-*`	Tablets and up
lg	1024px	`vt-lg:` `vt-col-lg-*`	Laptops and up
xl	1280px	`vt-xl:` `vt-col-xl-*`	Desktops and up

Container

A centered wrapper with responsive padding.

html

vt-container: Max-width 1280px, auto margins, responsive padding.
vt-container-fluid: Full width, auto margins, responsive padding.

<!-- Centered container (max-width: 1280px) -->
<div class="vt-cq">
  Content here
</div>

<!-- Full-width container -->
<div class="vt-container-fluid">
  Full width content
</div>

12-Column Grid

Flex-based row/column system. Use vt-col-{n} for fixed widths, vt-col for auto-equal.

html

vt-col-6 + vt-col-6 (50/50)

col-6

vt-col-4 + vt-col-4 + vt-col-4 (thirds)

col-4

vt-col x5 (fifths via auto columns)

col 1

col 2

col 3

col 4

col 5

vt-col-3 + vt-col-9 (sidebar layout)

col-3

col-9

vt-col-2 x6 (sixths)

col-2

<!-- 12-column grid -->
<div class="vt-row">
  <div class="vt-col-4">4 cols</div>
  <div class="vt-col-4">4 cols</div>
  <div class="vt-col-4">4 cols</div>
</div>

<!-- Responsive: full width on mobile, 2 cols on md+ -->
<div class="vt-row">
  <div class="vt-col-md-6">Half on md+</div>
  <div class="vt-col-md-6">Half on md+</div>
</div>

Auto Columns

Use vt-col for equal-width auto columns without specifying a number.

html

Auto

<!-- Auto equal columns -->
<div class="vt-row">
  <div class="vt-col">Auto</div>
  <div class="vt-col">Auto</div>
  <div class="vt-col">Auto</div>
</div>

Responsive Grid

Columns adapt at each breakpoint. Full-width on mobile, multi-column on larger screens.

Full → 2 cols on sm → 4 cols on lg

Item 1

Item 2

Item 3

Item 4

CSS Grid Utilities

For simpler equal-column layouts, use vt-grid with vt-grid-cols-{n}.

html

vt-grid vt-grid-cols-3 vt-gap-4

1

2

3

vt-grid vt-grid-cols-1 vt-sm:grid-cols-2 vt-lg:grid-cols-3 vt-gap-4

Card 1

Responsive card grid

Card 2

Responsive card grid

Card 3

Responsive card grid

<div class="vt-grid vt-grid-cols-1 vt-sm:grid-cols-2 vt-lg:grid-cols-3 vt-gap-4">
  <div class="vt-card vt-card-sm"><div class="vt-card-body">Card 1</div></div>
  <div class="vt-card vt-card-sm"><div class="vt-card-body">Card 2</div></div>
  <div class="vt-card vt-card-sm"><div class="vt-card-body">Card 3</div></div>
</div>

Common Layouts

Patterns built with flex and grid utilities.

Sidebar + Content

html

Sidebar

Main Content

<div class="vt-flex vt-min-h-screen">
  <aside class="vt-w-64 vt-shrink-0 vt-border-r vt-border-border-default">
    Sidebar
  </aside>
  <main class="vt-flex-1 vt-min-w-0">
    Main content
  </main>
</div>

Holy Grail (Header + Sidebar + Content + Footer)

html

Header

Nav

Content

Footer

<div class="vt-flex vt-flex-col vt-min-h-screen">
  <header class="vt-border-b vt-border-border-default vt-p-4">
    Header
  </header>
  <div class="vt-flex vt-flex-1">
    <aside class="vt-w-48 vt-border-r vt-border-border-default vt-p-4">
      Sidebar
    </aside>
    <main class="vt-flex-1 vt-p-6">
      Main content
    </main>
  </div>
  <footer class="vt-border-t vt-border-border-default vt-p-4">
    Footer
  </footer>
</div>

Grid vs Row/Col

When to use which layout system.

Use	`vt-grid` + `vt-grid-cols-*`	`vt-row` + `vt-col-*`
Equal-width columns	Yes	—
Card grids, galleries	Yes	—
Asymmetric columns (3 + 9, 4 + 8)	—	Yes
Sidebar layouts	—	Yes
Different column counts per breakpoint	vt-sm:grid-cols-*	vt-col-sm-*

Container queries

Adapt to the container, not the viewport: vt-container on the wrapper, then vt-cq-sm: / vt-cq-md: / vt-cq-lg:. Resize the window to compare the cards.

Wide container — lays out in a row

This wrapper is over 32rem wide, so vt-cq-md:flex-row kicks in and the icon sits beside the text.

Narrow container — stacks

Identical classes, but this wrapper is capped at 20rem, so the same card stacks vertically.