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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: f56303dd08e2d83f79d822e6b629bb580810dd2c
4
- data.tar.gz: 14a17341df94f13dac8ca5f95b0ab5e399a94baa
3
+ metadata.gz: d2646d76fa14740473e6f2fc6650cb55f81ccda7
4
+ data.tar.gz: 4a07995eb2a198c4b3f09297045a655f28b21945
5
5
  SHA512:
6
- metadata.gz: c40dbc90d9e844f620d3026ca2c84a6f9d3c2cfd7f5d2f757234edccca6a49835b81a00ea0d9e87ec110d08ba2dcd42614b4cef15c3e34c8114c593bf6454451
7
- data.tar.gz: 42dc596c398a17b1c9516b7623c988f34ed162c263737699145e389180e1d736dff633fc4a08f99119dd0238fa55b690d590aa5c960ae28237a625c45026a0dc
6
+ metadata.gz: 6ec2d578a84920768fa0e6cedbfe958a7bcf466a207f153e50474347b657ba2188a5f9604ca512cacdc509c4349e672d4cfac289ceeacc9c5947b79d72c565d4
7
+ data.tar.gz: 71b27587c090b0db51516eb574198daf61b9cc01a6bb3c6dd59afdec5ff03fee27ae94fe54bc8eb18923a5a26370d7277d8f8e940620788bb8a9a069a9ed2a24
data/VERSION CHANGED
@@ -1 +1 @@
1
- 0.0.3
1
+ 0.0.4
data/ezy.gemspec CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  Gem::Specification.new do |s|
4
4
  # Release Specific Information
5
- s.version = "0.0.3"
5
+ s.version = "0.0.4"
6
6
  s.date = "2013-11-10"
7
7
 
8
8
  # Gem Details
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
- $gutter-property: $gutter-property
84
+ $property: false
85
85
  ) {
86
- @if $gutter-property == "margin" or $gutter-property == "padding" {
87
- #{ $gutter-property }: {
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: $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
- @extend %ezy-column;
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
+ }
@@ -40,21 +40,21 @@
40
40
  * Static columns: not using grid-init()
41
41
  */
42
42
  .span-columns-2 {
43
- /* Spanning 2 of false columns */
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 of false columns */
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 of false columns */
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 of false columns */
73
+ /* Spanning 2 columns */
74
74
  width: 150px;
75
75
  }
76
76
 
77
77
  .span-columns-4 {
78
- /* Spanning 4 of false columns */
78
+ /* Spanning 4 columns */
79
79
  width: 330px;
80
80
  }
81
81
 
82
82
  .span-columns-6 {
83
- /* Spanning 6 of false columns */
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 of false columns */
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.3
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