Foundation ist ein responsives Frontend-Framework, das die US-Agentur ZURB 2011 veröffentlicht hat. Es bringt ein Raster, fertige Komponenten und JavaScript-Bausteine mit und war lange der größte Gegenspieler von Bootstrap.
- Foundation
Ein Frontend-Framework mit responsivem Raster und Komponenten, entwickelt von der Agentur ZURB.
Beispiel: „Der Newsletter ist mit Foundation for Emails gebaut, damit er auch in Outlook richtig aussieht.“Auch: Zurb Foundation, nach der Agentur, die es entwickelt hat.
Abgrenzung zu Bootstrap: Foundation gibt weniger Optik vor und lässt sich leichter auf eine eigene Gestaltung umbauen. Bootstrap ist dafür verbreiteter.
Was Foundation mitbringt
Ein flexibles Raster, Komponenten wie Navigation, Akkordeon und Dialoge sowie viele Einstellungen in Sass, über die sich das Framework an eine Marke anpassen lässt. Foundation war eines der ersten Frameworks, die konsequent vom Smartphone aus gedacht waren.
Die Variante Foundation for Sites deckt Websites ab. Foundation for Emails ist eine eigene Sammlung für HTML-E-Mails, die mit den Eigenheiten der Mailprogramme umgehen kann.
Foundation für HTML-E-Mails
Hier hat Foundation bis heute einen festen Platz. Mailprogramme verstehen nur einen Bruchteil von CSS, und Layouts müssen mit Tabellen gebaut werden, wie im Web vor zwanzig Jahren.
Foundation for Emails übersetzt eine einfache Schreibweise in dieses Tabellen-HTML und setzt die Gestaltung als Inline-Styles direkt an die Elemente.
Wo Foundation heute steht
Die Entwicklung ist deutlich ruhiger geworden, neue Projekte greifen meist zu Bootstrap oder Tailwind CSS. In gewachsenen Websites begegnet Foundation aber noch regelmäßig, und wer sie übernimmt, sollte das Framework kennen.
Typische Spuren sind Klassen wie grid-x, cell und callout im HTML. Wer eine solche Seite modernisiert, ersetzt das Raster heute meist durch CSS Grid, das der Browser ohne Framework beherrscht.