Spartan – Next Generation Grid System

Spartan ist ein simples und doch extrem flexibles LessCSS Grid System, welches einem ermöglicht mit Leichtigkeit verschiedenste responsive Layouts aufzusetzen.

Egal was der Designer einem präsentiert, mit diesem Grid lässt sich alles umsetzen. Ob viewport abhängige Gutter oder sogar unterschiedliche Anzahl Columns, Spartan sind keine Grenzen gesetzt.

Dynamische online Demo.

Spartan unterstützt alle Features üblicher Grid Systeme wie Twitter Bootstrap oder Foundation, versucht dabei aber das generierte CSS so skalierbar wie möglich zu halten. Das heisst: je simpler das Grid, desto weniger CSS. Dabei reden wir von einem basis Grid CSS, welches mit 1.8KB 6 mal kleiner als das von Twitter Bootstrap ist.

Wieso ein neues Grid System?

Die ursprüngliche Idee für dieses System entstand aus einem Projekt, in dem ein Mix aus Design- und Technik-Anforderungen ein fluides, responsive Grid erforderte, welches rein durch HTML Klassen oder auch less Mixins implementierbar sein sollte.

Da keines der zu dieser Zeit gängigen Grid Systeme diese Anforderungen zu erfüllen schienen, entwickelten wir speziell für das Projekt ein eigenes System. Durch die Anwendung in weiteren Projekten wurde das Grid immer umfangreicher und praxisorientiert verbessert.

Spartan fungiert als standalon Grid System, weshalb auch darauf geachtet wird, dass die generierten Klassen möglichst konfliktfrei und vor allem konfigurierbar sind.

Die Struktur

Das Grid nutzt ein überschaubares System aus einem Container (.g-row) und einer variablen Anzahl Columns (.g-col) für das Markup.

<div class="g-row">
    <div class="g-col g-span-6"></div>
    <div class="g-col g-span-6"></div>
</div>

Jede Column besitzt ein linkes Padding für das Gutter, welches auf dem Container durch ein entsprechendes negatives Margin ausgeglichen wird, somit kann das Gutter unabhängig vom allgemeinen Grid fluid oder statisch sein. Ausserdem werden kurze, prägnante Klassennamen verwendet, welche eine intuitive Verwendung sichern.

Beispiel: fluides 12-Column Grid

1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
3
3
3
3
4
4
4
6
6
12

Das Setup

Spartan stellt ein Mixin bereit, über welches das Grid erzeugt wird:

@grid-config: 'fluid', 940px, 20px, 'fluid', 12;
// generate a complete grid
.grid-bundle(@config: @grid-config);

Das bedeutet, dass man Spartan als Library auch in seinem Projekt integrieren kann, ohne irgend etwas zu konfigurieren, in einem automatisierten Build wird kein Fehler ausgegeben oder standard CSS generiert. Erst wenn man das Setup Mixin verwendet, kommt Spartan auch zum Einsatz.

In diesem einfachen Beispiel muss die Konfiguration übrigens als @config benannt werden, da das Mixin einen optionalen Parameter zum Anpassen des Grid Prefixes zulässt, mehr dazu findet man im Readme auf GitHub.

Die Klassen und Mixins

Es sind 4 globale Mixins zur Verfügung gestellt, die im Grunde auch von den generierten Klassen verwendet werden:

.grid-span([num]), .g-span-[num]
.grid-offset([num]), .g-offset-[num]
.grid-push([num]), .g-push-[num]
.grid-pull([num]), .g-pull-[num]

Für jedes Mixin gilt: man kann jede beliebige Gleitkommazahl mitgeben und somit auch Columns generieren, welche z.B. 3.5 Column-Breiten einnehmen.

grid-span

Mit diesem Mixin definiert man die Breite einer Grid Column. Zur Berechnung der Breite orientiert sich das System an der Maximalbreite des Grids und der gesamten Anzahl Columns.

grid-offset

Offset wird genutzt, um eine Column um einen bestimmten Wert einzurücken. Hierbei wird ganz einfach das linke Margin der aktuellen Column erhöht, womit das Gutter trotzdem unabhängig vom Grid fluid oder statisch bleiben kann.

<div class="g-row">
    <div class="g-col g-span-6 g-offset-6"></div>
    <div class="g-col g-span-4 g-offset-4"></div>
</div>
span 6 offset 6
span 4 offset 4

grid-push und grid-pull

Diese beiden Mixins sind etwas spezieller. Damit sie funktionieren wird auf dem umgebenden Container zusätzlich die Klasse .g-reorder benötigt. Anschliessend können die Columns mittels grid-push und grid-pull frei umsortiert werden, ohne dass die HTML Struktur angepasst wird. Zu beachten ist, dass die Columns durch das umpositionieren keinen Einfluss aufeinander nehmen, sondern immer von der ursprünglichen Position ausgegangen wird.

Ein Beispiel, Columns werden visuell vertauscht:

<div class="g-row g-reorder">
    <div class="g-col g-span-6 g-push-6"></div>
    <div class="g-col g-span-6 g-pull-6"></div>
</div>
column 1
column 2

Responsive Layouts

Hier hat Spartan einen etwas anderen Ansatz als andere Grid Systeme: statt einen Haufen von Klassen für eine vordefinierte Anzahl Viewports zu generieren mit denen man das Grid baut, geht es von wiederverwendbaren Grid Layouts aus, welche man sich selbst zusammenstellt. Gerade dadurch wird das output CSS stark reduziert, denn es wird nur generiert, was auch tatsächlich verwendet wird.

Spartan bietet grundsätzlich zwei mixin an, um schnell responsive Layouts aufzusetzen:

.col-set();
.col-set-equal();

Mit diesen lässt sich zum Beispiel ganz einfach folgendes Layout definieren:

// maximum columns: 12
.g-layout-1 {
    // 2 columns in small screen
    @media @m-small {
        .col-set-equal(6);
    }
    // 3 columns in medium screen
    @media @m-medium {
        .col-set-equal(4);
    }
    // 4 columns in large screen
    @media @m-large {
        .col-set-equal(3);
    }
}

Die Variabeln @m-small, @m-medium und @m-large sind natürlich globale Variabeln, welche mit den entsprechenden Media Queries abgefüllt sind.

Die Verwendung des selben:

<div class="g-row g-layout-1">
    <div class="g-col"></div>
    <div class="g-col"></div>
    <div class="g-col"></div>
    <div class="g-col"></div>
</div>
column 1
column 2
column 3
column 4

Wie man sieht, brauchen die Grid Columns nur noch eine einzige Klasse, da alles bereits über das Layout definiert ist.

Wiederverwendbar, Flexibel, Effizient, Überschaubar, Dokumentierbar.

Hinweis: Es ist noch ein .g-layout-2 definiert, du kannst mit z.B. Firebug einfach die Klasse Wechseln und siehst direkt wie es sich verändert!

Weitere Beispiele sind im GitHub Repo hinterlegt.

Erweiterte Anwendung

Spartan bietet neben der hier beschriebenen, einfachen Verwendung noch einige zusätzliche Features, welche unter anderem in der Advanced Usage Section auf GitHub beschrieben sind.

So lassen sich zum Beispiel dank erweiterten Setup Mixins sogar Viewport oder Section abhängige Grid Konfigurationen aufsetzen.

Fazit

Spartan kam bereits in verschiedensten Projekten zur Anwendung, wobei es sich stetig verbessert und als multifunktionales Grid System bewährt hat.

Durch die intuitive Anwendung und einfachem Wechsel zwischen responsive Layouts ermöglicht es schnellstes Prototyping. Zudem ist so das gesamte Setup von Layouts im Voraus möglich und lässt sich gut im Frontend Dokumentieren.

Vollkommen egal wie das Design aussieht, Spartan kann es umsetzen!

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

*

*

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>