skeleton.css - Das Skelett mit Stil
skeleton.css wird unverändert eingesetzt. Im folgenden beschreiben ich
Punkte meines spezifischen Stylesheets mit der ich den Skeleton-Stil ergänze oder verändere.
Das Gitter
Der "mobile first" Ansatz ist einer der Gründe, warum ich Skeleton verwende. Die "desktop wastes" Philosopie ist aber nicht so die Meine.
.container {
max-width: none;
}
Skeleton verwendet ein 12-spaltiges Raster, welches über media-query gleichmässig schrumpft oder sich auf kleinen Mobilgeräten auflöst.
Den durch Zurücksetzung von max-width gewonnenen Platz möchte ich auf meiner Startseite
und auf Eltern-Seiten durch einen "zweiseitigen" Aufbau nutzen. Im Spektrum
des verfügbaren Bildschirmangebotes soll die rechte Hälfte bei Verknappung aber eher nachgeben
als die linke.
.area {
width: 100%;
float: left;
box-sizing: border-box;
}
/* Larger than mobile */
@media ( min-width : 400px) {}
/* Larger than phablet (also point when grid becomes active) */
@media ( min-width : 550px) {
.area { margin-left: 4%; }
.area:first-child { margin-left: 0; }
.left.area { width: 65.3333333333%; }
.right.area { width: 30.6666666667%; }
}
/* Larger than tablet */
@media ( min-width : 750px) {}
/* Larger than desktop */
@media ( min-width : 1000px) {
.left.area { width: 48%; }
.right.area { width: 48%; }
}
/* Larger than Desktop HD */
@media ( min-width : 1200px) {}