ezy 0.0.3 → 0.0.4
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 +1 -1
- data/sass/ezy/_grid.scss +66 -28
- data/test/css/grid/gutter.css +170 -0
- data/test/css/grid/static.css +7 -7
- data/test/scss/grid/gutter.scss +146 -0
- metadata +3 -1
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: d2646d76fa14740473e6f2fc6650cb55f81ccda7
|
4
|
+
data.tar.gz: 4a07995eb2a198c4b3f09297045a655f28b21945
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 6ec2d578a84920768fa0e6cedbfe958a7bcf466a207f153e50474347b657ba2188a5f9604ca512cacdc509c4349e672d4cfac289ceeacc9c5947b79d72c565d4
|
7
|
+
data.tar.gz: 71b27587c090b0db51516eb574198daf61b9cc01a6bb3c6dd59afdec5ff03fee27ae94fe54bc8eb18923a5a26370d7277d8f8e940620788bb8a9a069a9ed2a24
|
data/VERSION
CHANGED
@@ -1 +1 @@
|
|
1
|
-
0.0.
|
1
|
+
0.0.4
|
data/ezy.gemspec
CHANGED
data/sass/ezy/_grid.scss
CHANGED
@@ -81,10 +81,13 @@ $context-warn: "You must set $context if $is-fluid is set to true.";
|
|
81
81
|
|
82
82
|
@mixin gutters(
|
83
83
|
$context: false,
|
84
|
-
$
|
84
|
+
$property: false
|
85
85
|
) {
|
86
|
-
@if
|
87
|
-
|
86
|
+
@if (not $property) {
|
87
|
+
$property: $gutter-property;
|
88
|
+
}
|
89
|
+
@if $property == "margin" or $property == "padding" {
|
90
|
+
#{ $property }: {
|
88
91
|
left: gutter( $context );
|
89
92
|
right: gutter( $context );
|
90
93
|
}
|
@@ -208,42 +211,77 @@ $context-warn: "You must set $context if $is-fluid is set to true.";
|
|
208
211
|
$columns,
|
209
212
|
$context: false,
|
210
213
|
$at-breakpoint: false,
|
211
|
-
$gutter-property:
|
214
|
+
$gutter-property: false
|
212
215
|
) {
|
213
216
|
$width: span-column-width( $columns );
|
214
|
-
/* Spanning #{ $columns } of #{ $context } columns */
|
215
217
|
@if $is-fluid and $context {
|
218
|
+
/* Spanning #{ $columns } of #{ $context } columns */
|
216
219
|
$context-width: context-width( $context );
|
217
220
|
$pct-width: percentage-round( $width / $context-width );
|
218
221
|
width: $pct-width;
|
219
222
|
} @else {
|
223
|
+
/* Spanning #{ $columns } columns */
|
220
224
|
width: $width;
|
221
225
|
}
|
222
|
-
@if $is-fluid {
|
223
|
-
@if (not $at-breakpoint) {
|
224
|
-
@if $total-columns < $context {
|
225
|
-
@warn "Please check if $total-columns is set. $total-columns should be the highest number of columns occuring in your layout. This error will not break your layout, but will increase the CSS output.";
|
226
|
-
@include gutters( $context, $gutter-property );
|
227
|
-
} @else if (not $grid-init) {
|
228
|
-
@warn "Include grid-init() after setting $total-columns for cleaner CSS output.";
|
229
|
-
@include gutters( $context, $gutter-property );
|
230
|
-
} @else {
|
231
|
-
@extend %ezy-column-#{ $context };
|
232
|
-
}
|
233
|
-
} @else {
|
234
|
-
@include gutters( $context, $gutter-property );
|
235
|
-
}
|
236
|
-
@if $columns > $context {
|
237
|
-
@warn "You are trying to span #{ $columns } columns, but your layout only has #{ $context } columns.";
|
238
|
-
}
|
239
|
-
@if (not $context) {
|
240
|
-
@warn $context-warn;
|
241
|
-
}
|
242
|
-
} @else if (not $grid-init) {
|
243
|
-
@warn "Include grid-init() after setting $gutter-width for cleaner CSS output.";
|
226
|
+
@if $gutter-property and $is-fluid and $context {
|
244
227
|
@include gutters( $context, $gutter-property );
|
228
|
+
|
229
|
+
} @else if $gutter-property and $is-fluid and ( not $context ) {
|
230
|
+
@warn $context-warn;
|
231
|
+
|
232
|
+
} @else if $gutter-property and ( not $is-fluid ) {
|
233
|
+
@include gutters( $gutter-property );
|
234
|
+
|
235
|
+
} @else if $is-fluid and $context and $at-breakpoint {
|
236
|
+
@include gutters( $context );
|
237
|
+
|
238
|
+
} @else if $is-fluid and $context and ( $total-columns < $context ) {
|
239
|
+
@include gutters( $context );
|
240
|
+
@warn "Please check if $total-columns is set. $total-columns should be the highest number of columns occuring in your layout. This error will not break your layout, but will increase the CSS output.";
|
241
|
+
|
242
|
+
} @else if $is-fluid and $context and ( not $grid-init ) {
|
243
|
+
@include gutters( $context );
|
244
|
+
@warn "Include grid-init() after setting $total-columns for cleaner CSS output.";
|
245
|
+
|
246
|
+
} @else if $is-fluid and $context {
|
247
|
+
@extend %ezy-column-#{ $context };
|
248
|
+
|
249
|
+
} @else if $is-fluid { // $context not set
|
250
|
+
@warn $context-warn;
|
251
|
+
|
252
|
+
} @else if $grid-init { // Grid is static
|
253
|
+
@extend %ezy-column;
|
254
|
+
|
245
255
|
} @else {
|
246
|
-
@
|
256
|
+
@warn "Include grid-init() after setting $gutter-width for cleaner CSS output.";
|
257
|
+
@include gutters( $context );
|
247
258
|
}
|
259
|
+
|
260
|
+
// @if $is-fluid {
|
261
|
+
// @if (not $at-breakpoint) {
|
262
|
+
// @if $total-columns < $context {
|
263
|
+
// @warn "Please check if $total-columns is set. $total-columns should be the highest number of columns occuring in your layout. This error will not break your layout, but will increase the CSS output.";
|
264
|
+
// @include gutters( $context );
|
265
|
+
// } @else if (not $grid-init) {
|
266
|
+
// @warn "Include grid-init() after setting $total-columns for cleaner CSS output.";
|
267
|
+
// @include gutters( $context );
|
268
|
+
// } @else {
|
269
|
+
// @extend %ezy-column-#{ $context };
|
270
|
+
// }
|
271
|
+
// } @else {
|
272
|
+
// @include gutters( $context );
|
273
|
+
// }
|
274
|
+
// @if $columns > $context {
|
275
|
+
// @warn "You are trying to span #{ $columns } columns, but your layout only has #{ $context } columns.";
|
276
|
+
// }
|
277
|
+
// @if (not $context) {
|
278
|
+
// @warn $context-warn;
|
279
|
+
// }
|
280
|
+
// } @else if (not $grid-init) {
|
281
|
+
// @warn "Include grid-init() after setting $gutter-width for cleaner CSS output.";
|
282
|
+
// @include gutters( $context );
|
283
|
+
// } @else {
|
284
|
+
// @extend %ezy-column;
|
285
|
+
// }
|
248
286
|
}
|
249
287
|
|
@@ -0,0 +1,170 @@
|
|
1
|
+
/* -------------------------------------------------------------------- *
|
2
|
+
* Micro Clearfix
|
3
|
+
* http://nicolasgallagher.com/micro-clearfix-hack/
|
4
|
+
*/
|
5
|
+
/* -------------------------------------------------------------------- */
|
6
|
+
/* -------------------------------------------------------------------- *
|
7
|
+
* Static grid
|
8
|
+
* -------------------------------------------------------------------- */
|
9
|
+
/* -------------------------------------------------------------------- *
|
10
|
+
* Default gutter property
|
11
|
+
*/
|
12
|
+
.gutter-default-2 {
|
13
|
+
/* Spanning 2 columns */
|
14
|
+
width: 150px;
|
15
|
+
margin-left: 15px;
|
16
|
+
margin-right: 15px;
|
17
|
+
}
|
18
|
+
|
19
|
+
.gutter-default-3 {
|
20
|
+
/* Spanning 3 columns */
|
21
|
+
width: 240px;
|
22
|
+
margin-left: 15px;
|
23
|
+
margin-right: 15px;
|
24
|
+
}
|
25
|
+
|
26
|
+
/* -------------------------------------------------------------------- *
|
27
|
+
* Forcing gutter property: padding
|
28
|
+
*/
|
29
|
+
.gutter-padding-2 {
|
30
|
+
/* Spanning 2 columns */
|
31
|
+
width: 150px;
|
32
|
+
margin-left: 15px;
|
33
|
+
margin-right: 15px;
|
34
|
+
}
|
35
|
+
|
36
|
+
.gutter-padding-3 {
|
37
|
+
/* Spanning 3 columns */
|
38
|
+
width: 240px;
|
39
|
+
margin-left: 15px;
|
40
|
+
margin-right: 15px;
|
41
|
+
}
|
42
|
+
|
43
|
+
/* -------------------------------------------------------------------- *
|
44
|
+
* Forcing gutter property: margin
|
45
|
+
*/
|
46
|
+
.gutter-margin-2 {
|
47
|
+
/* Spanning 2 columns */
|
48
|
+
width: 150px;
|
49
|
+
margin-left: 15px;
|
50
|
+
margin-right: 15px;
|
51
|
+
}
|
52
|
+
|
53
|
+
.gutter-margin-3 {
|
54
|
+
/* Spanning 3 columns */
|
55
|
+
width: 240px;
|
56
|
+
margin-left: 15px;
|
57
|
+
margin-right: 15px;
|
58
|
+
}
|
59
|
+
|
60
|
+
/* -------------------------------------------------------------------- *
|
61
|
+
* Trying again, using grid-init()
|
62
|
+
* -------------------------------------------------------------------- */
|
63
|
+
.gutter-default-2, .gutter-default-3 {
|
64
|
+
float: left;
|
65
|
+
margin-left: 15px;
|
66
|
+
margin-right: 15px;
|
67
|
+
}
|
68
|
+
|
69
|
+
/* -------------------------------------------------------------------- *
|
70
|
+
* Default gutter property after grid-init()
|
71
|
+
*/
|
72
|
+
.gutter-default-2 {
|
73
|
+
/* Spanning 2 columns */
|
74
|
+
width: 150px;
|
75
|
+
}
|
76
|
+
|
77
|
+
.gutter-default-3 {
|
78
|
+
/* Spanning 3 columns */
|
79
|
+
width: 240px;
|
80
|
+
}
|
81
|
+
|
82
|
+
/* -------------------------------------------------------------------- *
|
83
|
+
* Forcing gutter property: padding after grid-init()
|
84
|
+
*/
|
85
|
+
.gutter-padding-2 {
|
86
|
+
/* Spanning 2 columns */
|
87
|
+
width: 150px;
|
88
|
+
margin-left: 15px;
|
89
|
+
margin-right: 15px;
|
90
|
+
}
|
91
|
+
|
92
|
+
.gutter-padding-3 {
|
93
|
+
/* Spanning 3 columns */
|
94
|
+
width: 240px;
|
95
|
+
margin-left: 15px;
|
96
|
+
margin-right: 15px;
|
97
|
+
}
|
98
|
+
|
99
|
+
/* -------------------------------------------------------------------- *
|
100
|
+
* Forcing gutter property: margin after grid-init()
|
101
|
+
*/
|
102
|
+
.gutter-margin-2 {
|
103
|
+
/* Spanning 2 columns */
|
104
|
+
width: 150px;
|
105
|
+
margin-left: 15px;
|
106
|
+
margin-right: 15px;
|
107
|
+
}
|
108
|
+
|
109
|
+
.gutter-margin-3 {
|
110
|
+
/* Spanning 3 columns */
|
111
|
+
width: 240px;
|
112
|
+
margin-left: 15px;
|
113
|
+
margin-right: 15px;
|
114
|
+
}
|
115
|
+
|
116
|
+
/* -------------------------------------------------------------------- *
|
117
|
+
* Again, now with a fluid grid
|
118
|
+
* -------------------------------------------------------------------- */
|
119
|
+
.gutter-default-2, .gutter-default-3 {
|
120
|
+
float: left;
|
121
|
+
margin-left: 2.77%;
|
122
|
+
margin-right: 2.77%;
|
123
|
+
}
|
124
|
+
|
125
|
+
/* -------------------------------------------------------------------- *
|
126
|
+
* Default gutter property after grid-init()
|
127
|
+
*/
|
128
|
+
.gutter-default-2 {
|
129
|
+
/* Spanning 2 of 6 columns */
|
130
|
+
width: 27.77%;
|
131
|
+
}
|
132
|
+
|
133
|
+
.gutter-default-3 {
|
134
|
+
/* Spanning 3 of 6 columns */
|
135
|
+
width: 44.44%;
|
136
|
+
}
|
137
|
+
|
138
|
+
/* -------------------------------------------------------------------- *
|
139
|
+
* Forcing gutter property: padding after grid-init()
|
140
|
+
*/
|
141
|
+
.gutter-padding-2 {
|
142
|
+
/* Spanning 2 of 6 columns */
|
143
|
+
width: 27.77%;
|
144
|
+
padding-left: 2.77%;
|
145
|
+
padding-right: 2.77%;
|
146
|
+
}
|
147
|
+
|
148
|
+
.gutter-padding-3 {
|
149
|
+
/* Spanning 3 of 6 columns */
|
150
|
+
width: 44.44%;
|
151
|
+
padding-left: 2.77%;
|
152
|
+
padding-right: 2.77%;
|
153
|
+
}
|
154
|
+
|
155
|
+
/* -------------------------------------------------------------------- *
|
156
|
+
* Forcing gutter property: margin after grid-init()
|
157
|
+
*/
|
158
|
+
.gutter-margin-2 {
|
159
|
+
/* Spanning 2 of 6 columns */
|
160
|
+
width: 27.77%;
|
161
|
+
margin-left: 2.77%;
|
162
|
+
margin-right: 2.77%;
|
163
|
+
}
|
164
|
+
|
165
|
+
.gutter-margin-3 {
|
166
|
+
/* Spanning 3 of 6 columns */
|
167
|
+
width: 44.44%;
|
168
|
+
margin-left: 2.77%;
|
169
|
+
margin-right: 2.77%;
|
170
|
+
}
|
data/test/css/grid/static.css
CHANGED
@@ -40,21 +40,21 @@
|
|
40
40
|
* Static columns: not using grid-init()
|
41
41
|
*/
|
42
42
|
.span-columns-2 {
|
43
|
-
/* Spanning 2
|
43
|
+
/* Spanning 2 columns */
|
44
44
|
width: 150px;
|
45
45
|
margin-left: 15px;
|
46
46
|
margin-right: 15px;
|
47
47
|
}
|
48
48
|
|
49
49
|
.span-columns-4 {
|
50
|
-
/* Spanning 4
|
50
|
+
/* Spanning 4 columns */
|
51
51
|
width: 330px;
|
52
52
|
margin-left: 15px;
|
53
53
|
margin-right: 15px;
|
54
54
|
}
|
55
55
|
|
56
56
|
.span-columns-6 {
|
57
|
-
/* Spanning 6
|
57
|
+
/* Spanning 6 columns */
|
58
58
|
width: 510px;
|
59
59
|
margin-left: 15px;
|
60
60
|
margin-right: 15px;
|
@@ -70,17 +70,17 @@
|
|
70
70
|
}
|
71
71
|
|
72
72
|
.span-columns-2 {
|
73
|
-
/* Spanning 2
|
73
|
+
/* Spanning 2 columns */
|
74
74
|
width: 150px;
|
75
75
|
}
|
76
76
|
|
77
77
|
.span-columns-4 {
|
78
|
-
/* Spanning 4
|
78
|
+
/* Spanning 4 columns */
|
79
79
|
width: 330px;
|
80
80
|
}
|
81
81
|
|
82
82
|
.span-columns-6 {
|
83
|
-
/* Spanning 6
|
83
|
+
/* Spanning 6 columns */
|
84
84
|
width: 510px;
|
85
85
|
}
|
86
86
|
|
@@ -88,6 +88,6 @@
|
|
88
88
|
* Grid colum spanning more columns than layout
|
89
89
|
*/
|
90
90
|
.span-columns-18 {
|
91
|
-
/* Spanning 18
|
91
|
+
/* Spanning 18 columns */
|
92
92
|
width: 1590px;
|
93
93
|
}
|
@@ -0,0 +1,146 @@
|
|
1
|
+
// ---------------------------------------------------------------------------
|
2
|
+
// Imports
|
3
|
+
|
4
|
+
@import "../../../sass/ezy";
|
5
|
+
|
6
|
+
/* -------------------------------------------------------------------- *
|
7
|
+
* Static grid
|
8
|
+
* -------------------------------------------------------------------- */
|
9
|
+
|
10
|
+
$column-width: 60px;
|
11
|
+
$gutter-width: 30px;
|
12
|
+
$total-columns: 6;
|
13
|
+
$is-fluid: false;
|
14
|
+
|
15
|
+
/* -------------------------------------------------------------------- *
|
16
|
+
* Default gutter property
|
17
|
+
*/
|
18
|
+
|
19
|
+
.gutter-default-2 {
|
20
|
+
@include span-columns( 2 );
|
21
|
+
}
|
22
|
+
|
23
|
+
.gutter-default-3 {
|
24
|
+
@include span-columns( 3 );
|
25
|
+
}
|
26
|
+
|
27
|
+
/* -------------------------------------------------------------------- *
|
28
|
+
* Forcing gutter property: padding
|
29
|
+
*/
|
30
|
+
|
31
|
+
.gutter-padding-2 {
|
32
|
+
@include span-columns( 2, $gutter-property: "padding" );
|
33
|
+
}
|
34
|
+
|
35
|
+
.gutter-padding-3 {
|
36
|
+
@include span-columns( 3, $gutter-property: "padding" );
|
37
|
+
}
|
38
|
+
|
39
|
+
|
40
|
+
/* -------------------------------------------------------------------- *
|
41
|
+
* Forcing gutter property: margin
|
42
|
+
*/
|
43
|
+
|
44
|
+
.gutter-margin-2 {
|
45
|
+
@include span-columns( 2, $gutter-property: "margin" );
|
46
|
+
}
|
47
|
+
|
48
|
+
.gutter-margin-3 {
|
49
|
+
@include span-columns( 3, $gutter-property: "margin" );
|
50
|
+
}
|
51
|
+
|
52
|
+
|
53
|
+
/* -------------------------------------------------------------------- *
|
54
|
+
* Trying again, using grid-init()
|
55
|
+
* -------------------------------------------------------------------- */
|
56
|
+
|
57
|
+
@include grid-init();
|
58
|
+
|
59
|
+
/* -------------------------------------------------------------------- *
|
60
|
+
* Default gutter property after grid-init()
|
61
|
+
*/
|
62
|
+
|
63
|
+
.gutter-default-2 {
|
64
|
+
@include span-columns( 2 );
|
65
|
+
}
|
66
|
+
|
67
|
+
.gutter-default-3 {
|
68
|
+
@include span-columns( 3 );
|
69
|
+
}
|
70
|
+
|
71
|
+
|
72
|
+
/* -------------------------------------------------------------------- *
|
73
|
+
* Forcing gutter property: padding after grid-init()
|
74
|
+
*/
|
75
|
+
|
76
|
+
.gutter-padding-2 {
|
77
|
+
@include span-columns( 2, $gutter-property: "padding" );
|
78
|
+
}
|
79
|
+
|
80
|
+
.gutter-padding-3 {
|
81
|
+
@include span-columns( 3, $gutter-property: "padding" );
|
82
|
+
}
|
83
|
+
|
84
|
+
|
85
|
+
/* -------------------------------------------------------------------- *
|
86
|
+
* Forcing gutter property: margin after grid-init()
|
87
|
+
*/
|
88
|
+
|
89
|
+
.gutter-margin-2 {
|
90
|
+
@include span-columns( 2, $gutter-property: "margin" );
|
91
|
+
}
|
92
|
+
|
93
|
+
.gutter-margin-3 {
|
94
|
+
@include span-columns( 3, $gutter-property: "margin" );
|
95
|
+
}
|
96
|
+
|
97
|
+
|
98
|
+
|
99
|
+
/* -------------------------------------------------------------------- *
|
100
|
+
* Again, now with a fluid grid
|
101
|
+
* -------------------------------------------------------------------- */
|
102
|
+
|
103
|
+
$is-fluid: true;
|
104
|
+
@include grid-init();
|
105
|
+
|
106
|
+
/* -------------------------------------------------------------------- *
|
107
|
+
* Default gutter property after grid-init()
|
108
|
+
*/
|
109
|
+
|
110
|
+
.gutter-default-2 {
|
111
|
+
@include span-columns( 2, $total-columns );
|
112
|
+
}
|
113
|
+
|
114
|
+
.gutter-default-3 {
|
115
|
+
@include span-columns( 3, $total-columns );
|
116
|
+
}
|
117
|
+
|
118
|
+
|
119
|
+
/* -------------------------------------------------------------------- *
|
120
|
+
* Forcing gutter property: padding after grid-init()
|
121
|
+
*/
|
122
|
+
|
123
|
+
.gutter-padding-2 {
|
124
|
+
@include span-columns( 2, $total-columns, $gutter-property: "padding" );
|
125
|
+
}
|
126
|
+
|
127
|
+
.gutter-padding-3 {
|
128
|
+
@include span-columns( 3, $total-columns, $gutter-property: "padding" );
|
129
|
+
}
|
130
|
+
|
131
|
+
|
132
|
+
/* -------------------------------------------------------------------- *
|
133
|
+
* Forcing gutter property: margin after grid-init()
|
134
|
+
*/
|
135
|
+
|
136
|
+
.gutter-margin-2 {
|
137
|
+
@include span-columns( 2, $total-columns, $gutter-property: "margin" );
|
138
|
+
}
|
139
|
+
|
140
|
+
.gutter-margin-3 {
|
141
|
+
@include span-columns( 3, $total-columns, $gutter-property: "margin" );
|
142
|
+
}
|
143
|
+
|
144
|
+
|
145
|
+
|
146
|
+
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: ezy
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.0.
|
4
|
+
version: 0.0.4
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Frej Raahede Nielsen
|
@@ -61,11 +61,13 @@ files:
|
|
61
61
|
- test/config.rb
|
62
62
|
- test/css/grid/elastic.css
|
63
63
|
- test/css/grid/fluid.css
|
64
|
+
- test/css/grid/gutter.css
|
64
65
|
- test/css/grid/responsive.css
|
65
66
|
- test/css/grid/static.css
|
66
67
|
- test/css/media.css
|
67
68
|
- test/scss/grid/elastic.scss
|
68
69
|
- test/scss/grid/fluid.scss
|
70
|
+
- test/scss/grid/gutter.scss
|
69
71
|
- test/scss/grid/responsive.scss
|
70
72
|
- test/scss/grid/static.scss
|
71
73
|
- test/scss/media.scss
|