ezy 0.2.9 → 0.3.0.beta

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 (43) hide show
  1. checksums.yaml +4 -4
  2. data/VERSION +1 -1
  3. data/ezy.gemspec +2 -2
  4. data/sass/ezy/grid/_layout.scss +30 -4
  5. data/templates/project/assets/config.rb +45 -0
  6. data/templates/project/assets/css/screen.css +657 -0
  7. data/templates/project/assets/img/test-sprite/alien.png +0 -0
  8. data/templates/project/assets/img/test-sprite/classic.png +0 -0
  9. data/templates/project/assets/img/test-sprite/indy.png +0 -0
  10. data/templates/project/assets/img/test-sprite.png +0 -0
  11. data/templates/project/assets/img/test-sprite@2x/classic.png +0 -0
  12. data/templates/project/assets/img/test-sprite@2x/indy.png +0 -0
  13. data/templates/project/assets/img/test-sprite@2x.png +0 -0
  14. data/templates/project/assets/js/html5shiv-3.6.2.js +8 -0
  15. data/templates/project/assets/sass/core/_base.scss +2 -0
  16. data/templates/project/assets/sass/core/_layouts.scss +88 -0
  17. data/templates/project/assets/sass/core/_settings.scss +2 -0
  18. data/templates/project/assets/sass/lib/_normalize.scss +396 -0
  19. data/templates/project/assets/sass/partials/_sprite-examples.scss +43 -0
  20. data/templates/project/assets/sass/screen.scss +17 -0
  21. data/templates/project/index.html +83 -23
  22. data/templates/project/manifest.rb +39 -8
  23. data/test/css/grid/elastic.css +5 -5
  24. data/test/css/grid/fluid.css +17 -17
  25. data/test/css/grid/gutter.css +18 -18
  26. data/test/css/grid/layout/fluid.css +12 -12
  27. data/test/css/grid/layout/grid-settings.css +149 -0
  28. data/test/css/grid/layout/responsive.css +41 -35
  29. data/test/css/grid/layout.css +20 -20
  30. data/test/css/grid/responsive.css +20 -20
  31. data/test/css/sprites/layout.css +2 -2
  32. data/test/css/sprites/position.css +4 -4
  33. data/test/css/sprites/repeat.css +2 -2
  34. data/test/css/sprites/resolution.css +2 -2
  35. data/test/css/sprites/responsive.css +7 -7
  36. data/test/css/sprites/retina.css +2 -2
  37. data/test/css/sprites/simple.css +1 -1
  38. data/test/css/sprites/spacing.css +2 -2
  39. data/test/html/grid/grid-settings.html +75 -0
  40. data/test/scss/grid/layout/grid-settings.scss +101 -0
  41. metadata +24 -7
  42. data/templates/project/_settings.scss +0 -32
  43. data/templates/project/screen.scss +0 -40
@@ -1,18 +1,49 @@
1
- stylesheet 'screen.scss', :media => "screen, projection"
2
- stylesheet '_base.scss'
1
+ # Manifest documentation here: http://compass-style.org/help/tutorials/extensions/
2
+ # Install module template: compass create <project name> -r ezy -u ezy
3
3
 
4
+ # Description
4
5
  description "Ezy Grid: a minimal grid framework with mammoth potential."
5
6
 
7
+ # Import all files and folders
8
+ discover :directories
9
+
10
+ # Skip auto creating a config.rb
11
+ no_configuration_file!
12
+
13
+ # Skip compiling styles
14
+ # skip_compilation!
15
+
16
+ # Stylesheet Import
17
+ file 'assets/sass/screen.scss', :to => :css
18
+
19
+ # Javascript Import
20
+ # file 'scripts.js', :like => :javascript, :to => 'scripts.js'
21
+
22
+ # General File Import
23
+ # file 'README.md', :to => "README.md"
24
+ file 'index.html', :to => "index.html"
25
+
26
+ # Compass Extension Help
6
27
  help %Q{
7
- Please see the source repository for all documentation and help:
28
+ All documentation can be found here:
29
+
30
+ http://raahede.github.io/ezy/
8
31
 
9
- http://github.com/raahede/ezy-grid
32
+ Go here for source code:
33
+
34
+ http://github.com/raahede/ezy
10
35
  }
11
36
 
37
+ # Compass Extension Welcome Message
38
+ # Users will see this when they create a new project using this template.
12
39
  welcome_message %Q{
13
- Please see the source repository for all documentation and help:
40
+ All documentation can be found here:
41
+
42
+ http://raahede.github.io/ezy/
43
+ }
44
+
45
+
46
+
47
+
14
48
 
15
- http://github.com/raahede/ezy-grid
16
49
 
17
- To get started, set up your grid in the base partial by following the inline instructions.
18
- }
@@ -56,16 +56,16 @@
56
56
  }
57
57
 
58
58
  .grid {
59
- margin-left: -1.425%;
60
- margin-right: -1.425%;
59
+ margin-left: -1.42857%;
60
+ margin-right: -1.42857%;
61
61
  }
62
62
 
63
63
  .column {
64
64
  /* Spanning 4 of 12 columns */
65
- width: 30.55%;
65
+ width: 30.55556%;
66
66
  float: left;
67
67
  /* Fixing double margin on IE6 */
68
68
  _display: inline;
69
- margin-left: 1.385%;
70
- margin-right: 1.385%;
69
+ margin-left: 1.38889%;
70
+ margin-right: 1.38889%;
71
71
  }
@@ -41,8 +41,8 @@
41
41
  }
42
42
 
43
43
  .grid {
44
- margin-left: -1.425%;
45
- margin-right: -1.425%;
44
+ margin-left: -1.42857%;
45
+ margin-right: -1.42857%;
46
46
  }
47
47
 
48
48
  /* -------------------------------------------------------------------- *
@@ -50,32 +50,32 @@
50
50
  */
51
51
  .span-columns-2 {
52
52
  /* Spanning 2 of 12 columns */
53
- width: 13.88%;
53
+ width: 13.88889%;
54
54
  float: left;
55
55
  /* Fixing double margin on IE6 */
56
56
  _display: inline;
57
- margin-left: 1.385%;
58
- margin-right: 1.385%;
57
+ margin-left: 1.38889%;
58
+ margin-right: 1.38889%;
59
59
  }
60
60
 
61
61
  .span-columns-4 {
62
62
  /* Spanning 4 of 12 columns */
63
- width: 30.55%;
63
+ width: 30.55556%;
64
64
  float: left;
65
65
  /* Fixing double margin on IE6 */
66
66
  _display: inline;
67
- margin-left: 1.385%;
68
- margin-right: 1.385%;
67
+ margin-left: 1.38889%;
68
+ margin-right: 1.38889%;
69
69
  }
70
70
 
71
71
  .span-columns-6 {
72
72
  /* Spanning 6 of 12 columns */
73
- width: 47.22%;
73
+ width: 47.22222%;
74
74
  float: left;
75
75
  /* Fixing double margin on IE6 */
76
76
  _display: inline;
77
- margin-left: 1.385%;
78
- margin-right: 1.385%;
77
+ margin-left: 1.38889%;
78
+ margin-right: 1.38889%;
79
79
  }
80
80
 
81
81
  /* -------------------------------------------------------------------- *
@@ -83,8 +83,8 @@
83
83
  */
84
84
  .span-columns-2, .span-columns-4, .span-columns-6, .span-columns-18 {
85
85
  /* Grid column base at a 12-column context */
86
- margin-left: 1.385%;
87
- margin-right: 1.385%;
86
+ margin-left: 1.38889%;
87
+ margin-right: 1.38889%;
88
88
  float: left;
89
89
  /* Fixing double margin on IE6 */
90
90
  _display: inline;
@@ -92,17 +92,17 @@
92
92
 
93
93
  .span-columns-2 {
94
94
  /* Spanning 2 of 12 columns */
95
- width: 13.88%;
95
+ width: 13.88889%;
96
96
  }
97
97
 
98
98
  .span-columns-4 {
99
99
  /* Spanning 4 of 12 columns */
100
- width: 30.55%;
100
+ width: 30.55556%;
101
101
  }
102
102
 
103
103
  .span-columns-6 {
104
104
  /* Spanning 6 of 12 columns */
105
- width: 47.22%;
105
+ width: 47.22222%;
106
106
  }
107
107
 
108
108
  /* -------------------------------------------------------------------- *
@@ -110,5 +110,5 @@
110
110
  */
111
111
  .span-columns-18 {
112
112
  /* Spanning 18 of 12 columns */
113
- width: 147.22%;
113
+ width: 147.22222%;
114
114
  }
@@ -180,8 +180,8 @@
180
180
  * -------------------------------------------------------------------- */
181
181
  .gutter-default-a-9, .gutter-default-b-9, .gutter-padding-a-10, .gutter-padding-b-10, .gutter-default-a-11, .gutter-default-b-11, .gutter-margin-a-12, .gutter-margin-b-12 {
182
182
  /* Grid column base at a 6-column context */
183
- margin-left: 2.775%;
184
- margin-right: 2.775%;
183
+ margin-left: 2.77778%;
184
+ margin-right: 2.77778%;
185
185
  float: left;
186
186
  /* Fixing double margin on IE6 */
187
187
  _display: inline;
@@ -192,12 +192,12 @@
192
192
  */
193
193
  .gutter-default-a-9 {
194
194
  /* Spanning 3 of 6 columns */
195
- width: 44.44%;
195
+ width: 44.44444%;
196
196
  }
197
197
 
198
198
  .gutter-default-b-9 {
199
199
  /* Spanning 6 of 6 columns */
200
- width: 94.44%;
200
+ width: 94.44444%;
201
201
  }
202
202
 
203
203
  /* -------------------------------------------------------------------- *
@@ -205,16 +205,16 @@
205
205
  */
206
206
  .gutter-padding-a-10 {
207
207
  /* Spanning 3 of 6 columns */
208
- width: 44.44%;
209
- padding-left: 2.775%;
210
- padding-right: 2.775%;
208
+ width: 44.44444%;
209
+ padding-left: 2.77778%;
210
+ padding-right: 2.77778%;
211
211
  }
212
212
 
213
213
  .gutter-padding-b-10 {
214
214
  /* Spanning 6 of 6 columns */
215
- width: 94.44%;
216
- padding-left: 2.775%;
217
- padding-right: 2.775%;
215
+ width: 94.44444%;
216
+ padding-left: 2.77778%;
217
+ padding-right: 2.77778%;
218
218
  }
219
219
 
220
220
  /* -------------------------------------------------------------------- *
@@ -222,16 +222,16 @@
222
222
  */
223
223
  .gutter-default-a-11 {
224
224
  /* Spanning 3 of 6 columns */
225
- width: 44.44%;
226
- padding-left: 2.775%;
227
- padding-right: 2.775%;
225
+ width: 44.44444%;
226
+ padding-left: 2.77778%;
227
+ padding-right: 2.77778%;
228
228
  }
229
229
 
230
230
  .gutter-default-b-11 {
231
231
  /* Spanning 6 of 6 columns */
232
- width: 94.44%;
233
- padding-left: 2.775%;
234
- padding-right: 2.775%;
232
+ width: 94.44444%;
233
+ padding-left: 2.77778%;
234
+ padding-right: 2.77778%;
235
235
  }
236
236
 
237
237
  /* -------------------------------------------------------------------- *
@@ -239,10 +239,10 @@
239
239
  */
240
240
  .gutter-margin-a-12 {
241
241
  /* Spanning 3 of 6 columns */
242
- width: 44.44%;
242
+ width: 44.44444%;
243
243
  }
244
244
 
245
245
  .gutter-margin-b-12 {
246
246
  /* Spanning 6 of 6 columns */
247
- width: 94.44%;
247
+ width: 94.44444%;
248
248
  }
@@ -34,8 +34,8 @@
34
34
 
35
35
  .span-1, .span-2, .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9, .span-10, .span-11, .span-12 {
36
36
  /* Grid column base at a 12-column context */
37
- margin-left: 1.04%;
38
- margin-right: 1.04%;
37
+ margin-left: 1.04167%;
38
+ margin-right: 1.04167%;
39
39
  float: left;
40
40
  /* Fixing double margin on IE6 */
41
41
  _display: inline;
@@ -50,8 +50,8 @@
50
50
  }
51
51
 
52
52
  .grid {
53
- margin-left: -1.06%;
54
- margin-right: -1.06%;
53
+ margin-left: -1.06383%;
54
+ margin-right: -1.06383%;
55
55
  }
56
56
 
57
57
  .span-1, .span-2, .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9, .span-10, .span-11, .span-12 {
@@ -67,12 +67,12 @@
67
67
 
68
68
  .span-2 {
69
69
  /* Spanning 2 of 12 columns */
70
- width: 14.58%;
70
+ width: 14.58333%;
71
71
  }
72
72
 
73
73
  .span-3 {
74
74
  /* Spanning 3 of 12 columns */
75
- width: 22.91%;
75
+ width: 22.91667%;
76
76
  }
77
77
 
78
78
  .span-4 {
@@ -82,12 +82,12 @@
82
82
 
83
83
  .span-5 {
84
84
  /* Spanning 5 of 12 columns */
85
- width: 39.58%;
85
+ width: 39.58333%;
86
86
  }
87
87
 
88
88
  .span-6 {
89
89
  /* Spanning 6 of 12 columns */
90
- width: 47.91%;
90
+ width: 47.91667%;
91
91
  }
92
92
 
93
93
  .span-7 {
@@ -97,12 +97,12 @@
97
97
 
98
98
  .span-8 {
99
99
  /* Spanning 8 of 12 columns */
100
- width: 64.58%;
100
+ width: 64.58333%;
101
101
  }
102
102
 
103
103
  .span-9 {
104
104
  /* Spanning 9 of 12 columns */
105
- width: 72.91%;
105
+ width: 72.91667%;
106
106
  }
107
107
 
108
108
  .span-10 {
@@ -112,10 +112,10 @@
112
112
 
113
113
  .span-11 {
114
114
  /* Spanning 11 of 12 columns */
115
- width: 89.58%;
115
+ width: 89.58333%;
116
116
  }
117
117
 
118
118
  .span-12 {
119
119
  /* Spanning 12 of 12 columns */
120
- width: 97.91%;
120
+ width: 97.91667%;
121
121
  }
@@ -0,0 +1,149 @@
1
+ /* ------------------------------------------------- *
2
+ * Ezy Grid by Frej Raahede Nielsen
3
+ * http://github.com/raahede/ezy
4
+ * ------------------------------------------------- *
5
+ */
6
+ /* ------------------------------------------------- *
7
+ * Micro Clearfix
8
+ * http://nicolasgallagher.com/micro-clearfix-hack/
9
+ */
10
+ .page:before, .grid:before,
11
+ .page:after,
12
+ .grid:after {
13
+ content: " ";
14
+ display: table;
15
+ }
16
+
17
+ .page:after, .grid:after {
18
+ clear: both;
19
+ }
20
+
21
+ .page, .grid {
22
+ /**
23
+ * For IE 6/7 only
24
+ * Include this rule to trigger hasLayout and contain floats.
25
+ */
26
+ *zoom: 1;
27
+ }
28
+
29
+ /* --- End clearfix --- */
30
+ .page {
31
+ margin-left: auto;
32
+ margin-right: auto;
33
+ }
34
+
35
+ .small, .medium, .large {
36
+ /* Grid column base at a 12-column context */
37
+ margin-left: 1.38889%;
38
+ margin-right: 1.38889%;
39
+ float: left;
40
+ /* Fixing double margin on IE6 */
41
+ _display: inline;
42
+ }
43
+
44
+ .page {
45
+ max-width: 700px;
46
+ /* Forcing static grid on IE6 and IE7 */
47
+ *width: 700px;
48
+ padding-left: 10px;
49
+ padding-right: 10px;
50
+ }
51
+ @media (min-width: 720px) {
52
+ .page {
53
+ max-width: 1390px;
54
+ /* Forcing static grid on IE6 and IE7 */
55
+ *width: 1390px;
56
+ padding-left: 30px;
57
+ padding-right: 30px;
58
+ }
59
+ }
60
+ .no-media-queries .page {
61
+ /* Fallback for browsers not supporting media queries */
62
+ max-width: 1390px;
63
+ /* Forcing static grid on IE6 and IE7 */
64
+ *width: 1390px;
65
+ padding-left: 30px;
66
+ padding-right: 30px;
67
+ }
68
+
69
+ .grid {
70
+ margin-left: -1.42857%;
71
+ margin-right: -1.42857%;
72
+ }
73
+ @media (min-width: 720px) {
74
+ .grid {
75
+ margin-left: -1.79856%;
76
+ margin-right: -1.79856%;
77
+ }
78
+ }
79
+ .no-media-queries .grid {
80
+ /* Fallback for browsers not supporting media queries */
81
+ margin-left: -1.79856%;
82
+ margin-right: -1.79856%;
83
+ }
84
+
85
+ .small, .medium, .large {
86
+ background: hotpink;
87
+ text-align: center;
88
+ zoom: 1;
89
+ }
90
+
91
+ .small {
92
+ /* Spanning 3 of 12 columns */
93
+ width: 22.22222%;
94
+ }
95
+ @media (min-width: 720px) {
96
+ .small {
97
+ /* Spanning 6 of 18 columns */
98
+ width: 29.86111%;
99
+ margin-left: 1.73611%;
100
+ margin-right: 1.73611%;
101
+ }
102
+ }
103
+ .no-media-queries .small {
104
+ /* Fallback for browsers not supporting media queries */
105
+ /* Spanning 6 of 18 columns */
106
+ width: 29.86111%;
107
+ margin-left: 1.73611%;
108
+ margin-right: 1.73611%;
109
+ }
110
+
111
+ .medium {
112
+ /* Spanning 6 of 12 columns */
113
+ width: 47.22222%;
114
+ }
115
+ @media (min-width: 720px) {
116
+ .medium {
117
+ /* Spanning 9 of 18 columns */
118
+ width: 46.52778%;
119
+ margin-left: 1.73611%;
120
+ margin-right: 1.73611%;
121
+ }
122
+ }
123
+ .no-media-queries .medium {
124
+ /* Fallback for browsers not supporting media queries */
125
+ /* Spanning 9 of 18 columns */
126
+ width: 46.52778%;
127
+ margin-left: 1.73611%;
128
+ margin-right: 1.73611%;
129
+ }
130
+
131
+ .large {
132
+ /* Spanning 12 of 12 columns */
133
+ width: 97.22222%;
134
+ }
135
+ @media (min-width: 720px) {
136
+ .large {
137
+ /* Spanning 18 of 18 columns */
138
+ width: 96.52778%;
139
+ margin-left: 1.73611%;
140
+ margin-right: 1.73611%;
141
+ }
142
+ }
143
+ .no-media-queries .large {
144
+ /* Fallback for browsers not supporting media queries */
145
+ /* Spanning 18 of 18 columns */
146
+ width: 96.52778%;
147
+ margin-left: 1.73611%;
148
+ margin-right: 1.73611%;
149
+ }
@@ -53,6 +53,8 @@
53
53
  max-width: 620px;
54
54
  /* Forcing static grid on IE6 and IE7 */
55
55
  *width: 620px;
56
+ padding-left: 10px;
57
+ padding-right: 10px;
56
58
  }
57
59
  }
58
60
  @media (min-width: 641px) {
@@ -60,6 +62,8 @@
60
62
  max-width: 940px;
61
63
  /* Forcing static grid on IE6 and IE7 */
62
64
  *width: 940px;
65
+ padding-left: 10px;
66
+ padding-right: 10px;
63
67
  }
64
68
  }
65
69
  .no-media-queries .page {
@@ -67,28 +71,30 @@
67
71
  max-width: 940px;
68
72
  /* Forcing static grid on IE6 and IE7 */
69
73
  *width: 940px;
74
+ padding-left: 10px;
75
+ padding-right: 10px;
70
76
  }
71
77
 
72
78
  .grid {
73
- margin-left: -3.33%;
74
- margin-right: -3.33%;
79
+ margin-left: -3.33333%;
80
+ margin-right: -3.33333%;
75
81
  }
76
82
  @media (min-width: 321px) {
77
83
  .grid {
78
- margin-left: -1.61%;
79
- margin-right: -1.61%;
84
+ margin-left: -1.6129%;
85
+ margin-right: -1.6129%;
80
86
  }
81
87
  }
82
88
  @media (min-width: 641px) {
83
89
  .grid {
84
- margin-left: -1.06%;
85
- margin-right: -1.06%;
90
+ margin-left: -1.06383%;
91
+ margin-right: -1.06383%;
86
92
  }
87
93
  }
88
94
  .no-media-queries .grid {
89
95
  /* Fallback for browsers not supporting media queries */
90
- margin-left: -1.06%;
91
- margin-right: -1.06%;
96
+ margin-left: -1.06383%;
97
+ margin-right: -1.06383%;
92
98
  }
93
99
 
94
100
  .small, .medium, .large {
@@ -104,25 +110,25 @@
104
110
  @media (min-width: 321px) {
105
111
  .small {
106
112
  /* Spanning 2 of 8 columns */
107
- width: 21.87%;
108
- margin-left: 1.56%;
109
- margin-right: 1.56%;
113
+ width: 21.875%;
114
+ margin-left: 1.5625%;
115
+ margin-right: 1.5625%;
110
116
  }
111
117
  }
112
118
  @media (min-width: 641px) {
113
119
  .small {
114
120
  /* Spanning 3 of 12 columns */
115
- width: 22.91%;
116
- margin-left: 1.04%;
117
- margin-right: 1.04%;
121
+ width: 22.91667%;
122
+ margin-left: 1.04167%;
123
+ margin-right: 1.04167%;
118
124
  }
119
125
  }
120
126
  .no-media-queries .small {
121
127
  /* Fallback for browsers not supporting media queries */
122
128
  /* Spanning 3 of 12 columns */
123
- width: 22.91%;
124
- margin-left: 1.04%;
125
- margin-right: 1.04%;
129
+ width: 22.91667%;
130
+ margin-left: 1.04167%;
131
+ margin-right: 1.04167%;
126
132
  }
127
133
 
128
134
  .medium {
@@ -132,25 +138,25 @@
132
138
  @media (min-width: 321px) {
133
139
  .medium {
134
140
  /* Spanning 4 of 8 columns */
135
- width: 46.87%;
136
- margin-left: 1.56%;
137
- margin-right: 1.56%;
141
+ width: 46.875%;
142
+ margin-left: 1.5625%;
143
+ margin-right: 1.5625%;
138
144
  }
139
145
  }
140
146
  @media (min-width: 641px) {
141
147
  .medium {
142
148
  /* Spanning 6 of 12 columns */
143
- width: 47.91%;
144
- margin-left: 1.04%;
145
- margin-right: 1.04%;
149
+ width: 47.91667%;
150
+ margin-left: 1.04167%;
151
+ margin-right: 1.04167%;
146
152
  }
147
153
  }
148
154
  .no-media-queries .medium {
149
155
  /* Fallback for browsers not supporting media queries */
150
156
  /* Spanning 6 of 12 columns */
151
- width: 47.91%;
152
- margin-left: 1.04%;
153
- margin-right: 1.04%;
157
+ width: 47.91667%;
158
+ margin-left: 1.04167%;
159
+ margin-right: 1.04167%;
154
160
  }
155
161
 
156
162
  .large {
@@ -160,23 +166,23 @@
160
166
  @media (min-width: 321px) {
161
167
  .large {
162
168
  /* Spanning 8 of 8 columns */
163
- width: 96.87%;
164
- margin-left: 1.56%;
165
- margin-right: 1.56%;
169
+ width: 96.875%;
170
+ margin-left: 1.5625%;
171
+ margin-right: 1.5625%;
166
172
  }
167
173
  }
168
174
  @media (min-width: 641px) {
169
175
  .large {
170
176
  /* Spanning 12 of 12 columns */
171
- width: 97.91%;
172
- margin-left: 1.04%;
173
- margin-right: 1.04%;
177
+ width: 97.91667%;
178
+ margin-left: 1.04167%;
179
+ margin-right: 1.04167%;
174
180
  }
175
181
  }
176
182
  .no-media-queries .large {
177
183
  /* Fallback for browsers not supporting media queries */
178
184
  /* Spanning 12 of 12 columns */
179
- width: 97.91%;
180
- margin-left: 1.04%;
181
- margin-right: 1.04%;
185
+ width: 97.91667%;
186
+ margin-left: 1.04167%;
187
+ margin-right: 1.04167%;
182
188
  }