gridle 2.0.2 → 2.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.
@@ -446,19 +446,17 @@ $_gridle_generateOnlyOnce : true; // keep track of generate once classes
446
446
 
447
447
  // get the actual state
448
448
  $state : gridle_get_state($stateName);
449
+ $classes : gridle_get_state_var(classes, $state);
449
450
 
450
- // debug
451
- @debug("Generate classes for state #{$stateName}");
451
+ // stop here if no classes wanted
452
+ @if $classes {
452
453
 
453
- // scope all the classes in a media query
454
- @include gridle_state($state, false) {
455
-
456
- // setup vars :
457
- $classes : gridle_get_state_var(classes, $state);
458
-
459
- // stop here if no classes wanted
460
- @if $classes {
454
+ // debug
455
+ @debug("Generate classes for state #{$stateName}");
461
456
 
457
+ // scope all the classes in a media query
458
+ @include gridle_state($state, false) {
459
+
462
460
  // generate all classes for columns
463
461
  $i : 0;
464
462
  @each $columnName, $column in gridle_get_columns($state) {
@@ -477,7 +475,7 @@ $_gridle_generateOnlyOnce : true; // keep track of generate once classes
477
475
  // classes
478
476
  @if _gridle_need_to_generate(grid, $package) {
479
477
  #{_gridle_classname(grid, $stateName, $columnName)} {
480
- @include gridle($columnsCount, $columnsContext);
478
+ @include gridle_grid($columnsCount, $columnsContext);
481
479
  }
482
480
  }
483
481
  @if _gridle_need_to_generate(push, $package) {
@@ -1,9 +1,9 @@
1
1
  // |------------------------------------------------------
2
2
  // |------------------------------------------------------
3
3
  // @created 25.03.13
4
- // @updated 09.10.15
4
+ // @updated 20.10.15
5
5
  // @author Olivier Bossel <olivier.bossel@gmail.com>
6
- // @version 2.0.2
6
+ // @version 2.0.4
7
7
  // |------------------------------------------------------
8
8
  // |------------------------------------------------------
9
9
 
@@ -16,7 +16,7 @@
16
16
  // |------------------------------------------------------
17
17
  // |------------------------------------------------------
18
18
 
19
- $_gridle-version : "2.0.2";
19
+ $_gridle-version : "2.0.4";
20
20
 
21
21
 
22
22
 
@@ -27,6 +27,7 @@ $_gridle-version : "2.0.2";
27
27
  // |------------------------------------------------------
28
28
  // |------------------------------------------------------
29
29
 
30
+ $gridle-debug : true;
30
31
  $_gridle_is_in_generate_phase : false; // keep track if we are in generate phase or not anymore
31
32
  $_gridle_inited : false; // keep track if gridle has been inited (silent classes, etc..) or not
32
33
  $_gridle_settings : (); // the default settings
@@ -38,6 +39,8 @@ $_gridle_apply_css_for : (); // save the rules that will be applied for eac
38
39
 
39
40
  $_gridle_current_state : (); // save the current state
40
41
  $_gridle_current_stateName : default; // save the current state name
42
+ $_gridle_previous_state : (); // save the previous state
43
+ $_gridle_previous_stateName : default; // save the previous state name
41
44
 
42
45
  $_content_arg_state : null; // this variable is used to pass state through global variable into an @content
43
46
 
@@ -128,4 +131,4 @@ $gridle-vendor-prefix : true; // set if need to add vendor prefixes when ne
128
131
  // |------------------------------------------------------
129
132
  // |------------------------------------------------------
130
133
 
131
- // @import 'default-states';
134
+ @import 'default-states';
@@ -42,15 +42,11 @@
42
42
  %#{$stateName}-#{$for} {
43
43
  // inject content
44
44
  @content;
45
- // extend common class by the registered css
46
- @include _gridle_extend_common_class($for, $stateName);
47
45
  }
48
46
  @at-root (without: media) {
49
47
  %at-root-#{$stateName}-#{$for} {
50
48
  // inject content
51
49
  @content;
52
- // extend common class by the registered css
53
- @include _gridle_extend_common_class($for, $stateName);
54
50
  }
55
51
  }
56
52
  }
@@ -61,150 +57,203 @@
61
57
  // get state name
62
58
  $stateName : gridle_get_state_var(name, $state);
63
59
 
60
+ // define packages to init
61
+ // the order can matter here
62
+ $packages : (
63
+ container,
64
+ grid-order,
65
+ row,
66
+ row-full,
67
+ col,
68
+ grid,
69
+ grid-table,
70
+ grid-adapt,
71
+ grid-grow,
72
+ push,
73
+ pull,
74
+ prefix,
75
+ suffix,
76
+ nowrap,
77
+ wrap,
78
+ clear-each,
79
+ grid-centered,
80
+ row-align,
81
+ hide,
82
+ not-visible,
83
+ show,
84
+ show-inline,
85
+ visible,
86
+ float,
87
+ clear,
88
+ no-gutter,
89
+ gutter,
90
+ row-debug
91
+ );
92
+
93
+ // loop on each packages to init their common silient classes
94
+ @each $package in $packages {
95
+ // include common
96
+ @include _gridle_common_silent_class_name($package, $stateName) {
97
+ @include _gridle_include_common($package, $stateName);
98
+ }
99
+ }
100
+ }
101
+
102
+ @mixin _gridle_include_common(
103
+ $package,
104
+ $state : current
105
+ ) {
106
+
107
+ // get state name
108
+ $state : gridle_get_state($state);
109
+
64
110
  // container
65
- @include _gridle_common_silent_class_name(container, $stateName) {
111
+ @if $package == container {
66
112
  @include _gridle_common_container($state);
67
113
  }
68
114
 
69
115
  // order
70
- @include _gridle_common_silent_class_name(grid-order, $stateName) {
116
+ @if $package == grid-order {
71
117
  @include _gridle_common_grid_order($state);
72
118
  }
73
119
 
74
120
  // row
75
- @include _gridle_common_silent_class_name(row, $stateName) {
121
+ @if $package == row {
76
122
  @include _gridle_common_row($state);
77
123
  }
78
124
 
79
125
  // row-full
80
- @include _gridle_common_silent_class_name(row-full, $stateName) {
126
+ @if $package == row-full {
81
127
  @include _gridle_common_row_full($state);
82
128
  }
83
129
 
84
130
  // col
85
- @include _gridle_common_silent_class_name(col, $stateName) {
131
+ @if $package == col {
86
132
  @include _gridle_common_col($state);
87
133
  }
88
134
 
89
135
  // grid
90
- @include _gridle_common_silent_class_name(grid, $stateName) {
136
+ @if $package == grid {
91
137
  @include _gridle_common_grid($state);
92
138
  }
93
139
 
94
140
  // grid-table
95
- @include _gridle_common_silent_class_name(grid-table, $stateName) {
141
+ @if $package == grid-table {
96
142
  @include _gridle_common_grid_table($state);
97
143
  }
98
144
 
99
145
  // grid-adapt
100
- @include _gridle_common_silent_class_name(grid-adapt, $stateName) {
146
+ @if $package == grid-adapt {
101
147
  @include _gridle_common_grid_adapt($state);
102
148
  }
103
149
 
104
150
  // grid-grow
105
- @include _gridle_common_silent_class_name(grid-grow, $stateName) {
151
+ @if $package == grid-grow {
106
152
  @include _gridle_common_grid_grow($state);
107
153
  }
108
154
 
109
155
  // push
110
- @include _gridle_common_silent_class_name(push, $stateName) {
156
+ @if $package == push{
111
157
  @include _gridle_common_push($state);
112
158
  }
113
159
 
114
160
  // pull
115
- @include _gridle_common_silent_class_name(pull, $stateName) {
161
+ @if $package == pull{
116
162
  @include _gridle_common_pull($state);
117
163
  }
118
164
 
119
165
  // prefix
120
- @include _gridle_common_silent_class_name(prefix, $stateName) {
166
+ @if $package == prefix{
121
167
  @include _gridle_common_prefix($state);
122
168
  }
123
169
 
124
170
  // suffix
125
- @include _gridle_common_silent_class_name(suffix, $stateName) {
171
+ @if $package == suffix {
126
172
  @include _gridle_common_suffix($state);
127
173
  }
128
174
 
129
175
  // nowrap
130
- @include _gridle_common_silent_class_name(nowrap, $stateName) {
176
+ @if $package == nowrap {
131
177
  @include _gridle_common_nowrap($state);
132
178
  }
133
179
 
134
180
  // wrap
135
- @include _gridle_common_silent_class_name(wrap, $stateName) {
181
+ @if $package == wrap {
136
182
  @include _gridle_common_wrap($state);
137
183
  }
138
184
 
139
185
  // clear-each
140
- @include _gridle_common_silent_class_name(clear-each, $stateName) {
186
+ @if $package == clear-each {
141
187
  @include _gridle_common_clear_each($state);
142
188
  }
143
189
 
144
190
  // centered
145
- @include _gridle_common_silent_class_name(grid-centered, $stateName) {
191
+ @if $package == grid-centered {
146
192
  @include _gridle_common_grid_centered($state);
147
193
  }
148
194
 
149
- // align
150
- @include _gridle_common_silent_class_name(row-align, $stateName) {
195
+ // row-align
196
+ @if $package == row-align {
151
197
  @include _gridle_common_row_align($state);
152
198
  }
153
199
 
154
200
  // hide
155
- @include _gridle_common_silent_class_name(hide, $stateName) {
201
+ @if $package == hide {
156
202
  @include _gridle_common_hide($state);
157
203
  }
158
204
 
159
205
  // not-visible
160
- @include _gridle_common_silent_class_name(not-visible, $stateName) {
206
+ @if $package == not-visible {
161
207
  @include _gridle_common_not_visible($state);
162
208
  }
163
209
 
164
210
  // show
165
- @include _gridle_common_silent_class_name(show, $stateName) {
211
+ @if $package == show{
166
212
  @include _gridle_common_show($state);
167
213
  }
168
214
 
169
215
  // show-inline
170
- @include _gridle_common_silent_class_name(show-inline, $stateName) {
216
+ @if $package == show-inline {
171
217
  @include _gridle_common_show_inline($state);
172
218
  }
173
219
 
174
220
  // visible
175
- @include _gridle_common_silent_class_name(visible, $stateName) {
221
+ @if $package == visible {
176
222
  @include _gridle_common_visible($state);
177
223
  }
178
224
 
179
225
  // float
180
- @include _gridle_common_silent_class_name(float, $stateName) {
226
+ @if $package == float {
181
227
  @include _gridle_common_float($state);
182
228
  }
183
229
 
184
230
  // clear
185
- @include _gridle_common_silent_class_name(clear, $stateName) {
231
+ @if $package == clear {
186
232
  @include _gridle_common_clear($state);
187
233
  }
188
234
 
189
235
  // no-gutter
190
- @include _gridle_common_silent_class_name(no-gutter, $stateName) {
236
+ @if $package == no-gutter {
191
237
  @include _gridle_common_no_gutter($state);
192
238
  }
193
239
 
194
240
  // gutter
195
- @include _gridle_common_silent_class_name(gutter, $stateName) {
241
+ @if $package == gutter {
196
242
  @include _gridle_common_gutter($state);
197
243
  }
198
244
 
199
245
  // row debug
200
- @include _gridle_common_silent_class_name(row-debug, $stateName) {
246
+ @if $package == row-debug {
201
247
  @include _gridle_common_row_debug($state);
202
248
  }
249
+
250
+ // extend common class by the registered css
251
+ @include _gridle_extend_common_class($package, $state);
203
252
  }
204
253
 
205
254
 
206
255
  //
207
- // Wrap gridle mixin content to init if needed and then extend if needed
256
+ // Wrap gridle mixin content to init if needed and then if needed
208
257
  //
209
258
  @mixin _gridle_call(
210
259
  $for : null
@@ -231,21 +280,29 @@
231
280
  // @calledBy _gridle_call
232
281
  //
233
282
  @mixin _gridle_extend(
234
- $for
283
+ $package
235
284
  ) {
236
285
  // check if we need the state classes
237
286
  $states-classes : gridle_get_state_var(states-classes);
238
-
239
- // extend the "at-root" version for the .state-{stateName} classes
240
- @if $states-classes and str-index(#{&}, unquote(".state-#{$_gridle_current_stateName}")) {
241
- @at-root (without: media) {
242
- // @debug("%at-root-#{$_gridle_current_stateName}-#{$for}");
243
- @extend %at-root-#{$_gridle_current_stateName}-#{$for} !optional;
287
+ $stateName : gridle_get_state_var(name);
288
+
289
+ // if is an existing gridle state
290
+ @if gridle_has_state($stateName) {
291
+ // extend the "at-root" version for the .state-{stateName} classes
292
+ @if $states-classes and str-index(#{&}, unquote(".state-#{$_gridle_current_stateName}")) {
293
+ @at-root (without: media) {
294
+ // @debug("%at-root-#{$_gridle_current_stateName}-#{$package}");
295
+ @extend %at-root-#{$_gridle_current_stateName}-#{$package} !optional;
296
+ }
297
+ } @else {
298
+ // extend using the current state name set in each gridle_state call
299
+ // @debug("%#{$_gridle_current_stateName}-#{$package}");
300
+ @extend %#{$_gridle_current_stateName}-#{$package} !optional;
244
301
  }
245
302
  } @else {
246
- // extend using the current state name set in each gridle_state call
247
- // @debug("%#{$_gridle_current_stateName}-#{$for}");
248
- @extend %#{$_gridle_current_stateName}-#{$for} !optional;
303
+ // it's not an existing state so we cannot extend.
304
+ // we need to include instead
305
+ @include _gridle_include_common($package, $stateName);
249
306
  }
250
307
  }
251
308
 
@@ -297,10 +354,26 @@ $_gridle_applied_for : ();
297
354
  $states-classes : gridle_get_state_var(states-classes, $state);
298
355
  $stateName : gridle_get_state_var(name, $state);
299
356
 
357
+ // manage previous state
358
+ $previous_state : null;
359
+ $previous_stateName : null;
360
+
300
361
  // check if need to tack the current state
301
362
  @if $track-current-state {
302
- // save current state
303
- $_gridle_current_state : $state !global;
363
+ @if $_gridle_current_state {
364
+ $previous_state : $_gridle_current_state;
365
+ $previous_stateName : $_gridle_current_stateName;
366
+ }
367
+ // if we have a previous state that is not the default one, we
368
+ // make the inheritence process.
369
+ // if both states are registered ones : just take the wanted state
370
+ // if only previous_state is a registered one : extend previous_state with the wanted one
371
+ // if none of them are resitered : extend the wanted with the previous one
372
+ @if $previous_state {
373
+ $_gridle_current_state : _gridle_inherit_state($state, $previous_state) !global;
374
+ } @else {
375
+ $_gridle_current_state : $state !global;
376
+ }
304
377
  $_gridle_current_stateName : $stateName !global;
305
378
  }
306
379
 
@@ -334,9 +407,9 @@ $_gridle_applied_for : ();
334
407
  }
335
408
 
336
409
  // reset current state to default
337
- @if $track-current-state {
338
- $_gridle_current_state : $_gridle_settings !global;
339
- $_gridle_current_stateName : default !global;
410
+ @if $track-current-state and $previous_state and $previous_stateName {
411
+ $_gridle_current_state : $previous_state !global;
412
+ $_gridle_current_stateName : $previous_stateName !global;
340
413
  }
341
414
  }
342
415
 
@@ -10,29 +10,8 @@
10
10
  @mixin gridle_setup(
11
11
  $settings : ()
12
12
  ) {
13
- // manage gutters
14
- $gutter-top : map-get($settings, gutter-top);
15
- $gutter-bottom : map-get($settings, gutter-bottom);
16
- $gutter-left : map-get($settings, gutter-left);
17
- $gutter-right : map-get($settings, gutter-right);
18
- $gutter-width : map-get($settings, gutter-width);
19
- $gutter-height : map-get($settings, gutter-height);
20
- @if $gutter-right and $gutter-left {
21
- // calculate the gutter-width
22
- $settings : map-set($settings, gutter-width, $gutter-left + $gutter-right);
23
- } @else if $gutter-width {
24
- // calculate the gutter-left and right
25
- $settings : map-set($settings, gutter-left, $gutter-width * .5);
26
- $settings : map-set($settings, gutter-right, $gutter-width * .5);
27
- }
28
- @if $gutter-top and $gutter-bottom {
29
- // calculate the gutter-height
30
- $settings : map-set($settings, gutter-height, $gutter-bottom + $gutter-top);
31
- } @else if $gutter-height {
32
- // calculate the gutter-bottom and top
33
- $settings : map-set($settings, gutter-bottom, $gutter-height * .5);
34
- $settings : map-set($settings, gutter-top, $gutter-height * .5);
35
- }
13
+ // prepare state
14
+ $settings : _gridle_prepare_state_settings($settings);
36
15
 
37
16
  // extend default settings
38
17
  $_gridle-settings : map-merge((
@@ -42,6 +21,7 @@
42
21
  query : null,
43
22
  classes : true,
44
23
  context : 12,
24
+ column-width : null,
45
25
  gutter-width : 20px,
46
26
  gutter-height : 0,
47
27
  gutter-top : 0,
@@ -49,6 +29,7 @@
49
29
  gutter-bottom : 0,
50
30
  gutter-left : 10px,
51
31
  direction : ltr,
32
+ dir-attribute : false,
52
33
  name-multiplicator : 1,
53
34
  states-classes : false,
54
35
  classes-prefix : null
@@ -68,31 +49,10 @@
68
49
  //
69
50
  @mixin gridle_register_state(
70
51
  $name,
71
- $settings
52
+ $settings : ()
72
53
  ) {
73
- // manage gutters
74
- $gutter-top : map-get($settings, gutter-top);
75
- $gutter-bottom : map-get($settings, gutter-bottom);
76
- $gutter-left : map-get($settings, gutter-left);
77
- $gutter-right : map-get($settings, gutter-right);
78
- $gutter-width : map-get($settings, gutter-width);
79
- $gutter-height : map-get($settings, gutter-height);
80
- @if $gutter-right and $gutter-left {
81
- // calculate the gutter-width
82
- $settings : map-set($settings, gutter-width, $gutter-left + $gutter-right);
83
- } @else if $gutter-width {
84
- // calculate the gutter-left and right
85
- $settings : map-set($settings, gutter-left, $gutter-width * .5);
86
- $settings : map-set($settings, gutter-right, $gutter-width * .5);
87
- }
88
- @if $gutter-top and $gutter-bottom {
89
- // calculate the gutter-height
90
- $settings : map-set($settings, gutter-height, $gutter-bottom + $gutter-top);
91
- } @else if $gutter-height {
92
- // calculate the gutter-bottom and top
93
- $settings : map-set($settings, gutter-bottom, $gutter-height * .5);
94
- $settings : map-set($settings, gutter-top, $gutter-height * .5);
95
- }
54
+ // prepare state
55
+ $settings : _gridle_prepare_state_settings($settings);
96
56
 
97
57
  // settings :
98
58
  $settings : map-merge($_gridle-settings, $settings);
@@ -390,15 +350,15 @@
390
350
  //
391
351
  @mixin gridle_register_default_mobile_first_states() {
392
352
  @include gridle_register_state(xs, (
393
- max-width : 768px
353
+ max-width : 750px
394
354
  ));
395
355
  @include gridle_register_state(sm, (
396
- min-width : 768px
356
+ min-width : 750px
397
357
  ));
398
358
  @include gridle_register_state(md, (
399
- min-width : 992px
359
+ min-width : 970px
400
360
  ));
401
361
  @include gridle_register_state(lg, (
402
- min-width : 1200px
362
+ min-width : 1170px
403
363
  ));
404
364
  }