Snippets

Daniel Sokolowski Light column gird system

Updated by Daniel Sokolowski
View revision

File light-column-gird-system Modified

  • Ignore whitespace
  • Hide word diff 
     overflow: hidden;
 }*/
 /* use this class to make parent 'wrap' our floated columns */
-.floatWrapFix {
+.column-wrapper {
     overflow: auto;
 }
Updated by Daniel Sokolowski
View revision

File light-column-gird-system Modified

  • Ignore whitespace
  • Hide word diff 
 
 /* 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, ex. in a `row` class div */
-,column-last /* add this class manually to remove padding on right */
+,.column-last /* add this class manually to remove 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 light-column-gird-system Added

  • Ignore whitespace
  • Hide word diff 
+/*
+* Light Column Grid v2016-apr-25
+* ##############################
+*
+* See: https://bitbucket.org/snippets/danielsokolowski/d68x/simple-wrapperless-column-gird-system
+*
+* Example:
+*
+* ```
+* <section class="column 4/12">
+*     ...
+* </section>
+* <section class="column-last width-8/12">
+*      <!-- assuming `display: inline-block` for img-->
+*     <p>
+*        <img class="width-4/12" ... >Lorem lipsum</p>
+*     </p>
+* </section>
+* ```
+*/
+
+
+/*
+* 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 `html` conflicts with your exisiting layout comment it out and add `box-sizing: border-box` to `.cloumn` definition. 
+*/
+html {
+  box-sizing: border-box;
+}
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+
+/*
+* 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 make parent 'wrap' our floated columns */
+.floatWrapFix {
+    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
+,.column-last {
+    float: left;
+    padding-right: 1em;
+    /*box-sizing: border-box;*/
+}
+
+/* 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, ex. in a `row` class div */
+,column-last /* add this class manually to remove padding on right */
+,.width-12\/12 /* full width column should not have padding on right */
+{
+    padding-right: 0;
+}
+
+.width-1\/12 {
+    width: calc(100% / 12)
+}
+
+.width-2\/12 {
+    width: calc(200% / 12)
+}
+
+.width-3\/12 {
+    width: calc(300% / 12)
+}
+
+.width-4\/12 {
+    width: calc(400% / 12);
+}
+
+.width-5\/12 {
+    width: calc(500% / 12)
+}
+
+.width-6\/12 {
+    width: calc(600% / 12)
+}
+
+.width-7\/12 {
+    width: calc(700% / 12)
+}
+
+.width-8\/12 {
+    width: calc(800% / 12)
+}
+
+.width-9\/12 {
+    width: calc(900% / 12)
+}
+
+.width-10\/12 {
+    width: calc(1000% / 12)
+}
+
+.width-11\/12 {
+    width: calc(1100% / 12)
+}
+
+.width-12\/12 {
+    width: 100%
+}

File simple-wrapperless-grid-system.css Deleted

  • Ignore whitespace
  • Hide word diff 
-/*
-* Light Column Grid v2016-apr-25
-* ##############################
-*
-* See: https://bitbucket.org/snippets/danielsokolowski/d68x/simple-wrapperless-column-gird-system
-*
-* Example:
-*
-* ```
-* <section class="column 4/12">
-*     ...
-* </section>
-* <section class="column-last width-8/12">
-*      <!-- assuming `display: inline-block` for img-->
-*     <p>
-*        <img class="width-4/12" ... >Lorem lipsum</p>
-*     </p>
-* </section>
-* ```
-*/
-
-
-/*
-* 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 `html` conflicts with your exisiting layout comment it out and add `box-sizing: border-box` to `.cloumn` definition. 
-*/
-html {
-  box-sizing: border-box;
-}
-*, *:before, *:after {
-  box-sizing: inherit;
-}
-
-
-/*
-* 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 make parent 'wrap' our floated columns */
-.floatWrapFix {
-    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
-,column-last {
-    float: left;
-    padding-right: 1em;
-    /*box-sizing: border-box;*/
-}
-
-/* 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, ex. in a `row` class div */
-,column-last /* add this class manually to remove padding on right */
-,.width-12\/12 /* full width column should not have padding on right */
-{
-    padding-right: 0;
-}
-
-.width-1\/12 {
-    width: calc(100% / 12)
-}
-
-.width-2\/12 {
-    width: calc(200% / 12)
-}
-
-.width-3\/12 {
-    width: calc(300% / 12)
-}
-
-.width-4\/12 {
-    width: calc(400% / 12);
-}
-
-.width-5\/12 {
-    width: calc(500% / 12)
-}
-
-.width-6\/12 {
-    width: calc(600% / 12)
-}
-
-.width-7\/12 {
-    width: calc(700% / 12)
-}
-
-.width-8\/12 {
-    width: calc(800% / 12)
-}
-
-.width-9\/12 {
-    width: calc(900% / 12)
-}
-
-.width-10\/12 {
-    width: calc(1000% / 12)
-}
-
-.width-11\/12 {
-    width: calc(1100% / 12)
-}
-
-.width-12\/12 {
-    width: 100%
-}
Updated by Daniel Sokolowski
View revision

File simple-wrapperless-grid-system.css Modified

  • Ignore whitespace
  • Hide word diff 
 * <section class="column 4/12">
 *     ...
 * </section>
-* <section class="column width-8/12">
+* <section class="column-last width-8/12">
 *      <!-- assuming `display: inline-block` for img-->
 *     <p>
 *        <img class="width-4/12" ... >Lorem lipsum</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;
 *
 * Class name leverage escaping of characters - see: https://mathiasbynens.be/notes/css-escapes, Note that these can be used without the column class 
 */
-.column {
+.column
+,column-last {
     float: left;
     padding-right: 1em;
     /*box-sizing: border-box;*/
 
 /* 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, ex. in a `row` class div */
-,column.last /* add this class manually to remove padding on right */
+,column-last /* add this class manually to remove 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 
 */
 
 /* 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;
  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.