JEET ist ein flexibles Gridsystem, welches keine Grideigenschaften in die Klassennamen schreibt, wie man es von anderen Grid Systemen gewohnt ist. Dadurch bleibt das HTML auf das Wesentliche reduziert.
Zu Beginn werden wir uns das Framework installieren.
Installation
nodejs runterladen und installieren.
windows > Ausführen > „cmd“ (Eingabeaufforderung unter Windows öffnen)
Infos zu JEET.
(Eingabe) C:Program Filesnodejs>npm install -g jeet (Ausgabe) jeet@6.1.2 C:UsersBENUTZERAppDataRoamingnpmnode_modulesjeet |
Projekt testen
Auch in diesem Beitrag verwende ich Koala, um die SCSS Files in das Browser-lesbare CSS umwandeln zu lassen.
Die HTML und SCSS Datei lege ich unter jeetscss ab. (Mann kann das Jeet auch mit Stylus verwenden. Darauf werde ich aber nicht eingehen. Wir bleiben beim SCSS.)
HTML:
<html> <head> <link href="01.css" rel="stylesheet" type="text/css"> </head> <body> <section> <div>block1</div> <div>block2</div> <div>block3</div> <div>block4</div> <div>block5</div> <div>block6</div> <div>block7</div> <div>block8</div> </section> </body> </html> |
SCSS (01.scss):
@import "jeet/index";
@include edit(blue); // Grid Visualisierung
section {
@include center(900px);
}
div {
@media screen and (min-width: 400px) {
@include span(1/2, $cycle: 2);
}
@media screen and (min-width: 700px) {
@include col(1/4, $cycle: 4, $uncycle: 2);
}
} |
In diesem Beispiel wird aus einer zentrierten 8er Liste in breiter Darstellung ein 4er Raster. Bei Breiten-Verkleinerung anschließend ein 2er und ein 1er.
In Koala das Verzeichnis dieser Dateien auswählen und kompilieren.
Hier hab ich mal ein paar Dokumentationen und Demos aufgeführt – ansonsten googeln 😉
Dokumentationen:
Beispiele: