Avalanche - ein responsives, Sass-basierte CSS-Grid-System

Das kann das auf Responsive Design fokussierte CSS-Grid-System

Avalanche: ein neues Sass-basiertes CSS-Grid-System

Grid-Systeme bieten für die Gestaltung von Websites viele Vorteile. So steigern sie nicht nur die Produktivität, sondern ermöglichen auch eine größere Vielfalt im Website-Layout. Außerdem lässt sich die Seitenstruktur ohne viel Aufwand anpassen, ist Cross-Browser-kompatibel und ideal für Responsive Layouts geeignet. Kein Wunder also, dass es vor allem in den letzten Jahren immer mehr Grid-Systeme auf den Markt schaffen. Dazu gehört zum Beispiel auch das Sass-basierte CSS-Grid-System Avalanche.

Es verspricht nicht nur einen Fokus auf Responsive Design, sondern bietet Webdesignern auch sonst viele Vorteile. Einige davon hat Marc Schenker zusammengefasst.

Features von Avalanche

Avalanche bringt viele nützliche Features mit sich. Dazu gehört vor allem eine einfache, flexible Namensvergebung für width-Klassennamen. Zur Auswahl stehen drei verschiedene Namenskonventionen: Fraction (1/4), Percentage (25) oder Fragment (1-of-4). Zudem können auch nur die Klassen erstellt werden, die tatsächlich genutzt werden sollen. Dazu erklärt Schenker:

Just instruct Avalanche to use the widths you need, and it’ll create exactly those for you.

Der Vorteil daran ist vor allem, dass auf unnötige Klassen – und so auf unnötigen Code – verzichtet wird. Ebenso überprüft Avalanche automatisch, ob genutzte width-Klassen doppelt vorhanden sind und bündelt passende Selektoren zusammen. Nützlich ist auch, dass das Grid-System auf Floats verzichtet und so die erstellten Grids links, rechts, oben, unten oder zentriert ausgerichtet werden können, anstatt nur rechts oder links.

Fokus auf Responsive Design

Der Fokus von Avalanche liegt vor allem auf der Nutzung in Responsive Designs. So bietet das Grid-System die Möglichkeit, Breakpoints zu setzen, die auf den Dimensionen der beliebtesten Mobile Devices basieren: „Avalanche’s breakpoints target real-world values for shifting content“, erklären die Entwickler dazu auf der Produktwebsite. Zudem lassen sich Breakpoints mithilfe von nur einer Zeile Code hinzufügen oder entfernen.

Auch die Benennung von Media Queries ist möglichst einfach gehalten; ebenso beinhaltet Avalanche ein einfaches Media-Query-Mixin zur Nutzung innerhalb des Stylesheets. Gleichzeitig lassen sich mit Avalanche erstellte Grids problemlos nesten – und zwar, egal wie viele Grids benötigt werden.

Installation und Browser-Support

Die Installation von Avalanche ist denkbar einfach. Mithilfe von Bower oder npm wird _avalanche.scss in das eigene Projekt importiert, dann die Einstellung für die eigenen Bedürfnisse angepasst und abschließend kompiliert.

Avalanche wird von allen modernen Browsern unterstützt und steht auch für den Internet Explorer ab IE9 zur Verfügung. Mehr Informationen zu dem Grid-System bietet die Projektwebsite; dort finden sich auch einige Nutzungsbeispiele und Demos.