gridle 1.3.3 → 1.3.11

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: 6c99b2ecc45c9cc8c02c66f8f2a083c680f2ea51
4
- data.tar.gz: 31cbc2085c7411d0e821b2d78fc4c51b92f1f185
3
+ metadata.gz: 25fa3ed88400ba41e7b6ceef686ed42b540b0b1d
4
+ data.tar.gz: f0d6ffa72c5367764dcd9feec78c21b02bad69c8
5
5
  SHA512:
6
- metadata.gz: ea2a4913b98a8277baf084932cff4b8cd8b655ef149448408f4c9f9eaa740bc384c6788cfe5a43bedba38c9709edd037fcb2542ae596af092574544dbc8a5cc4
7
- data.tar.gz: 3f2822149f0b360dabd0f6c98534aa531fc685024b76897f50f9c1796f4c5d6360ccd4e2672f1afd61a758221cbc27baa9c510f97511559e5d14706240ff43d4
6
+ metadata.gz: 5c20b35c956d35e10da537deb2c480fb648c05d571e0cf4a3d88cfc62111e69fb1dcf0426b0d40e55217a71d84955d8e6705e59a959fcb06ffde1e460063cebc
7
+ data.tar.gz: 064e220551da92e88b8e44b5f149680411cb5169ae80a65cc636e38c4380f2e7dbd6280c31c67018d0ad74b0684f7bb1e8fb8e65deee591863734129dd599481
data/lib/gridle.rb CHANGED
@@ -2,13 +2,12 @@
2
2
  # These are the requires you would normally put in your config.rb file
3
3
  # By default, you should always included Compass. Do not include your
4
4
  # extension.
5
- require 'compass'
6
5
 
7
6
  # This tells Compass what your Compass extension is called, and where to find
8
7
  # its files
9
8
  # Replace 'extension' with the name of your extension. Spaces allowed.
10
- extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
11
- Compass::Frameworks.register('gridle', :path => extension_path)
9
+ # extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
10
+ # Compass::Frameworks.register('gridle', :path => extension_path)
12
11
 
13
12
  # Version and date of version for your Compass extension.
14
13
  # Replace Extension with the name of your extension
@@ -17,8 +16,8 @@ Compass::Frameworks.register('gridle', :path => extension_path)
17
16
  # a prerelease version
18
17
  # Date is in the form of YYYY-MM-DD
19
18
  module Extension
20
- VERSION = "1.3.3"
21
- DATE = "2014-07-22"
19
+ VERSION = "1.3.11"
20
+ DATE = "2014-05-15"
22
21
  end
23
22
 
24
23
  # This is where any custom SassScript should be placed. The functions will be
@@ -5,7 +5,7 @@
5
5
  // |------------------------------------------------------
6
6
 
7
7
  @mixin _gridle_container_common(
8
- $state : default
8
+ $state : null
9
9
  ) {
10
10
  @extend %gridle-simple-clearfix;
11
11
  @extend %gridle-container-common;
@@ -25,29 +25,24 @@
25
25
  {
26
26
  // vars :
27
27
  $direction : _gridle_get_var_value(direction, $state);
28
- $classes : _gridle_get_var_value(classes, $state);
29
28
  $gutter-width : _gridle_get_var_value(gutter-width, $state);
30
29
  $debug : _gridle_get_var_value(debug, $state);
31
30
 
32
- @if $classes
33
- {
34
- @include gridle_state($state) {
35
- @if $direction == rtl {
36
- float:right;
37
- direction:rtl;
38
- } @else {
39
- float:left;
40
- direction:ltr;
41
- }
42
-
43
- padding-left:$gutter-width/2;
44
- padding-right:$gutter-width/2;
31
+ @include gridle_state($state) {
32
+ @if $direction == rtl {
33
+ float:right;
34
+ direction:rtl;
35
+ } @else {
36
+ float:left;
37
+ direction:ltr;
45
38
  }
46
-
47
- @if $debug == true {
48
- #{$gridle-debug-selector} {
49
- @extend %gridle-grid-debug-common;
50
- }
39
+
40
+ padding:0 $gutter-width/2;
41
+ }
42
+
43
+ @if $debug == true {
44
+ #{$gridle-debug-selector} {
45
+ @extend %gridle-grid-debug-common;
51
46
  }
52
47
  }
53
48
  }
@@ -57,7 +52,7 @@
57
52
  @extend %gridle-parent-common;
58
53
  }
59
54
  @mixin _gridle_push_common(
60
- $state : default
55
+ $state : null
61
56
  ) {
62
57
  $debug : _gridle_get_var_value(debug, $state);
63
58
 
@@ -71,7 +66,7 @@
71
66
  }
72
67
  }
73
68
  @mixin _gridle_pull_common(
74
- $state : default
69
+ $state : null
75
70
  ) {
76
71
  $debug : _gridle_get_var_value(debug, $state);
77
72
 
@@ -84,7 +79,7 @@
84
79
  }
85
80
  }
86
81
  @mixin _gridle_prefix_common(
87
- $state : default
82
+ $state : null
88
83
  ) {
89
84
  $debug : _gridle_get_var_value(debug, $state);
90
85
  @if $debug == true {
@@ -94,7 +89,7 @@
94
89
  }
95
90
  }
96
91
  @mixin _gridle_suffix_common(
97
- $state : default
92
+ $state : null
98
93
  ) {
99
94
  $debug : _gridle_get_var_value(debug, $state);
100
95
  @if $debug == true {
@@ -44,25 +44,17 @@
44
44
  $stateMap-or-stateName
45
45
  ) {
46
46
  // check if has a state named like this :
47
- @if (type-of($stateMap-or-stateName) == string
48
- and map-has-key($_gridle_states, unquote($stateMap-or-stateName)))
47
+ @if (map-has-key($_gridle_states, $stateMap-or-stateName))
49
48
  {
50
49
  @return map-get($_gridle_states, unquote($stateMap-or-stateName));
51
50
  }
52
51
 
53
52
  // nothing finded, so return the default state :
54
53
  @if $stateMap-or-stateName
55
- and type-of($stateMap-or-stateName) == map
56
54
  {
57
55
  @return map-merge($_gridle-settings, $stateMap-or-stateName);
58
56
  }
59
57
 
60
- // return the default one if exist
61
- @if map-has-key($_gridle_states, default)
62
- {
63
- @return map-get($_gridle_states, default);
64
- }
65
-
66
58
  // nothing finded, return the default state :
67
59
  @return $_gridle-settings;
68
60
  }
@@ -186,14 +178,12 @@
186
178
  @function _gridle_create_column(
187
179
  $name,
188
180
  $columns,
189
- $context,
190
- $name-multiplicator : 1 // used to extend the state on custom registered columns
181
+ $context
191
182
  ) {
192
183
  @return (
193
184
  name : $name,
194
185
  columns : $columns,
195
- context : $context,
196
- name-multiplicator : $name-multiplicator
186
+ context : $context
197
187
  );
198
188
  }
199
189
 
@@ -238,34 +228,22 @@
238
228
  @if $var == '%count' and $count {
239
229
  $sel : "#{$sel}#{$count}";
240
230
  }
241
- @if $var != '%state' and $var != '%count' and $var != '%-' and $var != '-' and $var != '--' and $var != '_' and $var != '__' and $var != '%prefix' {
231
+ @if $var != '%state' and $var != '%count' and $var != '%-' and $var != '%prefix' {
242
232
  $sel : "#{$sel}#{$var}";
243
233
  }
244
234
 
245
235
  // handle separators :
246
- @if ($var == '%-' or $var == '-' or $var == '--' or $var == '_' or $var == '__') and $i < length($pattern) {
236
+ @if $var == '%-' and $i < length($pattern) {
247
237
  $index : $i + 1;
248
238
  $value : nth($pattern, $index);
249
- @if $value != '%state' and $value != '%count' and $value != '%-' and $value != '-' and $value != '--' and $value != '_' and $value != '__' and $value != '%prefix' {
250
- @if $var == '%-' {
251
- $sel : "#{$sel}#{$gridle-class-separator}";
252
- } @else {
253
- $sel : "#{$sel}#{$var}";
254
- }
239
+ @if $value != '%state' and $value != '%count' and $value != '%-' and $value != '%prefix' {
240
+ $sel : "#{$sel}#{$gridle-class-separator}";
255
241
  }
256
242
  @if $value == '%state' and $state {
257
- @if $var == '%-' {
258
- $sel : "#{$sel}#{$gridle-class-separator}";
259
- } @else {
260
- $sel : "#{$sel}#{$var}";
261
- }
243
+ $sel : "#{$sel}#{$gridle-class-separator}";
262
244
  }
263
245
  @if $value == '%count' and $count {
264
- @if $var == '%-' {
265
- $sel : "#{$sel}#{$gridle-class-separator}";
266
- } @else {
267
- $sel : "#{$sel}#{$var}";
268
- }
246
+ $sel : "#{$sel}#{$gridle-class-separator}";
269
247
  }
270
248
  }
271
249
 
@@ -335,6 +313,26 @@
335
313
  }
336
314
 
337
315
  }
316
+ @else if unquote($state-or-settings) == print
317
+ {
318
+ @return "only print";
319
+ }
320
+ @else if unquote($state-or-settings) == tv
321
+ {
322
+ @return "only tv";
323
+ }
324
+ @else if unquote($state-or-settings) == portrait
325
+ {
326
+ @return "only screen and (orientation: portrait)";
327
+ }
328
+ @else if unquote($state-or-settings) == landscape
329
+ {
330
+ @return "only screen and (orientation: landscape)";
331
+ }
332
+ @else if unquote($state-or-settings) == retina
333
+ {
334
+ @return "only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx)";
335
+ }
338
336
  @else
339
337
  {
340
338
  @return null;
@@ -4,206 +4,117 @@
4
4
  // |------------------------------------------------------
5
5
  // |------------------------------------------------------
6
6
 
7
-
8
- /**
9
- * Generate a custom class for all the states
10
- *
11
- * @param list $pattern The name pattern of the class
12
- * @param list $statesNames The states names to generate
13
- */
14
- @mixin gridle_generate_custom_class(
15
- $pattern,
16
- $statesNames : null
17
- ) {
18
- // manage states to generate :
19
- $states : ();
20
- @if $statesNames == null {
21
- // loop on each states to generate names list :
22
- @each $stateName, $state in $_gridle_states {
23
- $states : append($states, $stateName);
24
- }
25
- } @else {
26
- $states : $statesNames;
27
- }
28
-
29
- // loop on each states :
30
- @each $stateName in $states
31
- {
32
- // manage statename :
33
- @if type-of($stateName) != string {
34
- $stateName : map-get($stateName, name);
35
- }
36
-
37
- // classes :
38
- $classes : _gridle_get_var_value(classes, $stateName);
39
-
40
- // genrate the classname :
41
- @if $classes
42
- {
43
- @include gridle_state($stateName, false) {
44
- #{_gridle_classname($pattern, $stateName)} {
45
- @content;
46
- }
47
- }
48
- }
49
- }
50
- }
51
-
52
7
  // Generate all helpers classes
53
8
  // All the classes generated are not wrapper in gridle_state
54
9
  // in this mixin... Just the names are generated accordingly to the
55
10
  // requested state
56
11
  @mixin _gridle_generate_helper_classes (
57
- $state : null,
58
- $what : null
12
+ $state : null
59
13
  ) {
60
14
  // helpers :
61
- @if $what == null or index($what, float) or index($what, helpers) {
62
- #{_gridle_classname($gridle-float-left-name-pattern, $state)} {
63
- @include gridle_float(left);
64
- }
65
- #{_gridle_classname($gridle-float-right-name-pattern, $state)} {
66
- @include gridle_float(right);
67
- }
15
+ #{_gridle_classname($gridle-hide-name-pattern, $state)} {
16
+ @include gridle_hide(null);
68
17
  }
69
-
70
- @if $what == null or index($what, clear) or index($what, helpers) {
71
- #{_gridle_classname($gridle-clear-name-pattern, $state)} {
72
- @include gridle_clear(both);
73
- }
74
- #{_gridle_classname($gridle-clear-left-name-pattern, $state)} {
75
- @include gridle_clear(left);
76
- }
77
- #{_gridle_classname($gridle-clear-right-name-pattern, $state)} {
78
- @include gridle_clear(right);
79
- }
18
+ #{_gridle_classname($gridle-not-visible-name-pattern, $state)} {
19
+ @include gridle_not_visible(null);
80
20
  }
81
-
82
- @if $what == null or index($what, no_gutter) or index($what, no_margin) or index($what, helpers) {
83
- #{_gridle_classname($gridle-no-gutter-name-pattern, $state)},
84
- #{_gridle_classname($gridle-no-margin-name-pattern, $state)} {
85
- @include gridle_no_margin();
86
- }
87
- #{_gridle_classname($gridle-no-gutter-left-name-pattern, $state)},
88
- #{_gridle_classname($gridle-no-margin-left-name-pattern, $state)} {
89
- @include gridle_no_margin(left);
90
- }
91
- #{_gridle_classname($gridle-no-gutter-right-name-pattern, $state)},
92
- #{_gridle_classname($gridle-no-margin-right-name-pattern, $state)} {
93
- @include gridle_no_margin(right);
94
- }
95
- #{_gridle_classname($gridle-no-gutter-top-name-pattern, $state)},
96
- #{_gridle_classname($gridle-no-margin-top-name-pattern, $state)} {
97
- @include gridle_no_margin(top);
98
- }
99
- #{_gridle_classname($gridle-no-gutter-bottom-name-pattern, $state)},
100
- #{_gridle_classname($gridle-no-margin-bottom-name-pattern, $state)} {
101
- @include gridle_no_margin(bottom);
102
- }
21
+ #{_gridle_classname($gridle-show-name-pattern, $state)} {
22
+ @include gridle_show(null);
103
23
  }
104
-
105
- @if $what == null or index($what, gutter) or index($what, margin) or index($what, helpers) {
106
- #{_gridle_classname($gridle-gutter-name-pattern, $state)},
107
- #{_gridle_classname($gridle-margin-name-pattern, $state)} {
108
- @include gridle_margin(left right);
109
- }
110
- #{_gridle_classname($gridle-gutter-left-name-pattern, $state)},
111
- #{_gridle_classname($gridle-margin-left-name-pattern, $state)} {
112
- @include gridle_margin(left);
113
- }
114
- #{_gridle_classname($gridle-gutter-right-name-pattern, $state)},
115
- #{_gridle_classname($gridle-margin-right-name-pattern, $state)} {
116
- @include gridle_margin(right);
117
- }
118
- #{_gridle_classname($gridle-gutter-top-name-pattern, $state)},
119
- #{_gridle_classname($gridle-margin-top-name-pattern, $state)} {
120
- @include gridle_margin(top);
121
- }
122
- #{_gridle_classname($gridle-gutter-bottom-name-pattern, $state)},
123
- #{_gridle_classname($gridle-margin-bottom-name-pattern, $state)} {
124
- @include gridle_margin(bottom);
125
- }
24
+ #{_gridle_classname($gridle-visible-name-pattern, $state)} {
25
+ @include gridle_visible(null);
126
26
  }
127
-
128
- @if $what == null or index($what, auto_height) or index($what, helpers) {
129
- #{_gridle_classname($gridle-auto-height-name-pattern, $state)} {
130
- height:inherit;
131
- }
27
+ #{_gridle_classname($gridle-float-left-name-pattern, $state)} {
28
+ @include gridle_float(left);
132
29
  }
133
-
134
- @if $what == null or index($what, centered) or index($what, helpers) {
135
- #{_gridle_classname($gridle-centered-name-pattern, $state)} {
136
- @include gridle_centered(null);
137
- }
30
+ #{_gridle_classname($gridle-float-right-name-pattern, $state)} {
31
+ @include gridle_float(right);
138
32
  }
139
-
140
- @if $what == null or index($what, parent) or index($what, helpers) {
141
- #{_gridle_classname($gridle-parent-name-pattern, $state)} {
142
- @include _gridle_parent();
143
- }
33
+ #{_gridle_classname($gridle-clear-name-pattern, $state)} {
34
+ @include gridle_clear(both);
144
35
  }
145
-
146
- @if $what == null or index($what, vertical_align) or index($what, helpers) {
147
- #{_gridle_classname($gridle-vertical-align-middle-name-pattern, $state)} {
148
- @include _gridle_vertical_align();
149
- }
150
- #{_gridle_classname($gridle-vertical-align-top-name-pattern, $state)} {
151
- @include _gridle_vertical_align(top);
152
- }
153
- #{_gridle_classname($gridle-vertical-align-bottom-name-pattern, $state)} {
154
- @include _gridle_vertical_align(bottom);
155
- }
36
+ #{_gridle_classname($gridle-clear-left-name-pattern, $state)} {
37
+ @include gridle_clear(left);
156
38
  }
157
-
158
- /**
159
- * Visible, hide, etc...
160
- */
161
- @if $what == null or index($what, hide) or index($what, helpers) {
162
- #{_gridle_classname($gridle-hide-name-pattern, $state)} {
163
- @include gridle_hide(null);
164
- }
39
+ #{_gridle_classname($gridle-clear-right-name-pattern, $state)} {
40
+ @include gridle_clear(right);
165
41
  }
166
-
167
- @if $what == null or index($what, not_visible) or index($what, helpers) {
168
- #{_gridle_classname($gridle-not-visible-name-pattern, $state)} {
169
- @include gridle_not_visible(null);
170
- }
42
+ #{_gridle_classname($gridle-no-gutter-name-pattern, $state)},
43
+ #{_gridle_classname($gridle-no-margin-name-pattern, $state)} {
44
+ @include gridle_no_margin();
171
45
  }
172
-
173
- @if $what == null or index($what, show) or index($what, helpers) {
174
- #{_gridle_classname($gridle-show-name-pattern, $state)} {
175
- @include gridle_show(null);
176
- }
177
- #{_gridle_classname($gridle-show-inline-name-pattern, $state)} {
178
- @include gridle_show_inline(null);
179
- }
46
+ #{_gridle_classname($gridle-no-gutter-left-name-pattern, $state)},
47
+ #{_gridle_classname($gridle-no-margin-left-name-pattern, $state)} {
48
+ @include gridle_no_margin(left);
180
49
  }
181
-
182
- @if $what == null or index($what, visible) or index($what, helpers) {
183
- #{_gridle_classname($gridle-visible-name-pattern, $state)} {
184
- @include gridle_visible(null);
185
- }
50
+ #{_gridle_classname($gridle-no-gutter-right-name-pattern, $state)},
51
+ #{_gridle_classname($gridle-no-margin-right-name-pattern, $state)} {
52
+ @include gridle_no_margin(right);
53
+ }
54
+ #{_gridle_classname($gridle-no-gutter-top-name-pattern, $state)},
55
+ #{_gridle_classname($gridle-no-margin-top-name-pattern, $state)} {
56
+ @include gridle_no_margin(top);
57
+ }
58
+ #{_gridle_classname($gridle-no-gutter-bottom-name-pattern, $state)},
59
+ #{_gridle_classname($gridle-no-margin-bottom-name-pattern, $state)} {
60
+ @include gridle_no_margin(bottom);
61
+ }
62
+ #{_gridle_classname($gridle-gutter-name-pattern, $state)},
63
+ #{_gridle_classname($gridle-margin-name-pattern, $state)} {
64
+ @include gridle_margin(left right);
65
+ }
66
+ #{_gridle_classname($gridle-gutter-left-name-pattern, $state)},
67
+ #{_gridle_classname($gridle-margin-left-name-pattern, $state)} {
68
+ @include gridle_margin(left);
69
+ }
70
+ #{_gridle_classname($gridle-gutter-right-name-pattern, $state)},
71
+ #{_gridle_classname($gridle-margin-right-name-pattern, $state)} {
72
+ @include gridle_margin(right);
73
+ }
74
+ #{_gridle_classname($gridle-gutter-top-name-pattern, $state)},
75
+ #{_gridle_classname($gridle-margin-top-name-pattern, $state)} {
76
+ @include gridle_margin(top);
77
+ }
78
+ #{_gridle_classname($gridle-gutter-bottom-name-pattern, $state)},
79
+ #{_gridle_classname($gridle-margin-bottom-name-pattern, $state)} {
80
+ @include gridle_margin(bottom);
81
+ }
82
+ #{_gridle_classname($gridle-auto-height-name-pattern, $state)} {
83
+ height:inherit;
84
+ }
85
+ #{_gridle_classname($gridle-centered-name-pattern, $state)} {
86
+ @include gridle_centered(null);
87
+ }
88
+ #{_gridle_classname($gridle-parent-name-pattern, $state)} {
89
+ @include _gridle_parent();
90
+ }
91
+ #{_gridle_classname($gridle-vertical-align-middle-name-pattern, $state)} {
92
+ @include _gridle_vertical_align();
93
+ }
94
+ #{_gridle_classname($gridle-vertical-align-top-name-pattern, $state)} {
95
+ @include _gridle_vertical_align(top);
96
+ }
97
+ #{_gridle_classname($gridle-vertical-align-bottom-name-pattern, $state)} {
98
+ @include _gridle_vertical_align(bottom);
186
99
  }
187
100
 
188
101
  /**
189
102
  * Clear each class :
190
103
  */
191
- @if $what == null or index($what, clear_each) or index($what, helpers) {
192
- @each $clearName, $clearMap in $_gridle_clear_classes {
193
- // get count :
194
- $clearCount : map-get($clearMap, clearEach);
195
- // what to clear :
196
- $clearWhat : map-get($clearMap, clearWhat);
197
- // generate the class :
198
- #{_gridle_classname($gridle-clear-each-pattern, $state, $clearCount)} {
199
- @include _gridle_clear_each($clearCount, $clearWhat);
200
- }
104
+ @each $clearName, $clearMap in $_gridle_clear_classes {
105
+ // get count :
106
+ $clearCount : map-get($clearMap, clearEach);
107
+ // what to clear :
108
+ $clearWhat : map-get($clearMap, clearWhat);
109
+ // generate the class :
110
+ #{_gridle_classname($gridle-clear-each-pattern, $state, $clearCount)} {
111
+ @include _gridle_clear_each($clearCount, $clearWhat, $state);
201
112
  }
202
113
  }
203
114
 
204
115
  // debug colors :
205
116
  $debug : _gridle_get_var_value(debug, $state);
206
- @if $debug and ( $what == null or index($what, debug_colors) or index($what, helpers) ) {
117
+ @if $debug {
207
118
  // debug color classes :
208
119
  #{_gridle_classname($gridle-debug-color-name-pattern, $state, 1)} {
209
120
  #{$gridle-debug-selector} {
@@ -240,14 +151,14 @@
240
151
 
241
152
 
242
153
  // generate settings json :
243
- @mixin gridle_generate_json_settings() {
154
+ @mixin gridle_generate_json_settings(
155
+ $scope : default
156
+ ) {
244
157
 
245
158
  // settings content :
246
159
  $gridle-settings-states : "{";
247
160
 
248
161
  // generate all classes for differents media queries :
249
- $statesCount : length($_gridle_states);
250
- $i : 0;
251
162
  @each $stateName, $state in $_gridle_states {
252
163
 
253
164
  $name : $stateName;
@@ -258,30 +169,22 @@
258
169
 
259
170
  $value : null;
260
171
  @if $varName == "query" {
261
- $value : _gridle_get_media_query($stateName);
172
+ $value : _gridle_get_media_query_for_state($stateName);
262
173
  } @else {
263
174
  $value : map-get($state,$varName);
175
+ // $value : _gridle_get_state_var($i,$var);
264
176
  }
265
177
 
266
178
  @if $value == null {
267
179
  $gridle-settings-states : "#{$gridle-settings-states} \"#{$varName}\" : null,";
268
- } @elseif type-of($value) == bool {
180
+ } @elseif $var == 'context' or $var == 'classes' {
269
181
  $gridle-settings-states : "#{$gridle-settings-states} \"#{$varName}\" : #{$value},";
270
182
  } @else {
271
183
  $gridle-settings-states : "#{$gridle-settings-states} \"#{$varName}\" : \"#{$value}\",";
272
184
  }
273
185
  }
274
186
 
275
- $gridle-settings-states : "#{$gridle-settings-states} \"_gridle\" : true";
276
-
277
- @if $i >= $statesCount - 1 {
278
- $gridle-settings-states : "#{$gridle-settings-states} }";
279
- } @else {
280
- $gridle-settings-states : "#{$gridle-settings-states} },";
281
- }
282
-
283
- // update i :
284
- $i : $i + 1;
187
+ $gridle-settings-states : "#{$gridle-settings-states} },";
285
188
 
286
189
  }
287
190
 
@@ -298,12 +201,25 @@
298
201
  @if length($_gridle_states_debug_devices) <= 0 {
299
202
  $debug_devices : null;
300
203
  }
301
- // $gridle-settings : "#{$gridle-settings}, \"debugDevices\" : { #{$debug_devices} }";
204
+ $gridle-settings : "#{$gridle-settings}, \"debugDevices\" : { #{$debug_devices} }";
302
205
 
303
206
  // settings :
304
- // $gridle-settings : "#{$gridle-settings}, \"classPrefix\" : \"#{$gridle-class-prefix}\"";
207
+ $gridle-settings : "#{$gridle-settings}, \"columnsCount\" : #{$gridle-columns-count}";
208
+ $gridle-settings : "#{$gridle-settings}, \"gutterWidth\" : \"#{$gridle-gutter-width}\"";
209
+ $gridle-settings : "#{$gridle-settings}, \"nameMultiplicator\" : #{$gridle-name-multiplicator}";
210
+ $gridle-settings : "#{$gridle-settings}, \"direction\" : \"#{$gridle-direction}\"";
211
+ $gridle-settings : "#{$gridle-settings}, \"ie7Support\" : #{$gridle-ie7-support}";
212
+ $gridle-settings : "#{$gridle-settings}, \"debug\" : #{$gridle-debug}";
213
+ $gridle-settings : "#{$gridle-settings}, \"debugShowClassNames\" : #{$gridle-debug-show-class-names}";
214
+ $gridle-settings : "#{$gridle-settings}, \"htmlStatesClasses\" : #{$gridle-html-states-classes}";
215
+ $gridle-settings : "#{$gridle-settings}, \"generateHelpersClasses\" : #{$gridle-generate-helpers-classes}";
216
+ $gridle-settings : "#{$gridle-settings}, \"generatePushClasses\" : #{$gridle-generate-push-classes}";
217
+ $gridle-settings : "#{$gridle-settings}, \"generatePullClasses\" : #{$gridle-generate-pull-classes}";
218
+ $gridle-settings : "#{$gridle-settings}, \"generatePrefixClasses\" : #{$gridle-generate-prefix-classes}";
219
+ $gridle-settings : "#{$gridle-settings}, \"generateSuffixClasses\" : #{$gridle-generate-suffix-classes}";
220
+ $gridle-settings : "#{$gridle-settings}, \"classPrefix\" : \"#{$gridle-class-prefix}\"";
305
221
  $gridle-settings : "#{$gridle-settings} }";
306
- #gridle-settings {
222
+ #gridle-settings-#{$scope} {
307
223
  content : $gridle-settings;
308
224
  }
309
225
  }
@@ -312,125 +228,62 @@
312
228
  // gridle mixin :
313
229
  // Generate all the classes needed for a grid
314
230
  @mixin gridle_generate_classes(
315
- $stateName : null,
316
- $what : null,
317
231
  $scope : null
318
232
  ) {
319
- // if the what parameter is not null, mean that we need to generate only certain classes in a certain order :
320
- @if $what
321
- {
322
- // loop on each what item to generate the corresponding classes :
323
- @each $w in $what
324
- {
325
- // check if a scope exist :
326
- @if $scope {
327
- // wrapp grid into scope :
328
- .#{$scope} {
329
- @include _gridle_generate_classes($stateName, ( $w ), true);
330
- }
331
- } @else {
332
- // generate classes :
333
- @include _gridle_generate_classes($stateName, ( $w ), false);
334
- }
335
- }
336
- }
337
- @else
338
- {
339
- // don't have any "what" parameter so generate all the classes
340
- // check if a scope exist :
341
- @if $scope {
342
- // wrapp grid into scope :
343
- .#{$scope} {
344
- @include _gridle_generate_classes($stateName, null, true);
345
- }
346
- } @else {
347
- // generate classes :
348
- @include _gridle_generate_classes($stateName, null, false);
233
+ // check if a scope exist :
234
+ @if $scope {
235
+ // wrapp grid into scope :
236
+ .#{$scope} {
237
+ @include _gridle_generate_classes(true);
349
238
  }
239
+ } @else {
240
+ // generate classes :
241
+ @include _gridle_generate_classes(false);
350
242
  }
351
243
  }
352
- $_gridle_generateOnlyOnce : true; // keep track of generate once classes
353
244
  @mixin _gridle_generate_classes(
354
- $stateName : null,
355
- $what : null,
356
- $has-parent : false
245
+ $has-parent
357
246
  ) {
358
247
 
359
- // generate these classes only once :
360
- @if $_gridle_generateOnlyOnce
361
- {
362
-
363
- // update status :
364
- $_gridle_generateOnlyOnce : false;
365
-
366
- // | ------------------------
367
- // | Windows 8 fix
368
- // | ------------------------
369
-
370
- // Windows 8 fix for snap mode :
371
- @media screen and (max-width: 400px) {
372
- @-ms-viewport { width: device-width; }
373
- }
374
-
375
-
376
- // | ------------------------
377
- // | Container
378
- // | ------------------------
379
-
380
- // generate container class :
381
- @if $what == null or index($what, container) or index($what, default)
382
- {
383
- $container-selector : ();
384
- $container-selector : append( $container-selector, unquote(_gridle_classname($gridle-container-name-pattern)), comma);
385
- #{$container-selector} {
386
- @include gridle_container();
387
- }
388
- }
389
-
390
-
391
- // | ------------------------
392
- // | Parent selector
393
- // | ------------------------
394
-
395
- // parent common css :
396
- @if $what == null or index($what, parent) or index($what, default)
397
- {
398
- $parentSelector : _gridle_classname($gridle-parent-name-pattern,null,null);
399
- #{$parentSelector} {
400
- @extend %gridle-clearfix;
401
- @extend %gridle-parent-common;
402
- }
403
- }
404
-
248
+ // | ------------------------
249
+ // | Windows 8 fix
250
+ // | ------------------------
251
+
252
+ // Windows 8 fix for snap mode :
253
+ @media screen and (max-width: 400px) {
254
+ @-ms-viewport { width: device-width; }
255
+ }
405
256
 
406
- // // | ------------------------
407
- // // | JSON Settings
408
- // // | ------------------------
409
-
410
- // // generate json settings :
411
- @if $gridle-generate-json-settings
412
- {
413
- @include gridle_generate_json_settings();
414
- }
415
257
 
258
+ // | ------------------------
259
+ // | Container
260
+ // | ------------------------
261
+
262
+ // generate container class :
263
+ $container-selector : ();
264
+ $container-selector : append( $container-selector, unquote(_gridle_classname($gridle-container-name-pattern)), comma);
265
+ #{$container-selector} {
266
+ @include gridle_container();
416
267
  }
417
268
 
418
269
 
419
270
  // | ------------------------
420
- // | Set the list of states to generate
271
+ // | Parent selector
421
272
  // | ------------------------
422
- $states : $_gridle_states;
423
- @if $stateName and _gridle_has_state($stateName) {
424
- $states : map-set((), $stateName, _gridle_get_state($stateName));
425
- }
426
273
 
274
+ // parent common css :
275
+ $parentSelector : _gridle_classname($gridle-parent-name-pattern,null,null);
276
+ #{$parentSelector} {
277
+ @extend %gridle-clearfix;
278
+ @extend %gridle-parent-common;
279
+ }
427
280
 
428
281
  // | ------------------------
429
282
  // | Store all the generated common selectors
430
283
  // | ------------------------
431
284
 
432
285
  // generate all selector for extends :
433
- $grid-common-selector : ();
286
+ $common-selector : ();
434
287
  $push-common-selector : ();
435
288
  $pull-common-selector : ();
436
289
  $prefix-common-selector : ();
@@ -442,7 +295,7 @@ $_gridle_generateOnlyOnce : true; // keep track of generate once classes
442
295
  // | ------------------------
443
296
 
444
297
  // generate all classes for media queries :
445
- @each $stateName, $state in $states {
298
+ @each $stateName, $state in $_gridle_states {
446
299
 
447
300
  // setup vars :
448
301
  $media : $stateName;
@@ -465,10 +318,9 @@ $_gridle_generateOnlyOnce : true; // keep track of generate once classes
465
318
 
466
319
  // name :
467
320
  $columnName : "#{$j*$name-multiplicator}";
468
- $columnWidth : $j * $name-multiplicator;
469
321
 
470
322
  // // create a column :
471
- $col : _gridle_create_column($columnName, $columnWidth, $context, $name-multiplicator);
323
+ $col : _gridle_create_column($columnName, $j, $context);
472
324
 
473
325
  // // add column in columns map :
474
326
  $columnsMap : map-set($columnsMap, $columnName, $col);
@@ -478,19 +330,17 @@ $_gridle_generateOnlyOnce : true; // keep track of generate once classes
478
330
  @each $columnName, $column in $columnsMap {
479
331
 
480
332
  // add selector :
481
- @if $what == null or index($what, grid) or index($what, default) {
482
- $grid-common-selector : append( $grid-common-selector, unquote(_gridle_classname($gridle-grid-name-pattern, $media, $columnName)), comma );
483
- }
484
- @if $generate-push-classes and ($what == null or index($what, push) or index($what, default)) {
333
+ $common-selector : append( $common-selector, unquote(_gridle_classname($gridle-grid-name-pattern, $media, $columnName)), comma );
334
+ @if $generate-push-classes {
485
335
  $push-common-selector : append( $push-common-selector, unquote(_gridle_classname($gridle-push-name-pattern, $media, $columnName)), comma );
486
336
  }
487
- @if $generate-pull-classes and ($what == null or index($what, pull) or index($what, default)) {
337
+ @if $generate-pull-classes {
488
338
  $pull-common-selector : append( $pull-common-selector, unquote(_gridle_classname($gridle-pull-name-pattern, $media, $columnName)), comma );
489
339
  }
490
- @if $generate-prefix-classes and ($what == null or index($what, prefix) or index($what, default)) {
340
+ @if $generate-prefix-classes {
491
341
  $prefix-common-selector : append( $prefix-common-selector, unquote(_gridle_classname($gridle-prefix-name-pattern, $media, $columnName)), comma );
492
342
  }
493
- @if $generate-suffix-classes and ($what == null or index($what, suffix) or index($what, default)) {
343
+ @if $generate-suffix-classes {
494
344
  $suffix-common-selector : append( $suffix-common-selector, unquote(_gridle_classname($gridle-suffix-name-pattern, $media, $columnName)), comma );
495
345
  }
496
346
  }
@@ -498,30 +348,20 @@ $_gridle_generateOnlyOnce : true; // keep track of generate once classes
498
348
  }
499
349
 
500
350
  // common css :
501
- @if $what == null or index($what, grid) or index($what, default) {
502
- #{$grid-common-selector} {
503
- @include _gridle_grid_common();
504
- }
351
+ #{$push-common-selector} {
352
+ @include _gridle_push_common();
505
353
  }
506
- @if $what == null or index($what, push) or index($what, default) {
507
- #{$push-common-selector} {
508
- @include _gridle_push_common();
509
- }
354
+ #{$pull-common-selector} {
355
+ @include _gridle_pull_common();
510
356
  }
511
- @if $what == null or index($what, pull) or index($what, default) {
512
- #{$pull-common-selector} {
513
- @include _gridle_pull_common();
514
- }
357
+ #{$prefix-common-selector} {
358
+ @include _gridle_prefix_common();
515
359
  }
516
- @if $what == null or index($what, prefix) or index($what, default) {
517
- #{$prefix-common-selector} {
518
- @include _gridle_prefix_common();
519
- }
360
+ #{$suffix-common-selector} {
361
+ @include _gridle_suffix_common();
520
362
  }
521
- @if $what == null or index($what, suffix) or index($what, default) {
522
- #{$suffix-common-selector} {
523
- @include _gridle_suffix_common();
524
- }
363
+ #{$common-selector} {
364
+ @include _gridle_grid_common();
525
365
  }
526
366
 
527
367
 
@@ -530,7 +370,7 @@ $_gridle_generateOnlyOnce : true; // keep track of generate once classes
530
370
  // | ------------------------
531
371
 
532
372
  // generate all classes for differents media queries :
533
- @each $stateName, $state in $states {
373
+ @each $stateName, $state in $_gridle_states {
534
374
 
535
375
  // setup vars :
536
376
  $classes : _gridle_get_var_value(classes, $state);
@@ -542,16 +382,16 @@ $_gridle_generateOnlyOnce : true; // keep track of generate once classes
542
382
  $generate-suffix-classes : _gridle_get_var_value(generate-suffix-classes, $state);
543
383
  $generate-helpers-classes : _gridle_get_var_value(generate-helpers-classes, $state);
544
384
 
385
+ // parent common css :
386
+ $parentSelector : _gridle_classname($gridle-parent-name-pattern,$stateName,null);
387
+ #{$parentSelector} {
388
+ @extend %gridle-clearfix;
389
+ @extend %gridle-parent-common;
390
+ }
391
+
545
392
  // generate all media queries grid classes :
546
393
  @if $classes == true {
547
394
 
548
- // parent common css :
549
- $parentSelector : _gridle_classname($gridle-parent-name-pattern,$stateName,null);
550
- #{$parentSelector} {
551
- @extend %gridle-clearfix;
552
- @extend %gridle-parent-common;
553
- }
554
-
555
395
  // generate all the classes :
556
396
  @include gridle_state($stateName, $has-parent) {
557
397
 
@@ -563,10 +403,9 @@ $_gridle_generateOnlyOnce : true; // keep track of generate once classes
563
403
 
564
404
  // name :
565
405
  $columnName : "#{$j*$name-multiplicator}";
566
- $columnWidth : $j * $name-multiplicator;
567
406
 
568
407
  // // create a column :
569
- $col : _gridle_create_column($columnName, $columnWidth, $context, $name-multiplicator);
408
+ $col : _gridle_create_column($columnName, $j, $context);
570
409
 
571
410
  // // add column in columns map :
572
411
  $columnsMap : map-set($columnsMap, $columnName, $col);
@@ -578,36 +417,32 @@ $_gridle_generateOnlyOnce : true; // keep track of generate once classes
578
417
  // variables :
579
418
  $columnsCount : map-get($column, columns);
580
419
  $columnsContext : map-get($column, context);
581
- $columnsNameMultiplicator : map-get($column, name-multiplicator);
582
420
 
583
421
  // extend context in state (for columns) :
584
422
  $extendedState : map-merge($state, (
585
- context : $columnsContext,
586
- name-multiplicator : $columnsNameMultiplicator // inject the name multiplicator here getted from column to handle custom registered columns
423
+ context : $columnsContext
587
424
  ));
588
425
 
589
426
  // classes :
590
- @if $what == null or index($what, grid) or index($what, default) {
591
- #{_gridle_classname($gridle-grid-name-pattern, $stateName, $columnName)} {
592
- @include _gridle($columnsCount, $extendedState);
593
- }
427
+ #{_gridle_classname($gridle-grid-name-pattern, $stateName, $columnName)} {
428
+ @include _gridle($columnsCount, $extendedState);
594
429
  }
595
- @if $generate-push-classes == true and ($what == null or index($what, push) or index($what, default)) {
430
+ @if $generate-push-classes == true {
596
431
  #{_gridle_classname($gridle-push-name-pattern, $stateName, $columnName)} {
597
432
  @include _gridle_push($columnsCount, $extendedState);
598
433
  }
599
434
  }
600
- @if $generate-pull-classes == true and ($what == null or index($what, pull) or index($what, default)) {
435
+ @if $generate-pull-classes == true {
601
436
  #{_gridle_classname($gridle-pull-name-pattern, $stateName, $columnName)} {
602
437
  @include _gridle_pull($columnsCount, $extendedState);
603
438
  }
604
439
  }
605
- @if $generate-prefix-classes == true and ($what == null or index($what, prefix) or index($what, default)) {
440
+ @if $generate-prefix-classes == true {
606
441
  #{_gridle_classname($gridle-prefix-name-pattern, $stateName, $columnName)} {
607
442
  @include _gridle_prefix($columnsCount, $extendedState);
608
443
  }
609
444
  }
610
- @if $generate-suffix-classes == true and ($what == null or index($what, suffix) or index($what, default)) {
445
+ @if $generate-suffix-classes == true {
611
446
  #{_gridle_classname($gridle-suffix-name-pattern, $stateName, $columnName)} {
612
447
  @include _gridle_suffix($columnsCount, $extendedState);
613
448
  }
@@ -616,9 +451,17 @@ $_gridle_generateOnlyOnce : true; // keep track of generate once classes
616
451
 
617
452
  // media queries helpers classes :
618
453
  @if $generate-helpers-classes == true {
619
- @include _gridle_generate_helper_classes($stateName, $what);
454
+ @include _gridle_generate_helper_classes($stateName);
620
455
  }
621
456
  }
622
457
  }
623
458
  }
459
+
460
+
461
+ // // | ------------------------
462
+ // // | JSON Settings
463
+ // // | ------------------------
464
+
465
+ // // generate json settings :
466
+ // @include gridle_generate_json_settings();
624
467
  }