User = w-user (groen), Builder = w-build (oranje); er zijn maar twee niveaus (V3.1)
gids.css leidt daaruit drie variabelen af die alle componenten gebruiken:
--g-accent (= --p-accent, de volle kleur), --g-vlak (= --p-bg, het pastelvlak), --g-inkt (= --p-inkt, donkere tekst op pastel).
Zonder wereldklasse vallen ze terug op teal. Dezelfde wereldklasse staat ook op de hero (section.phero.wereld.w-...).
Regels: afronding max 8 px, geen randbalk links aan een kader, geen pillen, geen bruin. Alle componenten staan als
rechtstreeks kind in
(of in een groep hieronder). Voeg "uitbreek" toe om de volle
kolombreedte te nemen (brede tabel, raster, lange stappenreeks).
KLASSEN (alles binnen .gids)
h2 (met id) hoofdstuktitel; krijgt automatisch een nummer (01, 02, ...) en een lijn erboven. Zonder nummer: class="geen-nr".
.lead inleidende alinea van een hoofdstuk (iets groter en donkerder dan gewone tekst).
.highlight-box pastelvlak in de wereldkleur voor een kernzin of tip:
.example-grid raster van voorbeeldkaartjes, standaard 2 kolommen. Met .kol-3 of .kol-4 (samen met uitbreek) 3 of 4 kolommen op brede schermen.
.example-item kaartje in dat raster, met titel
tekst
.
.stappen groep rond opeenvolgende .step-row's. Met "uitbreek kol-2" twee kolommen op brede schermen.
.step-row een stap: 1
.kaarten groep rond opeenvolgende .analogy-card's. Met "uitbreek kol-2" twee kolommen op brede schermen.
.analogy-card kaart met blokje links: AI
.analogy-icon het blokje (1 tot 3 tekens). Varianten: .is-goed (groen vinkje, do) en .is-fout (rood kruisje, don't).
.tweeluik twee kolommen naast elkaar op brede schermen, bv. Do's naast Don'ts:
.tabel-rol omhulsel rond een tabel zodat ze op een gsm zelf schuift:
.table-simple tabel met th-rij en lijnen; eerste kolom vet.
pre, code codeblok (donker, schuift horizontaal) en inline code.
.prompt-box voorbeeldprompt of letterlijke invoer:
.faq-item vraag en antwoord:
.arch-diagram eenvoudig schema: .arch-row met .arch-box (.user-box donker, .ai-box accent), .arch-arrow, .arch-label; daaronder .arch-tools met .arch-tool.
.bronnen raster rond .source-item's (hoofdstuk "Meer lezen en bronnen"), meestal met uitbreek.
.source-item bron: GH
.citaat.gids-slot slotcitaat onderaan de gids (blockquote met p en footer); strong kleurt in de accentkleur.
HERO: .phero-onder (optioneel) is een tweede titelregel in de accentkleur, tussen de h1 en .phero-intro.
ZIJRAIL: .rail-blok (site.css) + .rail-feiten (dl met dt/dd voor "In het kort") + .rail-link (titel van volgende gids of opleiding).
Optioneel gesplitst: