skeleton.css - The Skeleton with Style
skeleton.css is used unchanged. Following I describe the settings
in my customized stylesheet that overwrite or ammend skeleton styles.
The Grid
The "mobile first" approach is one of the reasons I choose skeleton for. The "desktop wastes monitor estate" philosophy though does not convince me.
.container {
max-width: none;
}
Skeleton uses a 12 column grid which shrinks gradually through media-queries or dissolves on smaler devices.
The space gained by resetting max-width I use for a "two-page" layout on the landing
page and for parent pages.
But through the range of possible devices the right area is supposed to give in twice as fast as
the left area.
.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) {}