ezy 0.3.3 → 0.4.0.beta

Sign up to get free protection for your applications and to get access to all the features.
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
-