Debug Ausgaben für das Bootstrap 3 Grid

Mit dem Grid-System von Bootstrap 3 kann man seine Seiten relativ einfach und flexibel für vier unterschiedliche Ausgabegrößen umsetzen. Für die mittlerweile fast zum Standard gehörende Anforderung eines Responsive Designs gibt es momentan wohl kaum bessere Lösungen als das mobile-first Grid von Bootstrap 3.

Da das Bootstrap 3 Grid-System so viele Möglichkeiten zur flexiblen Umsetzung inkl. Vererbung bietet, wird die Entwicklung auch recht schnell komplex und unübersichtlich. Welche Grid-Klasse ist in Spalte XY gerade aktiv? Die column mit dem Prefix .col-xs, .col-sm, .col-md oder doch .col-lg? Und in der Spalte daneben? Gibt es dort vielleicht einen Media-Query relevanten -offset, oder hat die column ein -push oder -pull?

debug.css

Ich habe eine kleine CSS-Datei angelegt mit der die aktuell verwendete Grid-Klasse in jeder Spalte angezeigt wird. Die Spalten werden farblich zusätzlich noch markiert, jede Größe (breakpoints xs, sm, md und lg) hat hierbei eine eigene Farbe. Zusätzlich wird die aktuell verwendete Screengröße in der rechten oberen Ecke dargestellt. Die bei der Grid-Umsetzung häufig verwendeten clearfix-DIVs (zum Beispiel: .clearfix.visible-md) für einen manuellen Spaltenwechsel werden hierbei ebenfalls sichtbar. Das Ganze geschieht ausschliesslich auf CSS-Basis, es ist also kein zusätzlicher JavaScript-Code notwendig. Bei Bedarf also einfach die debug.css als letzte CSS-Datei auf den Seiten einbinden.

Die Datei debug.css verwendet die von Twitter Bootstrap standardmäßig eingesetzen Breakpoints für die Media Queries. Wenn Du in Deinem Projekt also andere Breakpoints verwendest, musst Du die CSS-Datei entsprechend anpassen. Alternativ stelle ich hier aber auch eine SASS-Datei (.scss) zur Generierung der CSS-Datei zur Verfügung, hier kannst Du die Breakpoints per Variable setzen und die Debug-Ausgaben erweitern und/oder anpassen.

Download CSS u. SASS

Grid im Hintergrund einbinden

Optional kannst Du mit etwas zusätzlichem Markup auch ganz einfach die Grid-Spalten im Hintergrund einblenden. Kopiere einfach diesen Schnipsel an den Anfang Deines HTML body:

<div class="debug-grid">
<div class="container">
<div class="row">
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
</div>
</div>
</div><!-- /.debug-grid -->