ezy 0.3.3 → 0.4.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 (23) hide show
  1. checksums.yaml +4 -4
  2. data/VERSION +1 -1
  3. data/ezy.gemspec +5 -5
  4. data/sass/ezy/_grid.scss +15 -25
  5. data/sass/ezy/_media.scss +2 -2
  6. data/sass/ezy/_sprites.scss +1 -1
  7. data/sass/ezy/grid/_debug.scss +8 -38
  8. data/sass/ezy/grid/_layout.scss +19 -19
  9. data/test/css/sprites/layout.css +2 -2
  10. data/test/css/sprites/position.css +4 -4
  11. data/test/css/sprites/repeat.css +6 -6
  12. data/test/css/sprites/resolution.css +4 -4
  13. data/test/css/sprites/responsive.css +13 -13
  14. data/test/css/sprites/retina.css +6 -6
  15. data/test/css/sprites/simple.css +3 -3
  16. data/test/css/sprites/spacing.css +4 -4
  17. data/test/html/grid/fluid.html +1 -1
  18. data/test/html/grid/responsive.html +1 -1
  19. data/test/scss/media.scss +1 -1
  20. metadata +14 -17
  21. data/test/css/grid/layout/debug.css +0 -393
  22. data/test/html/grid/debug.html +0 -63
  23. data/test/scss/grid/layout/debug.scss +0 -102
data/test/html/grid/debug.html DELETED
@@ -1,63 +0,0 @@
1
- <!doctype html>
2
- <!--[if lt IE 9]> <html class="no-media-queries"> <![endif]-->
3
- <!--[if gte IE 9]><!--> <html> <!--<![endif]-->
4
- <head>
5
- <meta charset="utf-8">
6
-
7
- <title>Grid: debug</title>
8
-
9
- <meta name="description" content="Ezy Grid Demo">
10
- <meta name="viewport" content="width=device-width">
11
-
12
- <link href="../../css/grid/layout/debug.css" rel="stylesheet">
13
-
14
- </head>
15
- <body>
16
- <div class="page">
17
- <div class="grid">
18
- <div class="small">
19
- <p>Small</p>
20
- </div>
21
- <div class="small">
22
- <p>Small</p>
23
- </div>
24
- <div class="small">
25
- <p>Small</p>
26
- </div>
27
- <div class="small">
28
- <p>Small</p>
29
- </div>
30
- <div class="small">
31
- <p>Small</p>
32
- </div>
33
- <div class="small">
34
- <p>Small</p>
35
- </div>
36
- <div class="medium">
37
- <p>Medium</p>
38
- </div>
39
- <div class="large">
40
- <p>Large</p>
41
- </div>
42
- <div class="medium">
43
- <p>Medium</p>
44
- </div>
45
- <div class="small">
46
- <p>Small</p>
47
- </div>
48
- <div class="small">
49
- <p>Small</p>
50
- </div>
51
- <div class="medium">
52
- <p>Medium</p>
53
- </div>
54
- <div class="medium">
55
- <p>Medium</p>
56
- </div>
57
- <div class="large">
58
- <p>Large</p>
59
- </div>
60
- </div>
61
- </div>
62
- </body>
63
- </html>
data/test/scss/grid/layout/debug.scss DELETED
@@ -1,102 +0,0 @@
1
- // ------------------------------------
2
- // Imports
3
-
4
- @import "../../../../sass/ezy/grid";
5
-
6
- $debug: true;
7
-
8
- // ------------------------------------
9
- // Number of columns on different screen sizes
10
-
11
- $columns-mobile : 4;
12
- $columns-tablet : 8;
13
- $columns-desktop : 12;
14
-
15
- // ------------------------------------
16
- // Grid settings
17
-
18
- $column-width : 60px;
19
- $gutter-width : 20px;
20
- $grid-padding : 10px;
21
- $total-columns : $columns-mobile; // mobile first
22
- $is-fluid : true;
23
-
24
- // ------------------------------------
25
- // Breakpoint settings
26
-
27
- // Selector for browsers not supporting media queries
28
- // (IE8 and down)
29
- $legacy-selector: ".no-media-queries";
30
-
31
- // ------------------------------------
32
- // Defining media query breakpoints
33
-
34
- $breakpoint-tablet : set-breakpoint( $min: grid-width( $columns-mobile ) + 1 );
35
- $breakpoint-desktop : set-breakpoint( $min: grid-width( $columns-tablet ) + 1, $legacy-support: true ); // Default for old IE
36
-
37
- // ------------------------------------
38
- // Defining grid layouts
39
-
40
- $mobile : set-layout( $total-columns, $grid-padding ); // mobile first
41
- $tablet : set-layout( $columns-tablet, $at-breakpoint: $breakpoint-tablet );
42
- $desktop : set-layout( $columns-desktop, $at-breakpoint: $breakpoint-desktop );
43
-
44
- // ------------------------------------
45
- // Initializing grid for cleaner output
46
-
47
- @include grid-init();
48
-
49
- // ------------------------------------
50
- // Grid layouts
51
-
52
- .page {
53
- @include each-layout {
54
- @include master;
55
- }
56
- }
57
-
58
- .grid {
59
- @include each-layout {
60
- @include container;
61
- }
62
- }
63
-
64
- %column {
65
- background: hotpink;
66
- text-align: center;
67
- zoom: 1;
68
- }
69
-
70
- .small {
71
- @extend %column;
72
- @include span-columns( 2 ); // 2 of 4 columns on mobile
73
- @include at-layout( $tablet ) {
74
- @include span-columns( 2 ); // 2 of 8 columns on tablet
75
- }
76
- @include at-layout( $desktop ) {
77
- @include span-columns( 3 ); // 3 of 12 columns on desktop
78
- }
79
- }
80
-
81
- .medium {
82
- @extend %column;
83
- @include span-columns( 4 ); // 4 of 4 columns on mobile
84
- @include at-layout( $tablet ) {
85
- @include span-columns( 4 ); // 4 of 8 columns on tablet
86
- }
87
- @include at-layout( $desktop ) {
88
- @include span-columns( 6 ); // 6 of 12 columns on desktop
89
- }
90
- }
91
-
92
- .large {
93
- @extend %column;
94
- @include span-columns( 4 ); // 4 of 4 columns on mobile
95
- @include at-layout( $tablet ) {
96
- @include span-columns( 8 ); // 8 of 8 columns on tablet
97
- }
98
- @include at-layout( $desktop ) {
99
- @include span-columns( 12 ); // 12 of 12 columns on desktio
100
- }
101
- }
102
-