In einer Umfrage, in der es um zukünftige Themen auf CatMoney ging, wurde von den Bloglesern u. a. der Punkt “Design” gewählt. Dabei möchte ich erklären, wie man bessere Designs für Webseiten erstellen kann. Vor einiger Zeit habe ich das Framework Bootstrap kennen und lieben gelernt, denn es stellt sehr viele Features bereit um tolle Websites zu gestalten. In diesem Artikel erfahrt ihr alles über die Enstehung von Bootstrap und wie man es für seine eigenen Websites verwenden kann.

Die Geschichte von Bootstrap

Bootstrap ist ein kostenloses Framework um Websites zu gestalten. Es werden HTML und CSS Vorlagen bereitgestellt um unterschiedlichste Website-Elemente darzustellen. Dazu gehören Formulare, Buttons, Tabellen, Navigation und ein Grid-System für Layouts. Desweiteren ist es durch optionale Javascript Module möglich Interaktion (z. B. eine Bilder-Slideshow) einfach in die eigene Website einzubinden. Zudem bietet Twitter alle Vorraussetzungen um responsive Webdesigns zu gestalten, die dann beispielsweise auf mobilen Endgeräten (wie einem Smartphone oder Pad) optimiert dargestellt werden.

Bootstrap wurde ca. 2010 von, bei Twitter angestellten, Entwicklern programmiert. Ziel war die Verbesserung von internen Verwaltungswerkzeugen, die zu der Zeit bei Twitter im Einsatz waren. Das Problem war, dass für die Gestaltung der Weboberflächen verschiedene Bibliotheken verwendet wurden. Demzufolge kam es zu Inkonsistenten und einem großen Wartungsaufwand.

Bootstrap sollte hier ein gemeinsame Basis schaffen, mit der alle Mitarbeiter arbeiten konnten, um Websites zu gestalten. Eine elementare Rolle bei der Entwicklung von Bootstrap spielte die Zusammenarbeit von Programmierern und Designer.

Im August 2011 entschloss sich Twitter dazu das Bootstrap Framework als Open  Source Projekt zu veröffentlichen. Damit war der Siegeszug dieses ausgeizeichneten und leicht zu bedienenden Frameworks zur Webdesign-Gestaltung nicht mehr aufzuhalten.

So funktioniert Bootstrap

Bootstrap basiert auf der Stylesheet-Sprache LESS, die einer Obermenge von CSS entspricht. D. h. jeder CSS-Befehl ist auch ein gültiger LESS-Befehl. Mit LESS lassen sich aber weitere Programmierparadigmen wie z. B. Variablen, Schachtelung von Regeln sowie Funktionen und Operatoren. Dies alles dient dazu um Codewiederholungen in CSS-Code zu vermeiden. Weitere Informationen zu LESS gibt es auf lesscss.org.

Bei der Verwendung von Bootstrap wird aber auf die generierte CSS-Datei zugegriffen, die aus der Kompilierung der Bootstrap LESS-Dateien entstanden ist. Dies ist notwendig, weil die LESS-Dateien bisher nicht durch Webbrowser erkannt und aufgelöst werden.

Der Aufbau von Bootstrap

Bootstrap ist modular aufgebaut und besteht aus den folgenden Teilen

• Grid-System und Responsives Design
• Grundlegendes CSS-Stylesheet
• wiederverwendbare Komponenten
• optionale Javascript-Plugins

Grid-System und Responsives Design

Standardmäßig verwendet Bootstrap ein 12-spaltiges responsives Raster-Layout mit einer Breite von 940 Pixel. Es ist möglich ein festes oder variables Raster einzustellen. Die Anpassung für verschiedene Auflösungen (z. B. bei Handys) ist ebenfalls problemlos integrierbar.

Grundlegende CSS-Stylesheet

Fundamentale Gestaltungsvorlagen für alle wichtigen HTML-Komponenten sind hier enthalten. So kann systemübergreifend ein einheitliches Erscheinungsbild für Tabellen, Formulare und Texte gewährleistet werden. Die Nutzung der Stildefinitionen ist dabei durch die Angabe bestimmter CSS-Klassen sehr einfach durchführbar.

Wiederverwendbare Komponenten

Oft werden bei Websites viele Elemente, wie z. B. die Navigation, wiederverwendet. Um das Rad nicht jedes Mal neu zu erfinden, kann man einfach die, bei Bootstrap, mitgelieferten Komponenten verwenden.

Optionale Javascript-Plugins

Um eine weitere Interaktion auf der Website zu ermöglichen, z. B. Einbinden von Popup-Dialogen, bietet Bootstrap zusätzliche Plugins, die per Javascript eingebunden werden. Dabei kommt auf die bekannte Jquery-Bilbiothek zum Einsatz. Auf diese Weise lassen sich weitere Designprobleme (Tooltips, Tabs usw.) einfach lösen. Ohne die Verwendung einer zusätzliche Javascript-Bibliothek.

Fazit

Twitter hat mit Bootstrap ein mächtiges Framework zur einfachen und schnellen Erstellung konsistenter Websites bereitgestellt. Die freie Nutzung und ständige Weiterentwicklung macht Bootstrap für mich zu einem essentiellen Bestandteil beim Bau guter Websites.

(c) Fotos:
Screenshots http://twitter.github.com/bootstrap/
Daumen hoch / Freds / Dreamstime