Zurb Foundation - Open-Source Responsive Frontend Framework

Die Erfolgsgeschichte von Foundation begann ganz unscheinbar im Jahre 2008 als Styleguide, der regelmäßig in verschiedensten Kundenprojekten der Firma Zurb zum Einsatz kam.

Zurb Foundation - Responsive Frontend Framework

Es dauerte bis ins Jahr 2011, bis aus der Sammlung von jQuery Plugins, einer Hand voll CSS Files und einer Portion Best Practice Methoden Foundation als erstes Open-Source Responsive Frontend Framework das Licht der Welt erblickte. Dieser Innovationstrieb setzte sich über die Jahre fort und so war Foundation auch das erste semantische Framework am Markt, das nach dem Mobile First Prinzip arbeitet.

Heute bezeichnet sich Foundation selbst als das "Most advanced responsive front-end framework in the world" und das - wie wir meinen - völlig zu Recht.


Foundation in Zahlen (Stand April 2014)

  • Top 15 Open-Source Projekt weltweit
  • Über 24.000 Suchanfragen in Google täglich
  • Aktuell 415 Contributors, die an der Entwicklung des Frameworks mitarbeiten
  • 16.050 Github Stars
  • 3.450 Forks auf Github
  • 6.160 Commits auf Github

Aktuell ist das Framework bei Version 5 angekommen und bringt zahlreiche Verbesserungen mit sich.


Dokumentation

Bevor wir auf die Details der Version 5 eingehen, möchten wir an dieser Stelle einen kurzen Überblick über die Funktionen und Möglichkeiten von Foundation geben.

Zu diesem Zweck lohnt sich ein Blick in die Webseite von Foundation unter foundation.zurb.com bzw. die aktuelle Dokumentation des Frameworks, die man unter der Adresse foundation.zurb.com/docs/ aufrufen kann.

Die durchaus umfangreiche Dokumentation beschreibt dabei alles Wissenswerte anhand konkreter Beispiele und gliedert sich dabei in verschiedene Sektionen zu den Themen:

  • Setup
  • Structure
  • Navigation
  • Media
  • Forms
  • Buttons
  • Typography
  • Callouts & Prompts
  • Content

Unter den jeweiligen Überschriften verbergen sich noch zahlreiche weitere Unterkapitel, die bereits die umfangreichen Möglichkeiten von Foundation erahnen lassen. Wer sich in aller Kürze einen genaueren Überblick über die einzelnen Elemente von Foundation verschaffen will, dem sei die Kitchen Sink Seite empfohlen, die alle verfügbaren Elemente des Frameworks beinhaltet.


Download & Setup

Je nach Bedarf und konkreten Anforderungen stellt Foundation auch verschiedenste Versionen seines Frameworks zur Verfügung. Wem die vordefinierten Packages nicht individuell genug sind, kann mit der angepassten Version und einem Webinterface zahlreiche Parameter des Frameworks online anpassen und sich so ein maßgeschneidertes Download Paket zusammenstellen.

Selbstverständlich stellt Foundation auch die Möglichkeit zur Verfügung SASS zu nutzen. Dafür sind clientseitig allerdings ein paar Vorarbeiten zu erledigen, so werden z.B. folgende Pakete vorausgesetzt: Git, Ruby und NodeJS. Wie bei Foundation üblich, finden sich dazu in der Dokumentation ausreichend Beispiele und Erklärungen, sodass ein Setup und erster Testlauf schnell erledigt ist.

Um einen ersten Einblick in Foundation zu bekommen, reicht aber die CSS Version des Frameworks vollkommen aus, die man sich direkt auf der Download Seite runterladen kann. Das Paket beinhaltet folgende Files:

  • index.html - Beispielwebseite mit ein paar bereits inkludierten Framework Elementen
  • humans.txt - ein einfaches humans Basis File
  • robots.txt - interessant für die Steuerung der Suchmaschinen Robots und Crawler
  • /css - das Verzeichnis mit den CSS Files von Foundation, jeweils in einer normalen und einer komprimierten Version (foundation.css, foundation.min.css), sowie normalize.css, um das Rendering von Elementen über verschiedene Browser hinweg zu vereinheitlichen
  • /js - beinaltet sämtliche Javascript Files des Frameworks, entweder als einzelnes JS-File oder je nach Anforderung aufgeteilt auf mehrere Module
  • /js/vendor - in diesem Verzeichnis sind noch weitere externe Libraries abgelegt, wie z.B. Modernizr, jQuery 2 oder auch fastclick.js

HTML Markup

Keine Überraschungen bietet auch der Source-Code der mitgelieferten index.html Seite, der exemplarisch die Integration des Frameworks und benötigten Libraries skizziert:

<!DOCTYPE html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" >

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Foundation 5</title>

  <!-- If you are using CSS version, only link these 2 files, you may add app.css to use for your overrides if you like. -->
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/foundation.css">

  <!-- If you are using the gem version, you need this only -->
  <link rel="stylesheet" href="css/app.css">

  <script src="js/vendor/modernizr.js"></script>

</head>
<body>

  <!-- body content here -->

  <script src="js/vendor/jquery.js"></script>
  <script src="js/foundation.min.js"></script>
  <script>
    $(document).foundation();
  </script>
</body>
</html>

Ausblick

Dieser erste kurze Einblick in Zurb's Foundation kann den unzähligen Möglichkeiten des Systems natürlich nicht umfassend gerecht werden. Daher sind zukünftig auch weitere Blog Einträge geplant, die anhand konkreter Beispiele das System im Detail vorstellen und auch die Einsatzmöglichkeiten z.B. in Kombination mit dem Open-Source Content Management System Contao präsentieren.

« Zurück zur Übersicht

von Sascha Reschun von Sascha Reschun Weiter »

Zur besten Nutzung dieser Website und zur Bedienerfreundlichkeit werden Cookies verwendet. Diese Website nutzt zusätzlich Google Analytics und Scripte, welche Cookies benutzen. Wenn Sie diese Website weiter nutzen, gehen wir von Ihrem Einverständnis aus. [ Mehr zum Datenschutz ].
OK