zen-grids 2.0.0.alpha.2 → 2.0.0.beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. checksums.yaml +7 -0
  2. data/LICENSE.txt +333 -268
  3. data/README.txt +5 -5
  4. data/bower.json +25 -0
  5. data/templates/project/_init.scss +5 -5
  6. data/templates/project/_layout.scss +8 -8
  7. data/templates/unit-tests/manifest.rb +14 -13
  8. data/templates/unit-tests/sass/function-zen-direction-switch.scss +23 -0
  9. data/templates/unit-tests/sass/function-zen-grid-item-width.scss +12 -6
  10. data/templates/unit-tests/sass/function-zen-half-gutter.scss +6 -6
  11. data/templates/unit-tests/sass/function-zen-unit-width.scss +17 -5
  12. data/templates/unit-tests/sass/zen-float.scss +7 -7
  13. data/templates/unit-tests/sass/zen-grid-background.scss +41 -30
  14. data/templates/unit-tests/sass/zen-grid-container.scss +11 -4
  15. data/templates/unit-tests/sass/zen-grid-flow-item.scss +22 -25
  16. data/templates/unit-tests/sass/zen-grid-item-base.scss +18 -13
  17. data/templates/unit-tests/sass/zen-grid-item.scss +56 -38
  18. data/templates/unit-tests/sass/zen-new-row.scss +26 -0
  19. data/templates/unit-tests/test-results/function-zen-direction-switch.css +16 -0
  20. data/templates/unit-tests/test-results/function-zen-grid-item-width.css +7 -3
  21. data/templates/unit-tests/test-results/function-zen-half-gutter.css +4 -4
  22. data/templates/unit-tests/test-results/function-zen-unit-width.css +6 -2
  23. data/templates/unit-tests/test-results/zen-float.css +3 -3
  24. data/templates/unit-tests/test-results/zen-grid-background.css +23 -17
  25. data/templates/unit-tests/test-results/zen-grid-container.css +13 -2
  26. data/templates/unit-tests/test-results/zen-grid-flow-item.css +8 -8
  27. data/templates/unit-tests/test-results/zen-grid-item-base.css +9 -3
  28. data/templates/unit-tests/test-results/zen-grid-item.css +13 -3
  29. data/templates/unit-tests/test-results/zen-new-row.css +16 -0
  30. data/zen-grids.gemspec +8 -7
  31. data/zen-grids/_background.scss +83 -39
  32. data/zen-grids/_flow.scss +73 -46
  33. data/zen-grids/_grids.scss +137 -82
  34. metadata +13 -29
  35. data/component.json +0 -26
  36. data/templates/unit-tests/sass/function-zen-direction-flip.scss +0 -23
  37. data/templates/unit-tests/sass/zen-clear.scss +0 -26
  38. data/templates/unit-tests/test-results/function-zen-direction-flip.css +0 -16
  39. data/templates/unit-tests/test-results/zen-clear.css +0 -16
data/README.txt CHANGED
@@ -18,16 +18,16 @@ to a 12 column grid.
18
18
 
19
19
  @import "zen-grids";
20
20
 
21
- $zen-gutter-width: 40px; // Set the gutter size. A half-gutter is used on
22
- // each side of each column.
21
+ $zen-gutters: 40px; // Set the gutter size. A half-gutter is used on
22
+ // each side of each column.
23
23
 
24
24
  .container {
25
25
  @include zen-grid-container(); // Define the container for your grid items.
26
26
  }
27
27
 
28
- $zen-column-count: 12; // Set the number of grid columns to use in this media
29
- // query. You'll likely want a different grid for
30
- // different screen sizes.
28
+ $zen-columns: 12; // Set the number of grid columns to use in this media
29
+ // query. You'll likely want a different grid for
30
+ // different screen sizes.
31
31
 
32
32
  @media all and (min-width: 50em) {
33
33
  .sidebar1 {
data/bower.json ADDED
@@ -0,0 +1,25 @@
1
+ {
2
+ "name" : "zen-grids",
3
+ "location" : "JohnAlbin/zen-grids",
4
+ "description" : "Zen Grids is an intuitive, flexible grid system to create responsive, adaptive, fluid and fixed-width layouts.",
5
+ "keywords" : "Sass, Compass, grids, rwd",
6
+
7
+ "main" : [
8
+ "_zen-grids.scss",
9
+ "zen-grids/_background.scss",
10
+ "zen-grids/_flow.scss",
11
+ "zen-grids/_grids.scss"
12
+ ],
13
+ "ignore" : [
14
+ "lib",
15
+ "templates",
16
+ "zen-grids.gemspec"
17
+ ],
18
+
19
+ "licenses" : {
20
+ "type": "GPLv2",
21
+ "url": "http://www.gnu.org/licenses/gpl-2.0.html"
22
+ }
23
+ "authors" : ["John Albin Wilkins"],
24
+ "homepage" : "http://zengrids.com/"
25
+ }
@@ -5,13 +5,13 @@
5
5
  //
6
6
 
7
7
  // Legacy browser variables for Compass.
8
- $legacy-support-for-ie6 : false;
9
- $legacy-support-for-ie7 : false;
8
+ $legacy-support-for-ie6 : false;
9
+ $legacy-support-for-ie7 : false;
10
10
 
11
11
  // Set up Zen Grids.
12
- $zen-column-count : 1;
13
- $zen-gutter-width : 20px;
14
- $zen-auto-include-item-base : false;
12
+ $zen-columns : 1;
13
+ $zen-gutters : 20px;
14
+ $zen-auto-include-grid-item-base : false;
15
15
 
16
16
  //
17
17
  // Import our modules.
@@ -32,7 +32,7 @@
32
32
 
33
33
  /* Horizontal navigation bar */
34
34
  @media all and (min-width: 444px) {
35
- $zen-column-count: 1;
35
+ $zen-columns: 1;
36
36
  $navbar-height: 5em;
37
37
 
38
38
  .main {
@@ -46,7 +46,7 @@
46
46
  }
47
47
 
48
48
  @media all and (min-width: 444px) and (max-width: 665px) {
49
- $zen-column-count: 2;
49
+ $zen-columns: 2;
50
50
 
51
51
  .centered {
52
52
  @include zen-grid-background();
@@ -55,7 +55,7 @@
55
55
  @include zen-grid-item(2, 1);
56
56
  }
57
57
  .grid-item__aside1 {
58
- @include zen-clear(); // Clear left-floated elements (.grid-item__content)
58
+ @include zen-new-row(); // Clear left-floated elements (.grid-item__content)
59
59
  @include zen-grid-item(1, 1);
60
60
  }
61
61
  .grid-item__aside2 {
@@ -64,7 +64,7 @@
64
64
  }
65
65
 
66
66
  @media all and (min-width: 666px) and (max-width: 776px) {
67
- $zen-column-count: 3;
67
+ $zen-columns: 3;
68
68
 
69
69
  .centered {
70
70
  @include zen-grid-background();
@@ -76,13 +76,13 @@
76
76
  @include zen-grid-item(1, 1, right); // Position from the right
77
77
  }
78
78
  .grid-item__aside2 {
79
- @include zen-clear(); // Clear left-floated elements (.grid-item__content)
79
+ @include zen-new-row(); // Clear left-floated elements (.grid-item__content)
80
80
  @include zen-grid-item(2, 1);
81
81
  }
82
82
  }
83
83
 
84
84
  @media all and (min-width: 777px) and (max-width: 998px) {
85
- $zen-column-count: 3;
85
+ $zen-columns: 3;
86
86
 
87
87
  .centered {
88
88
  @include zen-grid-background();
@@ -94,13 +94,13 @@
94
94
  @include zen-grid-item(1, 1, right); // Position from the right
95
95
  }
96
96
  .grid-item__aside2 {
97
- @include zen-clear(right); // Clear right-floated elements (.grid-item__aside1)
97
+ @include zen-new-row(right); // Clear right-floated elements (.grid-item__aside1)
98
98
  @include zen-grid-item(1, 1, right);
99
99
  }
100
100
  }
101
101
 
102
102
  @media all and (min-width: 999px) {
103
- $zen-column-count: 5;
103
+ $zen-columns: 5;
104
104
 
105
105
  .centered {
106
106
  @include zen-grid-background();
@@ -1,23 +1,24 @@
1
1
  description "Unit tests for the Zen Grids system."
2
2
 
3
- stylesheet 'sass/function-zen-direction-flip.scss', :media => 'all', :to => 'function-zen-direction-flip.scss'
4
- stylesheet 'sass/function-zen-grid-item-width.scss', :media => 'all', :to => 'function-zen-grid-item-width.scss'
5
- stylesheet 'sass/function-zen-half-gutter.scss', :media => 'all', :to => 'function-zen-half-gutter.scss'
6
- stylesheet 'sass/function-zen-unit-width.scss', :media => 'all', :to => 'function-zen-unit-width.scss'
7
- stylesheet 'sass/zen-clear.scss', :media => 'all', :to => 'zen-clear.scss'
8
- stylesheet 'sass/zen-float.scss', :media => 'all', :to => 'zen-float.scss'
9
- stylesheet 'sass/zen-grid-background.scss', :media => 'all', :to => 'zen-grid-background.scss'
10
- stylesheet 'sass/zen-grid-container.scss', :media => 'all', :to => 'zen-grid-container.scss'
11
- stylesheet 'sass/zen-grid-flow-item.scss', :media => 'all', :to => 'zen-grid-flow-item.scss'
12
- stylesheet 'sass/zen-grid-item-base.scss', :media => 'all', :to => 'zen-grid-item-base.scss'
13
- stylesheet 'sass/zen-grid-item.scss', :media => 'all', :to => 'zen-grid-item.scss'
3
+ stylesheet 'sass/function-zen-direction-switch.scss', :media => 'all', :to => 'function-zen-direction-switch.scss'
4
+ stylesheet 'sass/function-zen-grid-item-width.scss', :media => 'all', :to => 'function-zen-grid-item-width.scss'
5
+ stylesheet 'sass/function-zen-half-gutter.scss', :media => 'all', :to => 'function-zen-half-gutter.scss'
6
+ stylesheet 'sass/function-zen-unit-width.scss', :media => 'all', :to => 'function-zen-unit-width.scss'
7
+ stylesheet 'sass/zen-new-row.scss', :media => 'all', :to => 'zen-new-row.scss'
8
+ stylesheet 'sass/zen-float.scss', :media => 'all', :to => 'zen-float.scss'
9
+ stylesheet 'sass/zen-grid-background.scss', :media => 'all', :to => 'zen-grid-background.scss'
10
+ stylesheet 'sass/zen-grid-container.scss', :media => 'all', :to => 'zen-grid-container.scss'
11
+ stylesheet 'sass/zen-grid-flow-item.scss', :media => 'all', :to => 'zen-grid-flow-item.scss'
12
+ stylesheet 'sass/zen-grid-item-base.scss', :media => 'all', :to => 'zen-grid-item-base.scss'
13
+ stylesheet 'sass/zen-grid-item.scss', :media => 'all', :to => 'zen-grid-item.scss'
14
14
 
15
- file 'test-results/function-zen-direction-flip.css'
15
+ file 'test-results/function-zen-direction-switch.css'
16
16
  file 'test-results/function-zen-grid-item-width.css'
17
17
  file 'test-results/function-zen-half-gutter.css'
18
18
  file 'test-results/function-zen-unit-width.css'
19
- file 'test-results/zen-clear.css'
19
+ file 'test-results/zen-new-row.css'
20
20
  file 'test-results/zen-float.css'
21
+ file 'test-results/zen-grid-background.css'
21
22
  file 'test-results/zen-grid-container.css'
22
23
  file 'test-results/zen-grid-flow-item.css'
23
24
  file 'test-results/zen-grid-item-base.css'
@@ -0,0 +1,23 @@
1
+ /**
2
+ * @file
3
+ * Test zen-direction-switch()
4
+ */
5
+
6
+ @import "zen-grids";
7
+
8
+ #test-zen-direction-switch {
9
+ /* Test zen-direction-switch(left) */
10
+ float: zen-direction-switch(left);
11
+
12
+ /* Test zen-direction-switch(right) */
13
+ float: zen-direction-switch(right);
14
+
15
+ /* Test zen-direction-switch(both) */
16
+ float: zen-direction-switch(both);
17
+
18
+ /* Test zen-direction-switch(none) */
19
+ float: zen-direction-switch(none);
20
+
21
+ /* Test zen-direction-switch(invalid) */
22
+ float: zen-direction-switch(invalid);
23
+ }
@@ -6,13 +6,13 @@
6
6
  @import "zen-grids";
7
7
 
8
8
  #test-zen-grid-item-width {
9
- /* Test zen-grid-item-width(1) with default $zen-column-count: 1 */
9
+ /* Test zen-grid-item-width(1) with default $zen-columns: 1 */
10
10
  width: zen-grid-item-width(1);
11
11
 
12
- /* Test zen-grid-item-width(2) with $zen-column-count: 5 */
13
- $zen-column-count: 5;
12
+ /* Test zen-grid-item-width(2) with $zen-columns: 5 */
13
+ $zen-columns: 5;
14
14
  width: zen-grid-item-width(2);
15
- $zen-column-count: 1;
15
+ $zen-columns: 1;
16
16
 
17
17
  /* Test zen-grid-item-width(2, 5) */
18
18
  width: zen-grid-item-width(2, 5);
@@ -33,6 +33,12 @@
33
33
  /* Test zen-grid-item-width(2, 5, $grid-width: 1000px, $box-sizing: content-box) */
34
34
  width: zen-grid-item-width(2, 5, $grid-width: 1000px, $box-sizing: content-box);
35
35
 
36
- /* Test zen-grid-item-width(2, 5, $gutter-width: 10px, $grid-width: 1000px, $box-sizing: content-box) */
37
- width: zen-grid-item-width(2, 5, $gutter-width: 10px, $grid-width: 1000px, $box-sizing: content-box);
36
+ /* Test zen-grid-item-width(2, 5, $gutters: 10px, $grid-width: 1000px, $box-sizing: content-box) */
37
+ width: zen-grid-item-width(2, 5, $gutters: 10px, $grid-width: 1000px, $box-sizing: content-box);
38
+
39
+ /* Test zen-grid-item-width(3, 5, $gutters: 10%, $gutter-method: margin) */
40
+ width: zen-grid-item-width(3, 5, $gutters: 10%, $gutter-method: margin);
41
+
42
+ /* Test zen-grid-item-width(3.5, 5, $gutters: 10%, $gutter-method: margin) */
43
+ width: zen-grid-item-width(3.5, 5, $gutters: 10%, $gutter-method: margin);
38
44
  }
@@ -6,11 +6,11 @@
6
6
  @import "zen-grids";
7
7
 
8
8
  #test-zen-half-gutter {
9
- /* Test zen-half-gutter() with default $zen-gutter-width: 20px */
9
+ /* Test zen-half-gutter() with default $zen-gutters: 20px */
10
10
  padding-left: zen-half-gutter();
11
11
 
12
- /* Test zen-half-gutter() with $zen-gutter-width: 30px */
13
- $zen-gutter-width: 30px;
12
+ /* Test zen-half-gutter() with $zen-gutters: 30px */
13
+ $zen-gutters: 30px;
14
14
  padding-left: zen-half-gutter();
15
15
 
16
16
  /* Test zen-half-gutter(10em) */
@@ -28,10 +28,10 @@
28
28
  /* Test zen-half-gutter(11px, right) */
29
29
  padding-left: zen-half-gutter(11px, right);
30
30
 
31
- /* Test zen-half-gutter(11px) with $zen-float-direction: right */
32
- $zen-float-direction: right;
31
+ /* Test zen-half-gutter(11px) with $zen-direction: right */
32
+ $zen-direction: right;
33
33
  padding-left: zen-half-gutter(11px);
34
34
 
35
- /* Test zen-half-gutter(11px, left) with $zen-float-direction: right */
35
+ /* Test zen-half-gutter(11px, left) with $zen-direction: right */
36
36
  padding-left: zen-half-gutter(11px, left);
37
37
  }
@@ -6,13 +6,13 @@
6
6
  @import "zen-grids";
7
7
 
8
8
  #test-zen-unit-width {
9
- /* Test zen-unit-width() with default $zen-column-count: 1 */
9
+ /* Test zen-unit-width() with default $zen-columns: 1 */
10
10
  width: zen-unit-width();
11
11
 
12
- /* Test zen-unit-width() with $zen-column-count: 5 */
13
- $zen-column-count: 5;
12
+ /* Test zen-unit-width() with $zen-columns: 5 */
13
+ $zen-columns: 5;
14
14
  width: zen-unit-width();
15
- $zen-column-count: 1;
15
+ $zen-columns: 1;
16
16
 
17
17
  /* Test zen-unit-width(5) */
18
18
  width: zen-unit-width(5);
@@ -28,5 +28,17 @@
28
28
  $zen-grid-width: 100%;
29
29
 
30
30
  /* Test zen-unit-width(5, 100px) */
31
- width: zen-unit-width(5, 100px);
31
+ width: zen-unit-width(5, $grid-width: 100px);
32
+
33
+ /* Test zen-unit-width() with $zen-columns: 3, $zen-gutter-method: margin, and $zen-gutters: 5% */
34
+ $zen-columns: 3;
35
+ $zen-gutter-method: margin;
36
+ $zen-gutters: 5%;
37
+ width: zen-unit-width();
38
+ $zen-columns: 1;
39
+ $zen-gutter-method: padding;
40
+ $zen-gutters: 20px;
41
+
42
+ /* Test zen-unit-width(3, 5px, margin, 100px) */
43
+ width: zen-unit-width(3, 5px, margin, 100px);
32
44
  }
@@ -9,18 +9,18 @@
9
9
  /* Test zen-float() */
10
10
  @include zen-float();
11
11
 
12
- /* Test zen-float() with $zen-float-direction: right */
13
- $zen-float-direction: right;
12
+ /* Test zen-float() with $zen-direction: right */
13
+ $zen-direction: right;
14
14
  @include zen-float();
15
- $zen-float-direction: left;
15
+ $zen-direction: left;
16
16
 
17
17
  /* Test zen-float(left) */
18
18
  @include zen-float(left);
19
19
 
20
- /* Test zen-float(left, $reverse-all-floats: TRUE) */
21
- @include zen-float(left, $reverse-all-floats: TRUE);
20
+ /* Test zen-float(left, $switch-direction: TRUE) */
21
+ @include zen-float(left, $switch-direction: TRUE);
22
22
 
23
- /* Test zen-float(left) with: $zen-reverse-all-floats: TRUE; */
24
- $zen-reverse-all-floats: TRUE;
23
+ /* Test zen-float(left) with: $zen-switch-direction: TRUE; */
24
+ $zen-switch-direction: TRUE;
25
25
  @include zen-float(left);
26
26
  }
@@ -11,59 +11,70 @@
11
11
  @include zen-grid-background();
12
12
  $zen-grid-numbers: both;
13
13
 
14
+ /* Test zen-grid-background() with margin gutter method, 5 column grid and 5% gutter */
15
+ $zen-columns: 5;
16
+ $zen-gutters: 5%;
17
+ $zen-gutter-method: margin;
18
+ $zen-grid-numbers: top;
19
+ @include zen-grid-background();
20
+ $zen-columns: 1;
21
+ $zen-gutters: 20px;
22
+ $zen-gutter-method: padding;
23
+ $zen-grid-numbers: both;
24
+
14
25
  // Turn off numbers for all other tests.
15
26
  $zen-grid-numbers: none;
16
27
 
17
28
  /* Test zen-grid-background() with 12 column grid and 20px gutter */
18
- $zen-column-count: 12;
29
+ $zen-columns: 12;
19
30
  @include zen-grid-background();
20
- $zen-column-count: 1;
31
+ $zen-columns: 1;
21
32
 
22
33
  /* Test zen-grid-background(), 5 column grid, 10% gutter and black grid color */
23
- $zen-column-count: 5;
24
- $zen-gutter-width: 10%;
34
+ $zen-columns: 5;
35
+ $zen-gutters: 10%;
25
36
  $zen-grid-color: #000;
26
37
  @include zen-grid-background();
27
- $zen-column-count: 1;
28
- $zen-gutter-width: 20px;
38
+ $zen-columns: 1;
39
+ $zen-gutters: 20px;
29
40
  $zen-grid-color: rgba(#ffdede, 0.8);
30
41
 
31
42
  /* Test zen-grid-background() with 5 column grid and 40px gutter */
32
- $zen-column-count: 5;
33
- $zen-gutter-width: 40px;
43
+ $zen-columns: 5;
44
+ $zen-gutters: 40px;
34
45
  @include zen-grid-background();
35
- $zen-column-count: 1;
36
- $zen-gutter-width: 20px;
46
+ $zen-columns: 1;
47
+ $zen-gutters: 20px;
37
48
 
38
- /* Test zen-grid-background(), 5 column grid and 10% gutter and $zen-reverse-all-floats */
39
- $zen-column-count: 5;
40
- $zen-gutter-width: 10%;
41
- $zen-reverse-all-floats: true;
49
+ /* Test zen-grid-background(), 5 column grid and 10% gutter and $zen-switch-direction */
50
+ $zen-columns: 5;
51
+ $zen-gutters: 10%;
52
+ $zen-switch-direction: true;
42
53
  @include zen-grid-background();
43
- $zen-column-count: 1;
44
- $zen-gutter-width: 20px;
45
- $zen-reverse-all-floats: false;
54
+ $zen-columns: 1;
55
+ $zen-gutters: 20px;
56
+ $zen-switch-direction: false;
46
57
 
47
- /* Test zen-grid-background() with 5 column grid and 40px gutter and $zen-reverse-all-floats */
48
- $zen-column-count: 5;
49
- $zen-gutter-width: 40px;
50
- $zen-reverse-all-floats: true;
58
+ /* Test zen-grid-background() with 5 column grid and 40px gutter and $zen-switch-direction */
59
+ $zen-columns: 5;
60
+ $zen-gutters: 40px;
61
+ $zen-switch-direction: true;
51
62
  @include zen-grid-background();
52
- $zen-column-count: 1;
53
- $zen-gutter-width: 20px;
54
- $zen-reverse-all-floats: false;
63
+ $zen-columns: 1;
64
+ $zen-gutters: 20px;
65
+ $zen-switch-direction: false;
55
66
 
56
67
  /* Test zen-grid-background() with $zen-grid-width: 1000px, 5 column grid and 40px gutter */
57
68
  $zen-grid-width: 1000px;
58
- $zen-column-count: 5;
59
- $zen-gutter-width: 40px;
69
+ $zen-columns: 5;
70
+ $zen-gutters: 40px;
60
71
  @include zen-grid-background();
61
72
  $zen-grid-width: 100%;
62
- $zen-column-count: 1;
63
- $zen-gutter-width: 20px;
73
+ $zen-columns: 1;
74
+ $zen-gutters: 20px;
64
75
 
65
76
  /* Test zen-grid-background() with all 24 grid numbers */
66
- $zen-column-count: 24;
77
+ $zen-columns: 24;
67
78
  @include zen-grid-background();
68
- $zen-column-count: 1;
79
+ $zen-columns: 1;
69
80
  }
@@ -27,11 +27,18 @@
27
27
  }
28
28
 
29
29
  #test-zen-grid-container-4 {
30
- /* Test zen-grid-container() with $context = 'grid-item' */
31
- @include zen-grid-container('grid-item');
30
+ /* Test zen-grid-container() with $context: grid-item */
31
+ @include zen-grid-container(grid-item);
32
32
  }
33
33
 
34
34
  #test-zen-grid-container-5 {
35
- /* Test zen-grid-container() with $context = 'flow' */
36
- @include zen-grid-container('flow');
35
+ /* Test zen-grid-container() with $context: flow */
36
+ @include zen-grid-container(flow);
37
+ }
38
+
39
+ #test-zen-grid-container-6 {
40
+ /* Test zen-grid-container() with $zen-gutter-method: margin */
41
+ $zen-gutter-method: margin;
42
+ @include zen-grid-container();
43
+ $zen-gutter-method: padding;
37
44
  }