Webseite mit Zurbs Foundation 6 Framework

24. März 2016 - CSS, JavaScript, wordpress

Nachdem mein langjähriger Favourit für responsive Webseiten, YAML, seit zwei Jahren zu meinem Bedauern keinen „Puls“ mehr hat, musste ich meine Webseite auf ein neues Framework umstellen und habe dafür Foundation 6 gewählt.

Foundation ( oder besser Foundation for Sites) ist bei uns weniger bekannt als Bootstrap.

Bootstrap 3 kannte ich schon aus einigen Projekten.  Die Version 4 ist schon seit vielen Monaten ( oder Jahren?) in Beta, und wenn man etwas Neues machen möchte, kam die alte Version nicht in Frage.

Zurb ist darüber hinaus eine interessante Company. Neben Foundation for Sites gibt es noch Foundation for Emails (=responsive HTML Emails) und Foundation for Apps (=responsive Web Apps für AngularJS). Beide zusätzlichen Produkte möchte ich in der nächsten Zeit ebenfalls ausprobieren.

Wenn man schon mit Bootstrap gearbeitet hat, kommt man mit Foundation gut zurecht. Die Klassen haben andere Namen aber ansonsten ähnliche oder sogar identische Funktionen.

Hier ist eine ausführliche Gegenüberstellung der Funktionen von Bootstrap und Foundation 6

Besonderheiten bei Foundation:

Mit „Interchange“ kann man für die verschiedenen Ausgabegeräte unterschiedliche HTML Fragmente oder unterschiedlich große Bilder anwählen. So wird z.B. die Ladezeit  der Webseite verbessert.

Mit „Block Grid“ kann man auf einfache Weise eine Anzahl von Content-Blöcken in einer Zeile gleichabständig verteilen.

 

Als Basis für meine Webseite habe ich das auf Foundation 6 basierende Theme Joints WP verwendet und modifiziert.