Mitte 2013 veröffentlichte Yahoo mit Pure.CSS eine Basisstruktur für die Entwicklung von Web-Frontends, die zu Recht als gute Bootstrap-Alternative gilt, aber auch in Kombination mit dem Twitter-Framework genutzt werden kann. Pure basiert auf der Scalable and Modular Architecture for CSS, kurz SMACSS, die dafür sorgt, dass wiederkehrende Elemente wie Tabellen, Buttons oder Formulare vom Basis-Design (Schriftart, Layout etc.) getrennt sind und eigene Konventionen besitzen können. In dem Yahoo-Framework hat daher jedes Modul einen Standard-Klassennamen mit dem Präfix „pure-“ für die reguläre Gestaltung sowie zusätzliche Klassennamen für spezifische Regeln, die für Sub-Module gelten. Ein Formular, bei dem alles untereinander steht, binden Sie in Pure.CSS z. B. ein, indem Sie den Standard-Klassennamen „pure-form“ sowie den Sub-Klassennamen „pure-form-stacked“ angeben.
Das Frontend-Framework, das in einer responsiven und einer nichtresponsiven Variante heruntergeladen werden kann, beinhaltet folgende sechs Module, die in komprimierter, gezippter Form zusammen gerade einmal eine Größe von rund 4 KB (entpackt 16 KB) besitzen:
- Base (base-min.css): Framework-Basis inklusive Regelwerk
- Grids (grids-responsive-min.css): flexibles, responsives Grid-System
- Forms (forms-min.css/forms-nr-min.css): Formulare
- Buttons (buttons-min.css): verschiedene Schaltflächen
- Tables (tables-min.css): Tabellen
- Menus (menus-min.css/menus-nr-min.css): Menüs
Alle Module bauen – wie die Komponenten von Bootstrap und vieler anderer CSS-Frameworks – auf dem Open-Source-Stylesheet Normalize.css auf, das die standardmäßigen Stile von HTML-Elementen durch optimierte, browserübergreifende Stile ersetzt. Im Vergleich zum Frontend-Framework von Twitter enthält das Yahoo-Pendant allerdings keinerlei JavaScript-Anwendungen, auch wenn Sie diese natürlich auf eigene Faust einbinden können. Pure.CSS ist weniger ein fertiges Frontend, das nur an die eigenen Bedürfnisse angepasst werden muss, als vielmehr ein Startpunkt für Ihr Projekt und damit auch mit wesentlich größeren Freiheiten verbunden.
Yahoo hostet das Framework auf seinem eigenen, freien Content Delivery Network (Yahoo CDN), sodass Sie es mithilfe eines einfachen Verweises im <head>-Bereich Ihres Projekts einbinden können. Sie können Pure.CSS natürlich auch herunterladen und selbst hosten. Den aktuellen Link zum CDN sowie die Download-Dateien finden Sie auf der offiziellen Website purecss.io.