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.
- checksums.yaml +4 -4
- data/VERSION +1 -1
- data/ezy.gemspec +5 -5
- data/sass/ezy/_grid.scss +15 -25
- data/sass/ezy/_media.scss +2 -2
- data/sass/ezy/_sprites.scss +1 -1
- data/sass/ezy/grid/_debug.scss +8 -38
- data/sass/ezy/grid/_layout.scss +19 -19
- data/test/css/sprites/layout.css +2 -2
- data/test/css/sprites/position.css +4 -4
- data/test/css/sprites/repeat.css +6 -6
- data/test/css/sprites/resolution.css +4 -4
- data/test/css/sprites/responsive.css +13 -13
- data/test/css/sprites/retina.css +6 -6
- data/test/css/sprites/simple.css +3 -3
- data/test/css/sprites/spacing.css +4 -4
- data/test/html/grid/fluid.html +1 -1
- data/test/html/grid/responsive.html +1 -1
- data/test/scss/media.scss +1 -1
- metadata +14 -17
- data/test/css/grid/layout/debug.css +0 -393
- data/test/html/grid/debug.html +0 -63
- 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>
|
@@ -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
|
-
|