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.
Name | Avalanche |
---|---|
Hersteller | Colour Garden |
Projektwebsite | http://colourgarden.net/avalanche/ |
GitHub | https://github.com/colourgarden/avalanche |
Webperformance und Page Speed 2021
mit Sven Wolfermann (maddesigns)
UX Design: Kitsch – du willst es doch auch!
mit Lutz Schmitt (Lutz Schmitt Design & Consulting)
SEO loves PR: Wie zwei Disziplinen gemeinsam erfolgreich sein können
mit Anne Kiefer (sexeedo GmbH)
Aufmacherbild: avalanche in Himalaya von Shutterstock / Urheberrecht: Galyna Andrushko