Vom Design zum responsive Design: Responsive Grid System

reponsive-grid-system-logo

Das Responsive Grid System ist eine Zusammenstellung von CSS-Klassen die euch helfen eine Website um ein flexibles Raster zu ergänzen und die Seite somit für Smartphones und Tablets zu optimieren. Das System lässt sich auch noch nach der Gestaltungs- oder Coding-Phase anwenden und zudem muss die Anzahl der Rasterspalten nicht global für die gesamte Seite festgelegt werden. Ein interessanter Ansatz.

Trainings für Unternehmen und Privatpersonen

Wir machen dich fit für die Zukunft des Web! In unseren Seminaren und Workshops lernst du wie moderne Websites entstehen.

Infos zu Inhouse-Seminaren
Infos zu öffentlichen Terminen

Was macht das Responsive Grid System zu etwas besonderem?

Normalerweise stellen Hilfsmittel für responsive Websites die Grundlage der konzeptionellen Planung der Website dar. Einerseits unterstützen diese Tools uns bei der Arbeit, andererseits wird man in bestimmten Bereichen oft ein wenig eingeschränkt. So wird beispielsweise ein vordefiniertes Framework verwendet oder die Gestaltung basiert auf einem generierten, flexiblen Gestaltungsraster an das man sich bei der Gestaltung halten sollte.

Screenshot der Website von Responsive Grid System
Screenshot der Website von Responsive Grid System

Das Responsive Grid System geht einen etwas anderen Weg. Es bildet nicht die Grundlage einer Planung sondern lässt sich nachträglich anwenden. Es ist also möglich eine bestehende Website um den „responsive“-Gedanken zu ergänzen, vorausgesetzt es wurden keine elementaren Regeln für die Erstellung flexibler Layouts missachtet. Das Responsive Grid System stellt dazu eine Sammlung an CSS-Klassen und Breakpoints (Media Queries), sowie einige mobile HTML-Basics zur Verfügung die in den eigenen Code übernommen werden können.

Wie funktioniert das Raster?

Das Responsive Grid System stellt verschiedene Klassen zur vertikalen Trennung des Layouts in Spalten, Klassen zur horizontalen Unterteilung in Zeilen und Klassen zur Gruppierung von Inhalten zur Verfügung. Diese Klassen werden anschließend auf das bestehende Layout angewendet, es muss also auch das HTML-Markup um die jeweiligen Klassen ergänzt werden.
Das Grid System bietet verschieden Dateien für verschiedene Arten von Rastern; angefangen bei einem zweispaltigen Design bis hin zu zwölf Spalten. Je nachdem welche Anzahl an Spalten ihr im Design verwendet, dient also eine andere CSS-Vorlage als Grundlage.

Download-Paket des Responsive Systems
Download-Paket des Responsive Grid Systems

Da das System auch in horizontale Bereiche (z.B. Header, Content, Footer) unterteilen kann, ist es möglich in den verschiedenen Sektionen auch eine unterschiedliche Anzahl an Spalten zu definieren. Ihr solltet nur aufpassen, dass bei aller Freiheit nicht plötzlich die Vorteile eines durchdachten Rasters vernachlässigt werden.

Links