wiki-styles-2 — documentation

§ 01 · Try it

Drive `--c` and `--border-radius` in real time

Most utilities read from CSS custom properties so the same class works with any color or radius. Set the variables inline and the output adapts.

--c #e62829

--border-radius 10px

.bg-solid .text-auto .roundy

.bg-gradient .text-auto .roundy

<div class="bg-solid text-auto roundy" style="--c: #e62829">
  Solid fill, auto-contrast text, rounded
</div>

<div class="bg-gradient text-auto roundy"
     style="--from: #e62829; --to: #3461a2">
  Gradient fill, contrast text auto-derived
</div>

§ 02 · Color tokens

Pokémon-native palette as `--c-*` variables

Every type, game, region, and UI surface is exposed as a CSS custom property on :root. Each token ships with up to five variants — click any swatch to copy its var() expression.

Filter …

Aliases include localized aliases

Each row shows the base swatch plus only the variants that are defined for that token. Click any swatch to open the detail sheet — copy the var() name or the raw value, see WCAG contrast, preview foreground samples.

Using a token in code

Fuoco Acqua Erba Elettro Buio Folletto

<span class="bg-solid text-auto roundy" style="--c: var(--c-fuoco)">Fuoco</span>
<span class="bg-solid text-auto roundy" style="--c: var(--c-acqua)">Acqua</span>
<span class="bg-solid text-auto roundy" style="--c: var(--c-erba)">Erba</span>

§ 03 · Backgrounds

Solid, gradient & neutral surfaces

Each utility sets --bg-color as a side effect so .text-auto can pick a readable foreground without further configuration.

Class	Reads	Effect
.bg-solid	--c	background-color: var(--c)
.bg-gradient	--from, --to	alias of `.bg-gradient-r`
.bg-gradient-r	--from, --to	linear-gradient(to right, …)
.bg-gradient-l	--from, --to	linear-gradient(to left, …)
.bg-gradient-t	--from, --to	linear-gradient(to top, …)
.bg-gradient-b	--from, --to	linear-gradient(to bottom, …)
.bg-radiant	--from, --to	radial-gradient(--from, --to)
.bg-white / .white-bg	—	theme-aware light surface (uses `light-dark()`)
.bg-black / .black-bg	—	theme-aware dark surface

Solid fill

Fuoco Acqua Folletto

<span class="bg-solid text-auto roundy" style="--c: var(--c-fuoco)">Fuoco</span>

Gradient directions

Four linear directions + one radial. All consume --from and --to.

.bg-gradient (→) .bg-gradient-l (←) .bg-gradient-t (↑) .bg-gradient-b (↓) .bg-radiant

<span class="bg-gradient text-auto roundy"
      style="--from: var(--c-fuoco); --to: var(--c-acqua)">→</span>
<span class="bg-gradient-l text-auto roundy"
      style="--from: var(--c-elettro); --to: var(--c-erba)">←</span>
<span class="bg-gradient-t text-auto roundy"
      style="--from: var(--c-acqua); --to: var(--c-buio)">↑</span>
<span class="bg-gradient-b text-auto roundy"
      style="--from: var(--c-folletto); --to: var(--c-psico)">↓</span>
<span class="bg-radiant text-auto roundy"
      style="--from: var(--c-elettro); --to: var(--c-fuoco)">radial</span>

Theme-aware neutrals

.bg-white / .bg-black consume MediaWiki's --background-color-base / --background-color-inverted when those are loaded, and fall back to light-dark() otherwise.

Toggle the theme in the top bar to watch .bg-white swap automatically while the Pokémon-type colors stay invariant — those are domain colors, not theme colors.

.bg-white .bg-black

<span class="bg-white roundy">.bg-white</span>
<span class="bg-black white-text roundy">.bg-black</span>

§ 04 · Text color

Auto-contrast and explicit foregrounds

.text-auto reads --bg-color (set by background utilities) and picks black or white via the relative-color oklch() luminance threshold. Explicit overrides are also provided.

Class	Behavior
.text-auto	black or white, picked from `--bg-color` luminance
.text-black / .black-text	`color: var(--color-base, #000)`
.text-white / .white-text	`color: var(--color-inverted, #fff)`

.text-auto · light bg .text-auto · dark bg .text-black forced .text-white forced

<span class="bg-solid text-auto roundy" style="--c: var(--c-elettro)">
  auto · picks black on yellow
</span>
<span class="bg-solid text-auto roundy" style="--c: var(--c-buio)">
  auto · picks white on dark
</span>
<span class="bg-solid text-black roundy" style="--c: var(--c-fuoco)">forced black</span>
<span class="bg-solid text-white roundy" style="--c: var(--c-acqua)">forced white</span>

§ 05 · Display

Box display utilities

All four primitives gain responsive variants — see Responsive.

Class	CSS
.block	display: block
.inline-block	display: inline-block
.inline	display: inline
.hidden	display: none

.block .inline-block .inline

<span class="block">.block</span>
<span class="inline-block">.inline-block</span>
<span class="inline">.inline</span>
<span class="hidden">not rendered</span>

<!-- responsive variant -->
<span class="hidden md:block">shown only ≤ 768px</span>

§ 06 · Flex

Direction, alignment & composite shortcuts

Full flexbox vocabulary plus opinionated shortcuts for the most common combinations.

Playground

Toggle each axis and watch the class string update. Copy the result into your template.

direction

justify (main)

align (cross)

wrap

flex flex-row flex-main-center flex-items-center

A B C D

Container & direction

Class	CSS
.flex	display: flex
.inline-flex	display: inline-flex
.flex-row	flex-direction: row
.flex-row-reverse	flex-direction: row-reverse
.flex-column	flex-direction: column
.flex-column-reverse	flex-direction: column-reverse
.flex-wrap	flex-wrap: wrap
.flex-nowrap	flex-wrap: nowrap
.flex-wrap-reverse	flex-wrap: wrap-reverse

123

<div class="flex flex-row"> … </div>
<div class="flex flex-column"> … </div>

Main axis · `justify-content`

Class	CSS
.flex-main-start	justify-content: flex-start
.flex-main-end	justify-content: flex-end
.flex-main-center	justify-content: center
.flex-main-space-between	justify-content: space-between
.flex-main-space-around	justify-content: space-around
.flex-main-space-evenly	justify-content: space-evenly

start··

·center·

··end

between··

evenly··

<div class="flex flex-main-start">…</div>
<div class="flex flex-main-center">…</div>
<div class="flex flex-main-space-between">…</div>

Cross axis · `align-items`

Class	CSS
.flex-items-start	align-items: flex-start
.flex-items-end	align-items: flex-end
.flex-items-center	align-items: center
.flex-items-stretch	align-items: stretch
.flex-items-baseline	align-items: baseline

Cross axis · `align-content`

Class	CSS
.flex-cross-start	align-content: flex-start
.flex-cross-end	align-content: flex-end
.flex-cross-center	align-content: center
.flex-cross-stretch	align-content: stretch
.flex-cross-space-between	align-content: space-between
.flex-cross-space-around	align-content: space-around

Per-item · `align-self`

Class	CSS
.flex-item-self-start	align-self: flex-start
.flex-item-self-end	align-self: flex-end
.flex-item-self-center	align-self: center
.flex-item-self-stretch	align-self: stretch
.flex-item-self-baseline	align-self: baseline

Composite shortcuts

Pre-baked combos for the most-typed sequences.

Class	Equivalent
.flex-row-stretch-around	row + stretch + space-around
.flex-row-center-around	row + center + space-around
.flex-row-center-stretch	row + center + stretch
.flex-item-fill	flex: 1 1 0
.flex-main-equal > *	flex: 1 1 0 (apply to children)
.flex-main-stretch > *	flex: 1 1 auto (apply to children)

A B C

stretch around

<div class="flex-row-center-around">…</div>
<div class="flex-row-stretch-around">…</div>
<div class="flex-row-center-stretch">…</div>

§ 07 · Grid

Twelve-column grid with spans & placement

Generated for 1 → 12 across every utility. Use .col-span-full and .row-span-full for edge-to-edge children.

Placement playground

Three items on a 12-column × 4-row grid. Pick each item's column & row start/end to compose .col-start-* .col-end-* .row-start-* .row-end-* placements; copy the live class string.

A B C

item

col-start

col-end

row-start

row-end

Class	CSS
.grid	display: grid
.inline-grid	display: inline-grid
.grid-cols-n (n = 1…12)	grid-template-columns: repeat(n, minmax(0, 1fr))
.grid-rows-n (n = 1…12)	grid-template-rows: repeat(n, minmax(0, 1fr))
.col-span-n (n = 1…12)	grid-column: span n / span n
.col-span-full	grid-column: 1 / -1
.row-span-n (n = 1…12)	grid-row: span n / span n
.row-span-full	grid-row: 1 / -1
.col-start-n, .col-end-n (n = 1…13)	grid-column-{start,end}: n
.row-start-n, .row-end-n (n = 1…13)	grid-row-{start,end}: n
.col-auto, .row-auto	grid-column: auto / grid-row: auto
.grid-flow-row, .grid-flow-col	grid-auto-flow: row \| column
.grid-flow-row-dense, .grid-flow-col-dense	grid-auto-flow: row dense \| column dense

1 2 3 4 .col-span-2 .col-span-2 .col-span-full

<div class="grid grid-cols-4 gap-2">
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span class="col-span-2">.col-span-2</span>
  <span class="col-span-2">.col-span-2</span>
  <span class="col-span-full">.col-span-full</span>
</div>

§ 08 · Spacing & gap

`.gap-N` · independent axes via `.gap-x-N`, `.gap-y-N`

A unified scale that works with both flex and grid containers. Step matches Tailwind's standard rhythm (4 px increments) until the last few values where it widens.

Class	Value
.gap-0	0
.gap-px	1px
.gap-1	0.25rem · 4px
.gap-2	0.5rem · 8px
.gap-3	0.75rem · 12px
.gap-4	1rem · 16px
.gap-5	1.25rem · 20px
.gap-6	1.5rem · 24px
.gap-7	1.75rem · 28px
.gap-8	2rem · 32px
.gap-9	2.25rem · 36px
.gap-10	2.5rem · 40px
.gap-11	2.75rem · 44px
.gap-12	3rem · 48px
.gap-14	3.5rem · 56px
.gap-16	4rem · 64px
.gap-20	5rem · 80px
.gap-24	6rem · 96px
.gap-28	7rem · 112px
.gap-32	8rem · 128px
.gap-x-n	same scale, applied to `column-gap`
.gap-y-n	same scale, applied to `row-gap`

Scale visualizer

gap step 3

flex gap-3

A B C

gap-1··

gap-3··

gap-6··

gap-x-6·· gap-y-1··

<div class="flex gap-1">…</div>
<div class="flex gap-3">…</div>
<div class="flex gap-6">…</div>
<div class="grid grid-cols-3 gap-x-6 gap-y-1">…</div>

§ 09 · Sizes

Percentage widths in 5% steps

.width-N and .max-width-N where N runs 5 → 100 in steps of 5. .height-100 when you need to fill a container vertically.

Class	CSS
.width-n (n = 5, 10, 15, …, 100)	width: n%
.width-auto	width: auto
.max-width-n (n = 5, 10, 15, …, 100)	max-width: n%
.max-width-auto	max-width: auto
.height-100	height: 100%

Width & max-width sliders

width-N 50

max-width-N 100

width-50 max-width-100

effective: —

.width-25

.width-50

.width-75

.width-100

<div class="width-25">.width-25</div>
<div class="width-50">.width-50</div>
<div class="width-75">.width-75</div>
<div class="width-100">.width-100</div>

§ 10 · Typography

Scale & alignment

Nine sizes and four alignment utilities. The family is set globally to Rooney Sans with system-sans fallbacks.

Class	CSS
.text-xs	font-size: 0.75rem · 12px
.text-sm	font-size: 0.875rem · 14px
.text-base	font-size: 1rem · 16px
.text-lg	font-size: 1.125rem · 18px
.text-xl	font-size: 1.25rem · 20px
.text-2xl	font-size: 1.5rem · 24px
.text-3xl	font-size: 1.875rem · 30px
.text-4xl	font-size: 2.25rem · 36px
.text-5xl	font-size: 3rem · 48px
.text-left	text-align: left
.text-center	text-align: center
.text-right	text-align: right
.text-justify	text-align: justify

Scale

xs sm base lg xl 2xl 3xl 4xl 5xl

<span class="text-xs">xs</span>
<span class="text-sm">sm</span>
<span class="text-base">base</span>
<span class="text-lg">lg</span>
<span class="text-xl">xl</span>
<span class="text-2xl">2xl</span>
<span class="text-3xl">3xl</span>
<span class="text-4xl">4xl</span>
<span class="text-5xl">5xl</span>

Alignment

.text-left — Lorem ipsum dolor sit amet.

.text-center — Lorem ipsum dolor sit amet.

.text-right — Lorem ipsum dolor sit amet.

.text-justify — A lazy fennekin jumps over a particularly thoughtful larvitar watching the morning light spill across the canopy.

<p class="text-left">…</p>
<p class="text-center">…</p>
<p class="text-right">…</p>
<p class="text-justify">…</p>

§ 11 · Roundy & nesting

Directional border-radius with depth-aware recalculation

.roundy rounds all four corners; the directional variants target a side or a single corner. When roundy elements are nested, an :is() descendant rule subtracts the parent's --padding from --border-radius so inner corners never poke outside outer ones.

Class	Effect
.roundy	all four corners
.roundy-top, .roundy-bottom	top or bottom pair
.roundy-left, .roundy-right	left or right pair
.roundy-top-left, .roundy-top-right	single corner (top side)
.roundy-bottom-left, .roundy-bottom-right	single corner (bottom side)
.circle	`border-radius: 50%`

Directional variants

.roundy

.roundy-top

.roundy-bottom

.roundy-left

.roundy-right

.roundy-top-left

.roundy-top-right

.roundy-bottom-left

.roundy-bottom-right

.circle

<div class="roundy">…</div>
<div class="roundy-top">…</div>
<div class="roundy-bottom-right">…</div>
<div class="circle">…</div>

Nested recalculation — interactive

Each level reads its parent's --border-radius and --padding, subtracts, and writes --br-effective to itself. Inner labels show the computed value at each depth.

Depth 4

--border-radius 20px

--padding 6px

Depth	--br-effective

Same math, applied to `.pcw-table`

Corner cells inherit the recalculated radius automatically — the demo below uses the same slider values.

#	Name	Type
001	Bulbasaur	Erba/Veleno
004	Charmander	Fuoco
007	Squirtle	Acqua
025	Pikachu	Elettro

§ 12 · Gallery

Responsive tiled grid

Drop-in styling for MediaWiki's <gallery> markup. Sizing is driven by --gallery-tile-min; tile background by --gallery-tile-bg.

CSS variable	Default	Purpose
--gallery-tile-min	10rem	minimum tile width (auto-fill)
--gallery-tile-bg	transparent	per-tile background
--gallery-gap	0.75rem	gap between tiles
--border-radius	var(--default-border-radius)	tile corner radius
--padding	var(--default-padding)	tile inner padding

Charmander
Squirtle
Bulbasaur
Pikachu
Mewtwo

<ul class="gallery"
    style="--gallery-tile-min: 8rem; --gallery-tile-bg: var(--c-pcwiki-light)">
  <li>
    <img src="charmander.png" />
    <div class="gallerytext">Charmander</div>
  </li>
  …
</ul>

§ 13 · Tabs

Accordion tabs from `<details>`

Native semantic disclosure. Set name="X" on sibling <details> to make them mutually exclusive — opening one closes the others.

CSS variable	Default	Purpose
--tabs-bg	var(--c-pcwiki-light)	inactive tab background
--tabs-bg-active	var(--c-pcwiki)	open tab background
--tabs-radius	var(--default-border-radius)	tab corner radius
--tabs-gap	0.25rem	spacing between siblings

Acqua

First-generation Water-type starter line: Squirtle → Wartortle → Blastoise.

Fuoco

First-generation Fire-type starter line: Charmander → Charmeleon → Charizard.

Erba

First-generation Grass-type starter line: Bulbasaur → Ivysaur → Venusaur.

<div class="tabs">
  <details name="example" open>
    <summary>Acqua</summary>
    <div>…</div>
  </details>
  <details name="example">
    <summary>Fuoco</summary>
    <div>…</div>
  </details>
</div>

§ 14 · PCW table

Drop-in styling for data tables

.pcw-table styles a regular <table> with a gradient header row, light body rows, and corner cells that follow --border-radius. Two header modes — default (first <tbody> row, MediaWiki convention) or .sortable (semantic <thead>) — plus optional scroll and sticky-head modifiers.

Modifier	Effect
.pcw-table	base styling: rounded corners, gradient header, light body rows. The first `<tbody>` row is rendered as the header.
.sortable	treat the semantic `<thead>` row as the header instead. Use when the table has proper `thead`/`tbody` structure.
.scrollable	wrap the table in horizontal overflow for wide content.
.sticky-head	pin the header row to the top during vertical scroll.

Default — first `<tbody>` row is the header

Skip <thead> entirely; put header <th> cells as the first row of <tbody>. Matches MediaWiki's wikitable convention.

#	Name	Type	Region
001	Bulbasaur	Erba/Veleno	Kanto
152	Chikorita	Erba	Johto
252	Treecko	Erba	Hoenn
387	Turtwig	Erba	Sinnoh

<table class="pcw-table">
  <tbody>
    <tr><th>#</th><th>Name</th><th>Type</th></tr>
    <tr><td>001</td><td>Bulbasaur</td><td>Erba</td></tr>
    …
  </tbody>
</table>

`.sortable` — semantic `<thead>`

Use proper <thead>/<tbody> structure. The thead row carries the gradient; the body rows stay on the light surface.

#	Name	Type	Region
001	Bulbasaur	Erba/Veleno	Kanto
152	Chikorita	Erba	Johto
252	Treecko	Erba	Hoenn
387	Turtwig	Erba	Sinnoh

<table class="pcw-table sortable">
  <thead>
    <tr><th>#</th><th>Name</th><th>Type</th></tr>
  </thead>
  <tbody>
    <tr><td>001</td><td>Bulbasaur</td><td>Erba</td></tr>
    …
  </tbody>
</table>

`.scrollable` — wide tables

The table establishes its own horizontal overflow context. Try scrolling the table below sideways — the page itself doesn't scroll.

#	Name	Type 1	Type 2	HP	Atk	Def	SpA	SpD	Spe	Region	Gen
001	Bulbasaur	Erba	Veleno	45	49	49	65	65	45	Kanto	I
004	Charmander	Fuoco	—	39	52	43	60	50	65	Kanto	I
007	Squirtle	Acqua	—	44	48	65	50	64	43	Kanto	I
025	Pikachu	Elettro	—	35	55	40	50	50	90	Kanto	I
150	Mewtwo	Psico	—	106	110	90	154	90	130	Kanto	I

<table class="pcw-table sortable scrollable">
  <thead>…many columns…</thead>
  <tbody>…rows…</tbody>
</table>

`.sticky-head` — pinned header

The header row sticks to the top while scrolling through long tables. The demo below is wrapped in a max-height container so scrolling stays inside the card.

#	Name	Type	Region
001	Bulbasaur	Erba/Veleno	Kanto
025	Pikachu	Elettro	Kanto
152	Chikorita	Erba	Johto
155	Cyndaquil	Fuoco	Johto
158	Totodile	Acqua	Johto
252	Treecko	Erba	Hoenn
255	Torchic	Fuoco	Hoenn
258	Mudkip	Acqua	Hoenn
387	Turtwig	Erba	Sinnoh
390	Chimchar	Fuoco	Sinnoh
393	Piplup	Acqua	Sinnoh
495	Snivy	Erba	Unima
498	Tepig	Fuoco	Unima
501	Oshawott	Acqua	Unima

<div style="max-height: 14rem; overflow-y: auto">
  <table class="pcw-table sortable sticky-head">
    <thead>…</thead>
    <tbody>…many rows…</tbody>
  </table>
</div>

§ 15 · Responsive variants

Desktop-first breakpoint prefixes

Prefix any utility with sm:, md: or lg: to activate it at and below that breakpoint. Resize the window — the banners below disclose which breakpoint they target.

Prefix	Activates when
lg:	viewport ≤ 992px
md:	viewport ≤ 768px
sm:	viewport ≤ 576px
(no prefix)	always (xs base, viewport ≥ 0)

Almost every utility in display, flex, grid, gap, sizes, and typography ships responsive variants. e.g. md:grid-cols-2 sm:grid-cols-1.

Inspector

Drag the right edge to resize the demo frame. The viewport read-out shows the current width and which prefixes are active; the banners inside the frame disclose themselves accordingly.

…

Static example

…

.hidden .lg:block — appears only ≤ 992px

.hidden .md:block — appears only ≤ 768px

.hidden .sm:block — appears only ≤ 576px

.md:hidden — disappears ≤ 768px

<div class="hidden md:block">
  visible only when viewport ≤ 768px
</div>
<div class="md:hidden">
  hidden when viewport ≤ 768px
</div>
<div class="grid-cols-4 md:grid-cols-2 sm:grid-cols-1">
  4 cols on desktop, 2 on tablet, 1 on phone
</div>

A utility-first toolkitfor Pokémon Central Wiki.

Using a token in code

Solid fill

Gradient directions

Theme-aware neutrals

Playground

Container & direction

Main axis · justify-content

Cross axis · align-items

Cross axis · align-content

Per-item · align-self

Composite shortcuts

Placement playground

Scale visualizer

Width & max-width sliders

Scale

Alignment

Directional variants

Nested recalculation — interactive

Same math, applied to .pcw-table

Default — first <tbody> row is the header

.sortable — semantic <thead>

.scrollable — wide tables

.sticky-head — pinned header

Inspector

Static example

A utility-first toolkit
for Pokémon Central Wiki.

Main axis · `justify-content`

Cross axis · `align-items`

Cross axis · `align-content`

Per-item · `align-self`

Same math, applied to `.pcw-table`

Default — first `<tbody>` row is the header

`.sortable` — semantic `<thead>`

`.scrollable` — wide tables

`.sticky-head` — pinned header