Integrate skeleton.css's 12-column grid styles.

2025-08-24 14:33:05 +02:00 · 2019-12-24 14:31:14 -08:00
parent 85cdb8d8ee
commit ed56b79db2
1 changed files with 191 additions and 0 deletions
--- a/sscaffold.css
+++ b/sscaffold.css
@@ -595,6 +595,195 @@ main section {



+/******************************************************************************
+*
+*   12 COLUMN GRID
+*
+*   These classes provide the 12-column grid from skeleton.css [6]. skeleton.css
+*   set these columns to only work on displays wider than 550px, so for
+*   compatibility, the same is done here.
+*
+*   The margin-left values are specific to skeleton.css and conflict with
+*   milligram.css's margin-less columns, so that margin is applied only to
+*   elements that match skeleton's selector style.
+* 
+******************************************************************************/
+
+@media (min-width: 550px) {
+
+	.one.column,
+	.one.columns,
+	.two.columns,
+	.three.columns,
+	.four.columns,
+	.five.columns,
+	.six.columns,
+	.seven.columns,
+	.eight.columns,
+	.nine.columns,
+	.ten.columns,
+	.eleven.columns,
+	.twelve.columns,
+	.one-third.column,
+	.two-thirds.column,
+	.one-half.column {
+		margin-left: 4%;
+	}
+
+    .one.column:first-child,
+    .one.columns:first-child,
+    .two.columns:first-child,
+    .three.columns:first-child,
+    .four.columns:first-child,
+    .five.columns:first-child,
+    .six.columns:first-child,
+    .seven.columns:first-child,
+    .eight.columns:first-child,
+    .nine.columns:first-child,
+    .ten.columns:first-child,
+    .eleven.columns:first-child,
+    .twelve.columns:first-child,
+    .one-third.column:first-child,
+    .two-thirds.column:first-child,
+    .one-half.column:first-child {
+    	margin-left: 0;
+    }
+
+	.one.column,
+	.one.columns {
+		width: 4.66666666667%;
+	}
+
+	.two.columns {
+		width: 13.3333333333%;
+	}
+
+	.three.columns {
+		width: 22%;
+	}
+
+	.four.columns {
+		width: 30.6666666667%;
+	}
+
+	.five.columns {
+		width: 39.3333333333%;
+	}
+
+	.six.columns {
+		width: 48%;
+	}
+
+	.seven.columns {
+		width: 56.6666666667%;
+	}
+
+	.eight.columns {
+		width: 65.3333333333%;
+	}
+	
+	.nine.columns {
+		width: 74.0%;
+	}
+
+	.ten.columns {
+		width: 82.6666666667%;
+	}
+
+	.eleven.columns {
+		width: 91.3333333333%;
+	}
+
+	.twelve.columns {
+		width: 100%;
+	}
+
+	.one-third.column {
+		width: 30.6666666667%;
+	}
+
+	.two-thirds.column {
+		width: 65.3333333333%;
+	}
+
+	.one-half.column {
+		width: 48%;
+	}
+
+	.offset-by-one.column,
+	.offset-by-one.columns {
+		margin-left: 8.66666666667%;
+	}
+
+	.offset-by-two.column,
+	.offset-by-two.columns {
+		margin-left: 17.3333333333%;
+	}
+
+	.offset-by-three.column,
+	.offset-by-three.columns {
+		margin-left: 26%;
+	}
+
+	.offset-by-four.column,
+	.offset-by-four.columns {
+		margin-left: 34.6666666667%;
+	}
+
+	.offset-by-five.column,
+	.offset-by-five.columns {
+		margin-left: 43.3333333333%;
+	}
+
+	.offset-by-six.column,
+	.offset-by-six.columns {
+		margin-left: 52%;
+	}
+
+	.offset-by-seven.column,
+	.offset-by-seven.columns {
+		margin-left: 60.6666666667%;
+	}
+
+	.offset-by-eight.column,
+	.offset-by-eight.columns {
+		margin-left: 69.3333333333%;
+	}
+
+	.offset-by-nine.column,
+	.offset-by-nine.columns {
+		margin-left: 78.0%;
+	}
+
+	.offset-by-ten.column,
+	.offset-by-ten.columns {
+		margin-left: 86.6666666667%;
+	}
+
+	.offset-by-eleven.column,
+	.offset-by-eleven.columns {
+		margin-left: 95.3333333333%;
+	}
+
+	.offset-by-one-third.column,
+	.offset-by-one-third.columns {
+		margin-left: 34.6666666667%;
+	}
+
+	.offset-by-two-thirds.column,
+	.offset-by-two-thirds.columns {
+		margin-left: 69.3333333333%;
+	}
+
+	.offset-by-one-half.column,
+	.offset-by-one-half.columns {
+		margin-left: 52%;
+	}
+
+}
+
+
+
 /******************************************************************************
 *
 *   UTILITY CLASSES
@@ -635,6 +824,7 @@ main section {
 */

 html {
+	/* Font size is set to 62.5% so that all future rem sizes are based on a 10px font. [6] */
 	font-size: 62.5%;
 }

@@ -1165,5 +1355,6 @@ select:focus {
 *   [3] https://css-tricks.com/box-sizing/
 *   [4] https://hankchizljaw.com/wrote/a-modern-css-reset/
 *   [5] https://github.com/jgthms/minireset.css/
+*   [6] skeleton.css, https://github.com/dhg/Skeleton
 * 
 ******************************************************************************/