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
Design HTML/CSS Responsive Design

CSS-Framework Cute Grids: Flexibles Rastersystem für responsive Layouts

Zeitgemäße Websites müssen auch für mobile Endgeräte optimiert sein und kommen daher um ein responsives Layout kaum noch herum. „Cute Grids“ ist ein sehr flexibles CSS-Framework, welches auf der Basis eines zwölfspaltigen Rasters unterschiedliche, responsive Layouts ermöglicht. Dabei kümmert sich „Cute Grids“ ausschließlich um die Anordnung von Spalten – und zwar in Abhängigkeit der Breite des Browserfensters.

cudegrids

Schlankes Framework

Da auf weitere Gestaltungselemente verzichtet wird, ist „Cute Grids“ äußerst schlank. Neben der knapp 500 Zeilen langen Datei „cutegrids.css“, welche die Klassen für die Spaltenanordnung beinhaltet, ist noch die bekannte „normalize.css“ enthalten, die CSS-Eigenschaften auf eine einheitliche Basis zurücksetzt.

Die Grundlage von „Cute Grids“ ist ein Raster bestehend aus zwölf Spalten, die unterschiedlich kombiniert werden können. Somit können neben den zwölf Spalten auch zwei (2 x 6 Spalten), drei (3 x 4 Spalten), vier (4 x 3 Spalten) und sechs Spalten (6 x 2 Spalten) realisiert werden.

Berücksichtigung verschiedener Geräte und Auflösungen

Das Besondere an „Cute Grids“ ist, dass es Klassen für Desktopgeräte, Laptops, Tablets und Smartphones gibt. Auf diese Weise lässt sich ganz einfach definieren, welche Spalten ab welcher Auflösung nicht mehr nebeneinander, sondern untereinander dargestellt werden sollen. Die Klassen für Smartphones („cute-1-phone“ bis „cute-12-phone“) werden bei jeder Auflösung nebeneinander angeordnet. Hierdurch erreicht man, dass die Mehrspaltigkeit immer gegeben ist – unabhängig von der Auflösung.

Bei den Klassen für Tablets („cute-1-tablet“ bis „cute-12-tablet“) werden die Spalten erst dann nebeneinander gestellt, wenn das Browserfenster mindestens 48 em breit ist. Bei der Laptop-Variante muss das Fenster mindestens 62 em breit sein, bei der Desktop-Variante mindestens 75 em.

<div class="row">
  <div class="cute-6-desktop"></div>
  <div class="cute-6-desktop"></div>
</div>
<div class="row">
  <div class="cute-6-tablet"></div>
  <div class="cute-6-tablet"></div>
</div>

Im Beispiel werden zwei Zeilen mit jeweils zwei Spalten („cute-6-…“) dargestellt. Ist das Fenster kleiner als 75 em, werden die Spalten der ersten Reihe nicht mehr nebeneinander, sondern untereinander angeordnet. Die Spalten der zweiten Reihe werden bei weniger als 48 em Fensterbreite untereinander gezeigt.

„Cute Grids“ beinhaltet weitere Klassen, mit denen sich auch die Abstände zwischen den Spalten sowie die Reihenfolge der Spalten innerhalb einer Zeile definieren lassen. Da sich „Cute Grids“ auf das Wesentliche beschränkt, ist es ein Leichtes, die Stylesheets den eigenen Bedürfnissen anzupassen.

Links zum Beitrag

(dpe)