kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Gestaltungsraster


Explicit und Implicit Grids im CSS Grid Layout

Das CSS Grid Layout bietet die Möglichkeit, Raster in CSS zu definieren und Objekte in Rasterzellen zu platzieren. Dabei müssen wir nicht jede Zelle, Spalte und Zeile manuell angeben und ebenso wenig müssen wir jedes Objekt manuell platzieren. CSS Grids sind flexibel genug, um sich Objekte automatisch zu platzieren. Dies wird durch das so genannte explizite und implizite Raster gehandhabt. Um was es sich dabei handelt und worin der Unterschied besteht erläutert Manuel Matuzovic.

Direkter Link zum Artikel

Sass: »Semantische Raster« mit Hilfe von %placeholdern und @for-Schleifen

An klassenbasierten Rastern wird häufig kritisiert, dass das HTML-Markup durch eben jene Klassen unnötig aufgebläht wird. In einem sog. »semantischen Raster (semantic Grid)« kann auf diese Klassen verzichtet werden, da im Stylesheet die gewünschte Spaltenbreite einem Selektor direkt zugewiesen wird. Grundsätzlich ist diese Vorgehensweise auch mit reinem CSS denkbar, doch ohne den Einsatz eines Präprozessors wie Sass ist der Aufwand bei der Erstellung und der Pflege des Dokuments viel zu hoch. In diesem Beitrag möchte ich die elementare Funktionsweise von semantischen Rastern auf Basis von Sass beschreiben.

Beitrag zu Ende lesen

Sass: @for-Schleife zur Berechnung von Klassen-Selektoren im Gestaltungraster

Sass @for-Loop

In klassenbasierten CSS-Grids wird die Breite der Spalten im Gestaltungsraster mit Hilfe von Klassen gesteuert. Einen ausführlichen Artikel zu diesem Thema habe ich bereits veröffentlicht. Frameworks wie Bootstrap nehmen euch Arbeit ab, indem sie u.a. die Klassen und die jeweilige Breite vordefinieren. Mit Hilfe der @for-Schleifen in Sass könnt ihr euch ein individuelles System entwickeln. In diesem Beitrag archiviere ich das entsprechende Snippet.

Beitrag zu Ende lesen

Gestaltungsraster (CSS-Grids) im Web Design

CSS Grids

Eine moderne Website basiert i.d.R. auf einem sog. CSS-Grid System - einem Gestaltungsraster. Das Raster hat dabei verschiedene Aufgaben: Einerseits trägt es zu einem strukturierten Layout bei und sorgt dafür, dass eine Website professionell wirkt, andererseits unterstützt das Raster auch den Web Designer bei der Entwicklung, indem es vordefinierte CSS-Klassen bereitstellt.
In diesem Beitrag möchte ich das Thema Gestaltungsraster im Web ausführlich beleuchten. Ich gehe detailliert auf Responsive Grid Systeme ein, und erkläre die Funktionsweise an verschiedenen Beispielen.

Beitrag zu Ende lesen

Responsive »Masonry« Layout mit CSS

Responsive Pinterest Grid

Layouts in versetzter Kachel-Optik (Masonry) sind aktuell sehr beliebt. Insbesondere für die Bilddarstellung eignet sich dieser Layouttyp sehr gut. Wenn ihr selbst ein Design in diesem Stil umsetzen möchtet, werdet ihr merken, dass es ein paar Hindernisse gibt. Insbesondere wenn das Gestaltungsraster flüssig und mit unterschiedlich vielen Spalten auf den verschiedenen Gerätetypen aufgebaut sein soll scheiden einige Hilfsmittel aus.
In diesem Beitrag archiviere ich den Code für ein flexibles »Pinterest-Style« Layout ohne den Einsatz von JavaScript. Mit Media Queries verändern wir die Anzahl der Spalten.

Beitrag zu Ende lesen

Content Choreography für responsive Websites

In der Smartphone-Ansicht einer Website werden die Inhalte i. d. R. »gestapelt«. Alle Elemente werden linear untereinander angeordnet und die Reihenfolge der einzelnen Bereiche (z.B. Header, Hauptnavigation und Inhaltsbereich) entspricht der Reihenfolge der Elemente im HTML-Dokument.
Da dieses Verhalten bei komplexeren Projekten schnell zu Schwierigkeiten führen kann, sucht die Webdesign-Community nach Lösungen um die Reihenfolge bei Bedarf verändern zu können. Das Stichwort lautet »Content Choreography«.

Beitrag zu Ende lesen

CSS Grid – Einführung in Gestaltungsraster mit dem Grid Layout Module

Komplexe Weblayouts lassen sich weder mit float-basierten Gestaltungsrastern noch mit Flexbox perfekt umsetzen. Die Floating-Technik wurde nicht zur Konstruktion komplexer Layouts entwickelt, was wir u.a. daran merken, dass wir Elemente nicht nach oben und unten verschieben können. Flexbox ermöglicht es zwar die Gestaltung vollständig vom HTML-Code zu trennen, bietet sich aber eher für lineare Strukturen an als für verschachtelte. CSS Grid ermöglicht »echte« Gestaltungsraster auf Basis von CSS. In diesem Beitrag beschreiben wir, wie Layouts mit Hilfe von CSS Grids konstruiert werden können.

Beitrag zu Ende lesen