Snippets

Daniel Sokolowski Light column gird system

Updated by Daniel Sokolowski
View revision

File simple-wrapperless-grid-system.css Modified

  • Ignore whitespace
  • Hide word diff 
 *     ...
 * </section>
 * <section class="column width-8/12">
-      <!-- assuming `display: inline-block` for img-->
+*      <!-- assuming `display: inline-block` for img-->
 *     <p>
 *        <img class="width-4/12" ... >Lorem lipsum</p>
 *     </p>
 */
 
 /* DS,2016-Apr-26: more testing for below is needed, but if it is too aggresive in your existing style comment it out and use `.floatWrapFix` */
-body * {
+/*body * {
     overflow: hidden;
-}
+}*/
 /* use this class to make parent 'wrap' our floated columns */
 .floatWrapFix {
     overflow: auto;
 }
 
 /* our last column in a row should not have right padding */
-.column:last-of-type /* automatically handles a case where all columns add up to 100% in one wrapping element */
+.column:last-of-type /* automatically handles a case where all columns add up to 100% in one wrapping element, ex. in a `row` class div */
 ,column.last /* add this class manually to remove padding on right */
-,.width-12\/12 /* full widht column should not have padding on right */
+,.width-12\/12 /* full width column should not have padding on right */
 {
     padding-right: 0;
 }
Updated by Daniel Sokolowski
View revision

File simple-wrapperless-grid-system.css Modified

  • Ignore whitespace
  • Hide word diff 
 /*
-* Light Column Grid v2016-apr-22
-* ==============================
+* Light Column Grid v2016-apr-25
+* ##############################
 *
 * See: https://bitbucket.org/snippets/danielsokolowski/d68x/simple-wrapperless-column-gird-system
 *
 */
 
 
-
 /*
+* Make padding grow in-ward
+* =========================
+*
 * Apply a natural box layout model to all elements, but allowing components to change, which is
 * required for our column (`width-*`) classes to ensure padding does not effect their total width.
 *
-* If below conflicts with your exisiting layout comment it out and add `box-sizing: border-box` to '.cloumn' definition. 
-* 
+* If below `html` conflicts with your exisiting layout comment it out and add `box-sizing: border-box` to `.cloumn` definition. 
 */
 html {
   box-sizing: border-box;
 }
 
 
-/* DS,2016-Apr-26: more testing for below is needed, but if it is too aggresive comment it out and use .floadWrapFix */
+/*
+* Automatically make elements that wrap our columns grow
+* ======================================================
+*/
+
+/* DS,2016-Apr-26: more testing for below is needed, but if it is too aggresive in your existing style comment it out and use `.floatWrapFix` */
 body * {
     overflow: hidden;
 }
-
-/* use this class to fix the parent to 'wrap' floated elements it contains */
+/* use this class to make parent 'wrap' our floated columns */
 .floatWrapFix {
-    overflow: hidden;
+    overflow: auto;
 }
 
+
+/*
+* The 12 column based grid
+*
+* Class name leverage escaping of characters - see: https://mathiasbynens.be/notes/css-escapes, Note that these can be used without the column class 
+*/
 .column {
     float: left;
     padding-right: 1em;
     padding-right: 0;
 }
 
-
-
-
-/* Below selectors leverage escaping characters - see: https://mathiasbynens.be/notes/css-escapes,
-Note that these can be used without the column class */
 .width-1\/12 {
     width: calc(100% / 12)
 }
Updated by Daniel Sokolowski
View revision

File simple-wrapperless-grid-system.css Modified

  • Ignore whitespace
  • Hide word diff 
 /*
-* Wrapperless Grid v2016-apr-22
-* =============================
+* Light Column Grid v2016-apr-22
+* ==============================
 *
 * See: https://bitbucket.org/snippets/danielsokolowski/d68x/simple-wrapperless-column-gird-system
 *
 
 /*
 * Apply a natural box layout model to all elements, but allowing components to change, which is
-* required for our column (`width-*`) classes to ensure padding does not effect their total width
+* required for our column (`width-*`) classes to ensure padding does not effect their total width.
+*
+* If below conflicts with your exisiting layout comment it out and add `box-sizing: border-box` to '.cloumn' definition. 
+* 
 */
 html {
   box-sizing: border-box;
 }
 
 
-/* more testing for below is needed, but if it is too aggresive comment it out and use .floadWrapFix */
+/* DS,2016-Apr-26: more testing for below is needed, but if it is too aggresive comment it out and use .floadWrapFix */
 body * {
     overflow: hidden;
 }
 
 /* use this class to fix the parent to 'wrap' floated elements it contains */
 .floatWrapFix {
-    overflow: auto;
+    overflow: hidden;
 }
 
 .column {
     float: left;
     padding-right: 1em;
-    box-sizing: border-box;
+    /*box-sizing: border-box;*/
 }
 
-.column:last-of-type {
+/* our last column in a row should not have right padding */
+.column:last-of-type /* automatically handles a case where all columns add up to 100% in one wrapping element */
+,column.last /* add this class manually to remove padding on right */
+,.width-12\/12 /* full widht column should not have padding on right */
+{
     padding-right: 0;
 }
 
 
 
+
 /* Below selectors leverage escaping characters - see: https://mathiasbynens.be/notes/css-escapes,
 Note that these can be used without the column class */
 .width-1\/12 {
Updated by Daniel Sokolowski
View revision

File simple-wrapperless-grid-system.css Modified

  • Ignore whitespace
  • Hide word diff 
 }
 
 
+/* more testing for below is needed, but if it is too aggresive comment it out and use .floadWrapFix */
+body * {
+    overflow: hidden;
+}
 
 /* use this class to fix the parent to 'wrap' floated elements it contains */
 .floatWrapFix {
Updated by Daniel Sokolowski
View revision

File simple-wrapperless-grid-system.css Modified

  • Ignore whitespace
  • Hide word diff 
 /*
-Simple wrapperless column gird system
---------------------------------------
-
-Example:
-
-```
-<section class="column 4/12">
-	...
-</section>
-<section class="column 8/12">
-	<div class="6/12" ... >
-		<img class="4/12" ... >
-	</div>
-</section>
-```
-
-IMPRV: should we change naming to something like `4-twelfths`, or `4-12ths`?
+* Wrapperless Grid v2016-apr-22
+* =============================
+*
+* See: https://bitbucket.org/snippets/danielsokolowski/d68x/simple-wrapperless-column-gird-system
+*
+* Example:
+*
+* ```
+* <section class="column 4/12">
+*     ...
+* </section>
+* <section class="column width-8/12">
+      <!-- assuming `display: inline-block` for img-->
+*     <p>
+*        <img class="width-4/12" ... >Lorem lipsum</p>
+*     </p>
+* </section>
+* ```
 */
 
+
+
+/*
+* Apply a natural box layout model to all elements, but allowing components to change, which is
+* required for our column (`width-*`) classes to ensure padding does not effect their total width
+*/
+html {
+  box-sizing: border-box;
+}
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+
+
+/* use this class to fix the parent to 'wrap' floated elements it contains */
 .floatWrapFix {
-	overflow: auto; /* use this class to fix the parent to 'wrap' foated elements it contains */
+    overflow: auto;
 }
 
 .column {
-	float: left;
-	padding-right: 1em;
-	box-sizing: border-box;
+    float: left;
+    padding-right: 1em;
+    box-sizing: border-box;
 }
 
 .column:last-of-type {
-	padding-right: 0;
+    padding-right: 0;
 }
 
 
-/* below selectors leverage escaping characters - see: https://mathiasbynens.be/notes/css-escapes */
-.\31\/12 { /* `.1/12` */
-	width: calc(100% / 12)
+
+/* Below selectors leverage escaping characters - see: https://mathiasbynens.be/notes/css-escapes,
+Note that these can be used without the column class */
+.width-1\/12 {
+    width: calc(100% / 12)
 }
 
-.\32\/12 { /* `.2/12` */
-	width: calc(200% / 12)
+.width-2\/12 {
+    width: calc(200% / 12)
 }
 
-.\33\/12 { /* `.3/12` */
-	width: calc(300% / 12)
+.width-3\/12 {
+    width: calc(300% / 12)
 }
 
-.\34\/12 { /* `.4/12` */
-	 width: calc(400% / 12);}
+.width-4\/12 {
+    width: calc(400% / 12);
+}
 
-.\35\/12 { /* `.5/12` */
-	width: calc(500% / 12)
+.width-5\/12 {
+    width: calc(500% / 12)
 }
 
-.\36\/12 { /* `.6/12` */
-	width: calc(600% / 12)
+.width-6\/12 {
+    width: calc(600% / 12)
 }
 
-.\37\/12 { /* `.7/12` */
-	width: calc(700% / 12)
+.width-7\/12 {
+    width: calc(700% / 12)
 }
 
-.\38\/12 { /* `.8/12` */
-	width: calc(800% / 12)
+.width-8\/12 {
+    width: calc(800% / 12)
 }
 
-.\39\/12 { /* `.9/12` */
-	width: calc(900% / 12)
+.width-9\/12 {
+    width: calc(900% / 12)
 }
 
-.\31\30\/12 { /* `.10/12` */
-	width: calc(1000% / 12)
+.width-10\/12 {
+    width: calc(1000% / 12)
 }
 
-.\31\31\/12 { /* `.11/12` */
-	width: calc(1100% / 12)
+.width-11\/12 {
+    width: calc(1100% / 12)
 }
 
-.\31\32\/12 { /* `.12/12` */
-	width: 100%
+.width-12\/12 {
+    width: 100%
 }
  2. 1
  3. 2
  4. 3
  5. 4
  6. 5
  7. 6
  8. 7
HTTPS SSH

You can clone a snippet to your computer for local editing. Learn more.