Snippets

Daniel Sokolowski Light column gird system

Updated by Daniel Sokolowski

File light-column-gird-system Modified

  • Ignore whitespace
  • Hide word diff
 /*
-* Light Column Grid v2016-aug-23
-* ##############################
-*
-* *TODO*: re-write to use flex display model to avoid the 'white space' (https://css-tricks.com/fighting-the-space-between-inline-block-elements/) problem using `display: inline-block`.
-*
-* See: https://bitbucket.org/snippets/danielsokolowski/d68x/light-column-gird-system
-*
-* Example:
-*
-* ```
-* <div class="column-wrapper">
-*    <section class="column width-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>
-* </div>
-* ```
+Light Column Grid v2016-aug-23
+##############################
+
+See: https://bitbucket.org/snippets/danielsokolowski/d68x/light-column-gird-system
+
+Example:
+
+```
+<div class="column-wrapper">
+   <section class="column width-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>
+</div>
+```
+
+Contributions: 
+
+- 'Stu Cameron' (https://bitbucket.org/stucameron/) : flex box grid
+
 */
 
 
 /*
-* 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. 
+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 uncomment `box-sizing: border-box` in the `.cloumn` definition. 
 */
 html {
   box-sizing: border-box;
 }
 
 
-/*
-* 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 `.column-wrapper`
-DS,2106-Apr-27-0135: changed to `visible` as popup menus fail to show
-DS,2106-Apr-27-0138: since we should always use column-wrapper to clear columns we might as well avoid the below css
-DS,2106-Apr-27-0152: `visible` causes elements with items bigger then 100% to create a horziontal scroll bar 
+* 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 
 */
-/*body * {
-    overflow: visible;
-}*/
-
-/* use this class to make parent 'wrap' our floated columns and clear the column rows */
 .column-wrapper {
-    overflow: hidden;
-    clear: both;
+    display: flex;
+    flex-wrap: wrap;
+    margin-left: -1em;  
+    margin-right: -1em; 
 }
 
 
-
-/*
-* 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;
+.column {
+    padding-left: 1em;
     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;
+.column.equalHeights  {
+    display: flex;
 }
 
 .width-1\/12 {
 
 .width-12\/12 {
     width: 100%
-}
-
+}
Updated by Daniel Sokolowski

File light-column-gird-system Modified

  • Ignore whitespace
  • Hide word diff
 * Light Column Grid v2016-aug-23
 * ##############################
 *
-* *TODO*: re-write to use flex display model
+* *TODO*: re-write to use flex display model to avoid the 'white space' (https://css-tricks.com/fighting-the-space-between-inline-block-elements/) problem using `display: inline-block`.
 *
 * See: https://bitbucket.org/snippets/danielsokolowski/d68x/light-column-gird-system
 *
Updated by Daniel Sokolowski

File light-column-gird-system Modified

  • Ignore whitespace
  • Hide word diff
 /*
-* Light Column Grid v2016-apr-25
+* Light Column Grid v2016-aug-23
 * ##############################
 *
+* *TODO*: re-write to use flex display model
+*
 * See: https://bitbucket.org/snippets/danielsokolowski/d68x/light-column-gird-system
 *
 * Example:
Updated by Daniel Sokolowski

File light-column-gird-system Modified

  • Ignore whitespace
  • Hide word diff
 * Example:
 *
 * ```
-* <section class="column width-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>
+* <div class="column-wrapper">
+*    <section class="column width-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>
+* </div>
 * ```
 */
 
Updated by Daniel Sokolowski

File light-column-gird-system Modified

  • Ignore whitespace
  • Hide word diff
 * Example:
 *
 * ```
-* <section class="column 4/12">
+* <section class="column width-4/12">
 *     ...
 * </section>
 * <section class="column-last width-8/12">
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
HTTPS SSH

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