Bootstrap und Co: das Wichtigste in Kürze
CSS Frameworks als Grundlage für ein Responsive Design: das ist nichts Neues. Manchmal aber ist es gut, einen Schritt zurück zu treten und das Ganze etwas aus Distanz zu betrachten. Worum geht es bei Bootstrap und Co?
Gemäss Wikipedia handelt es sich bei solchen Frameworks um nicht mehr oder weniger als eine "Sammlung von Gestaltungselementen und Hilfsmitteln für einfaches und standardkonformes Web-Design mit CSS". Dies beinhaltet grundsätzlich folgende Elemente:
- Grid-Gestaltungsraster als Grundlage für jedes erdenkliche Design/Layout
- Unterstützung für Responsive Design (Anpassung des Designs aufgrund der Bildschirmgrösse)
- Gestaltungselemente wie Buttons, Menüs, Akkordeons, Modalfenster, Icon-Sets und Formulare etc.
- Javascript-Funktionalitäten mit und für diese Gestaltungselemente
Das Bootstrap-Framework
Zum Zeiptunkt beim Schreiben dieses Beitrags ist Bootstrap mit der Version 3.3.4 verfügbar. Da seit der Version 3 Firefox 3.6 und Internet Explorer 7 nicht mehr unterstützt werden, wird die Version 2 bislang nocht weiter gewartet.
Der Bootstrap-Grid
Nun zum Kern von Bootstrap: der Grid. Dieses Raster ist das wohl wichtigste Element von Bootstrap und besteht grundsätzlich aus 12 gleich breiten Spalten sowie Zeilen. Jedes Element des Frontends wird nun in diesen Raster einplatziert - dazu können die 12 Spalten flexibel eingesetzt werden. Breitere Elemente erhalten mehr Spalten zugeteilt, kleinere Elemente entsprechend weniger. Eine einfache Seite besteht z. B. aus 3 Zeilen: Header, Content und Footer.
Dies ist der grundlegende Aufbau des Rasters und bildet damit die Grundlage des Responsive Designs. Denn die einzelnen Designelemente brechen nun, je nach verfügbarem Platz, automatisch um und füllen den verfügbaren Platz optimal aus.
Die Zuteilung der Anzahl Spalten zu einem Element erfolgt unter der Angabe von CSS-Klassen und sieht z. B. wie folgt aus:
<div class="row"> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> <!-- Add the extra clearfix for only the required viewport --> <div class="clearfix visible-xs-block"></div> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> </div>
Die Zuweisung der CSS Klassen erfolgt unter Angabe der Geräteklasse und Anzahl Spalten. Folgende Geräteklassen werden typischerweise unterschieden:
- Extra Small Devices (<768 Pixel): Smartphones (xs)
- Small Devices (>= 768 Pixel): Tablets (sm)
- Medium Devices (>= 992 Pixel): Desktops (md)
- Large Devices (>= 1200 Pixel): Large Desktops (lg)
Projekt-Start mit Bootstrap
Möchte man ein neues Projekt mit Bootstrap aufsetzen, so kann man dies beispielsweise wie folgt in Angriff nehmen.
- Download Bootstrap von getbootstrap.com
- Start mit HTML-Vorlage (es gibt eine Auswahl auf der Webseite von Bootstrap)
- Anpassung des HTML/CSS Templates auf das Design des Projekts
- Integration weiterer Plugins und Funktionalitäten, je nach Bedarf
Weitere Frameworks
Neben Bootstrap gibt es unter anderem noch folgende weitere Frontend Frameworks:
Fazit
Der Einsatz eines solchen Frontend Frameworks bringt viele Vorteile mit sich die man in der heutigen Welt nicht mehr missen möchte. Klar bringt ein Einsatz eines solchen Frameworks auch Umstellungen mit sich und gewohnte Arbeitsweisen müssen überdenkt und angepasst werden. Alles in allem aber lohnt sich der Aufwand und man wird mit vielen Automatismen und Hilfsmitteln "beschenkt" die man bald nicht mehr hergeben will.
Mirabit setzt, sofern anwendbar, grundsätzlich Bootstrap ein - dies aber nicht weil dieses besonders gut oder andere schlechter wären, sondern weil Bootstrap das erste eingesetzte Framework bei Mirabit war. Ebenso bauen viele der z. B. auf ThemeForest verfügbaren Themes ebenfalls auf Bootstrap auf.