BRAND26

Eine Page, die sich selbst dokumentiert class & divless.

Zahlen

CSS-Only Tabs

Tab-Navigation ohne JS

Diese Tabs funktionieren ohne eine Zeile JavaScript. Die input[type="radio"] Elemente werden via :checked Pseudo-Klasse und dem ~ General-Sibling-Selektor gestylt. Das fieldset gruppiert die Formularelemente semantisch korrekt.

input:checked + label markiert den aktiven Tab. input:checked ~ article:nth-of-type(n) blendet den zugehörigen Content ein. Alles pure CSS-Selektoren-Magie, kein State-Management nötig.

Die article Elemente sind standardmäßig auf display: none gesetzt. Der Selektor :checked ~ article schaltet sie auf display: block. Smooth Transitions sind möglich, aber bewusst weggelassen.

<fieldset> und <legend> sind nicht nur für Formulare da - sie gruppieren zusammengehörige Controls. Screenreader erkennen die Tab-Gruppe als kohärente Einheit, nicht als loses Sammelsurium.

Die legend ist visuell versteckt (clip-path: inset(50%)), aber für Assistive Technologien verfügbar. aria-label wäre redundant, da das fieldset bereits die Gruppe beschreibt.

Prinzipien

Semantik statt DIV-Soup

Jedes Element hat Bedeutung: <article>, <figure>, <blockquote>, <details>. Keine generischen Container, die nur Styling-Hooks sind.

Classless Architecture

Keine .btn, .card, .container Klassen. Styling erfolgt über Tag-Selektoren, Attribute und strukturelle Position (:nth-of-type, :first-child).

Custom Properties als Tokens

Design-Entscheidungen sind in CSS-Variablen gekapselt: --space-l, --accent, --radius. Ändere das Theme, indem du die Root-Variablen überschreibst.

Deep-Dive

Progressive Enhancement

Diese Seite funktioniert auch ohne CSS - die semantische Struktur bleibt lesbar. CSS fügt visuelle Hierarchie hinzu, ohne die Informationsarchitektur zu zerstören. Keine <div>-Wüsten, die ohne Stylesheets kryptisch werden.

Der Code folgt dem Prinzip: Content first, presentation second. HTML beschreibt was etwas ist, CSS bestimmt wie es aussieht.

Techniken im Einsatz

  • CSS Grid für Layouts
  • Flexbox für Komponenten
  • clamp() für Fluid Typography
  • color-mix() für Farbdynamik
  • aspect-ratio statt Padding-Hacks
  • backdrop-filter für Glassmorphism

Der Stack

HTML
HtmlieSemantische Elemente
CSS
CsserZweidimensionale Layouts
JS
JscriptiDesign Token System
JSOM
TokerPure CSS Interactions

Stimmen aus dem Internet

Endlich jemand, der verstanden hat, dass <div> kein Layout-Element ist.

@semanticweb_dev - Frontend Architect

Kein Tailwind, kein Bootstrap, kein Framework-Overhead. Nur Plattform.

@vanillacss - Web Standards Advocate

Die :nth-of-type-Selektoren sind genial. Kein JavaScript für State-Management nötig.

@csswizardry - CSS Performance Expert

clip-path: inset(50%) für visuell versteckte, aber accessible Inhalte - genau richtig.

@a11y_engineer - Accessibility Specialist

Referenz

Accordion Component

<details> Accordion

Native HTML5-Elemente für aufklappbare Inhalte. <summary> als Toggle, [open] Attribut für Styling-Zustände. Kein ARIA-Overhead nötig.

Table Component

<table> mit scope

Korrekte <thead>, <tbody>, scope="col" und scope="row" Attribute. Screenreader können die Tabelle korrekt vorlesen.

Refactoring

Code Refactoring

Von DIV-Soup zu Semantic HTML

Der Umbau ersetzt generische Container durch bedeutungsvolle Elemente. Statt <div class="card"> wird <article> verwendet. Statt <div class="testimonial"> wird <blockquote> mit <cite> genutzt.

Architektur ansehen

Lizenzmodelle

Open Source

MIT/ License

  • Vollständiger Quellcode
  • Freie Nutzung
  • Modifikationen erlaubt

Community

CC-BY/ Creative Commons

  • Weitergabe erlaubt
  • Namensnennung erforderlich
  • Adaptionen willkommen
  • Kommerzielle Nutzung OK

Public Domain

CC0/ No Copyright

  • Keine Einschränkungen
  • Keine Namensnennung
  • Unbeschränkte Nutzung
  • Fork & Forget
  • Kommerziell & Privat

Ansatz-Vergleich

KriteriumClasslessUtility-FirstComponent Framework
Bundle Size~5 KB CSS~50 KB Tailwind~200 KB Framework
Learning CurveHTML-KenntnisseCSS-Kenntnisse + DXFramework-API + DX
AccessibilityNativManuellFramework-abhängig
MaintenanceMinimalMediumHoch

Layout

FAQ

Warum keine CSS-Klassen?

Klassen sind Styling-Hooks, die die Semantik verschleiern. Tag-Selektoren (article, figure, blockquote) beschreiben direkt, was gestylt wird, nicht welche visuelle Rolle es spielt.

Wie funktioniert der Dark Mode?

Alle Farben sind als Custom Properties definiert. Ein @media (prefers-color-scheme: dark) Query könnte die Root-Variablen überschreiben. Aktuell ist das Design bereits dunkel - Light Mode wäre ein Toggle via data-theme Attribut.

Warum kein JavaScript?

Die Plattform bietet native Lösungen: <details> für Accordions, :checked für Tabs, :target für Modal-Dialoge. JavaScript fügt nur Komplexität hinzu, wenn die Plattform bereits Lösungen bietet.

Ist das performant?

Ja. Kein JavaScript-Parsing, kein Framework-Overhead, keine Runtime. Der Browser rendert HTML + CSS direkt. Critical Rendering Path ist minimal: Parse HTML → Parse CSS → Render.

Komponenten

Roadmap

Phase 1: Foundation

Semantische HTML-Struktur etablieren. Alle <div> durch bedeutungsvolle Elemente ersetzen. Accessibility-Baseline sicherstellen.

Phase 2: Styling

Classless CSS-Architektur implementieren. Custom Properties für Design Tokens. Responsive Breakpoints via Media Queries definieren.

Changelog

VersionÄnderungDatum
2.0Fieldset-Tabs statt Div-Tabs2026-08
1.8color-mix() für Farbdynamik2026-07
1.5aspect-ratio statt Padding-Hacks2026-06
1.2backdrop-filter für Header2026-05
1.0Classless Architecture eingeführt2026-04
0.9Custom Properties implementiert2026-03
0.1Initial Commit: HTML5 Boilerplate2026-02

Philosophie

Die Plattform ist das Framework

HTML und CSS sind keine Zwischenschritte zu JavaScript-Frameworks - sie sind die Plattform selbst. Respektiere die Sprache des Webs, und das Web wird dich belohnen: mit Performance, Accessibility und Langlebigkeit.