BRAND26

Eine Page, die sich selbst dokumentiert class & divless.

Zahlen

Testimonials

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

@semanticweb_dev

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

@vanillacss

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

@csswizardry

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

@a11y_engineer

Rezensionen

MMKlaus

"Der Code ist Schlank ★★★★☆ und gut Lesbar."

MMPeter

"Die Semantik ist erstklassig und der Code liest sich wie eine Anleitung."

Skills

Progress

Tabs

Tab-Navigation

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

input:checked + label markiert den aktiven Tab. input:checked + label + article blendet den zugehörigen Content ein. Flexbox order trennt Reiter und Inhalt optisch sauber voneinander.

Die article Elemente sind standardmäßig auf display: none gesetzt. Der Selektor :checked + label + article schaltet sie auf display: block. Beliebig viele Tabs werden vollautomatisch unterstützt.

<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.

Vorteile

Semantik

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

Classless

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

Tokens

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

Content

Progressive Enhancement

Diese Seite funktioniert auch ohne CSS - die semantische Struktur bleibt lesbar. 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

  • 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

Team

HTML
HtmlieElemente
CSS
CsserLayouts
JS
JscriptiDesign
JSON
JsonerActions

Vorschau

<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> mit scope

Korrekte scope="col" und scope="row" Attribute. Screenreader können die Tabelle korrekt vorlesen.

Umbau

Von DIV-Soup zu Semantic HTML

Der Umbau ersetzt generische Container <div class="card"> wird <article> verwendet. Statt <div class="testimonial"> wird genutzt.

Architektur ansehen

Preise

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
  • Kommerziell & Privat

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

Raster

FAQ

Warum keine CSS-Klassen?

Klassen sind Styling-Hooks, die die Semantik verschleiern.

Wie funktioniert der Dark Mode?

Alle Farben sind als Custom Properties definiert. überschreibt die Variablen beim Umschalten - keine Media Query nötig.

Warum kein JavaScript?

Die Plattform bietet native Lösungen: 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.

Galerie

Tags

Plan

Color Bagde

Info Success Danger Warning Notice Special Muted
Info Success Danger Warning Notice Special Muted

Info Success Danger Warning Notice Special Muted

Inline Elemente

link code q em strong cite kbd samp var u s del ins span small abbr sub sup i mark

Tabelle

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

FLEX

Status
Aktiv
Version
2.0
Uptime
99.9%

Auslastung 72%

Speicher 45%

Formular

Kontaktformular















Paging

Meinung

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.