Kategorien
HTML/CSS Webdesign

Gitter voll im Griff: Firefox mit neuem Layout-Panel für CSS-Grids

Ordentliche, auf Raster beziehungsweise Gitter basierende Layouts waren bislang nur auf umständlichen Wegen möglich. Die neuen CSS-Grids, die in den neueren Versionen der bekannten Browser seit einiger Zeit möglich sind, erlauben endlich solche Layouts. Und im Firefox gibt es – zumindest in der Nightly-Version – ein neues Layout-Panel im Inspektor der Entwicklerwerkzeuge, welches dir den Umgang mit CSS-Grids vereinfacht.

Mit CSS-Grids zu besseren Layouts

Das neue Grid-Modell macht es endlich möglich, komplexe Layouts zu entwickeln, die auf der Grundlage eines selbst definierten Gitters bestehen. Dazu legst du per CSS Spalten und Reihen fest, bestimmst Abstände und Breiten. Anschließend werden beliebige Elemente innerhalb des Gitters platziert.

body {
  display: grid;
  grid-template-rows: 200px 1fr 100px;
  grid-template-columns: 25% 25% 25% 25%;
}

Für ein Grid-Layout muss die „display“-Eigenschaft zunächst per „grid“ auf das neue Layoutmodell umgestellt werden. Anschließend werden per „grid-template-rows“ und „grid-template-columns“ die Reihen und Spalten des Gitters definiert. Dabei sind absolute und relative Angaben möglich.

Für jede Reihe beziehungsweise Spalte wird ein Wert übergeben. Die Kombination von absoluten und relativen Werten ist möglich. So können wie im Beispiel Reihen feste Werte besitzen. Mit der Einheit „fr“ für „fraction“ lassen sich flexible Breiten und Höhen herstellen. Dabei füllt die Einheit „fr“ den freien Raum innerhalb des Gitters aus.

Zusätzlich kannst du per „grid-row-gap“ und „grid-column-gap“ Abstände zwischen den einzelnen Gitterzellen festlegen. So hast du die Möglichkeit, sehr individuelle und flexible Raster für deine Weblayouts zu entwickeln.

Ist das Raster festgelegt, müssen die einzelnen Inhalte platziert werden. Dazu wird angegeben, in welchen Zellen des Gitters der Inhalt positioniert werden soll.

header {
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start: 1;
  grid-row-end: 2;
}

Mit „grid-column-start“ und „grid-column-end“ werden die Start- und Endpunkte innerhalb des Rasters angegeben. Analog dazu gibt es „grid-row-start“ und „grid-row-end“. Dank der vier Eigenschaften ergeben sich die Zellen, in denen das jeweilige Element stehen soll.

Das Prinzip des CSS-Grids ist also recht einfach. Die Auszeichnung ist hingegen nicht unbedingt leicht nachvollziehbar – gerade bei komplexen Rastern. Hier kommt das neue Layout-Panel des Inspektors von Firefox ins Spiel.

Neues Layout-Panel zeigt Raster

Das neue Panel sorgt zunächst einmal dafür, dass alle auf einer Seite definierten Raster dargestellt werden. Während das eigentliche Raster auf einer Website ja nicht sichtbar ist, stellt Firefox die einzelnen Spalten und Zeilen sowie gegebenenfalls die Zwischenräume dar, sodass es Entwickler einfacher haben, sich innerhalb des Gitters zurechtzufinden.

Das Layout-Panel erreichst du, indem du die Entwicklerwerkzeuge aufrufst und in den Inspektor wechselst. Dort findest du das Layout-Panel. Für jedes Grid-Element wird ein Button eingeblendet, der das für das jeweilige Element hinterlegte Raster einblendet. Im Browserfenster werden Rasterlinien über das Layout gelegt, die das von dir per CSS-Grids definierte Gitter hervorheben.

Zusätzlich wird das Raster auch im Panel selbst angezeigt. Bewegst du die Maus über dieses Raster, wird die entsprechende Zelle sowohl im Inspektor als auch im Browserfenster hervorgehoben.

Das Einblenden von Zeilennummern erleichtert dir zudem, einzelne Rasterzellen ausfindig zu machen. Die unendlichen Gitterlinien, die du optional dazuschalten kannst, führen die Linien des Rasters auch jenseits des jeweiligen Grid-Elementes weiter. Das kann mal nützlich, mal störend sein, weshalb das Ein- und Ausblenden dieser Option sinnvoll ist.

Rasterbereiche benennen und darstellen

Mit der CSS-Eigenschaft „grid-areas“ hast du die Möglichkeit, Bereiche innerhalb deines Gitters zu benennen und somit zu einer Art Gruppe zusammenzufassen. Alle Zellen mit derselben Bezeichnung stellen somit eine Gruppe dar.

grid-template-areas:
  "header header header header"
  "nav content content content"
  "footer footer footer footer";

Über die Option „Display grid areas“ (ist in der aktuellen Nightly-Version noch nicht ins Deutsche übersetzt) werden dir diese Rasterbereiche im Browserfenster dargestellt. Dabei werden die einzelnen Bereiche durch eine dickere Linie im Gitter hervorgehoben. Zusätzlich wird die jeweilige Bezeichnung des Bereichs eingeblendet.

Bewegst du deine Maus im Layout-Panel über eine Gitterzelle, wird im Browser nicht nur die Zelle hervorgehoben, sondern auch der Bereich, dem die Zelle zugeordnet ist.

Transformierungen werden berücksichtigt

Dank der CSS-Eigenschaft „transform“ sind Drehungen, Skalierungen und Verzerrungen von Elementen möglich. Auch auf ein Gitter-Element lassen sich diese anwenden. Der Inspektor berücksichtigt alle per „transform“ gemachten Änderungen und passt das Gitter entsprechend an.

Das heißt, bei einem gedrehten Gitter-Element wird auch das Raster selbst mit gedreht.

Fazit

Das neue Layout-Panel im Inspektor von Firefox hilft dir dabei, deine Grid-Layouts besser zu verstehen und zu entwickeln. Die Hervorhebung der Gitterlinien und die Nummerierung helfen dabei, Elemente zu platzieren und einen visuellen Eindruck des Gitters zu bekommen.

Dabei werden alle Möglichkeiten wie Abstände zwischen den Rasterzellen und die Einteilung in Bereiche mit berücksichtigt. Insgesamt macht der neue Panel einen guten Eindruck. Dass sich das neue Grid-Layout durchsetzen wird, dürfte nur eine Frage der Zeit sein, weshalb diese neue Funktion sicher für viele Webentwickler eine große Erleichterung bei der Arbeit darstellen wird.

Wann es das neue Layout-Panel in den regulären Firefox schafft, steht noch offen. Aber wer schon einmal probieren möchte, kann sich die Nightly-Version herunterladen. Da es sich dabei um keine ausgereifte Version handelt, sollte man sie nur zu Entwicklungszwecken und die in einer Live-Umgebung nutzen.

Kategorien
Inspiration Tutorials

Bento: Intelligente Liste der besten Online-Kurse zum Thema Web-Development

Erst vor ein paar Tagen stellten wir Ihnen hier eine Liste mit 22 der besten internationalen Online-Schulungsangebote vor. Heute stolperten wir geradezu über eine neue Ressource namens Bento, die ihrerseits die besten konkreten Kursangebote für alle Themen rund um Webentwickler-Themen sammelt und aufbereitet verfügbar macht. Die Sammlung setzt auf die Mithilfe aller und kann sich auf diese Weise zu einem der besten Anlaufpunkte im Netz mausern.

bento-homepage

Bento: Verschiedenste Kurse für verschiedenste Kenntnis-Level

Bentobox.io (kurz: Bento), programmiert von Jon Chan aus New York City, ist ein Repräsentant einer interessanten Herangehensweise an das Feld des Online-Lernens. Hier wird nicht etwa der nächste Kursanbieter entstehen, stattdessen will Bento die besten bereits existierenden Onlinekurse aus den Weiten des Web zusammenziehen und zentral zugänglich machen. Unter den vertretenen Anbietern findet sich Dash, das wir Ihnen erst kürzlich vorstellten, ebenso wie Codecademy und Treehouse, die bereits in unserem großen Roundup ihren Platz fanden, und einige weitere namhafte und weniger namhafte Dienste für Wissbegierige.

Bento ist nach Sprachen/Plattformen/Technologien sortiert. Innerhalb des jeweiligen Themas wird nach Kenntnislevel unterteilt. Es finden sich Materialien für Anfänger, Fortgeschrittene und Profis, wobei der Bereich, der sich an Profis wendet noch häufig unbesetzt ist. Anfänger finden auf jeden Fall genügend Lernstoff.

Wählt man ein Thema an, schlägt Bento per farblicher Hervorhebung weitere Themen vor, die man im Anschluss bearbeiten sollte. In Anbetracht der Vielfalt des Gebotenen, kann eine solche farbliche Strukturierung durchaus helfen, einen klaren Weg durch das Wissensdickicht einzuschlagen.

Bento hat Materialien für nahezu jedes erdenkliche Thema, darunter solche, von denen nicht einmal ich schon je etwas gehört habe. Über 80 Themen mit einer unterschiedlichen Zahl verfügbarer Kurse wollen durchgearbeitet werden. Sollten Sie daran interessiert sein, sich mit der Entwicklung nativer Apps für die drei großen Mobilplattformen zu beschäftigen, ist Bento ebenfalls eine gute Anlaufstelle.

Wenn Sie der Auffassung sind, dass eine der besten Ressourcen zum Thema X fehlt, sind Sie aufgerufen, diese Ressource aktiv zu ergänzen. Diese Form der Weisheit der Vielen ist das Konzept auf dessen Basis Bento noch besser werden soll. Die gemeinsame Arbeit wird über Github organisiert.

Laut Chan ist Bento das Resultat eines einstündigen Code-Hacks. Entstanden am 20. September fand das Projekt innerhalb weniger Stunden seinen Weg auf die wesentlichen Linkhubs unserer Tage, namentlich Reddit und Hacker News. Chan hat sich inzwischen die Zeit genommen und die Story gebloggt.

So, und nun gehen Sie rüber zu Bento, helfen es zu erweitern oder bauen Ihre eigene Version. Immerhin stehen jedem von uns laut Warhol 15 Minuten Ruhm zu.

Ebenfalls eine gute Anlaufstelle für alle Lernwilligen ist das kostenlose E-Book von vergleich.org, welches 500 kostenfreie, deutsche Onlinekurse auf ca. 150 Seiten beinhaltet.