Asymmetrisches Grid bei 1280 x 800px

Individuelle responsive Gridsysteme mit Sass

Für Responsive Webdesign ist ein Gridsystem der Grundstock um den Inhalt auf vielen verschiedenen Ausgabegeräten flexibel auszugeben. Gridsysteme sind mittlerweile unbedingt notwendig um ein Design zielgenau (nicht pixelgenau) umzusetzen. Um genau zu sein, sollte das Design bereits einem Raster folgen, das dann in der Entwicklung so umgesetzt wird.

Als Einstieg in die Thematik eignet sich der Artikel „Fluid Grids“ (2009) von Ethan Marcotte himself. Dort beschreibt Ethan wie man ein fixes Layout in ein flexibles Layout umrechnet. Eine einfache Formel ist das Geheimnis der fluiden Grids:
Ziel/Kontext = Ergebnis in Prozent

Ein klassisches Beispiel:
300px / 960px = 0.3125 * 100% = 31.25%

Wer sich bereits mit Responsive Webdesign beschäftigt hat, kennt sicherlich diese Grundlagen.

Das responsive Frontend-Framework Foundation bietet die Möglichkeit mit den Klassen-Präfixen ’small-‚ und ‚large-‚ individuelle Breakpoints für die jeweilige Module zu vergeben. Dadurch kann man die prozentuale Spaltenbreite je Viewport anpassen. Im HTML fügt man dazu folgende Klassen hinzu:

<div class="small-2 large-4 columns">...</div>
<div class="small-4 large-4 columns">...</div>
<div class="small-6 large-4 columns">...</div>

Bootstrap (formerly known as Twitter Bootstrap) hat einen ähnlichen Gridaufbau.

<div class="col-xs-12 col-md-8"> .col-xs-12 .col-md-8 </div>
<div class="col-xs-6 col-md-4"> .col-xs-6 .col-md-4 </div>

Welche Vorteile bringt ein „individuelles Gridsystem“ gegenüber den Gridsystemen von Bootstrap oder Foundation?

Erst einmal sollte man sich bewusst sein, dass ein (Frontend-) Framework eine Reihe an Modulen und Features mitbringen, die beim Prototyping und bei der Entwicklung durchaus hilfreich sein können. Setzt man aber nur ein Modul davon ein (z.B. Grids) und achtet nicht darauf nur die verwendeten Dateien (die nötigen CSS-Stile) im HTML zu referenzieren, handelt man sich unter Umständen einen unnötigen Overhead ein.

Wer nur ein einfaches flexibles Gridsystem sucht, könnte auch das 1000px Gridsystem von Elliot Jay Stocks oder das Online-Tool Gridpak nutzen.

Bei herkömmlichen Gridsystemen ist man an die vorgegebene Klassen-Logik des Gridsystem gebunden, um eine Änderung an der Spaltigkeit zu machen. Dazu müssten Änderungen am Markup gemacht werden. Zudem bieten die allermeisten responsiven Gridsysteme nur einen vorkonfigurierten Breakpoint (Foundation 5 hat jetzt auch zusätzlich ein „Medium-Grid“) um Layoutänderungen zu machen.

Sass Gridsysteme

Mit Sass hat man die Möglichkeit Grids unabhängig vom Markup, bzw. auf das Markup angepasst, zu erstellen. Nicht vergessen ein anderes Border-Box-Modell für alle Elemente deklarieren.

*, *:before, *:after {
  @include box-sizing('border-box');
}

Drei Gridsysteme möchte ich nachvolgend kurz vorstellen:

Semantic GS

Ein einfaches individuelles Gridsystem ist Semantic GS. Letztlich ist die Berechnung der Spalten in 2-3 Funktionen hinterlegt, einfach die Grid-Variablen setzen und loslegen. Selbst die Unterscheidung ob das Grid feste Breiten hat oder fluide agiert, kann konfiguriert werden.

@import 'grid.scss';

$column-width: 60;
$gutter-width: 20;
$columns: 12;
$total-width: 100%;  // fluid grid

// 9 columns main article and 3 columns aside content
article {
   @include column(9);
}
aside {
   @include column(3);
}

Subgrid-Logik:

article {
    @include column(9);

    ul {
      // include grid row 
      @include row(9);
      li {
        // include 3 columns of a 9 columns context (33.334%)
        @include column(3,9);
      }
   }
}

Das Semantic.gs Gridsystem gibt es als LESS-, Stylus- und SCSS-Präprozessor-Variante.

Susy – Responsive grids for Compass

Susy ist ein responsive Grid-Framework für Compass. Wer 960.gs kennt, kommt auch mit Susy schnell zurecht. Susy verwendet z.B. ebenfalls das Keyword ‚omega‘ um bei der letzte Spalte den Abstand (Gutter) nach rechts auf 0 zu setzen.

Gem Installation über die Kommandozeile

gem install compass-susy-plugin

Susy zu einem bestehenden Projekt hinzufügen – Anpassung der Compass-Konfiguration (config.rb):

#config.rb
require "susy"

Susy in die Sass-Dateien importieren

@import "susy";

Grid Konfiguratuion:

// global variables
$total-columns: 12;            // a 12 column grid
$column-width:  4em;           // each column is 4em wide
$gutter-width:  1em;           // 1em gutters between columns
$grid-padding:  $gutter-width; // grid-padding equal to gutters

// usage 
.page {
  @include container;
  @include susy-grid-background; // visualize the grid as bg-img
}

article {
  // content spans 9 columns of 12
  @include span-columns(9,12);    
}
aside { 
  // aside content spans the final 3 (omega) of 12 columns
  @include span-columns(3 omega,12); 
}

Susy bietet eine Vielzahl an Möglichkeiten wie Push oder Pull, sowie IE <9 Support (.lt-ie9 Klasse) um ein eigenes Responsive Gridsystem aufzubauen, zudem eine umfangreiche Doku: http://susy.oddbird.net/guides/reference/

An der nächsten Version von Susy wird schon fleißig gearbeitet, die Version 2.0 hat Sass 3.3 Support und brauch Compass nicht mehr unbedingt, siehe Github Changelog.

Singularity – Grids without limits

Singularity ist etwas mehr als ein Gridsystem wie man es häufig verwendet. Singularity kann neben den üblichen symmetrischen Grids (alle Spalten gleich breit) auch asymetrische Grids erstellen, d.h. nicht alle Spalten müssen immer gleich breit sein. Es lassen sich auch Spalten unterschiedlicher Breite anlegen. Zudem hat Singularity die sogenannte „Isolation-Methode“; als standardmäßige Spalten-Positionierungslogik und umgeht damit Browserbugs durch fehlerhafte Prozentrechnung.

Installation des Singularity Gridsystem

Die Installation von Singularity erfolgt genau wie bei Susy.

gem install singularitygs

Singularity in die Compass-Konfiguration hinzufügen:

# config.rb
require "singularitygs"

Singularity in die Sass-Dateien importieren:

@import "singularitygs";

Globale Grid-Variablen festlegen:

// 12 columns á la 960gs:
$grids: 12;
$gutters: 1/3;
12 columns grid
Symmetrisches Grid (12 Spalten)

Das SCSS Grid-Mixin:

@include grid-span($span, $position);

$span = Spaltenlänge
$position = Startposition

// usage 
article {
  // content spans 9 columns of 12 columns.
  @include grid-span(9,1);  
}
aside { 
  // aside content spans 3 of 12 columns.
  @include grid-span(3,10); 
}

12 columns grid with article and aside
Play with this gist on SassMeister.

Visuelle Positionierung (push und pull) – Der ‚$location‘ Parameter
Mit dem zweiten Parameter im @include Aufruf kann die Start-Position ($location) der Spalte festgelegt werden.

article {
  // content spans 9 columns begins at position 4.
  @include grid-span(9,4);  
}
aside { 
  // aside content spans 3 at position 1.
  @include grid-span(3,1); 
}

12 column grid with switched positions
Play with this gist on SassMeister.

Asymetrische Grids mit Singularity

Singularity kann in der $grids Variable nicht nur einfache Zahlen verarbeiten, sondern auch mehrere Zahlen, die dann zu einem Gesamtgrid zusammen gezählt werden.

$grids: 1 4 1; // grid of 6 columns
$gutters: 1/6;            // 1/6 gutter of 1 column
$gutter-style: split;     // split gutter - half gutter on each side

Oder unser Ausgangsbeispiel:

$grids: 2 8 2; // grid of 12 colums
$gutters: 1/3;

article {
  // article content spans 1 column (is in fact 2 columns wide)
  // begins at position 1
  @include grid-span(1,1);
}
aside { 
  // aside content spans 1 column (is in fact 8 columns wide)
  // begins at position 2
  @include grid-span(1,2); 
}
.ads {
  // article content spans 1 column (is in fact 2 columns wide)
  // begins at position 3
  @include grid-span(1,3);
}
2-8-2 colums grid
Asymmetrisches Grid (2-8-2)

Bei asymmetrischen Grids ist darauf zu achten, dass der ‘$grids’-Variable in Teile aufgeteilt wird, aus denen sich die Positionen (Start der Spalte) ergeben. Drei Teile ergeben dann die Positionen 1, 2 und 3. Die „Spaltenbreiten“ können demzufolge jeweils eine Spalte breit sein (im Beispiel eigentlich 2 Spalten von 12) oder zwei bzw. drei Spalten (100%) breit.

Singularity kann auch automatisiert responsive Grids erstellen, also dass sich die Spaltenanzahl je Breakpoint geändernt wird. Ein Beispiel:

$break-small:   450px;
$break-medium:  700px;
$break-large:   900px;
$break-xlarge: 1200px;

$grids: 3; // mobile first view - 3 columns
$grids: add-grid(6 at $break-small); // 6 equal columns from 450px 
$grids: add-grid(12 at $break-medium); // 12 equal columns
$grids: add-grid(2 8 2 at $break-large); // 3 columns (2|8|2)
$grids: add-grid(1 3 5 7 9 at $break-xlarge); // 5 columns (1|3|5|7|9) 

$gutters: 1/3;
$gutters: add-gutter(.25 at 900px);

In dem Beispiel sind im „Mobile First“ Viewport drei Spalten mit einem Gutter von ⅓ der Spalte deklariert. Ab dem Breakpoint „$break-small“ (450px) wird das Grid in ein 6 Spalten-Grid umgewandelt, ab „$break-medium“ (700px) in ein 12 Spalten-Grid. Diese Spalten sind alle gleich breit. Ab dem Breakpoint „$break-large“ (900px) wird das Grid in 3 Spalten (die insgesamt aus 12 Spalten bestehen) asymmetrisch aufgeteilt. Letztlich gibt es nochmal ein asymmetrisches Grid ab dem Breakpoint „$break-xlarge“ (1200px). Ich möchte darauf hinweisen, dass das nur ein Beispiel ist, was möglich ist, nicht ob das ein sinnvolles Grid ist.

Hier eine Live-Demo und von allen Views mal Screenshot:

Symetrisches Grid - 6 Spalten (480x320px) Symetrisches Grid - 3 Spalten (320x480px) Symmetrisches Grid - 12 Spalten (768x1024px) Asymmetrisches Grid bei 1280 x 800px Asymmetrisches Grid bei 1024 x 768px
Responsive Grids – unterschidliche Spalten je Breakpoint

Relationale Grids – Singularity-Extras

Mit der Erweiterung „Singularity-Extras“ können mit Singularity Grids auf Basis bestimmter Relationen erstellt werden. So z.B. ein Gridsystem nach „Goldenen Schnitt“ oder „Compound-Grid“, das die Spaltenbreiten überlagert, kombiniert und zu einer Einzelspalte nach dem Vorbild von Karl Gerstner zusammenfügt. Dadurch sind natürlich sehr individuelle Grids möglich. Das Zuweisen der Spalten wird dann teilweise etwas komplizierter und ist manchmal ganz schöner Brain-Fuck, aber funktioniert.

@import "singularitygs";
@import "singularity-extras";

$break-small:   450px;
$break-medium:  700px;
$break-large:   900px;
$break-xlarge: 1200px;

$grids: 3;
$grids: add-grid(1 2 3 at $break-small);
$grids: add-grid(ratio(golden(), 6) at $break-medium);
$grids: add-grid(compound(2, 3, 4) at $break-large);

$gutters: .25;

Ein Beipiel mit Singularity-Extras: Mobile First Grid

Aktuell wird auch an der Sass 3.3 Kompatibilität von Singularity gearbeitet, das viele Verbesserungen intern mit sich bringt.

Ich würde mich freuen, wenn ich mal ein asymmetrisches Design-Raster umsetzen könnte, die meisten Designs sind ja mit symmetrischen Spalten aufgeteilt, aber immerhin besser als gar kein Raster. Hatte ich erwähnt, dass man mit Singularity auch sowas machen kann:

$grids: 55px 55px 55px 55px 55px 55px 55px 55px 55px 55px 55px 55px 55px 55px 55px;

Nicht? Jetzt aber. ;)

Nutzt ihr andere Grid-Systeme und welche Erfahrungen habt ihr damit?

6 thoughts on “Individuelle responsive Gridsysteme mit Sass”

  1. Hi, danke für diesen Überblick.
    Das mit dem „compound-grid“ in Singularity interessiert mich sehr.
    Momentan wurstele ich mit Susy rum und bin ziemlich angetan vom schmalen Fussabdruck – verglichen mit zb Foundation, wobei der Vergleich nicht ganz fair ist, da bei Foundation ja schon allerhand Funktionalitäten out of the Box mitgeschleppt werden, die man bei Verwendung von Susy erst selbst einbauen müsste.
    Singularity schaue ich mir definitiv als nächstes an.

  2. Ich nutze – wenn es geht – immer YAML. Das liefert schon ein prozentual aufgebuates Grid mit. Man kann sich aber auch simpel seine eigenen Grids bauen, egal ob händisch oder mit dem SASS-basierten Gridgenerator.

    Allerdings ist der Ansatz bei YAML ein anderer, als bei den hier vorgestellten, denn man bekommt das gesamte Paket an Klassen, ob man sie benötigt oder nicht. Singularity fand ich in der Bedienung sehr charmant. Ist ein anderer Ansatz, aber man kann ihn ohne Probleme mit YAML verknüpfen. Denn auf den Rest des Frameworks möchte ich nicht verzichten, speziell nicht auf den Formularbaukasten.

  3. Ich nutze in der Regel inuit.CSS, welches sehr durchdacht aufgebaut ist.
    Es kommt quasi komplett ohne design, im Gegensatz zu z.b. Bootstrap.

    Inuit.CSS bringt ausserdem ne Menge nützliche helper mit.

  4. Ich habe bis jetzt privat auch mehrfach Inuit.css eingesetzt, möchte mir aber jetzt auch vermehrt andere Systeme ansehen. YAML verwenden wir in der Agentur. Kann es auch empfehlen obwohl ich es teilweise etwas unhandlich empfinde.
    Danke Sven für den Überblick!

Kommentare sind geschlossen.