Webdesign

Responsive Webdesign mit dem Foundation Framework

Meine Responsive Websites baue ich mit Foundation. Foundation ist ein wunderbarer Werkzeugkasten, der aus HTML, CSS und Javascript-Funktionen besteht. Die Entwicklung von Responsive Webdesigns macht mit Foundation unglaublich Spaß und produziert professionelle Ergebnisse.

Warum ich Foundation nutze

Foundation

  • …wird konstant weiterentwickelt.
  • …beschleunigt die professionelle Webentwicklung.
  • …wurde in zahlreichen Browsern getestet.
  • …hat eine exzellente Dokumentation.
  • …lässt sich leicht konfiguieren mit Hilfe von Sass.
  • …lässt sich leicht pflegen über das Terminal.

Foundation kurz ausprobieren

Für die ersten Schritte mit Foundation reicht der Download oder der benutzerdefinierte Download des Frameworks.

Foundation (richtig) installieren

Foundation macht erst richtig Spaß, wenn man das Terminal (Mac) nutzt, um anschließend die CSS-Datei mittels Sass zusammenschrauben zu lassen. Um Foundation zu installieren, tippt man die folgenden Befehle rein. Je nachdem, wie der eigene Rechner konfiguriert ist, muss man erst die Installation über das eigene Passwort erlauben. Dafür ist der Befehl sudo notwendig.

Da Foundation seit Version 5 die Kompenenten und Bestandteile des Frameworks mit Hilfe von Bower organisiert, muss man zuerst Bower installieren. Zuvor muss man die folgende Software auf seinem Rechner installieren. Das ist zu Anfang zwar ein wenig Arbeit, die sich später aber definitiv auszahlt.

  • Git
  • Ruby 1.9+
  • NodeJS

Bower installieren

sudo npm install -g bower grunt-cli

Foundation Gem installieren

gem install foundation

Neues Foundation-Projekt anlegen

Um ein neues Projekt anzulegen, öffnet man einfach im Terminal das Verzeichnis, in welchem ein neues Projekt initiiert werden soll. Dann tippt man in die Kommandozeile folgenden Befehl, der das Projekt aufsetzt:

foundation new NEUES_PROJEKT

Foundation-Projekte aktualisieren

Dank der neuen Methode per Bower, aktualisiert man Foundation-Projekte einfach und unkompliziert, indem man mit cd in das Projekt-Verzeichnis wechselt und mit dem Foundation-Befehl das Projekt aktualisiert:

cd MEIN_Projekt
foundation update

Loslegen mit Foundation

Wurde das Projekt angelegt, öffnet man einfach seinen Editor und öffnet im Verzeichnis die index.html-Seite. Diese hilft bei den ersten Schritten. Für weitere Informationen für Kompenenten, Attribute und Styles schaut Ihr in das Foundation Manual.