zen-grids 1.2 → 1.3

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 (28) hide show
  1. data/README.txt +2 -0
  2. data/stylesheets/zen/_background-grid.scss +7 -0
  3. data/stylesheets/zen/_grids.scss +148 -139
  4. data/templates/project/_init.scss +20 -0
  5. data/templates/project/_layout.scss +102 -0
  6. data/templates/project/_modules.scss +72 -0
  7. data/templates/project/_visually-hidden.scss +51 -0
  8. data/templates/project/example.html +12 -12
  9. data/templates/project/manifest.rb +6 -4
  10. data/templates/project/styles.scss +5 -2
  11. data/templates/unit-tests/sass/function-zen-grid-item-width.scss +8 -2
  12. data/templates/unit-tests/sass/zen-grid-flow-item.scss +22 -1
  13. data/templates/unit-tests/sass/zen-grid-item.scss +16 -0
  14. data/templates/unit-tests/test-results/function-zen-direction-flip.css +0 -1
  15. data/templates/unit-tests/test-results/function-zen-grid-item-width.css +6 -3
  16. data/templates/unit-tests/test-results/function-zen-half-gutter.css +0 -1
  17. data/templates/unit-tests/test-results/function-zen-unit-width.css +0 -1
  18. data/templates/unit-tests/test-results/zen-clear.css +0 -1
  19. data/templates/unit-tests/test-results/zen-float.css +0 -1
  20. data/templates/unit-tests/test-results/zen-grid-container.css +0 -9
  21. data/templates/unit-tests/test-results/zen-grid-flow-item.css +46 -13
  22. data/templates/unit-tests/test-results/zen-grid-item-base.css +2 -2
  23. data/templates/unit-tests/test-results/zen-grid-item.css +2 -2
  24. data/templates/unit-tests/test-results/zen-nested-container.css +0 -3
  25. data/zen-grids.gemspec +6 -4
  26. metadata +8 -6
  27. data/templates/project/common.scss +0 -57
  28. data/templates/project/layout.scss +0 -137
@@ -2,7 +2,6 @@
2
2
  * @file
3
3
  * Test zen-half-gutter()
4
4
  */
5
- /* line 8, ../sass/function-zen-half-gutter.scss */
6
5
  #test-zen-half-gutter {
7
6
  /* Test zen-half-gutter() with default $zen-gutter-width: 20px */
8
7
  padding-left: 10px;
@@ -2,7 +2,6 @@
2
2
  * @file
3
3
  * Test zen-unit-width()
4
4
  */
5
- /* line 8, ../sass/function-zen-unit-width.scss */
6
5
  #test-zen-unit-width {
7
6
  /* Test zen-unit-width() with default $zen-column-count: 1 */
8
7
  width: 100%;
@@ -2,7 +2,6 @@
2
2
  * @file
3
3
  * Test zen-clear()
4
4
  */
5
- /* line 8, ../sass/zen-clear.scss */
6
5
  #test-zen-clear {
7
6
  /* Test zen-clear() */
8
7
  clear: left;
@@ -2,7 +2,6 @@
2
2
  * @file
3
3
  * Test zen-float()
4
4
  */
5
- /* line 8, ../sass/zen-float.scss */
6
5
  #test-zen-float {
7
6
  /* Test zen-float() */
8
7
  float: left;
@@ -2,48 +2,39 @@
2
2
  * @file
3
3
  * Test zen-grid-container()
4
4
  */
5
- /* line 8, ../sass/zen-grid-container.scss */
6
5
  #test-zen-grid-container {
7
6
  /* Test zen-grid-container() */
8
7
  }
9
- /* line 52, /Library/Ruby/Gems/1.8/gems/zen-grids-1.2/stylesheets/zen/_grids.scss */
10
8
  #test-zen-grid-container:before, #test-zen-grid-container:after {
11
9
  content: "";
12
10
  display: table;
13
11
  }
14
- /* line 56, /Library/Ruby/Gems/1.8/gems/zen-grids-1.2/stylesheets/zen/_grids.scss */
15
12
  #test-zen-grid-container:after {
16
13
  clear: both;
17
14
  }
18
15
 
19
- /* line 13, ../sass/zen-grid-container.scss */
20
16
  #test-zen-grid-container-2 {
21
17
  /* Test zen-grid-container() with $legacy-support-for-ie7: true */
22
18
  *position: relative;
23
19
  *zoom: 1;
24
20
  }
25
- /* line 52, /Library/Ruby/Gems/1.8/gems/zen-grids-1.2/stylesheets/zen/_grids.scss */
26
21
  #test-zen-grid-container-2:before, #test-zen-grid-container-2:after {
27
22
  content: "";
28
23
  display: table;
29
24
  }
30
- /* line 56, /Library/Ruby/Gems/1.8/gems/zen-grids-1.2/stylesheets/zen/_grids.scss */
31
25
  #test-zen-grid-container-2:after {
32
26
  clear: both;
33
27
  }
34
28
 
35
- /* line 20, ../sass/zen-grid-container.scss */
36
29
  #test-zen-grid-container-3 {
37
30
  /* Test zen-grid-container() with $legacy-support-for-ie6: true */
38
31
  *position: relative;
39
32
  *zoom: 1;
40
33
  }
41
- /* line 52, /Library/Ruby/Gems/1.8/gems/zen-grids-1.2/stylesheets/zen/_grids.scss */
42
34
  #test-zen-grid-container-3:before, #test-zen-grid-container-3:after {
43
35
  content: "";
44
36
  display: table;
45
37
  }
46
- /* line 56, /Library/Ruby/Gems/1.8/gems/zen-grids-1.2/stylesheets/zen/_grids.scss */
47
38
  #test-zen-grid-container-3:after {
48
39
  clear: both;
49
40
  }
@@ -2,10 +2,8 @@
2
2
  * @file
3
3
  * Test zen-grid-flow-item()
4
4
  */
5
- /* line 8, ../sass/zen-grid-flow-item.scss */
6
5
  #test-zen-grid-flow-item {
7
6
  /* Test zen-grid-flow-item(1) without setting $column-count */
8
- width: 100%;
9
7
  padding-left: 10px;
10
8
  padding-right: 10px;
11
9
  -moz-box-sizing: border-box;
@@ -13,11 +11,11 @@
13
11
  -ms-box-sizing: border-box;
14
12
  box-sizing: border-box;
15
13
  word-wrap: break-word;
14
+ width: 100%;
16
15
  padding-left: 0;
17
16
  padding-right: 0px;
18
17
  margin-right: 20px;
19
- /* Test zen-grid-flow-item(1, 4) with 12 column grid and 20px gutter */
20
- width: 25%;
18
+ /* Test zen-grid-flow-item(1, 4) with 20px gutter */
21
19
  padding-left: 10px;
22
20
  padding-right: 10px;
23
21
  -moz-box-sizing: border-box;
@@ -25,11 +23,11 @@
25
23
  -ms-box-sizing: border-box;
26
24
  box-sizing: border-box;
27
25
  word-wrap: break-word;
26
+ width: 25%;
28
27
  padding-left: 0;
29
28
  padding-right: 15px;
30
29
  margin-right: 5px;
31
30
  /* Test zen-grid-flow-item(1, 4) with 15px gutter */
32
- width: 25%;
33
31
  padding-left: 7px;
34
32
  padding-right: 8px;
35
33
  -moz-box-sizing: border-box;
@@ -37,11 +35,44 @@
37
35
  -ms-box-sizing: border-box;
38
36
  box-sizing: border-box;
39
37
  word-wrap: break-word;
38
+ width: 25%;
40
39
  padding-left: 0;
41
40
  padding-right: 11.25px;
42
41
  margin-right: 3.75px;
42
+ /* Test zen-grid-flow-item(1) with 5 columns, 20px gutter and $zen-grid-width: 1000px */
43
+ padding-left: 10px;
44
+ padding-right: 10px;
45
+ -moz-box-sizing: border-box;
46
+ -webkit-box-sizing: border-box;
47
+ -ms-box-sizing: border-box;
48
+ box-sizing: border-box;
49
+ word-wrap: break-word;
50
+ width: 200px;
51
+ padding-left: 0;
52
+ padding-right: 20px;
53
+ /* Test zen-grid-flow-item(1) with 5 columns, 20px gutter, $zen-grid-width: 1000px, $alpha-gutter: true and $omega-gutter: false */
54
+ padding-left: 10px;
55
+ padding-right: 10px;
56
+ -moz-box-sizing: border-box;
57
+ -webkit-box-sizing: border-box;
58
+ -ms-box-sizing: border-box;
59
+ box-sizing: border-box;
60
+ word-wrap: break-word;
61
+ width: 200px;
62
+ padding-left: 20px;
63
+ padding-right: 0;
64
+ /* Test zen-grid-flow-item(1) with 5 columns, 20px gutter, $zen-grid-width: 1000px and $omega-gutter: false */
65
+ padding-left: 10px;
66
+ padding-right: 10px;
67
+ -moz-box-sizing: border-box;
68
+ -webkit-box-sizing: border-box;
69
+ -ms-box-sizing: border-box;
70
+ box-sizing: border-box;
71
+ word-wrap: break-word;
72
+ width: 180px;
73
+ padding-left: 0;
74
+ padding-right: 0;
43
75
  /* Test zen-grid-flow-item(1, 4) with 15px gutter and $zen-float-direction: right */
44
- width: 25%;
45
76
  padding-left: 8px;
46
77
  padding-right: 7px;
47
78
  -moz-box-sizing: border-box;
@@ -49,11 +80,11 @@
49
80
  -ms-box-sizing: border-box;
50
81
  box-sizing: border-box;
51
82
  word-wrap: break-word;
83
+ width: 25%;
52
84
  padding-right: 0;
53
85
  padding-left: 11.25px;
54
86
  margin-left: 3.75px;
55
87
  /* Test zen-grid-flow-item(1, 4) with 15px gutter and $alpha-gutter: true */
56
- width: 25%;
57
88
  padding-left: 7px;
58
89
  padding-right: 8px;
59
90
  -moz-box-sizing: border-box;
@@ -61,12 +92,12 @@
61
92
  -ms-box-sizing: border-box;
62
93
  box-sizing: border-box;
63
94
  word-wrap: break-word;
95
+ width: 25%;
64
96
  padding-left: 0;
65
97
  margin-left: 15px;
66
98
  padding-right: 11.25px;
67
99
  margin-right: 3.75px;
68
100
  /* Test zen-grid-flow-item(1, 4) with 15px gutter and $omega-gutter: false */
69
- width: 25%;
70
101
  padding-left: 7px;
71
102
  padding-right: 8px;
72
103
  -moz-box-sizing: border-box;
@@ -74,11 +105,11 @@
74
105
  -ms-box-sizing: border-box;
75
106
  box-sizing: border-box;
76
107
  word-wrap: break-word;
108
+ width: 25%;
77
109
  padding-left: 0;
78
110
  padding-right: 11.25px;
79
111
  margin-right: -11.25px;
80
112
  /* Test zen-grid-flow-item(3, 4) with 20px gutter and $alpha-gutter: true */
81
- width: 75%;
82
113
  padding-left: 10px;
83
114
  padding-right: 10px;
84
115
  -moz-box-sizing: border-box;
@@ -86,12 +117,12 @@
86
117
  -ms-box-sizing: border-box;
87
118
  box-sizing: border-box;
88
119
  word-wrap: break-word;
120
+ width: 75%;
89
121
  padding-left: 0;
90
122
  margin-left: 20px;
91
123
  padding-right: 5px;
92
124
  margin-right: 15px;
93
125
  /* Test zen-grid-flow-item(3, 4) with 20px gutter and $omega-gutter: false */
94
- width: 75%;
95
126
  padding-left: 10px;
96
127
  padding-right: 10px;
97
128
  -moz-box-sizing: border-box;
@@ -99,11 +130,11 @@
99
130
  -ms-box-sizing: border-box;
100
131
  box-sizing: border-box;
101
132
  word-wrap: break-word;
133
+ width: 75%;
102
134
  padding-left: 0;
103
135
  padding-right: 5px;
104
136
  margin-right: -5px;
105
137
  /* Test zen-grid-flow-item(1, 4) with 15px gutter, $zen-float-direction: right and $alpha-gutter: true */
106
- width: 25%;
107
138
  padding-left: 8px;
108
139
  padding-right: 7px;
109
140
  -moz-box-sizing: border-box;
@@ -111,16 +142,18 @@
111
142
  -ms-box-sizing: border-box;
112
143
  box-sizing: border-box;
113
144
  word-wrap: break-word;
145
+ width: 25%;
114
146
  padding-right: 0;
115
147
  margin-right: 15px;
116
148
  padding-left: 11.25px;
117
149
  margin-left: 3.75px;
118
150
  /* Test zen-grid-flow-item(1, 4) with $zen-box-sizing: content-box and 10% gutter */
119
- width: 15%;
120
151
  padding-left: 5%;
121
152
  padding-right: 5%;
122
- border: 0 !important;
153
+ border-left: 0 !important;
154
+ border-right: 0 !important;
123
155
  word-wrap: break-word;
156
+ width: 15%;
124
157
  padding-left: 0;
125
158
  padding-right: 7.5%;
126
159
  margin-right: 2.5%;
@@ -2,7 +2,6 @@
2
2
  * @file
3
3
  * Test zen-grid-item-base()
4
4
  */
5
- /* line 8, ../sass/zen-grid-item-base.scss */
6
5
  #test-zen-grid-item-base {
7
6
  /* Test zen-grid-item-base() */
8
7
  padding-left: 10px;
@@ -15,7 +14,8 @@
15
14
  /* Test zen-grid-item-base() with $zen-box-sizing: content-box */
16
15
  padding-left: 10px;
17
16
  padding-right: 10px;
18
- border: 0 !important;
17
+ border-left: 0 !important;
18
+ border-right: 0 !important;
19
19
  word-wrap: break-word;
20
20
  /* Test zen-grid-item-base() with $legacy-support-for-ie7: true */
21
21
  padding-left: 10px;
@@ -2,7 +2,6 @@
2
2
  * @file
3
3
  * Test zen-grid-item()
4
4
  */
5
- /* line 8, ../sass/zen-grid-item.scss */
6
5
  #test-zen-grid-item {
7
6
  /* Test zen-grid-item(6, 4) with 12 column grid and 20px gutter */
8
7
  float: left;
@@ -23,7 +22,8 @@
23
22
  margin-right: -100%;
24
23
  padding-left: 5%;
25
24
  padding-right: 5%;
26
- border: 0 !important;
25
+ border-left: 0 !important;
26
+ border-right: 0 !important;
27
27
  word-wrap: break-word;
28
28
  /* Turn off $zen-auto-include-item-base */
29
29
  /* Test zen-grid-item(3, 3) with 5 column grid and 40px gutter */
@@ -2,21 +2,18 @@
2
2
  * @file
3
3
  * Test zen-nested-container()
4
4
  */
5
- /* line 8, ../sass/zen-nested-container.scss */
6
5
  #test-zen-nested-container {
7
6
  /* Test zen-nested-container() */
8
7
  padding-left: 0;
9
8
  padding-right: 0;
10
9
  }
11
10
 
12
- /* line 13, ../sass/zen-nested-container.scss */
13
11
  #test-zen-nested-container-2 {
14
12
  /* Test zen-nested-container() with $legacy-support-for-ie7: true */
15
13
  padding-left: 0;
16
14
  padding-right: 0;
17
15
  }
18
16
 
19
- /* line 20, ../sass/zen-nested-container.scss */
20
17
  #test-zen-nested-container-3 {
21
18
  /* Test zen-nested-container() with $legacy-support-for-ie6: true */
22
19
  padding-left: 0;
@@ -9,8 +9,8 @@ Gem::Specification.new do |s|
9
9
  s.homepage = 'http://zengrids.com'
10
10
  s.rubyforge_project =
11
11
 
12
- s.version = '1.2'
13
- s.date = '2012-05-04'
12
+ s.version = '1.3'
13
+ s.date = '2013-02-18'
14
14
 
15
15
  s.authors = ['John Albin Wilkins']
16
16
  s.email = 'virtually.johnalbin@gmail.com'
@@ -24,10 +24,12 @@ Gem::Specification.new do |s|
24
24
  stylesheets/_zen.scss
25
25
  stylesheets/zen/_background-grid.scss
26
26
  stylesheets/zen/_grids.scss
27
+ templates/project/_init.scss
28
+ templates/project/_layout.scss
29
+ templates/project/_modules.scss
30
+ templates/project/_visually-hidden.scss
27
31
  templates/project/example.html
28
32
  templates/project/manifest.rb
29
- templates/project/common.scss
30
- templates/project/layout.scss
31
33
  templates/project/styles.scss
32
34
  templates/unit-tests/manifest.rb
33
35
  templates/unit-tests/README.txt
metadata CHANGED
@@ -4,8 +4,8 @@ version: !ruby/object:Gem::Version
4
4
  prerelease: false
5
5
  segments:
6
6
  - 1
7
- - 2
8
- version: "1.2"
7
+ - 3
8
+ version: "1.3"
9
9
  platform: ruby
10
10
  authors:
11
11
  - John Albin Wilkins
@@ -13,7 +13,7 @@ autorequire:
13
13
  bindir: bin
14
14
  cert_chain: []
15
15
 
16
- date: 2012-05-04 00:00:00 +08:00
16
+ date: 2013-02-18 00:00:00 +08:00
17
17
  default_executable:
18
18
  dependencies:
19
19
  - !ruby/object:Gem::Dependency
@@ -44,10 +44,12 @@ files:
44
44
  - stylesheets/_zen.scss
45
45
  - stylesheets/zen/_background-grid.scss
46
46
  - stylesheets/zen/_grids.scss
47
+ - templates/project/_init.scss
48
+ - templates/project/_layout.scss
49
+ - templates/project/_modules.scss
50
+ - templates/project/_visually-hidden.scss
47
51
  - templates/project/example.html
48
52
  - templates/project/manifest.rb
49
- - templates/project/common.scss
50
- - templates/project/layout.scss
51
53
  - templates/project/styles.scss
52
54
  - templates/unit-tests/manifest.rb
53
55
  - templates/unit-tests/README.txt
@@ -99,7 +101,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
99
101
  version: "0"
100
102
  requirements: []
101
103
 
102
- rubyforge_project: "1.2"
104
+ rubyforge_project: "1.3"
103
105
  rubygems_version: 1.3.6
104
106
  signing_key:
105
107
  specification_version: 3
@@ -1,57 +0,0 @@
1
- // Ideally, variables should be initialized in a partial. We're setting it here
2
- // to make the mixin usage more transparent.
3
- $gutter-width: 10px;
4
-
5
-
6
- // Skip link styling
7
- #skip-link {
8
- margin: 0;
9
-
10
- a,
11
- a:visited {
12
- display: block;
13
- width: 100%;
14
- padding: 2px 0 3px 0;
15
- text-align: center;
16
- background-color: #666;
17
- color: #fff;
18
- }
19
- }
20
-
21
- // Set a consistent padding around all containers
22
- #header,
23
- #content,
24
- #main-menu,
25
- #aside1,
26
- #aside2,
27
- #footer {
28
- -moz-box-sizing: border-box;
29
- -webkit-box-sizing: border-box;
30
- -ms-box-sizing: border-box;
31
- box-sizing: border-box;
32
- padding: $gutter-width;
33
- }
34
-
35
- // Alternate border styling
36
- #header,
37
- #main-menu,
38
- #aside2 {
39
- border: 1px solid #ccc;
40
- }
41
- #content,
42
- #aside1,
43
- #footer {
44
- border: 1px solid #09f;
45
- }
46
-
47
- // Source-order meta info
48
- header h1,
49
- header h2 {
50
- display: inline;
51
- }
52
- header p {
53
- display: inline;
54
- text-transform: uppercase;
55
- font-size: 0.8em;
56
- color: #c00;
57
- }
@@ -1,137 +0,0 @@
1
- // Ideally, variables should be initialized in a partial. We're setting
2
- // variables here to make the mixin usage more transparent.
3
- $legacy-support-for-ie6: false;
4
- $legacy-support-for-ie7: false;
5
-
6
- // Import Zen Grids.
7
- @import "zen";
8
-
9
- $zen-column-count: 12;
10
- $zen-gutter-width: 20px;
11
-
12
-
13
- //
14
- // Skip link styling
15
- //
16
- @media all and (min-width: 480px) {
17
- #skip-link a {
18
- position: absolute !important;
19
- height: 1px;
20
- width: 1px;
21
- overflow: hidden;
22
- @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
23
- clip: rect(1px 1px 1px 1px); // IE6 and IE7 use the wrong syntax.
24
- }
25
- clip: rect(1px, 1px, 1px, 1px);
26
-
27
- &:active,
28
- &:focus {
29
- position: static !important;
30
- clip: auto;
31
- height: auto;
32
- width: auto;
33
- overflow: auto;
34
- }
35
- }
36
- }
37
-
38
- #header,
39
- #main,
40
- #footer {
41
- margin: {
42
- left: auto;
43
- right: auto;
44
- }
45
- max-width: 1100px;
46
- }
47
-
48
- #main {
49
- @include zen-grid-container();
50
- }
51
-
52
- #content aside {
53
- font-weight: bold;
54
- font-style: italic;
55
- font-size: 1.2em;
56
- @include zen-grid-flow-item(1, 3);
57
- float: left;
58
- margin: {
59
- top: (1em/1.2);
60
- bottom: (1em/1.2);
61
- }
62
- }
63
-
64
- //
65
- // Horizontal navigation bar
66
- @media all and (min-width: 480px) {
67
- $zen-column-count: 1;
68
- $navbar-height: 4em;
69
-
70
- #main {
71
- padding-top: $navbar-height;
72
- }
73
- #main-menu {
74
- @include zen-grid-item(1, 1);
75
- margin-top: -$navbar-height;
76
- height: $navbar-height;
77
- }
78
- }
79
-
80
- @media all and (min-width: 480px) and (max-width: 639px) {
81
- $zen-column-count: 2;
82
-
83
- #content {
84
- @include zen-grid-item(2, 1);
85
- }
86
- #aside1 {
87
- @include zen-clear(); // Clear left-floated elements (#content)
88
- @include zen-grid-item(1, 1);
89
- }
90
- #aside2 {
91
- @include zen-grid-item(1, 2);
92
- }
93
- }
94
-
95
- @media all and (min-width: 640px) and (max-width: 799px) {
96
- $zen-column-count: 3;
97
-
98
- #content {
99
- @include zen-grid-item(2, 1);
100
- }
101
- #aside1 {
102
- @include zen-grid-item(1, 1, right); // Position from the right
103
- }
104
- #aside2 {
105
- @include zen-clear(); // Clear left-floated elements (#content)
106
- @include zen-grid-item(2, 1);
107
- }
108
- }
109
-
110
- @media all and (min-width: 800px) and (max-width: 959px) {
111
- $zen-column-count: 3;
112
-
113
- #content {
114
- @include zen-grid-item(2, 1);
115
- }
116
- #aside1 {
117
- @include zen-grid-item(1, 1, right); // Position from the right
118
- }
119
- #aside2 {
120
- @include zen-clear(right); // Clear right-floated elements (#aside1)
121
- @include zen-grid-item(1, 1, right);
122
- }
123
- }
124
-
125
- @media all and (min-width: 960px) {
126
- $zen-column-count: 5;
127
-
128
- #content {
129
- @include zen-grid-item(3, 2);
130
- }
131
- #aside1 {
132
- @include zen-grid-item(1, 1);
133
- }
134
- #aside2 {
135
- @include zen-grid-item(1, 5);
136
- }
137
- }