Flexible Grids mit Sass

Transkript

1 CSS3 Flexible Grids mit Sass Es gibt zahlreiche Frameworks, die sich mit der Gestaltung von flexiblen Gittern beschäftigen. In diesem Workshop zeigen wir Ihnen, wie Sie diese mit Hilfe von Sass umsetzen. Von Andreas Hitzig AUTOR Andreas Hitzig arbeitet als Director IT bei einem mittelständischen Produktionsunternehmen und ist seit fast 15 Jahren als IT Autor tätig. Inhalt Flexible Grids mit Sass. Ressourcen Die Listings zum Artikel finden Sie auf in der Rubrik Aktuelles Heft. Es soll ein Layout mit 6 Spalten und einem geringen Innenabstand von insgesamt 10 Prozent abgebildet werden (Bild 2) Der Aufbau von Websites auf Basis von Gittern oder Grids ist heute zu einer gebräuchlichen Vorgehensweise geworden. Dies funktioniert sowohl bei einem klassischen Layout einer Website als auch bereits ansatzweise beim Responsive Design. Bei Letzterem ist es wichtig, keine starren Strukturen mit festen Spaltenbreiten zu haben, sondern die Verteilung der Spalten entsprechend anteilig festzulegen. Damit erhalten Sie auch bei unterschiedlichen Seitenbreiten immer ein konsistentes Aussehen der Webseite. Entwicklung mit Sass In diesem Workshop verfolgen wir zwei verschiedene Ansätze. Im ersten Fall bauen wir das flexible Gitter komplett auf Sass und CSS auf, ohne weitere Frameworks zu verwenden. Im zweiten Fall nutzen wir das Framework Unsemantic ( Im ersten Fall haben Sie mehr oder weniger die volle Kontrolle über Ihre Entwicklung, da Sie kein weiteres Framework als zusätzliche Schicht nutzen. Damit wird auch der Umfang des zusätzlichen Programmcodes, den Sie unnötigerweise mitschleppen, minimiert. Sollten Sie bereits gute Kenntnisse von Sass besitzen, ist der erste Ansatz die logische Konsequenz, da er die Vorteile der Entwicklung mit dem vorhandenen Wissen kombiniert. Befinden Sie sich hinsichtlich Ihrer Kenntnisse zu Sass eher noch im Anfängerstadium, dann sollten Sie auf das Framework Unsemantic setzen, da dies ebenfalls komplett auf Sass und Compass aufsetzt und damit deren Vorteile entsprechend ausnutzt. Dies bleibt jedoch ein wenig unter der Oberfläche verborgen, wenn Sie dies wünschen. Der Gridulator berechnet die Spaltenbreite bei vorgegebener Bildschirmbreite und Anzahl der Spalten (Bild 1) Haben Sie bis jetzt bewusst auf ein gitterbasiertes Framework verzichtet, dann mussten Sie eine Reihe von Arbeiten manuell verrichten. Dazu gehört auch die Berechnung der Breite der einzelnen Spalten. Es gibt im Internet zahlreiche Werkzeuge, die Sie bei dieser Berechnung unterstützen. Der Gridulator ( com) erlaubt Ihnen beispielsweise die Eingabe einer maximalen Breite sowie die Anzahl der gewünschten Spalten. Auf dieser Basis macht das Werkzeug verschiedene Vorschläge, die sich jeweils durch den Abstand zwischen den Spalten unterscheiden (Bild 1). Nachdem Sie die absoluten Zahlen besitzen, wie breit die jeweilige Spalte ist, müssen Sie das Ganze natürlich noch in Prozentwerte umwandeln. Haben Sie beispielsweise eine Gesamtbreite von 1120 Pixel und eine Spaltenbreite von 126 Pixel, dann beträgt der Prozentwert entsprechend 126/1120*100 Prozent, also in diesem Fall 11,25 Prozent. Im Vorfeld sollten Sie sich überlegen, in welcher Struktur Sie Ihren Programmcode ablegen möchten. Die minimale Variante ist eine SCSS- Datei, die zum Abschluss in eine CSS-Datei um- 52

2 gewandelt wird. Natürlich lässt sich diese Struktur entsprechend ausbauen, damit Sie am Ende die einzelnen inhaltlichen Teile wie Typografie, die Variablen oder die Gridstruktur separieren können. Wir beschränken uns in diesem Beispiel auf eine Minimalstruktur mit einer SCSS-Datei, da der Fokus auf der Gestaltung eines Grids liegt. Zu Beginn legen Sie die Rahmenparameter Ihrer Webseite fest. Dies sind die maximale Breite, die maximale Anzahl an Spalten sowie die Spaltenbreite und den Abstand zwischen den Spalten als Prozentwert. Dies könnte abhängig von Ihrem Layout beispielsweise zu folgendem Ergebnis führen: $max-width: 1000px; $column-width: 15%; $gutter-width: 2%; $maximum-columns: 6; In diesem Fall gibt es maximal sechs Spalten mit einer Breite von jeweils 15 Prozent. Damit sind 90 Prozent des Bildschirms bereits belegt. Die restlichen 10 Prozent werden für die Innenabstände zwischen den Spalten verwendet (Bild 2). Berechnung der Breite in Pixel Nachdem Sie die Angabe in Prozent definiert haben, müssen Sie diese natürlich für die Berechnung der entsprechenden Breite der jeweiligen Spalte wieder in Pixel zurückverwandeln. Sass bietet zahlreiche Mixins zur Erweiterung. Die beiden folgenden Funktionen sind in abgewandelter Form in einer Mixins-Sammlung namens Bourbon ( zu finden (Bild 3). Daraus sind die beiden Funktionen zur Berechnung der Spaltenbreite und der Zwischenräume entstanden (Listing 1). Mit diesen Funktionen ist es im Anschluss möglich, eine erste Festlegung für die Anzahl der Spalten und deren Aussehen zu treffen. Der folgende Programmcode zeigt deren Anwendung. Sie benötigen für die Funktion columns() zumindest einen Parameter, der die Anzahl der Spalten repräsentiert. Wenn Sie eine verschachtelte Struktur aufbauen möchten, dann kommt der zweite Parameter zum Einsatz. Dieser stellt den Bezug zum darüber liegenden Container her und gibt an, wie viele Spalten das übergeordnete Element besitzt: div.parent { width: columns(3); margin-right: gutter; div.child { width: columns(1, 3); margin-right: gutter(3); In diesem Fall gibt es einen Container mit drei Spalten und ein verknüpftes Element mit einer Spalte. Benötigte Mixins Die klassischen Frameworks arbeiten normalerweise mit Klassen, in denen Sie das Aussehen basierend auf der Anzahl der Spalten festlegen. In Kombination mit einem div-tag wird entsprechend das Layout gestaltet. Diese Festlegungen realisieren wir in Sass über ein Mixin. Das Die Funktionen zur Umwandlung von Prozentwerten in Pixel wurden dem Mixin Bourbon entnommen (Bild 3) LISTING 1: columns($columns, $container-columns: $maximum-columns) { $width: $columns * $column-width + ($columns - 1) * $gutter-width; $container-width: $container-columns * $column-width + ($containercolumns - 1) * percentage($width / gutter($container-columns: $maximum-columns, $gutter:$gutter-width) { $container-width: $container-columns * $column-width + ($containercolumns - 1) * percentage($gutter / $container-width); 53

3 LISTING 2: offset-columns($columns) { $margin: $columns * $column-width + $columns * offset($from-direction, $columns) $from-direction == left { float: left; margin-left: $from-direction == right { float: right; margin-right: offset-columns($columns); folgende Beispiel zeigt die generische row { width: 100%; max-width: $max-width; margin: 0 nesting; &:before, &:after { content: ""; display: table; &:after { clear: both; Dies ist nur eine minimalistische Implementierung, die bei Bedarf entsprechend erweitert werden nesting { padding: 0; & > div { float: left; margin-right: border-box; Die Verschachtelungen werden über das Mixin nesting geregelt, wobei an dieser Stelle vorrangig der Innenabstand, das Thema Fließmuster sowie der Abstand zum nächsten Nachbarn definiert werden. In diesem wird zusätzlich noch auf ein weiteres Mixin namens border-box verwiesen. Dieses dient dazu, das CSS-Thema boxsizing konsistent über die vorhandenen Browser-Engines abzudecken: Eine komplette Umsetzung eines flexiblen Grid-Modells finden Sie in dem GitHub-Projekt von Steve Hickey (Bild 4) Neben der Breite und der maximalen Breite benötigen Sie noch den Abstand sowie einen Verweis auf ein weiteres Mixin nesting. Dieses dient dazu, eine entsprechend verschachtelte Struktur zu gewährleisten. Zusätzlich ist ein weiteres Mixin clearfix notwendig, um die vorhandenen Strukturen wieder zurückzusetzen. Dieses könnte wie folgt clearfix { zoom: border-box { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; Wenn Sie bereits mit anderen Grid-Frameworks gearbeitet haben, werden Ihnen an dieser Stelle noch die sogenannten Offset-Columns fehlen, mit denen Sie leere Spalten generieren können. Ein Vorschlag zur Implementierung ist in der folgenden Funktion sowie dem zugeordneten Mixin zu finden (Listing 2). Damit haben Sie die Grundfunktionen für die Umsetzung eines flexiblen Grids auf Basis von Sass zusammen. Es fehlen nur noch die entsprechenden Umsetzungen für die verschiedenen Layout-Möglichkeiten, die sich an der Anzahl der Spalten orientieren. Eine komplette Umsetzung dieses Ansatzes finden Sie in dem GitHub-Projekt von Steve Hickey, das mich zu diesem Ansatz inspiriert hat. Sie finden dort eine komplette Umsetzung der Idee in Sass und können selbst mit den Einstellungen und Mixins experimentieren ( (Bild 4). Unsemantic Framework Als Alternative zur direkten Nutzung von Sass bietet sich das neue Framework Unsemantic 54

4 ( an. Dieses ist der direkte Nachfolger des 960-Grid-Systems und eliminiert die Nachteile im Zusammenspiel mit Responsive Design. Darüber hinaus baut es ebenfalls komplett auf Sass und Compass auf. Das Framework arbeitet von der Vorgehensweise analog zu 960.gs, allerdings werden anstelle einer bestimmten Anzahl von Spalten die Aufteilungen mit Hilfe von Prozentangaben abgebildet. Wenn Sie beispielsweise eine Spalte benötigen, die 50 Prozent der Fensterbreite einnehmen soll, dann weisen Sie dieser die Klasse grid-50 zu (Bild 5). Im folgenden Beispiel zeigen wir Ihnen, wie Sie eine Webseite auf Basis von Unsemantic aufbauen. Die Webseite kennzeichnen Sie entsprechend mit <!DOCTYPE html> als HTML5-Webseite. Im Kopfbereich der Webseite gibt es zu Beginn drei Meta-Tags. Mit diesen legen Sie den Zeichensatz, den Kompatibilitätsmodus sowie den Viewport fest. Letzteres sorgt für eine optimale Darstellung auf den unterschiedlichen Endgeräten: <head>... <meta charset="utf-8" /> <meta http-equiv="x-ua-compatible" content="ie=edge" /> <meta name="viewport" content= "width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" /> </head> Es kommen innerhalb des Meta-Tags viewport mehrere Parameter zum Einsatz: width: Legt die Breite des Bildschirms aus, für welche die Anzeige optimiert ist. Im Beispiel wird immer die maximale Breite des Bildschirms genutzt. initial-scale: Legt die Skalierung der Anzeige fest. Der Wert 1 entspricht einer Darstellung ohne Skalierung. minimum-scale: Gibt an, bis zu welchem Faktor der Benutzer die Anzeige verkleinern kann. Im Beispiel wird mit dem Faktor 1 eine Verkleinerung ausgeschlossen. maximum-scale: Gibt entsprechend an, bis zu welchem Faktor die Anzeige vergrößert werden kann. Im nächsten Schritt müssen Sie noch die CSS- Datei des Frameworks einbinden. Dies geschieht ebenfalls im Kopf der Webseite über ein link-tag: <link rel="stylesheet" href="./assets/ stylesheets/ unsemantic-grid-responsive.css" /> In diesem Fall befindet sich die Datei im Verzeichnis /asssets/stylesheets. Das erste Grid darstellen Ein Gitter benötigt auch bei der Nutzung des Frameworks Unsemantic nur wenige Programmzeilen an Coding. Die Klammer zwischen allem bildet ein div-tag, dem die Klasse grid-container zugewiesen wurde. Auf der nächsten Ebene können Sie bereits mit der Definition der einzelnen Säulen beginnen. In unserem Fall soll eine Aufteilung in drei Teile erfolgen, wobei der erste Teil 50 Prozent umfasst und die anderen beiden Teile jeweils 25 Prozent. Dies wird jeweils über eine Klasse grid-xx abgebildet, wobei xx der Prozentzahl entspricht (Listing 3). LISTING 3: GRID <section class="example-block">ich bin 50% breit.</section> <div class="grid-25"> <section class="example-block">ich bin 25% breit.</section> <div class="grid-25"> <section class="example-block">ich bin 25% breit.</section> Das Framework Unsemantic erlaubt die Aufteilung einer Webseite auf Basis von Prozentangaben (Bild 5) Das Erstellen des ersten Grids mit Unsemantic umfasst nur wenige Programmzeilen (Bild 6) 55

5 LISTING 4: GRID-PARENT <div class="grid-50 grid-parent"> <section class="example-block">spalte 1: I bin 25% breit (50% von 50%)</section> <section class="example-block">spalte 1: I bin 25% breit (50% von 50%)</section> <section class="example-block">spalte 2: I bin 25% breit (50% von 50%)</section> <section class="example-block">spalte 2: I bin 25% breit (50% von 50%)</section> <!-- An dieser Stelle folgen die weiteren Gitter --> In der Desktop-Variante gibt es drei Spalten mit einer Aufteilung von 50 Prozent, 25 Prozent und 25 Prozent (Bild 7) Damit die einzelnen Bereiche auch sichtbar werden, sind diese zusätzlich noch über ein selection-tag mit der Klasse example-block versehen worden (Bild 6). Betrachten Sie sich das Ergebnis Ihrer Arbeit dann sehen Sie auch die Abstände zwischen den einzelnen Bereichen. Diese werden durch einen jeweils 10 Pixel großen Abstand auf der linken und rechten Seite des Bereichs erreicht. Somit haben Sie an den Punkten, an denen zwei Bereiche direkt aufeinandertreffen, jeweils einen 20 Pixel breiten Puffer. Verschachtelte Gitter Auf diese Art und Weise lassen sich natürlich nicht nur einfache Strukturen, sondern auch verschachtelte Konstruktionen darstellen. Im folgenden Beispiel teilen wir den zuvor erstellten linken Bereich mit 50 Prozent Breite in zwei weitere Säulen auf. Dafür verwenden Sie die gleiche Vorgehensweise wie im ersten Beispiel mit Unsemantic. Lediglich das Signalwort grid-parent weist auf eine entsprechende Verschachtelung hin. Dieses setzen Sie direkt auf der obersten Ebene der verschachtelten Struktur (Listing 4). Unterschiedliche Layouts LISTING 5: HIDE-ON-MOBILE <div class="grid-50 mobile-grid-100"> <section class="example-block">ich bin 50% auf dem Desktop. Ich bin 100% auf dem mobilen Endgerät.</section> <div class="grid-25 mobile-grid-50"> <section class="example-block">ich bin 25% auf dem Desktop. Ich bin 50% auf dem mobilen Endgerät.</section> <div class="grid-25 mobile-grid-50"> <span class="hide-on-desktop"> <section class="example-block">ich bin unsichtbar auf dem Desktop.</section> <span class="hide-on-mobile"> <section class="example-block">ich bin unsichtbar auf dem mobilen Endgerät.</section> Beim Unsemantic-Framework können Sie auch spezielle Layouts für mobile Endgeräte hinterlegen (Bild 8) Das Framework erlaubt Ihnen ein abweichendes Design für Geräte mit einer Bildschirmbreite von weniger als 768 Pixel. Dies ist die Breite eines klassischen ipads. Das folgende Beispiel nutzt wieder eine Prozent Struktur für den klassischen Desktop. Im Fall eines mobilen Endgeräts soll es eine etwas andere Darstellung geben. Die erste Spalte soll 100 Prozent ausfüllen und die beiden folgenden jeweils 50 Prozent. In jeder der beiden Darstellungen gibt es jeweils eine Spalte, die nicht angezeigt werden soll (Bild 7). Sie erreichen dies, indem Sie den einzelnen Spalten zwei Klassen zuordnen, die abhängig von der Breite des Bildschirms genutzt werden. Dies ist zum einen die bereits bekannte Variante grid-xx, die für die mobile Darstellung entsprechend um mobile-grid-xx ergänzt wird. Technisch realisiert wird die obige Anforderung mit insgesamt drei Spalten, wobei den ersten beiden jeweils eine andere Klasse zugewiesen wird, abhängig von der Breite des Bildschirms. Nur bei der dritten wird von dieser Vorgehensweise abgewichen. In diesem Fall wird mit Hilfe des span-tags jeweils der nicht benötigte Bereich ausgeblendet. Die Klasse hide-on-desktop lässt den entsprechenden Abschnitt nur auf mobilen Endgeräten erscheinen, hide-on-mobile sorgt für die Dar- 56

6 stellung im klassischen Browser des Computers (Listing 5). Ziehen Sie den Browser auf die entsprechende Pixelbreite um die 800 Pixel, dann sehen Sie, wie das Layout beim Über- oder Unterschreiten des jeweiligen Grenzwerts wechselt und entweder zum Desktop-Design oder zur mobilen Variante wechselt (Bild 8). Das Framework erlaubt Ihnen jedoch nicht nur eine Unterscheidung zwischen Desktop und mobilem Endgerät, Sie können die Grenze auch noch feiner ziehen. Die mobilen Endgeräte lassen sich zusätzlich in Smartphone und Tablet unterteilen. Für den Einsatz dieser Klassen benötigen Sie eine spezielle CSS-Datei mit dem Namen unsemantic-grid-responsive-tablet.css. Unsemantic legt folgende Grenzen bezüglich der Breite zwischen den drei Formen der Darstellung fest: Ein Smartphone besitzt eine Breite von weniger als 768 Pixel im Querformat, ein Tablet entsprechend bis 1024 Pixel, und alles darüber ist dann ein Browser auf einem Desktop. Neben der Erweiterung der Klassen um eine tabletgrid-xx Variante gibt es auch eine Klasse hide-ontablet, mit der Sie analog die Darstellung unterbinden (Listing 6). Zwischenräume selbst festlegen Die Abstände der Säulen in den vorherigen Beispielen waren alle exakt 10 Pixel an der linken und rechten Seite breit. Diese Anforderung kann bei manchen Designs aber auch einmal abweichen und Sie benötigen mehr Abstand. Dieses Verhalten können Sie auf Basis der Klassen prefix-xx oder suffix-xx erreichen. In diesen Fällen wird ein leerer Bereich von xx Pixeln links oder rechts der definierten Spalte erzeugt. Diese Klassen gibt es sowohl für die Desktop-Variante als auch in einer mobilen und einer Tablet-Version. Das Framework Unsemantic bietet natürlich einen noch deutlich größeren Funktionsumfang, als diese Beispiele zeigen konnten. Besonders die direkte Ansprache der Sass-Variablen und Sass-Platzhalter sind weitere Themen, die in der Kurzvorstellung nicht berücksichtigt wurden. Diese werden jedoch entsprechend ausführlich in der Online-Dokumentation des Frameworks vorgestellt und mit einer Reihe von Beispielen, die direkt mit Unsemantic ausgeliefert werden, im Detail erläutert. Alle Informationen sind direkt über die Website von Unsemantic ( verfügbar (Bild 9). Fazit Es sind zwei sehr unterschiedliche Realisierungen, die beide auf Sass beruhen. Im ersten Beispiel erfolgt der Zugriff ohne Zwischenschritt direkt auf Sass. Dafür sind aber gute Kenntnisse des CSS-Frameworks sowie einige Erfahrungen im Umgang mit Grids notwendig. Sollten Sie in diesen Bereichen bis jetzt wenig Wissen gesammelt haben, stellt das Framework Unsemantic eine überlegenswerte Alternative dar. Es erlaubt die Definition der Spalten ohne Nutzung von Sass, bietet Anwendern aber die Möglichkeit, auch direkt auf der Ebene des darunterliegenden Frameworks zu arbeiten. [mb] LISTING 6: HIDE-ON-TABLET <div class="grid-50 mobile-grid-100 tablet-grid-50"> Ich bin 50% breit auf dem Desktop. Ich bin 100% breit auf dem Smartphone. Ich bin 50% breit auf dem Tablet. <div class="grid-25 mobile-grid-50 tablet-grid-50"> Ich bin 25% breit auf dem Desktop. Ich bin 50% breit auf dem Smartphone. Ich bin 50% breit auf dem Tablet. <div class="grid-25 mobile-grid-50 tablet-grid-100"> <span class="hide-on-desktop"> Ich bin unsichtbar auf dem Desktop. <span class="hide-on-mobile"> Ich bin unsichtbar auf dem Smartphone. <span class="hide-on-tablet"> Ich bin unsichtbar auf dem Tablet. Es gibt eine umfangreiche Online- Dokumentation zum Framework, in der auch die Sass-Spezifikationen im Detail erläutert werden (Bild 9) 57