Snippets

Daniel Sokolowski Light column gird system

Updated by Daniel Sokolowski

File light-column-gird-system Modified

  • Ignore whitespace
  • Hide word diff
 /* on mobile devices go full width for all columns sizes */
 @media only screen and (max-width: 425px) {
     .column {
-        width: 100%
-        padding-left: 5px;
-        padding-right: 5px;
+        width: 100%;
+        padding-left: 10px;
+        padding-right: 10px;
     }
 }
Updated by Daniel Sokolowski

File light-column-gird-system Modified

  • Ignore whitespace
  • Hide word diff
 
 .width-12\/12 {
     width: 100%
+}
+
+/* on mobile devices go full width for all columns sizes */
+@media only screen and (max-width: 425px) {
+    .column {
+        width: 100%
+        padding-left: 5px;
+        padding-right: 5px;
+    }
 }
Updated by Daniel Sokolowski

File light-column-gird-system Modified

  • Ignore whitespace
  • Hide word diff
 
 See: https://bitbucket.org/snippets/danielsokolowski/d68x/light-column-gird-system
 
+TODO,Jun-13: possibly rather then negative margins use calc and space-between to avoid issues with horizontal scroll on small devices, see: https://stackoverflow.com/questions/20626685/better-way-to-set-distance-between-flexbox-items
+
 Example:
 
 ```
    </div>
 </div>
 ```
-
-Contributions: 
-
-- 'Stu Cameron' (https://bitbucket.org/stucameron/) : flex box grid
-
 */
 
 
 
 
 .column {
-    margin-left: 1em;
-    margin-right: 1em;
+    padding-left: 1em;
+    padding-right: 1em;
     /*box-sizing: border-box;*/
 }
 
Updated by Daniel Sokolowski

File light-column-gird-system Modified

  • Ignore whitespace
  • Hide word diff
 /*
-Light Column Grid v2016-oct-20
+Light Column Grid v2017-May-04
 ##############################
 
 See: https://bitbucket.org/snippets/danielsokolowski/d68x/light-column-gird-system
 Example:
 
 ```
-<div class="column-wrapper">
-   <section class="column width-4/12">
+<div class="columnWrapper">
+   <div class="column width-4/12">
       ...
-   </section>
-   <section class="column width-8/12">
+   </div>
+   <div class="column width-8/12">
       <!-- assuming `display: inline-block` for img-->
       <p>
          <img class="width-4/12" ... >Lorem lipsum</p>
       </p>
-   </section>
+   </div>
 </div>
 ```
 
 *
 * Class name leverage escaping of characters - see: https://mathiasbynens.be/notes/css-escapes, Note that these can be used without the column class 
 */
-.column-wrapper {
+.columnWrapper {
     display: flex;
     flex-wrap: wrap;
-    margin-left: -1em;  
-    margin-right: -1em; 
+    margin-left: -1em;
+    margin-right: -1em;
 }
 
 
 .column {
-    padding-left: 1em;
-    padding-right: 1em;
+    margin-left: 1em;
+    margin-right: 1em;
     /*box-sizing: border-box;*/
 }
 
Updated by Daniel Sokolowski

File light-column-gird-system Modified

  • Ignore whitespace
  • Hide word diff
 /*
-Light Column Grid v2016-aug-23
+Light Column Grid v2016-oct-20
 ##############################
 
 See: https://bitbucket.org/snippets/danielsokolowski/d68x/light-column-gird-system
  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.