Teil 8:
Foundation Grid in Contao

E&F: Warum hast du dich für Foundation entschieden?

Monique: Vor etwa 2 Jahren als das Thema Responsive Design immer mehr in den Fokus rückte, mit anwachsender Angebotsvielfalt der mobilen Endgeräte, waren die bekanntesten Responsive Frameworks Foundation 4 und Bootstrap 2. Zu dem Zeitpunkt hatte ich schon ein paar eigene Responsive Projekte mit selbst geschriebenen CSS-Code umsetzen können. Es war sehr schwer bei der Komplexität einen geeigneten Workflow zu finden, der sich beim nächsten Projekt wieder sinnvoll einsetzen lässt.

Bis dato habe ich immer von Frameworks Abstand gehalten. Ganz im Sinne – „Iiih, das ist Baukasten Design!“. Das Problem mit der Komplexität aber wurde nicht weniger. So schaute ich mir zuerst Bootstrap an. Ich klickte mich durch die Seiten der Dokumentation, lud mir die Demo herunter und schaute mir die Dateien an. Insbesondere die Bezeichnungen der CSS-Klassen erloschen mein gewecktes Interesse gleich wieder. Die Bezeichnungen fand ich semantisch einfach nur schlecht. Und die ganzen Schatten und Effekte die schon mit darin waren schreckten mich sehr ab.

In der Zeit unterhielt ich mich mit anderen Webdesignern über das Thema, wobei mir Thomas Weitzel den heißen Tipp „Foundation von Zurb“ gab. Das schaute ich mir an und war begeistert; sprechende CSS-Klassennamen und mit REM-Einheiten am Puls der Zukunft. Die Dokumentation fand ich übersichtlicher. Das Design war minimalistischer, nahe am Flat-Design, welches in der nächsten Zeit auch immer mehr zum Trend werden sollte. So habe ich mich letztlich für Foundation entschieden.

E&F: Wo liegen die Gemeinsamkeiten und Unterschiede des Foundation Grid im Vergleich zu Bootstrap?

Monique: Es gibt nicht mehr so viele Unterschiede. In Bootstrap 3 wurde die Semantik verbessert und das effektüberladene Design ist reduziert worden. Man könnte sagen Bootstrap hat sich an Foundation angeglichen. Jedoch finde ich die CSS-Klassennamen insbesondere beim Grid von Foundation immer noch besser. Das ist aber vielleicht auch Geschmackssache.

Bei Bootstrap heißt zum Beispiel die CSS-Klasse für eine Spalte mit einer Breite von vier zwölfteln col-sm-4. „sm“ steht dabei für die kleine Media-Query, aber nicht die kleinste. Bei Foundation heißt die CSS-Klasse die für die Breite zuständig ist für den kleinsten Media-Query-Bereich „small-x“. „x“ ist hier der Nenner vom gewünschten Grid-Teiler. Foundation splittet hier auch die einzelnen CSS-Eigenschaften etwas auf. Das macht es flexibler. So wird zum Beispiel mit der CSS-Klasse „small-3“ nur die Breite von 25% zugewiesen. Mit der zusätzlichen CSS-Klasse „column“ oder „columns“ weist man den Abstand aus den Zwischenräumen zu, sowie das Floating „left“ und Position „relative“ zu.

In Bootstrap sind die CSS-Eigenschaften für Abstände gemixt in Pixel und EM angegeben, in Foundation in REM und EM. Das Grid kann bei beiden Frameworks automatisch mit den SASS-/SCSS-Funktionen generiert werden. Es müssen nur die Variablen eingestellt werden. SASS bietet viele nützliche Funktionen. Mit der SASS-Funktion remCalc(20px) kann ich mir den richtigen REM-Wert generieren lassen und habe dabei im Blick welchem Pixel-Wert das entspricht.

Wer SASS nicht nutzen möchte kann auf die Custom-Generatoren auf den jeweiligen Seiten zurückgreifen.

E:F: Was muss man bei der Verwendung beachten? Wo liegen die Grenzen, wenn man es mit Contao verwenden will?

Monique: Bei der Verwendung muss ich das selbe beachten wie bei selber geschriebenen CSS-Klassen. Ich muss wissen was dahinter definiert ist. Es ist kein Hexenwerk. Es wirkt nur erst einmal viel. Mittlerweile kenn ich es fast auswendig.



Die Grenzen in Verbindung mit Contao liegen darin das Contao ein eigenes Framework ist. Sich eine Installation so zurecht zu konfigurieren dafür das ich ein Framework wie Foundation nutzen kann ist aufwändig. Das ist der Grund warum hier eine Integrierung in Form einer Erweiterung sinnvoll ist. Da ich Foundation Fan bin habe ich mir schon länger Gedanken gemacht gehabt, wie ich es in Contao über eine Erweiterung einbinden kann. Mit der Contao Version 3.3 kam die Unterstützung von SCSS- und LESS- Dateien in die Core-Funktions-Palette. Das nahm ich begeistert zum Anlass meine Erweiterung „Foundation-To-Contao“ zu schreiben.

Nähere Infos zur Erweiterung findet ihr im Forum, wo ich die Erweiterung vorgestellt habe. Außerdem gibt es zu meiner Erweiterung auch eine Website [Anm. entfernt, existiert nicht mehr]. Da stelle ich auch eine Demo zur Verfügung.

E:F: Was wird uns bei deinem Vortrag auf der Contao Konferenz erwarten?

Monique: In meinem Vortrag auf der Konferenz werden Contao und Frameworks klar im Hauptfokus liegen. Meine Erweiterung wird nur eine Nebenrolle spielen. Ein paar Themen sind in diesem Interview schon mit angeschnitten. Während des Vortrages werde ich dabei noch mehr in die Details eingehen und Übersichten, Demos sowie kleine Workshops vorbereiten. Dabei möchte ich so gut es geht an der Praxis bleiben, damit die Zuhörer viel mitnehmen können.

Über Monique:

Monique ist seit 2010 selbständig im Bereich Frontend-Design unterwegs. Sie hat sich auf das CMS Contao spezialisiert. Sie brennt für Themen wie mobiles und responsives Design, das Framework Foundation und darauf spannende Projekte umzusetzen. Auf der Website www.designs2.de schreibt sie Tutorials, hauptsächlich zu Contao und bietet Contao-Themes an. Mehr Infos

Vielen Dank für deine Zeit, Monique!