Willkommen Susy | Databau | Webseiten für Sie aus Berlin

Gridbasierte Layouts sind mittlerweise zu einem quasy Standard in der CSS Welt geworden.
Hierbei denkt man zuerst an vollständige Frameworks wie Bootstrap oder Foundation.
Sie beinhalten ein Grid Sytem, Styles für verschiedenste Html Elemente, sowie Jquery Plugins.
Susy verfolgt einen anderen Ansatz und bietet ein flexibel konfigurierbares Gridsystem ohne den Overhead der großen Frameworks.

Vorteile sind:
umfangreiche Konfigurationsmöglichkeiten
keine zusätzlichen CSS Klassen im HTML Markup.
weniger Overhead

In dieser Anleitung basteln wir uns ein basic Layout mithilfe von Susy:
Voraussetzung:
Programminstallationen( hier für Windows 7 und 10)

Ruby von hier installieren
(bei der Installationsroutine die Umgebungsvariable setzen lassen).
cmd öffnen Ruby version checken: ruby -v
(Sollte eine Fehlermeldung erscheinen: Unable to download data from https://rubygems.org....
muss rubygems aktualisiert werden min Version 2.67 wie das funktioniert steht in diesemArtikel)
sass  compass und susy installieren:
gem install sass compass susy

Los gehts:
Mit Compass ein Projekt anlegen, ins Verzeichnis wechseln und den SCSS Watcher aktivieren:

 compass create susy-test cd susy-test compass watch

Die config.rb nach Wunsch anpassen und folgende Zeile ergänzen:

require 'susy'

Susy in die main scss importieren (zB. sreen.scss)

 @import "susy";

Eine index.html mit folgendem body Inhalt erstellen :

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Susy Erste Schritte</title>
<link rel="stylesheet" href="stylesheets/screen.css">
</head>
<body>
<main>
<header><h1>Hier ist der Header</h1></header>
<article>
<p>Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht
nackt im Raume steht und sich klein und leer vorkommt, springe ich ein:
der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«,
freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen.</p>
<p>Denn esse est percipi - Sein ist wahrgenommen werden. Und weil Sie nun schon die Güte haben, mich ein paar weitere Sätze
lang zu begleiten, möchte ich diese Gelegenheit nutzen, Ihnen nicht nur als Lückenfüller zu dienen, sondern auf etwas hinzuweisen,
das es ebenso verdient wahrgenommen zu werden: Webstandards nämlich.</p>
<p>   Sehen Sie, Webstandards sind das Regelwerk, auf dem Webseiten aufbauen.</p>
</article>
<aside>
<p>So gibt es Regeln für HTML, CSS, JavaScript oder auch XML; Worte, die Sie vielleicht schon einmal
von Ihrem Entwickler gehört haben. Diese Standards sorgen dafür, dass alle Beteiligten aus einer Webseite
den größten Nutzen ziehen.
</p>
</aside>
<footer><h2>Hier ist der Footer</h2></footer>
</main>
</body>
</html>

Wie man sieht, brauchen wir keine extra CSS Klassen um mit Susy unser Grid Layout zu erstellen.
Beginnen wir mit unserem Setup der Seite.
Wir erstellen ein 12 Columns Layout. Die Seite soll 1200px breit sein.
Der Abstand zwischen den Columns soll 25% der Columns-Breite betragen.
Die box-sizing Eigenschaft stellen wir auf border-box.
Dies wird am Anfang der SCSS Datei als ein SASS map ($susy) eingetragen:

$susy: (
columns: 12,
container: 1200px,
gutters: 1/4,
global-box-sizing: border-box
);
@include border-box-sizing;

Zur Veranschaulichung definieren wir einige Hintergrundfarben als SASS Variablen:

/* Wir definieren Variablen */
$color1: #ffffff;
$color2: #e3e3e3;
$color3: #A0D848;
$color4: #7F2653;
$color5: lightblue;

Jetzt erstellen wir das Layout. Der Header und Footer geht über die gesamte Breite.
unser <article>soll 8 Columns einnehmen and <aside> 4 Columns.

Dies erreichen wir, indem wir das span mixin von Susy in unsere SCSS Klassen inkludieren:

article {
@include span(8);
padding: 2em;
background-color: $color3;
}
aside {
@include span(4 last);
padding: 2em;
background-color: $color5;
}

So sieht dann die gesamte SCSS Datei aus:

@import "compass/reset";
@import "susy";
$susy: (
columns: 12,
container: 1200px,
gutters: 1/4,
global-box-sizing: border-box
);
@include border-box-sizing;
/* Wir definieren Variablen */
$color1: #ffffff;
$color2: #e3e3e3;
$color3: #A0D848;
$color4: #7F2653;
$color5: lightblue;
* {
font-family: "Helvetica", sans-serif;
}
main {
@include container;
background-color:$color1;
}
header, article, aside {
margin-bottom: gutter();
}
header {
padding: 2em;
background-color: $color2;
}
article {
@include span(8);
padding: 2em;
background-color: $color3;
}
aside {
@include span(4 last);
padding: 2em;
background-color: $color5;
}
footer {
clear: both;
padding: 2em;
background-color: $color4;
}

Und so sieht das Ergebnis aus:

Susy Layout

Ein Gedanke zu „Willkommen Susy“