dekugrid

commit

c2aa484d4a14f8ca5d7a4e0284247d69386f8acf

parent

c08c6d381a0fafae622b8af1a55d6b954513f516

Author

Tobias Bengfort <tobias.bengfort@gmx.net>

Date

2014-01-16 09:11

replace classes by SASS mixins

Diffstat

2 files changed, 30 insertions, 76 deletions

diff --git a/decogrid.scss b/decogrid.scss

@@ -0,0 +1,30 @@
   -1     1 /* SASS implementation of the Deco Grid System
   -1     2  * For the original, see <http://limi.net/deco.gs>
   -1     3  */
   -1     4 
   -1     5 /* Modify these to your needs. */
   -1     6 $cols: 12;
   -1     7 $margin: 2.08333%;
   -1     8 
   -1     9 @mixin row {
   -1    10   float: left;
   -1    11   width: 100%;
   -1    12   display: block;
   -1    13   position: relative;
   -1    14 }
   -1    15 @mixin cell {
   -1    16   position: relative;
   -1    17   float: left;
   -1    18   left: 100%;
   -1    19 }
   -1    20 
   -1    21 /* Width mixin. */
   -1    22 @mixin width($n) {
   -1    23   width: $n * (100% + $margin) / $cols - $margin;
   -1    24 }
   -1    25 
   -1    26 /* Positioning mixin, this is subtracting from a rightmost
   -1    27    position, which is why it seem the wrong way around */
   -1    28 @mixin position($n) {
   -1    29   margin-left: -100% + $n * (100% + $margin) / $cols;
   -1    30 }

diff --git a/decogrids-12.css b/decogrids-12.css

@@ -1,76 +0,0 @@
    1    -1 /* The 12-column Deco Grid System. 
    2    -1  * Available in multiple variants, see http://deco.gs
    3    -1  *
    4    -1  * Cells are   6.25%    (=60px)
    5    -1  * Margins are 1.04166% (=10px) (times two, left and right)
    6    -1  * Total is    8.33333%. (=80px) (which makes 12 columns)
    7    -1  * 
    8    -1  * If page width is fixed to 960px width:
    9    -1  * Cell will be equivalent to 60px, left/right margin will be 10px.
   10    -1  *
   11    -1  */
   12    -1 
   13    -1 div.row {
   14    -1   float: left;
   15    -1   width: 100%;
   16    -1   display: block;
   17    -1   position: relative;
   18    -1 }
   19    -1 div.cell {
   20    -1   position: relative;
   21    -1   float: left;
   22    -1   left: 100%;
   23    -1 }
   24    -1 
   25    -1 /* Width classes. 
   26    -1    For a given cell width, the calculation is: 
   27    -1    width = (total cell width) * n - (margin*2) 
   28    -1    In this case: (8.333*n - 2.08333)% */
   29    -1 div.width-1  { width: 6.2500%   }
   30    -1 div.width-2  { width: 14.583% }
   31    -1 div.width-3  { width: 22.916% }
   32    -1 div.width-4  { width: 31.250% }
   33    -1 div.width-5  { width: 39.583% }
   34    -1 div.width-6  { width: 47.916% }
   35    -1 div.width-7  { width: 56.249% }
   36    -1 div.width-8  { width: 64.583% }
   37    -1 div.width-9  { width: 72.916% }
   38    -1 div.width-10 { width: 81.249% }
   39    -1 div.width-11 { width: 89.583% }
   40    -1 div.width-12 { width: 97.916% }
   41    -1 
   42    -1 /* Positioning classes, these are subtracting from a rightmost 
   43    -1    position, which is why they seem the wrong way around */
   44    -1 /* For a given position, the calculation is:
   45    -1    -100 + (total cell width * n)
   46    -1    In this case: margin-left: -100 + (8.333*n) */
   47    -1 div.position-0  { margin-left: -100%    }
   48    -1 div.position-1  { margin-left: -91.667% }
   49    -1 div.position-2  { margin-left: -83.334% }
   50    -1 div.position-3  { margin-left: -75.001% }
   51    -1 div.position-4  { margin-left: -66.668% }
   52    -1 div.position-5  { margin-left: -58.335% }
   53    -1 div.position-6  { margin-left: -50.002% }
   54    -1 div.position-7  { margin-left: -41.669% }
   55    -1 div.position-8  { margin-left: -33.336% }
   56    -1 div.position-9  { margin-left: -25.003% }
   57    -1 div.position-10 { margin-left: -16.67% }
   58    -1 div.position-11 { margin-left: -8.337% }
   59    -1 
   60    -1 /* End of the core Deco Grid System */
   61    -1 
   62    -1 /* Convenience classes — ¼, ½, ¾ widths and ¼, ½, ¾ positions. 
   63    -1    Not strictly necessary. */
   64    -1 div.width-1\3a 2 { width:    47.916%; } /* .width-1:2 */
   65    -1 div.width-1\3a 4 { width:    22.916%; } /* .width-1:4 */
   66    -1 div.width-3\3a 4 { width:    72.916%; } /* .width-3:4 */
   67    -1 div.position-1\3a 4 {margin-left:    -75.001%;} /* .position-1:4 */
   68    -1 div.position-1\3a 2 {margin-left:    -50.002%;} /* .position-1:2 */
   69    -1 div.position-3\3a 4 {margin-left:    -25.003%;} /* .position-3:4 */
   70    -1 
   71    -1 
   72    -1 /* Special classes for ⅓, ⅔ widths and ⅓, ⅔ positions. */
   73    -1 div.width-1\3a 3 { width: 31.250%; } /* .width-1:3 */
   74    -1 div.width-2\3a 3 { width: 64.583%; } /* .width-2:3 */
   75    -1 div.position-1\3a 3 {margin-left: -66.668%;} /* .position-1:3 */
   76    -1 div.position-2\3a 3 {margin-left: -33.336%;} /* .position-2:3 */