Utilities & Layout — Veritheme

Breakpoints

Mobile-first breakpoints used across all responsive utilities and grid columns.

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

Responsive Variants

Mobile-first breakpoint prefixes. Classes without a prefix apply to all screen sizes.

Prefix	Min Width	Description
vt-sm:	640px	Small screens and up
vt-md:	768px	Medium screens and up
vt-lg:	1024px	Large screens and up

Example: stack on mobile, row on md+

Column 1

Column 2

Column 3

class="vt-flex vt-flex-col vt-md:flex-row vt-gap-3"

State Variants

Apply styles conditionally based on element state.

Prefix	Description	Example
vt-hover:	On mouse hover	vt-hover:bg-surfaces-subtle
vt-focus:	On focus	vt-focus:ring-2 vt-focus:ring-info-primary
vt-focus-visible:	Keyboard focus only	vt-focus-visible:ring-2
vt-disabled:	When disabled	vt-disabled:opacity-50 vt-disabled:cursor-not-allowed
vt-group-hover:	When parent .group is hovered	group vt-group-hover:text-mains-primary
vt-placeholder:	Placeholder text style	vt-placeholder:text-mains-quaternary

Dark Mode Variants

Prefix classes with vt-dark: to apply only when .dark is on <html>.

Class	Description
vt-dark:hidden	Hide in dark mode
vt-dark:block	Show in dark mode
vt-dark:bg-generic-black/50	Dark overlay

Container

Centered wrapper with responsive padding. Max-width 1280px.

html

.vt-container

max-width: 1280px, auto margins, responsive padding

.vt-container-fluid

width: 100%, auto margins, responsive padding

<!-- Centered container (max-width: 1280px) -->
<div class="vt-container">
  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">Card 1</div>
  <div class="vt-card">Card 2</div>
  <div class="vt-card">Card 3</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.

vt-grid + vt-grid-cols-*

Equal-width columns
Card grids, galleries
Simple responsive layouts
Fixed column count

vt-row + vt-col-*

Asymmetric columns (3+9, 4+8)
Sidebar layouts
Complex responsive breakpoints
Bootstrap-style grid

Display

10 classes

Class	CSS
vt-block	display: block
vt-inline-block	display: inline-block
vt-inline	display: inline
vt-flex	display: flex
vt-inline-flex	display: inline-flex
vt-grid	display: grid
vt-hidden	display: none
vt-table	display: table
vt-table-row	display: table-row
vt-table-cell	display: table-cell

Position

10 classes

Class	CSS
vt-static	position: static
vt-relative	position: relative
vt-absolute	position: absolute
vt-fixed	position: fixed
vt-sticky	position: sticky
vt-inset-0	inset: 0
vt-top-0	top: 0
vt-right-0	right: 0
vt-bottom-0	bottom: 0
vt-left-0	left: 0

Flexbox

19 classes

Class	CSS
vt-flex-row	flex-direction: row
vt-flex-col	flex-direction: column
vt-flex-wrap	flex-wrap: wrap
vt-flex-nowrap	flex-wrap: nowrap
vt-flex-1	flex: 1 1 0%
vt-shrink-0	flex-shrink: 0
vt-grow	flex-grow: 1
vt-items-start	align-items: flex-start
vt-items-center	align-items: center
vt-items-end	align-items: flex-end
vt-items-stretch	align-items: stretch
vt-items-baseline	align-items: baseline
vt-justify-start	justify-content: flex-start
vt-justify-center	justify-content: center
vt-justify-end	justify-content: flex-end
vt-justify-between	justify-content: space-between
vt-self-start	align-self: flex-start
vt-self-center	align-self: center
vt-self-end	align-self: flex-end

Grid

9 classes

Class	CSS
vt-grid-cols-1	grid-template-columns: repeat(1, 1fr)
vt-grid-cols-2	grid-template-columns: repeat(2, 1fr)
vt-grid-cols-3	grid-template-columns: repeat(3, 1fr)
vt-grid-cols-4	grid-template-columns: repeat(4, 1fr)
vt-grid-cols-6	grid-template-columns: repeat(6, 1fr)
vt-grid-cols-12	grid-template-columns: repeat(12, 1fr)
vt-col-span-2	grid-column: span 2 / span 2
vt-col-span-3	grid-column: span 3 / span 3
vt-col-span-full	grid-column: 1 / -1

Spacing (Padding)

11 classes

Class	CSS
vt-p-0	padding: 0
vt-p-1	padding: 0.25rem
vt-p-2	padding: 0.5rem
vt-p-3	padding: 0.75rem
vt-p-4	padding: 1rem
vt-p-6	padding: 1.5rem
vt-p-8	padding: 2rem
vt-px-4	padding-left/right: 1rem
vt-py-4	padding-top/bottom: 1rem
vt-pt-4	padding-top: 1rem
vt-pb-4	padding-bottom: 1rem

Spacing (Margin)

8 classes

Class	CSS
vt-m-0	margin: 0
vt-m-auto	margin: auto
vt-mx-auto	margin-left/right: auto
vt-mt-4	margin-top: 1rem
vt-mb-4	margin-bottom: 1rem
vt-ml-2	margin-left: 0.5rem
vt-mr-2	margin-right: 0.5rem
vt--mt-1	margin-top: -0.25rem

Spacing (Gap)

8 classes

Class	CSS
vt-gap-1	gap: 0.25rem
vt-gap-2	gap: 0.5rem
vt-gap-3	gap: 0.75rem
vt-gap-4	gap: 1rem
vt-gap-6	gap: 1.5rem
vt-gap-8	gap: 2rem
vt-gap-x-4	column-gap: 1rem
vt-gap-y-4	row-gap: 1rem

Sizing

13 classes

Class	CSS
vt-w-full	width: 100%
vt-w-auto	width: auto
vt-w-screen	width: 100vw
vt-h-full	height: 100%
vt-h-screen	height: 100vh
vt-min-h-screen	min-height: 100vh
vt-min-w-0	min-width: 0
vt-max-w-sm	max-width: 24rem
vt-max-w-md	max-width: 28rem
vt-max-w-lg	max-width: 32rem
vt-max-w-5xl	max-width: 64rem
vt-w-8	width: 2rem
vt-h-8	height: 2rem

Typography

29 classes

Class	CSS
vt-text-xs	font-size: 0.75rem
vt-text-sm	font-size: 0.875rem
vt-text-base	font-size: 1rem
vt-text-lg	font-size: 1.125rem
vt-text-xl	font-size: 1.25rem
vt-text-2xl	font-size: 1.5rem
vt-text-3xl	font-size: 1.875rem
vt-font-normal	font-weight: 400
vt-font-medium	font-weight: 500
vt-font-semibold	font-weight: 600
vt-font-bold	font-weight: 700
vt-text-left	text-align: left
vt-text-center	text-align: center
vt-text-right	text-align: right
vt-uppercase	text-transform: uppercase
vt-lowercase	text-transform: lowercase
vt-capitalize	text-transform: capitalize
vt-tracking-tight	letter-spacing: -0.025em
vt-tracking-wider	letter-spacing: 0.05em
vt-leading-none	line-height: 1
vt-leading-tight	line-height: 1.25
vt-leading-normal	line-height: 1.5
vt-leading-relaxed	line-height: 1.625
vt-font-mono	font-family: monospace
vt-truncate	overflow: hidden; text-overflow: ellipsis; white-space: nowrap
vt-line-clamp-2	-webkit-line-clamp: 2
vt-whitespace-nowrap	white-space: nowrap
vt-no-underline	text-decoration: none
vt-underline	text-decoration: underline

Colors (Text)

10 classes

Class	CSS
vt-text-mains-primary	color: hsl(var(--mains-primary))
vt-text-mains-secondary	color: hsl(var(--mains-secondary))
vt-text-mains-tertiary	color: hsl(var(--mains-tertiary))
vt-text-mains-quaternary	color: hsl(var(--mains-quaternary))
vt-text-info-primary	color: hsl(var(--info-primary))
vt-text-success-primary	color: hsl(var(--success-primary))
vt-text-error-primary	color: hsl(var(--error-primary))
vt-text-warning-primary	color: hsl(var(--warning-primary))
vt-text-generic-white	color: hsl(var(--generic-white))
vt-text-generic-black	color: hsl(var(--generic-black))

Colors (Background)

16 classes

Class	CSS
vt-bg-surfaces-background	background: hsl(var(--surfaces-background))
vt-bg-surfaces-surface	background: hsl(var(--surfaces-surface))
vt-bg-surfaces-subtle	background: hsl(var(--surfaces-subtle))
vt-bg-surfaces-moderate	background: hsl(var(--surfaces-moderate))
vt-bg-surfaces-contrast	background: hsl(var(--surfaces-contrast))
vt-bg-info-primary	background: hsl(var(--info-primary))
vt-bg-success-primary	background: hsl(var(--success-primary))
vt-bg-error-primary	background: hsl(var(--error-primary))
vt-bg-warning-primary	background: hsl(var(--warning-primary))
vt-bg-info-background	background: hsl(var(--info-background))
vt-bg-success-background	background: hsl(var(--success-background))
vt-bg-error-background	background: hsl(var(--error-background))
vt-bg-warning-background	background: hsl(var(--warning-background))
vt-bg-generic-white	background: hsl(var(--generic-white))
vt-bg-generic-black	background: hsl(var(--generic-black))
vt-bg-transparent	background: transparent

Borders

15 classes

Class	CSS
vt-border	border-width: 1px
vt-border-0	border-width: 0
vt-border-2	border-width: 2px
vt-border-t	border-top-width: 1px
vt-border-b	border-bottom-width: 1px
vt-border-border-default	border-color: hsl(var(--border-default))
vt-border-border-strong	border-color: hsl(var(--border-strong))
vt-border-transparent	border-color: transparent
vt-rounded-sm	border-radius: var(--radius-sm)
vt-rounded-lg	border-radius: var(--radius-lg)
vt-rounded-xl	border-radius: var(--radius-xl)
vt-rounded-2xl	border-radius: var(--radius-2xl)
vt-rounded-full	border-radius: 9999px
vt-divide-y	border-top on children
vt-divide-border-default	divide color: hsl(var(--border-default))

Shadows

6 classes

Class	CSS
vt-shadow-sm	box-shadow: var(--shadow-sm)
vt-shadow	box-shadow: var(--shadow)
vt-shadow-md	box-shadow: var(--shadow-md)
vt-shadow-lg	box-shadow: var(--shadow-lg)
vt-shadow-xl	box-shadow: var(--shadow-xl)
vt-shadow-none	box-shadow: none

Ring (Focus)

5 classes

Class	CSS
vt-ring-1	box-shadow ring: 1px
vt-ring-2	box-shadow ring: 2px
vt-ring-info-primary	ring color: blue
vt-ring-error-primary	ring color: red
vt-ring-offset-2	ring offset: 2px

Opacity

6 classes

Class	CSS
vt-opacity-0	opacity: 0
vt-opacity-25	opacity: 0.25
vt-opacity-50	opacity: 0.5
vt-opacity-75	opacity: 0.75
vt-opacity-90	opacity: 0.9
vt-opacity-100	opacity: 1

Transforms

9 classes

Class	CSS
vt-translate-x-0	--vt-translate-x: 0
vt-translate-x-full	--vt-translate-x: 100%
vt--translate-x-full	--vt-translate-x: -100%
vt--translate-y-1/2	--vt-translate-y: -50%
vt-rotate-90	--vt-rotate: 90deg
vt-rotate-180	--vt-rotate: 180deg
vt-scale-95	--vt-scale-x/y: 0.95
vt-scale-100	--vt-scale-x/y: 1
vt-scale-105	--vt-scale-x/y: 1.05

Transitions & Animation

12 classes

Class	CSS
vt-transition-colors	transition: color, background, border
vt-transition-opacity	transition: opacity
vt-transition-transform	transition: transform
vt-transition-shadow	transition: box-shadow
vt-transition-all	transition: all
vt-duration-150	transition-duration: 150ms
vt-duration-200	transition-duration: 200ms
vt-duration-300	transition-duration: 300ms
vt-ease-in-out	transition-timing: ease-in-out
vt-animate-spin	animation: spin 1s linear infinite
vt-animate-pulse	animation: pulse 2s ease infinite
vt-animate-ping	animation: ping 1s ease infinite

Overflow & Cursor

9 classes

Class	CSS
vt-overflow-hidden	overflow: hidden
vt-overflow-auto	overflow: auto
vt-overflow-x-auto	overflow-x: auto
vt-overflow-y-auto	overflow-y: auto
vt-cursor-pointer	cursor: pointer
vt-cursor-not-allowed	cursor: not-allowed
vt-cursor-default	cursor: default
vt-select-none	user-select: none
vt-pointer-events-none	pointer-events: none

Z-Index

7 classes

Class	CSS
vt-z-0	z-index: 0
vt-z-10	z-index: 10
vt-z-20	z-index: 20
vt-z-30	z-index: 30
vt-z-40	z-index: 40
vt-z-50	z-index: 50
vt-z-100	z-index: 100

Backdrop Blur

6 classes

Class	CSS
vt-backdrop-blur-none	backdrop-filter: blur(0)
vt-backdrop-blur-sm	backdrop-filter: blur(4px)
vt-backdrop-blur	backdrop-filter: blur(8px)
vt-backdrop-blur-md	backdrop-filter: blur(12px)
vt-backdrop-blur-lg	backdrop-filter: blur(16px)
vt-backdrop-blur-xl	backdrop-filter: blur(24px)