Das Foundation Framework von Zurb ist eines der mächtigsten und flexibelsten Frontend-Frameworks für responsive Webdesign. Mit einem ausgefuchsten mobile-first Gridsystem, vielen UI-Elementen und nützlichen Javascript-Plugins deckt Foundation die Basics einer Webseitenentwicklung ab. Es gibt die Möglichkeit Foundation als CSS-Framework runterzuladen und eigene Anpassungen im CSS einfach zu überschreiben. Viel flexibler und besser anpassbar ist Foundation allerdings in der Sass-Variante. Da die Sass-Installation von Foundation leider nicht trivial ist, möchte ich Euch hier meinen eigenen Weg (über einige Stolpersteine) zu einem funktionierenden Foundation mit Sass/Compass vorstellen.
Foundation Installationsprozess:
1) Ruby installieren:
Zuerst muss auf Eurem Computer Ruby installiert sein. Alle Mac-User können sich zunächst zurücklehnen, da Ruby auf Macs bereits installiert ist. Windowsbenutzer gehen auf http://rubyinstaller.org , laden sich die neueste Ruby-Version herunter und installieren diese. Dabei sollte Folgendes beachtet werden: Setzt beim Installationsprozess ein Häkchen bei: „Add Ruby executables to your PATH“
Wichtig für Mac-User: Mac OS 10.8 wird mit einer älteren Ruby-Version ausgeliefert, die nicht mehr den Anforderungen des Foundation-Frameworks genügt. Um zu testen welche Ruby-Version auf Eurer Maschine installiert ist, startet das Terminal (findet Ihr unter Dienstprogramme) und tippt folgendes ein:
ruby -v
Eine Ruby-Version unter 1.9 ist definitiv nicht ausreichend. Falls Ihr eine veraltete Ruby-Version installiert habt, dann könnt Ihr mit dieser Anleitung Euer Ruby updaten. Hier wird beschrieben, wie Ihr den Update-Prozess mittels homebrew durchführen könnt. Bei mir hat es hervorragend funktioniert. Den Bundler und weiteres müsst Ihr dabei nicht installieren.
2) Kommandozeile:
Da im Folgenden das Meiste über die Kommandozeile gemacht werden muss, hier eine Zusammenstellung der wichtigsten Befehle:
Win:
dir : Anzeige des gesamten aktuellen Verzeichnisinhaltes
cd\ : Gehe ins Homeverzeichnis des Benutzers
cd.. : Gehe ins übergeordnete Verzeichnis
cd Verzeichnis : Gehe ins jeweilige Verzeichnis (relativ vom aktuellen Standpunkt)
cd pfad/zum/verzeichnis : Gehe zum Verzeichnis mittels Pfadangabe (relativ vom aktuellen Standpunkt)
Mac (Terminal):
ls : Anzeige des gesamten aktuellen Verzeichnisinhaltes
cd : Gehe ins Homeverzeichnis des Benutzers
cd .. : Gehe ins übergeordnete Verzeichnis
cd Verzeichnis : Gehe ins jeweilige Verzeichnis (relativ vom aktuellen Standpunkt)
cd pfad/zum/verzeichnis : Gehe zum Verzeichnis mittels Pfadangabe (relativ vom aktuellen Standpunkt)
Beim Mac wirft das Terminal manchmal einen Error bei Installationsprozessen. Dann stellt Euren Befehlen einfach ein „sudo“ voran.
3) Git installieren:
Geht zu http://git-scm.com/, ladet euch Git runter und installiert es.
4) Node.js installieren:
Geht zu http://nodejs.org/ , ladet Euch Node.js herunter und installiert es.
5) Bower mit Grunt installieren:
Kommandozeile:
[sudo] npm install -g bower grunt-cli
6) Compass installieren:
Kommandozeile:
[sudo] gem install compass
7) Projekt anlegen:
Um ein Projekt anzulegen begebt Ihr Euch über die „cd“-Befehle der Kommandozeile zu Eurem gewünschten Ordner. Dann tippt Ihr in der Kommandozeile:
[sudo] foundation new MEIN_PROJEKT
8) Ins Projektverzeichnis wechseln:
Kommandozeile:
cd MEIN_PROJEKT
9) Compass Verzeichnisüberwachung:
Damit jede Änderung Eurer scss-Files gleich in CSS kompiliert wird, sollte eine dauerhafte Überwachung Eures Projektverzeichnisses durch Compass eingestellt werden:
Kommandozeile:
compass watch
Zum Beenden der Überwachung drückt Ihr CTRL-C
10) Update Foundation:
Versionsnummer von Foundation feststellen: Geht zum Ordner (befindet sich im Projektordner MEIN_PROJEKT): bower_components > foundation > bower.json
Falls dies nicht die aktuelle Versionsnummer ist, geht via Kommandozeile in den Projektordner MEIN_PROJEKT, dann:
Kommandozeile:
[sudo] bower update
Probleme mit den aktuellen Versionen Eurer Installationen:
Festellen Eurer Sass-Version:
Kommandozeile:
sass -v
Zum Zeitpunkt des Erscheinens dieses Artikel ist die aktuelle Sass-Version 3.4.3 nicht kompatibel zum aktuellen Foundation 5.4. Falls Ihr alle obigen Schritte durchführt erhaltet Ihr wahrscheinlich keine kompilierten CSS-Styles. Dies kann umgangen werden, wenn Ihr die Datei bower_components > foundation > scss > foundation > _functions.scss öffnet und in Zeile 12 folgenden Code ersetzt:
alt: @if (index($modules, $name) == false) {
neu: @if(not index($modules, $name)) {
dann abspeichern und kompilieren.
Siehe auch: http://foundation.zurb.com/forum/posts/18856-sass-342-compilation-problem
In Version Foundation 5.5 sollte ist dieser Fehler behoben sein worden.
Alles ist viel einfacher mit Codekit:
Wenn euch der manuelle Weg Foundation zu installieren zu aufwendig ist, dann könnt Ihr euch mit dem (kostenpflichtigen) Tool Codekit behelfen. Codekit hat volle Foundation-Unterstützung. Somit fallen die obigen Schritte 2-10 weg. Beachtet aber, dass Ihr auch für Codekit eine aktuelle Ruby-Version auf Eurem Rechner benötigt. Auch die beschriebene Anpassung der Datei _functions.scss ist für Codekit mit Sass 3.4.3 und Foundation 5.4 nötig.
Fazit:
Die Foundationinstallation via Kommandozeile ist nichts für Terminalmuffel. Allerdings sollte es mit dieser Schritt für Schritt Anleitung auch keine unüberwindbare Hürde sein Foundation – ohne eine extra App kaufen zu müssen, zum Laufen zu bekommen.
Dies ist bestimmt nicht die erste Installationsanleitung für Foundation im Netz, aber ich wollte Euch die Schritte, die bei mir zum Erfolg geführt haben aufschreiben und Euch dabei auch die Stolpersteine, die mich einiges an Zeit gekostet haben (inkompatible Versionen), ersparen.
Falls Ihr Anmerkungen zu dieser Anleitung habt, dann hinterlasst einfach Eure Kommentare.