dekugrid: multiple implementations of the Deco Grid System

commit: f5ec144ac55aed78cd728eef071bdb5a6aa6c3e5
parent: fe910f2c48c81a232ea7d9a6ffe39bd985853c31
Author: Tobias Bengfort <tobias.bengfort@gmx.net>
Date: 2014-01-16 09:25

update example-12.html

Diffstat

example-12.html

+++++++------------------------------------------------------

1 files changed, 7 insertions, 58 deletions

diff --git a/example-12.html b/example-12.html

@@ -8,17 +8,17 @@
    8     8    Not part of the grid system. */
    9     9 * { margin:0; padding: 0; }
   10    10 body { font: 0.825em Helvetica, Arial, sans-serif; line-height: 1.5em;}
   11    -1 div.row { margin-top: 1em inherit; margin-bottom: 1em; padding-left: 10px; }
   -1    11 div.row { margin-top: 1em inherit; margin-bottom: 1em; padding: 0 10px; box-sizing: border-box; }
   12    12 div.cell {text-align: center; padding: 1em 0; background-color: #ccc; }
   13    13 h1, h2 { letter-spacing: -0.05em; margin: 10px; text-align: justify; line-height: 1.25em;}
   14    14 /* Uncomment the below line to test the fixed-width version, 60em = 960px: */
   15    15 /* body { width: 960px; margin: 0 auto;} */
   16    16 
   17    17 /* Another approach is to make sure the page never exceeds 960px, but scales down */
   18    -1  body { max-width: 960px; margin: 0 auto;} 
   -1    18  body { max-width: 960px; margin: 0 auto;}
   19    19 
   20    20 /* Uncomment the below to show the grid background, only makes sense at 960px */
   21    -1  div.grid-background { background: url(images/12-col.png) repeat scroll 0 0 #eef; padding: 1em 0; }  
   -1    21  div.grid-background { background: url(images/12-col.png) repeat scroll 0 0 #eef; padding: 1em 0; }
   22    22 
   23    23 </style>
   24    24 
@@ -30,8 +30,8 @@ h1, h2 { letter-spacing: -0.05em; margin: 10px; text-align: justify; line-height
   30    30 <body>
   31    31 <div class="grid-background"> <!-- Dummy element to show the grid background -->
   32    32 
   33    -1 <h1>Basic 12-column grid demo, showing some common combinations. 
   34    -1 Lock page width to 960px for a good fixed version, 
   -1    33 <h1>Basic 12-column grid demo, showing some common combinations.
   -1    34 Lock page width to 960px for a good fixed version,
   35    35       where each cell will be 60px with 20px column margins.</h1>
   36    36 
   37    37 <div class="row">
@@ -88,64 +88,14 @@ Lock page width to 960px for a good fixed version,
   88    88 <div class="row">
   89    89 	<div class ="cell width-6 position-0">01</div>
   90    90 	<div class ="cell width-6 position-6">02</div>
   91    -1 </div>                   
   92    -1                          
   93    -1 <div class="row">        
   94    -1 	<div class ="cell width-12 position-0">01</div>
   95    -1 </div>
   96    -1 
   97    -1 <h1>Convenience classes — ¼, ½, ¾ widths and ¼, ½, ¾ positions.
   98    -1 Not strictly necessary, but included for your use if you want them.</h1>
   99    -1 
  100    -1 <div class="row">
  101    -1 	<div class ="cell width-1:2 position-0">01</div>
  102    -1 	<div class ="cell width-1:2 position-1:2">02</div>
  103    -1 </div>                   
  104    -1 
  105    -1 <div class="row">
  106    -1 	<div class ="cell width-1:4 position-0">01</div>
  107    -1 	<div class ="cell width-1:4 position-1:4">02</div>
  108    -1 	<div class ="cell width-1:4 position-1:2">03</div>
  109    -1 	<div class ="cell width-1:4 position-3:4">04</div>
  110    -1 </div>
  111    -1 
  112    -1 <div class="row">
  113    -1 	<div class ="cell width-1:4 position-0">01</div>
  114    -1 	<div class ="cell width-1:2 position-1:4">02</div>
  115    -1 	<div class ="cell width-1:4 position-3:4">04</div>
  116    -1 </div>
  117    -1 
  118    -1 <div class="row">
  119    -1 	<div class ="cell width-1:4 position-0">01</div>
  120    -1 	<div class ="cell width-3:4 position-1:4">02</div>
  121    -1 </div>
  122    -1 
  123    -1 <div class="row">
  124    -1 	<div class ="cell width-3:4 position-0">01</div>
  125    -1 	<div class ="cell width-1:4 position-3:4">02</div>
  126    -1 </div>
  127    -1 
  128    -1 <h1>Convenience classes for ⅓, ⅔ widths and ⅓, ⅔ positions.
  129    -1 Not strictly necessary, but included for your use if you want them.</h1>
  130    -1 
  131    -1 <div class="row">
  132    -1 	<div class ="cell width-1:3 position-0">01</div>
  133    -1 	<div class ="cell width-1:3 position-1:3">02</div>
  134    -1 	<div class ="cell width-1:3 position-2:3">03</div>
  135    -1 </div>
  136    -1 
  137    -1 <div class="row">
  138    -1 	<div class ="cell width-1:3 position-0">01</div>
  139    -1 	<div class ="cell width-2:3 position-1:3">02</div>
  140    91 </div>
  141    92 
  142    93 <div class="row">
  143    -1 	<div class ="cell width-2:3 position-0">01</div>
  144    -1 	<div class ="cell width-1:3 position-2:3">02</div>
   -1    94 	<div class ="cell width-12 position-0">01</div>
  145    95 </div>
  146    96 
  147    97 <p style="text-align: center">Created by <a href="http://limi.net/">Alexander Limi</a>. Placed in the Public Domain.</p>
  148    98 
  149    99 </div>
  150   100 </body>
  151    -1 </html
  151    -1 
\ No newline at end of file
   -1   101 </html>