Responsive Web Design

Knowledge Base

Responsive Web Design

Zurb Foundation Framework 6.2.1

Das ZURB Foundation Framework 6.2.1 (08.04.2016) ist eines von mehreren am Markt existierenden CSS-Frameworks zur vereinfachten Web-Entwicklung responsiver Grid-Layouts und inklusive einer jQuery-basierenden JavaScript Tool-Bibliothek.

Basis ist ein Grid-Layout mit 12 Spalten und für das Responsive Web Design drei vordefnierterter Breakpoints:

  • small < 40em (640px)
  • medium >= 40em (640px) und < 64em (1024px)
  • large >= 64em (1024px)

Die CSS-Klasse für die Zeile ist class="row" und die Spalten sind class="small-x columns", class="medium-x columns", class="large-x columns" (x = 1 bis 12).

Die maximale Breite für class="row" ist standardmäßig auf 75em (1200px) gesetzt und zentriert (bei Viewports > 1200px) platziert. Außerdem ist für class="row" automatisch ein clearfix eingebaut.

Die Spalten class="small-x|medium-x|large-x columns" sind standardmäßig auf float:left und in der small-Variante mit einem padding von 0.625 rem (10px) ausgestattet. Die letzte Spalte einer Zeile wird auf float:right gesetzt, um Probleme mit dem float zu umgehen - die Breiten von small-x, medium-x, large-x ergeben sich prozentual aus 8.33333% * x.