Platzhirsche der Responsive Grid Frameworks Foundation 4.x vs Bootstrap 3.x

Anfang des Jahres 2013 rollte ZURB das Foundation Framework in Version 4 neu aus und das Riesenfeature war mobile first!

Ich saß damals gerade an dem HTML5 Rewrite des Bonduelle Bingo und hatte dies mit der Version 3 von Foundation gestartet, doch das mobile first Feature war es mir wert, kurz vor Schluss noch auf Foundation 4 zu wechseln.

mobile first?

Das bestehende Grid-System unterscheidet dort zwischen small und large columns, also direkt während man das Markup schreibt, kann man die Darstellung auf großen und kleineren Bildschirmen bestimmen. Diese Unterscheidung empfand ich direkt als sehr hilfreich, da man nun nicht nur die Wahl hat, dass ab dem Breakpoint alle Spalten und Reihen untereinander dargestellt werden, sondern sogar auf kleinen Handy Displays noch Dinge nebeneinander positioniert werden können.

Beim Bonduelle Bingo Projekt ist das auch alles sehr überschaubar, aber schon hier störte mich der einzelne Breakpoint. Auf Tablets im Portrait Modus war eigentlich genug Platz, sodass die Navigationsbar noch nicht zusammengefasst werden musste. Damals hatte ich noch nicht Foundation als Ruby Gem mit Compass aufgesetzt und war ich nicht so in experimentier Laune ;-).

Gestern stieß ich dann auf die Information dass Bootstrap in Version 3 bald erscheint und warf dort einen Blick drauf.

Während man in Version 2 das Responsive Feature nicht so prominent platzierte, gibt es nun auch hier den mobile first Ansatz, allerdings unterscheidet Bootstrap zwischen 3 Bildschirmgrößen: tiny (<480px), small (<768px) und medium-large (>768px). Das heißt zwar leider mehr Markup aber es adressiert das Problem, dass ein Tablet noch andere Darstellungsmöglichkeiten bietet, als ein Telefon. Da ich gerade an Rewrite der Minigolf Tabelle sitze, werde ich hier wohl von Foundation 4 auf Bootstrap 3 umschwenken um weitere Erfahrungen zu sammeln.

Worauf das hinaus läuft ist ja jetzt schon abzusehen: ungefähr tausend Grid-Klassen die alle 100 Pixel neue Layoutmöglichkeiten erschaffen, damit man auf die Flut von Phones, Phablets, Tablets und Touch-PCs Rücksicht nehmen kann ;-) Es bleibt also interessant…