zen-grids 1.2 → 1.3

Sign up to get free protection for your applications and to get access to all the features.
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
data/templates/unit-tests/test-results/function-zen-half-gutter.css CHANGED
@@ -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;
data/templates/unit-tests/test-results/function-zen-unit-width.css CHANGED
@@ -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%;
data/templates/unit-tests/test-results/zen-clear.css CHANGED
@@ -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;
data/templates/unit-tests/test-results/zen-float.css CHANGED
@@ -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;
data/templates/unit-tests/test-results/zen-grid-container.css CHANGED
@@ -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
  }
data/templates/unit-tests/test-results/zen-grid-flow-item.css CHANGED
@@ -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%;
data/templates/unit-tests/test-results/zen-grid-item-base.css CHANGED
@@ -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;
data/templates/unit-tests/test-results/zen-grid-item.css CHANGED
@@ -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 */
data/templates/unit-tests/test-results/zen-nested-container.css CHANGED
@@ -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;
data/zen-grids.gemspec CHANGED
@@ -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
data/templates/project/common.scss DELETED
@@ -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
- }
data/templates/project/layout.scss DELETED
@@ -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
- }