gridle 1.3.2 → 1.3.3

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: 89965d5de0df0540dc4eb00f51534ccac70bd6de
4
- data.tar.gz: 47dd01c3742b0e03d6dc727719e4862326e76521
3
+ metadata.gz: 6c99b2ecc45c9cc8c02c66f8f2a083c680f2ea51
4
+ data.tar.gz: 31cbc2085c7411d0e821b2d78fc4c51b92f1f185
5
5
  SHA512:
6
- metadata.gz: 21d483f133c01e9d1fa267856a4d2101f9cbccf46c289c9db46240aaae48ccc4fc0ee63716ff8a6403b926d235c8af36ee00e3e95d073bc996e2a7917eaaef81
7
- data.tar.gz: f27d30d53b4afb407744243ebf20ebb5473afc9ec11ac538979482d2b660b0dd03faf2855c4573e6d5db10cd3fd8b323caf93ecc96c9f5f95ddbbd67d502e261
6
+ metadata.gz: ea2a4913b98a8277baf084932cff4b8cd8b655ef149448408f4c9f9eaa740bc384c6788cfe5a43bedba38c9709edd037fcb2542ae596af092574544dbc8a5cc4
7
+ data.tar.gz: 3f2822149f0b360dabd0f6c98534aa531fc685024b76897f50f9c1796f4c5d6360ccd4e2672f1afd61a758221cbc27baa9c510f97511559e5d14706240ff43d4
data/lib/gridle.rb CHANGED
@@ -2,12 +2,13 @@
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'
5
6
 
6
7
  # This tells Compass what your Compass extension is called, and where to find
7
8
  # its files
8
9
  # Replace 'extension' with the name of your extension. Spaces allowed.
9
- # extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
10
- # Compass::Frameworks.register('gridle', :path => extension_path)
10
+ extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
11
+ Compass::Frameworks.register('gridle', :path => extension_path)
11
12
 
12
13
  # Version and date of version for your Compass extension.
13
14
  # Replace Extension with the name of your extension
@@ -16,8 +17,8 @@
16
17
  # a prerelease version
17
18
  # Date is in the form of YYYY-MM-DD
18
19
  module Extension
19
- VERSION = "1.3.2"
20
- DATE = "2014-05-22"
20
+ VERSION = "1.3.3"
21
+ DATE = "2014-07-22"
21
22
  end
22
23
 
23
24
  # 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 : null
8
+ $state : default
9
9
  ) {
10
10
  @extend %gridle-simple-clearfix;
11
11
  @extend %gridle-container-common;
@@ -25,25 +25,29 @@
25
25
  {
26
26
  // vars :
27
27
  $direction : _gridle_get_var_value(direction, $state);
28
+ $classes : _gridle_get_var_value(classes, $state);
28
29
  $gutter-width : _gridle_get_var_value(gutter-width, $state);
29
30
  $debug : _gridle_get_var_value(debug, $state);
30
31
 
31
- @include gridle_state($state) {
32
- @if $direction == rtl {
33
- float:right;
34
- direction:rtl;
35
- } @else {
36
- float:left;
37
- direction:ltr;
38
- }
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
+ }
39
42
 
40
- padding-left$gutter-width/2;
41
- padding-right:$gutter-width/2;
42
- }
43
-
44
- @if $debug == true {
45
- #{$gridle-debug-selector} {
46
- @extend %gridle-grid-debug-common;
43
+ padding-left:$gutter-width/2;
44
+ padding-right:$gutter-width/2;
45
+ }
46
+
47
+ @if $debug == true {
48
+ #{$gridle-debug-selector} {
49
+ @extend %gridle-grid-debug-common;
50
+ }
47
51
  }
48
52
  }
49
53
  }
@@ -53,7 +57,7 @@
53
57
  @extend %gridle-parent-common;
54
58
  }
55
59
  @mixin _gridle_push_common(
56
- $state : null
60
+ $state : default
57
61
  ) {
58
62
  $debug : _gridle_get_var_value(debug, $state);
59
63
 
@@ -67,7 +71,7 @@
67
71
  }
68
72
  }
69
73
  @mixin _gridle_pull_common(
70
- $state : null
74
+ $state : default
71
75
  ) {
72
76
  $debug : _gridle_get_var_value(debug, $state);
73
77
 
@@ -80,7 +84,7 @@
80
84
  }
81
85
  }
82
86
  @mixin _gridle_prefix_common(
83
- $state : null
87
+ $state : default
84
88
  ) {
85
89
  $debug : _gridle_get_var_value(debug, $state);
86
90
  @if $debug == true {
@@ -90,7 +94,7 @@
90
94
  }
91
95
  }
92
96
  @mixin _gridle_suffix_common(
93
- $state : null
97
+ $state : default
94
98
  ) {
95
99
  $debug : _gridle_get_var_value(debug, $state);
96
100
  @if $debug == true {
@@ -0,0 +1,35 @@
1
+ // |------------------------------------------------------
2
+ // |------------------------------------------------------
3
+ // | Default states
4
+ // |------------------------------------------------------
5
+ // |------------------------------------------------------
6
+
7
+ // retina
8
+ @include gridle_register_state("retina", (
9
+ query : "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)",
10
+ classes : false
11
+ ) );
12
+
13
+ // tv
14
+ @include gridle_register_state("tv", (
15
+ query : "only tv",
16
+ classes : false
17
+ ) );
18
+
19
+ // print
20
+ @include gridle_register_state("print", (
21
+ query : "only print",
22
+ classes : false
23
+ ) );
24
+
25
+ // portrait
26
+ @include gridle_register_state("portrait", (
27
+ query : "only screen and (orientation: portrait)",
28
+ classes : false
29
+ ) );
30
+
31
+ // landscape
32
+ @include gridle_register_state("landscape", (
33
+ query : "only screen and (orientation: landscape)",
34
+ classes : false
35
+ ) );
@@ -44,17 +44,25 @@
44
44
  $stateMap-or-stateName
45
45
  ) {
46
46
  // check if has a state named like this :
47
- @if (map-has-key($_gridle_states, unquote($stateMap-or-stateName)))
47
+ @if (type-of($stateMap-or-stateName) == string
48
+ and map-has-key($_gridle_states, unquote($stateMap-or-stateName)))
48
49
  {
49
50
  @return map-get($_gridle_states, unquote($stateMap-or-stateName));
50
51
  }
51
52
 
52
53
  // nothing finded, so return the default state :
53
54
  @if $stateMap-or-stateName
55
+ and type-of($stateMap-or-stateName) == map
54
56
  {
55
57
  @return map-merge($_gridle-settings, $stateMap-or-stateName);
56
58
  }
57
59
 
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
+
58
66
  // nothing finded, return the default state :
59
67
  @return $_gridle-settings;
60
68
  }
@@ -178,12 +186,14 @@
178
186
  @function _gridle_create_column(
179
187
  $name,
180
188
  $columns,
181
- $context
189
+ $context,
190
+ $name-multiplicator : 1 // used to extend the state on custom registered columns
182
191
  ) {
183
192
  @return (
184
193
  name : $name,
185
194
  columns : $columns,
186
- context : $context
195
+ context : $context,
196
+ name-multiplicator : $name-multiplicator
187
197
  );
188
198
  }
189
199
 
@@ -325,26 +335,6 @@
325
335
  }
326
336
 
327
337
  }
328
- @else if unquote($state-or-settings) == print
329
- {
330
- @return "only print";
331
- }
332
- @else if unquote($state-or-settings) == tv
333
- {
334
- @return "only tv";
335
- }
336
- @else if unquote($state-or-settings) == portrait
337
- {
338
- @return "only screen and (orientation: portrait)";
339
- }
340
- @else if unquote($state-or-settings) == landscape
341
- {
342
- @return "only screen and (orientation: landscape)";
343
- }
344
- @else if unquote($state-or-settings) == retina
345
- {
346
- @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)";
347
- }
348
338
  @else
349
339
  {
350
340
  @return null;
@@ -34,10 +34,16 @@
34
34
  $stateName : map-get($stateName, name);
35
35
  }
36
36
 
37
+ // classes :
38
+ $classes : _gridle_get_var_value(classes, $stateName);
39
+
37
40
  // genrate the classname :
38
- @include gridle_state($stateName, false) {
39
- #{_gridle_classname($pattern, $stateName)} {
40
- @content;
41
+ @if $classes
42
+ {
43
+ @include gridle_state($stateName, false) {
44
+ #{_gridle_classname($pattern, $stateName)} {
45
+ @content;
46
+ }
41
47
  }
42
48
  }
43
49
  }
@@ -52,30 +58,6 @@
52
58
  $what : null
53
59
  ) {
54
60
  // helpers :
55
- @if $what == null or index($what, hide) or index($what, helpers) {
56
- #{_gridle_classname($gridle-hide-name-pattern, $state)} {
57
- @include gridle_hide(null);
58
- }
59
- }
60
-
61
- @if $what == null or index($what, not_visible) or index($what, helpers) {
62
- #{_gridle_classname($gridle-not-visible-name-pattern, $state)} {
63
- @include gridle_not_visible(null);
64
- }
65
- }
66
-
67
- @if $what == null or index($what, show) or index($what, helpers) {
68
- #{_gridle_classname($gridle-show-name-pattern, $state)} {
69
- @include gridle_show(null);
70
- }
71
- }
72
-
73
- @if $what == null or index($what, visible) or index($what, helpers) {
74
- #{_gridle_classname($gridle-visible-name-pattern, $state)} {
75
- @include gridle_visible(null);
76
- }
77
- }
78
-
79
61
  @if $what == null or index($what, float) or index($what, helpers) {
80
62
  #{_gridle_classname($gridle-float-left-name-pattern, $state)} {
81
63
  @include gridle_float(left);
@@ -173,6 +155,36 @@
173
155
  }
174
156
  }
175
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
+ }
165
+ }
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
+ }
171
+ }
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
+ }
180
+ }
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
+ }
186
+ }
187
+
176
188
  /**
177
189
  * Clear each class :
178
190
  */
@@ -184,14 +196,14 @@
184
196
  $clearWhat : map-get($clearMap, clearWhat);
185
197
  // generate the class :
186
198
  #{_gridle_classname($gridle-clear-each-pattern, $state, $clearCount)} {
187
- @include _gridle_clear_each($clearCount, $clearWhat, $state);
199
+ @include _gridle_clear_each($clearCount, $clearWhat);
188
200
  }
189
201
  }
190
202
  }
191
203
 
192
204
  // debug colors :
193
205
  $debug : _gridle_get_var_value(debug, $state);
194
- @if $debug {
206
+ @if $debug and ( $what == null or index($what, debug_colors) or index($what, helpers) ) {
195
207
  // debug color classes :
196
208
  #{_gridle_classname($gridle-debug-color-name-pattern, $state, 1)} {
197
209
  #{$gridle-debug-selector} {
@@ -304,15 +316,37 @@
304
316
  $what : null,
305
317
  $scope : null
306
318
  ) {
307
- // check if a scope exist :
308
- @if $scope {
309
- // wrapp grid into scope :
310
- .#{$scope} {
311
- @include _gridle_generate_classes($stateName, $what, true);
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);
312
349
  }
313
- } @else {
314
- // generate classes :
315
- @include _gridle_generate_classes($stateName, $what, false);
316
350
  }
317
351
  }
318
352
  $_gridle_generateOnlyOnce : true; // keep track of generate once classes
@@ -344,7 +378,7 @@ $_gridle_generateOnlyOnce : true; // keep track of generate once classes
344
378
  // | ------------------------
345
379
 
346
380
  // generate container class :
347
- @if $what == null or index($what, container)
381
+ @if $what == null or index($what, container) or index($what, default)
348
382
  {
349
383
  $container-selector : ();
350
384
  $container-selector : append( $container-selector, unquote(_gridle_classname($gridle-container-name-pattern)), comma);
@@ -359,7 +393,7 @@ $_gridle_generateOnlyOnce : true; // keep track of generate once classes
359
393
  // | ------------------------
360
394
 
361
395
  // parent common css :
362
- @if $what == null or index($what, parent)
396
+ @if $what == null or index($what, parent) or index($what, default)
363
397
  {
364
398
  $parentSelector : _gridle_classname($gridle-parent-name-pattern,null,null);
365
399
  #{$parentSelector} {
@@ -374,7 +408,10 @@ $_gridle_generateOnlyOnce : true; // keep track of generate once classes
374
408
  // // | ------------------------
375
409
 
376
410
  // // generate json settings :
377
- @include gridle_generate_json_settings();
411
+ @if $gridle-generate-json-settings
412
+ {
413
+ @include gridle_generate_json_settings();
414
+ }
378
415
 
379
416
  }
380
417
 
@@ -428,9 +465,10 @@ $_gridle_generateOnlyOnce : true; // keep track of generate once classes
428
465
 
429
466
  // name :
430
467
  $columnName : "#{$j*$name-multiplicator}";
468
+ $columnWidth : $j * $name-multiplicator;
431
469
 
432
470
  // // create a column :
433
- $col : _gridle_create_column($columnName, $j, $context);
471
+ $col : _gridle_create_column($columnName, $columnWidth, $context, $name-multiplicator);
434
472
 
435
473
  // // add column in columns map :
436
474
  $columnsMap : map-set($columnsMap, $columnName, $col);
@@ -440,19 +478,19 @@ $_gridle_generateOnlyOnce : true; // keep track of generate once classes
440
478
  @each $columnName, $column in $columnsMap {
441
479
 
442
480
  // add selector :
443
- @if $what == null or index($what, grid) {
481
+ @if $what == null or index($what, grid) or index($what, default) {
444
482
  $grid-common-selector : append( $grid-common-selector, unquote(_gridle_classname($gridle-grid-name-pattern, $media, $columnName)), comma );
445
483
  }
446
- @if $generate-push-classes and ($what == null or index($what, push)) {
484
+ @if $generate-push-classes and ($what == null or index($what, push) or index($what, default)) {
447
485
  $push-common-selector : append( $push-common-selector, unquote(_gridle_classname($gridle-push-name-pattern, $media, $columnName)), comma );
448
486
  }
449
- @if $generate-pull-classes and ($what == null or index($what, pull)) {
487
+ @if $generate-pull-classes and ($what == null or index($what, pull) or index($what, default)) {
450
488
  $pull-common-selector : append( $pull-common-selector, unquote(_gridle_classname($gridle-pull-name-pattern, $media, $columnName)), comma );
451
489
  }
452
- @if $generate-prefix-classes and ($what == null or index($what, prefix)) {
490
+ @if $generate-prefix-classes and ($what == null or index($what, prefix) or index($what, default)) {
453
491
  $prefix-common-selector : append( $prefix-common-selector, unquote(_gridle_classname($gridle-prefix-name-pattern, $media, $columnName)), comma );
454
492
  }
455
- @if $generate-suffix-classes and ($what == null or index($what, suffix)) {
493
+ @if $generate-suffix-classes and ($what == null or index($what, suffix) or index($what, default)) {
456
494
  $suffix-common-selector : append( $suffix-common-selector, unquote(_gridle_classname($gridle-suffix-name-pattern, $media, $columnName)), comma );
457
495
  }
458
496
  }
@@ -460,27 +498,27 @@ $_gridle_generateOnlyOnce : true; // keep track of generate once classes
460
498
  }
461
499
 
462
500
  // common css :
463
- @if $what == null or index($what, grid) {
501
+ @if $what == null or index($what, grid) or index($what, default) {
464
502
  #{$grid-common-selector} {
465
503
  @include _gridle_grid_common();
466
504
  }
467
505
  }
468
- @if $what == null or index($what, push) {
506
+ @if $what == null or index($what, push) or index($what, default) {
469
507
  #{$push-common-selector} {
470
508
  @include _gridle_push_common();
471
509
  }
472
510
  }
473
- @if $what == null or index($what, pull) {
511
+ @if $what == null or index($what, pull) or index($what, default) {
474
512
  #{$pull-common-selector} {
475
513
  @include _gridle_pull_common();
476
514
  }
477
515
  }
478
- @if $what == null or index($what, prefix) {
516
+ @if $what == null or index($what, prefix) or index($what, default) {
479
517
  #{$prefix-common-selector} {
480
518
  @include _gridle_prefix_common();
481
519
  }
482
520
  }
483
- @if $what == null or index($what, suffix) {
521
+ @if $what == null or index($what, suffix) or index($what, default) {
484
522
  #{$suffix-common-selector} {
485
523
  @include _gridle_suffix_common();
486
524
  }
@@ -504,16 +542,16 @@ $_gridle_generateOnlyOnce : true; // keep track of generate once classes
504
542
  $generate-suffix-classes : _gridle_get_var_value(generate-suffix-classes, $state);
505
543
  $generate-helpers-classes : _gridle_get_var_value(generate-helpers-classes, $state);
506
544
 
507
- // parent common css :
508
- $parentSelector : _gridle_classname($gridle-parent-name-pattern,$stateName,null);
509
- #{$parentSelector} {
510
- @extend %gridle-clearfix;
511
- @extend %gridle-parent-common;
512
- }
513
-
514
545
  // generate all media queries grid classes :
515
546
  @if $classes == true {
516
547
 
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
+
517
555
  // generate all the classes :
518
556
  @include gridle_state($stateName, $has-parent) {
519
557
 
@@ -525,9 +563,10 @@ $_gridle_generateOnlyOnce : true; // keep track of generate once classes
525
563
 
526
564
  // name :
527
565
  $columnName : "#{$j*$name-multiplicator}";
566
+ $columnWidth : $j * $name-multiplicator;
528
567
 
529
568
  // // create a column :
530
- $col : _gridle_create_column($columnName, $j, $context);
569
+ $col : _gridle_create_column($columnName, $columnWidth, $context, $name-multiplicator);
531
570
 
532
571
  // // add column in columns map :
533
572
  $columnsMap : map-set($columnsMap, $columnName, $col);
@@ -539,34 +578,36 @@ $_gridle_generateOnlyOnce : true; // keep track of generate once classes
539
578
  // variables :
540
579
  $columnsCount : map-get($column, columns);
541
580
  $columnsContext : map-get($column, context);
581
+ $columnsNameMultiplicator : map-get($column, name-multiplicator);
542
582
 
543
583
  // extend context in state (for columns) :
544
584
  $extendedState : map-merge($state, (
545
- context : $columnsContext
585
+ context : $columnsContext,
586
+ name-multiplicator : $columnsNameMultiplicator // inject the name multiplicator here getted from column to handle custom registered columns
546
587
  ));
547
588
 
548
589
  // classes :
549
- @if $what == null or index($what, grid) {
590
+ @if $what == null or index($what, grid) or index($what, default) {
550
591
  #{_gridle_classname($gridle-grid-name-pattern, $stateName, $columnName)} {
551
592
  @include _gridle($columnsCount, $extendedState);
552
593
  }
553
594
  }
554
- @if $generate-push-classes == true and ($what == null or index($what, push)) {
595
+ @if $generate-push-classes == true and ($what == null or index($what, push) or index($what, default)) {
555
596
  #{_gridle_classname($gridle-push-name-pattern, $stateName, $columnName)} {
556
597
  @include _gridle_push($columnsCount, $extendedState);
557
598
  }
558
599
  }
559
- @if $generate-pull-classes == true and ($what == null or index($what, pull)) {
600
+ @if $generate-pull-classes == true and ($what == null or index($what, pull) or index($what, default)) {
560
601
  #{_gridle_classname($gridle-pull-name-pattern, $stateName, $columnName)} {
561
602
  @include _gridle_pull($columnsCount, $extendedState);
562
603
  }
563
604
  }
564
- @if $generate-prefix-classes == true and ($what == null or index($what, prefix)) {
605
+ @if $generate-prefix-classes == true and ($what == null or index($what, prefix) or index($what, default)) {
565
606
  #{_gridle_classname($gridle-prefix-name-pattern, $stateName, $columnName)} {
566
607
  @include _gridle_prefix($columnsCount, $extendedState);
567
608
  }
568
609
  }
569
- @if $generate-suffix-classes == true and ($what == null or index($what, suffix)) {
610
+ @if $generate-suffix-classes == true and ($what == null or index($what, suffix) or index($what, default)) {
570
611
  #{_gridle_classname($gridle-suffix-name-pattern, $stateName, $columnName)} {
571
612
  @include _gridle_suffix($columnsCount, $extendedState);
572
613
  }
@@ -8,7 +8,7 @@
8
8
 
9
9
  // |------------------------------------------------------
10
10
  // |------------------------------------------------------
11
- // Copyright (c) 2013 Olivier Bossel
11
+ // Copyright (c) 2014 Olivier Bossel
12
12
 
13
13
  // Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
14
14
  // documentation files (the "Software"), to deal in the Software without restriction, including without limitation
@@ -29,13 +29,13 @@
29
29
  // |------------------------------------------------------
30
30
  // |------------------------------------------------------
31
31
  // @created 25.03.13
32
- // @updated 21.05.14
32
+ // @updated 22.07.14
33
33
  // @author Olivier Bossel <olivier.bossel@gmail.com>
34
- // @version 1.3.2
34
+ // @version 1.3.3
35
35
  // |------------------------------------------------------
36
36
  // |------------------------------------------------------
37
37
 
38
- $_gridle-version : "1.3.2";
38
+ $_gridle-version : "1.3.3";
39
39
 
40
40
 
41
41
 
@@ -128,3 +128,14 @@ $_gridle_states_debug_devices : (); // save the debug states devices
128
128
  // |------------------------------------------------------
129
129
 
130
130
  @import 'generate-mixins';
131
+
132
+
133
+
134
+
135
+ // |------------------------------------------------------
136
+ // |------------------------------------------------------
137
+ // | Default states
138
+ // |------------------------------------------------------
139
+ // |------------------------------------------------------
140
+
141
+ @import 'default-states';
@@ -4,6 +4,92 @@
4
4
  // |------------------------------------------------------
5
5
  // |------------------------------------------------------
6
6
 
7
+ // Helper to apply multiple config for a certain state with one mixin
8
+ @mixin gridle_set(
9
+ $settings,
10
+ $state : default
11
+ ) {
12
+
13
+ // loop on each settings
14
+ @each $settingName, $settingValue in $settings
15
+ {
16
+ $sn : unquote($settingName);
17
+ $sv : $settingValue;
18
+
19
+ // check if setting name is a state :
20
+ @if _gridle_has_state($sn) {
21
+ // process the state
22
+ @include gridle_set($sv, $sn);
23
+ } @else {
24
+ @if $sn == container {
25
+ @include gridle_container($state);
26
+ } @else if $sn == grid {
27
+ @include gridle($sv, $state);
28
+ } @else if $sn == push {
29
+ @include gridle_push($sv, $state);
30
+ } @else if $sn == pull {
31
+ @include gridle_pull($sv, $state);
32
+ } @else if $sn == prefix {
33
+ @include gridle_prefix($sv, $state);
34
+ } @else if $sn == suffix {
35
+ @include gridle_suffix($sv, $state);
36
+ } @else if $sn == pull {
37
+ @include gridle_pull($sv, $state);
38
+ } @else if $sn == clear_each {
39
+ @include gridle_clear_each(nth($sv,1), nth($sv,2), $state);
40
+ } @else if $sn == centered {
41
+ @include gridle_centered($state);
42
+ } @else if $sn == parent {
43
+ @include gridle_parent($state);
44
+ } @else if $sn == vertical_align {
45
+ @include gridle_vertical_align($sv, $state);
46
+ } @else if $sn == hide {
47
+ @if $sv == true {
48
+ @include gridle_hide($state);
49
+ } @else {
50
+ @include gridle_show($state);
51
+ }
52
+ } @else if $sn == show {
53
+ @if $sv == true {
54
+ @include gridle_show($state);
55
+ } @else {
56
+ @include gridle_hide($state);
57
+ }
58
+ } @else if $sn == visible {
59
+ @if $sv == true {
60
+ @include gridle_visible($state);
61
+ } @else {
62
+ @include gridle_not_visible($state);
63
+ }
64
+ } @else if $sn == not_visible {
65
+ @if $sv == true {
66
+ @include gridle_not_visible($state);
67
+ } @else {
68
+ @include gridle_visible($state);
69
+ }
70
+ } @else if $sn == show_inline {
71
+ @if $sv == true {
72
+ @include gridle_show_inline($state);
73
+ } @else {
74
+ @include gridle_hide($state);
75
+ }
76
+ } @else if $sn == float {
77
+ @include gridle_float($sv, $state);
78
+ } @else if $sn == clear {
79
+ @include gridle_clear($sv, $state);
80
+ } @else if $sn == no_gutter
81
+ or $sn == no_margin {
82
+ @include gridle_no_gutter($sv, $state);
83
+ } @else if $sn == gutter
84
+ or $sn == margin {
85
+ @include gridle_gutter($sv, $state);
86
+ } @else {
87
+ // we do nothing
88
+ }
89
+ }
90
+ }
91
+ }
92
+
7
93
  // Responsive helpers mixins :
8
94
  @mixin gridle_state(
9
95
  $states,
@@ -87,7 +173,7 @@
87
173
 
88
174
  // Container mixin :
89
175
  @mixin gridle_container(
90
- $state : null
176
+ $state : default
91
177
  ) {
92
178
  @include _gridle_container_common($state);
93
179
  }
@@ -97,7 +183,7 @@
97
183
  // Set the width of the specified grid column :
98
184
  @mixin gridle(
99
185
  $columns,
100
- $state : null
186
+ $state : default
101
187
  ) {
102
188
  // common :
103
189
  @include _gridle_grid_common();
@@ -112,7 +198,7 @@
112
198
  }
113
199
  @mixin _gridle(
114
200
  $columns,
115
- $state : null
201
+ $state : default
116
202
  ) {
117
203
  // vars :
118
204
  $name : _gridle_get_var_value(name, $state);
@@ -124,14 +210,14 @@
124
210
  $debug-show-class-names : _gridle_get_var_value(debug-show-class-names, $state);
125
211
 
126
212
  // vars :
127
- $width : percentage(1 / $context * $columns);
213
+ $width : percentage(1 / $context * ($columns / $name-multiplicator) );
128
214
 
129
215
  // set value :
130
216
  width:$width;
131
217
 
132
218
  // ie7 support :
133
219
  @if $ie7-support == true {
134
- *width: expression((this.parentNode.clientWidth/#{$context}*#{$columns} - parseInt(this.currentStyle['paddingLeft']) - parseInt(this.currentStyle['paddingRight'])) + 'px');
220
+ *width: expression((this.parentNode.clientWidth/#{$context}*#{($columns / $name-multiplicator)} - parseInt(this.currentStyle['paddingLeft']) - parseInt(this.currentStyle['paddingRight'])) + 'px');
135
221
  }
136
222
 
137
223
  // debug :
@@ -139,16 +225,16 @@
139
225
  #{$gridle-debug-selector} {
140
226
  &:before {
141
227
  @if $name == default {
142
- content:"grid-#{$name}-#{$columns * $name-multiplicator}";
228
+ content:"grid-#{$name}-#{$columns}";
143
229
  } @else {
144
- content:"grid-#{$name}-#{$columns * $name-multiplicator}" !important;
230
+ content:"grid-#{$name}-#{$columns}" !important;
145
231
  }
146
232
  }
147
233
  &.parent:before {
148
234
  @if $name == default {
149
- content:"grid-parent-#{$name}-#{$columns * $name-multiplicator}";
235
+ content:"grid-parent-#{$name}-#{$columns}";
150
236
  } @else {
151
- content:"grid-parent-#{$name}-#{$columns * $name-multiplicator}" !important;
237
+ content:"grid-parent-#{$name}-#{$columns}" !important;
152
238
  }
153
239
  }
154
240
  }
@@ -160,7 +246,7 @@
160
246
  // Push the element of the count of column wanted
161
247
  @mixin gridle_push(
162
248
  $columns,
163
- $state : null
249
+ $state : default
164
250
  ) {
165
251
  // common :
166
252
  @include _gridle_push_common($state);
@@ -176,7 +262,7 @@
176
262
  }
177
263
  @mixin _gridle_push(
178
264
  $columns,
179
- $state : null
265
+ $state : default
180
266
  ) {
181
267
  // variables :
182
268
  $name : _gridle_get_var_value(name, $state);
@@ -187,7 +273,7 @@
187
273
  $debug-show-class-names : _gridle_get_var_value(debug-show-class-names, $state);
188
274
 
189
275
  // vars :
190
- $width : percentage(1 / $context) * $columns;
276
+ $width : percentage(1 / $context) * ($columns / $name-multiplicator);
191
277
  @if $direction == rtl { $width : $width*-1; }
192
278
  left:$width;
193
279
 
@@ -196,9 +282,9 @@
196
282
  #{$gridle-debug-selector} {
197
283
  &:after {
198
284
  @if $name == default {
199
- content:"push-#{$name}-#{$columns * $name-multiplicator}";
285
+ content:"push-#{$name}-#{$columns}";
200
286
  } @else {
201
- content:"push-#{$name}-#{$columns * $name-multiplicator}" !important;
287
+ content:"push-#{$name}-#{$columns}" !important;
202
288
  }
203
289
  }
204
290
  }
@@ -211,7 +297,7 @@
211
297
  // Pull the element of the count of column wanted
212
298
  @mixin gridle_pull(
213
299
  $columns,
214
- $state : null
300
+ $state : default
215
301
  ) {
216
302
  // common :
217
303
  @include _gridle_pull_common($state);
@@ -227,7 +313,7 @@
227
313
  }
228
314
  @mixin _gridle_pull(
229
315
  $columns,
230
- $state : null
316
+ $state : default
231
317
  ) {
232
318
  // vars :
233
319
  $name : _gridle_get_var_value(name, $state);
@@ -238,7 +324,7 @@
238
324
  $debug-show-class-names : _gridle_get_var_value(debug-show-class-names, $state);
239
325
 
240
326
  // vars :
241
- $width : percentage(1 / $context) * $columns;
327
+ $width : percentage(1 / $context) * ($columns / $name-multiplicator);
242
328
  @if $direction == rtl { $width : $width*-1; }
243
329
  right:$width;
244
330
 
@@ -247,9 +333,9 @@
247
333
  #{$gridle-debug-selector} {
248
334
  &:after {
249
335
  @if $name == default {
250
- content:"pull-#{$name}-#{$columns * $name-multiplicator}";
336
+ content:"pull-#{$name}-#{$columns}";
251
337
  } @else {
252
- content:"pull-#{$name}-#{$columns * $name-multiplicator}" !important;
338
+ content:"pull-#{$name}-#{$columns}" !important;
253
339
  }
254
340
  }
255
341
  }
@@ -261,7 +347,7 @@
261
347
  // Push the element of the count of column wanted
262
348
  @mixin gridle_prefix(
263
349
  $columns,
264
- $state : null
350
+ $state : default
265
351
  ) {
266
352
  // common :
267
353
  @include _gridle_prefix_common($state);
@@ -277,7 +363,7 @@
277
363
  }
278
364
  @mixin _gridle_prefix(
279
365
  $columns,
280
- $state : null
366
+ $state : default
281
367
  ) {
282
368
  // vars :
283
369
  $name : _gridle_get_var_value(name, $state);
@@ -289,7 +375,7 @@
289
375
  $debug-show-class-names : _gridle_get_var_value(debug-show-class-names, $state);
290
376
 
291
377
  // vars :
292
- $width : percentage(1 / $context) * $columns;
378
+ $width : percentage(1 / $context) * ($columns / $name-multiplicator);
293
379
 
294
380
  // set value :
295
381
  @if $direction == rtl { margin-right:$width; }
@@ -300,9 +386,9 @@
300
386
  #{$gridle-debug-selector} {
301
387
  &:after {
302
388
  @if $name == default {
303
- content:"prefix-#{$name}-#{$columns * $name-multiplicator}";
389
+ content:"prefix-#{$name}-#{$columns}";
304
390
  } @else {
305
- content:"prefix-#{$name}-#{$columns * $name-multiplicator}" !important;
391
+ content:"prefix-#{$name}-#{$columns}" !important;
306
392
  }
307
393
  }
308
394
  }
@@ -314,7 +400,7 @@
314
400
  // Pull the element of the count of column wanted
315
401
  @mixin gridle_suffix(
316
402
  $columns,
317
- $state : null
403
+ $state : default
318
404
  ) {
319
405
  // common :
320
406
  @include _gridle_suffix_common($state);
@@ -330,7 +416,7 @@
330
416
  }
331
417
  @mixin _gridle_suffix(
332
418
  $columns,
333
- $state : null
419
+ $state : default
334
420
  ) {
335
421
  // vars :
336
422
  $name : _gridle_get_var_value(name, $state);
@@ -342,7 +428,7 @@
342
428
  $debug-show-class-names : _gridle_get_var_value(debug-show-class-names, $state);
343
429
 
344
430
  // vars :
345
- $width : percentage(1 / $context) * $columns;
431
+ $width : percentage(1 / $context) * ($columns / $name-multiplicator);
346
432
 
347
433
  // set value :
348
434
  @if $direction == rtl { margin-left:$width; }
@@ -353,9 +439,9 @@
353
439
  #{$gridle-debug-selector} {
354
440
  &:after {
355
441
  @if $name == default {
356
- content:"suffix-#{$name}-#{$columns * $name-multiplicator}";
442
+ content:"suffix-#{$name}-#{$columns}";
357
443
  } @else {
358
- content:"suffix-#{$name}-#{$columns * $name-multiplicator}" !important;
444
+ content:"suffix-#{$name}-#{$columns}" !important;
359
445
  }
360
446
  }
361
447
  }
@@ -366,7 +452,7 @@
366
452
  // grid background :
367
453
  // Display the grid background debug
368
454
  @mixin gridle_grid_background(
369
- $state : null
455
+ $state : default
370
456
  ) {
371
457
  // check if need media query :
372
458
  @if $state {
@@ -378,7 +464,7 @@
378
464
  }
379
465
  }
380
466
  @mixin _gridle_grid_background(
381
- $state : null
467
+ $state : default
382
468
  ) {
383
469
 
384
470
  // variables :
@@ -408,21 +494,20 @@
408
494
  @mixin gridle_clear_each(
409
495
  $clearEach,
410
496
  $clearWhat : both,
411
- $state : null
497
+ $state : default
412
498
  ) {
413
499
  // check if need media query :
414
500
  @if $state {
415
501
  @include gridle_state($state) {
416
- @include _gridle_clear_each($clearEach, $clearWhat, $state);
502
+ @include _gridle_clear_each($clearEach, $clearWhat);
417
503
  }
418
504
  } @else {
419
- @include _gridle_clear_each($clearEach, $clearWhat, $state);
505
+ @include _gridle_clear_each($clearEach, $clearWhat);
420
506
  }
421
507
  }
422
508
  @mixin _gridle_clear_each(
423
509
  $clearEach,
424
- $clearWhat,
425
- $state : null
510
+ $clearWhat
426
511
  ) {
427
512
  > *:nth-child(#{$clearEach}n+1) {
428
513
  clear : $clearWhat;
@@ -432,7 +517,7 @@
432
517
 
433
518
  // Grid centered :
434
519
  @mixin gridle_centered(
435
- $state : null
520
+ $state : default
436
521
  ) {
437
522
  // check if need media query :
438
523
  @if $state {
@@ -454,7 +539,7 @@
454
539
 
455
540
  // Grid parent :
456
541
  @mixin gridle_parent(
457
- $state : null
542
+ $state : default
458
543
  ) {
459
544
  // common :
460
545
  @include _gridle_parent_common();
@@ -477,7 +562,7 @@
477
562
  */
478
563
  @mixin gridle_vertical_align(
479
564
  $align : middle,
480
- $state : null
565
+ $state : default
481
566
  ) {
482
567
  // check if need media query :
483
568
  @if $state {
@@ -506,7 +591,7 @@
506
591
  // Hide on :
507
592
  // @param String $media On what state
508
593
  @mixin gridle_hide(
509
- $state : null
594
+ $state : default
510
595
  ) {
511
596
  // check if need media query :
512
597
  @if $state {
@@ -525,7 +610,7 @@
525
610
  // Not visible on :
526
611
  // @param String $media What to hide (one of the 3 state classes name)
527
612
  @mixin gridle_not_visible(
528
- $state : null
613
+ $state : default
529
614
  ) {
530
615
  // check if need media query :
531
616
  @if $state {
@@ -544,7 +629,7 @@
544
629
  // Show on
545
630
  // @param String $media What to hide (one of the 3 state classes name)
546
631
  @mixin gridle_show(
547
- $state : null
632
+ $state : default
548
633
  ) {
549
634
  // check if need media query :
550
635
  @if $state {
@@ -560,10 +645,32 @@
560
645
  }
561
646
 
562
647
 
648
+ /**
649
+ * Show inline
650
+ *
651
+ * @param String $state The state name
652
+ */
653
+ @mixin gridle_show_inline(
654
+ $state : default
655
+ ) {
656
+ // check if need media query :
657
+ @if $state {
658
+ @include gridle_state($state) {
659
+ @include _gridle_show_inline();
660
+ }
661
+ } @else {
662
+ @include _gridle_show_inline();
663
+ }
664
+ }
665
+ @mixin _gridle_show_inline() {
666
+ display:inline-block;
667
+ }
668
+
669
+
563
670
  // Visible on :
564
671
  // @param String $media On what state
565
672
  @mixin gridle_visible(
566
- $state : null
673
+ $state : default
567
674
  ) {
568
675
  // check if need media query :
569
676
  @if $state {
@@ -582,7 +689,7 @@
582
689
  // Gridle Right :
583
690
  @mixin gridle_float(
584
691
  $float-direction : left,
585
- $state : null
692
+ $state : default
586
693
  ) {
587
694
  // check if need media query :
588
695
  @if $state {
@@ -605,7 +712,7 @@
605
712
  // @param String $state The state
606
713
  @mixin gridle_clear(
607
714
  $clear-direction : both,
608
- $state : null
715
+ $state : default
609
716
  ) {
610
717
  // check if need media query :
611
718
  @if $state {
@@ -628,7 +735,7 @@
628
735
  // @param String $state The state
629
736
  @mixin gridle_no_gutter(
630
737
  $side : left right,
631
- $state : null
738
+ $state : default
632
739
  ) {
633
740
  // check if need media query :
634
741
  @if $state {
@@ -641,7 +748,7 @@
641
748
  }
642
749
  @mixin gridle_no_margin(
643
750
  $side : left right,
644
- $state : null
751
+ $state : default
645
752
  ) {
646
753
  @include gridle_no_gutter($side, $state);
647
754
  }
@@ -649,7 +756,7 @@
649
756
  $side : left right
650
757
  ) {
651
758
  @each $s in $side {
652
- padding-#{$s} : 0 !important;
759
+ padding-#{$s} : 0;
653
760
  }
654
761
  }
655
762
 
@@ -659,7 +766,7 @@
659
766
  // @param String $state The state
660
767
  @mixin gridle_gutter(
661
768
  $side : left right,
662
- $state : null
769
+ $state : default
663
770
  ) {
664
771
  // check if need media query :
665
772
  @if $state {
@@ -673,13 +780,13 @@
673
780
  // shortcut :
674
781
  @mixin gridle_margin(
675
782
  $side : left right,
676
- $state : null
783
+ $state : default
677
784
  ) {
678
785
  @include gridle_gutter($side, $state);
679
786
  }
680
787
  @mixin _gridle_gutter(
681
788
  $side : left right,
682
- $state : null
789
+ $state : default
683
790
  ) {
684
791
  $gutter-width : _gridle_get_var_value(gutter-width, $state);
685
792
  @each $s in $side {
@@ -13,7 +13,7 @@
13
13
  $_gridle-settings : map-merge((
14
14
  name : default,
15
15
  min-width : null,
16
- max-width : 99999999px,
16
+ max-width : null,
17
17
  query : null,
18
18
  classes : true,
19
19
  context : 12,
@@ -126,7 +126,7 @@
126
126
  * @para m String $device The device to use (iphone, etc...)
127
127
  */
128
128
  @mixin gridle_set_debug_device(
129
- $state : null,
129
+ $state : default,
130
130
  $device : null
131
131
  ) {
132
132
 
@@ -4,6 +4,8 @@
4
4
  // |------------------------------------------------------
5
5
  // |------------------------------------------------------
6
6
 
7
+ $gridle-generate-json-settings : true !default;
8
+
7
9
  $gridle-debug-selector : ".gridle-debug &, &.gridle-debug" !default;
8
10
 
9
11
  $gridle-class-prefix : '' !default;
@@ -26,6 +28,7 @@ $gridle-vertical-align-bottom-name-pattern : ('vertical','%-','align','%-','%s
26
28
 
27
29
  $gridle-hide-name-pattern : ('hide','%-','%state') !default;
28
30
  $gridle-show-name-pattern : ('show','%-','%state') !default;
31
+ $gridle-show-inline-name-pattern : ('show','%-','inline','%-','%state') !default;
29
32
  $gridle-not-visible-name-pattern : ('not','%-','visible','%-','%state') !default;
30
33
  $gridle-visible-name-pattern : ('visible','%-','%state') !default;
31
34
 
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: gridle
3
3
  version: !ruby/object:Gem::Version
4
- version: 1.3.2
4
+ version: 1.3.3
5
5
  platform: ruby
6
6
  authors:
7
7
  - Olivier Bossel
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2014-05-22 00:00:00.000000000 Z
11
+ date: 2014-07-22 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: sass
@@ -35,6 +35,7 @@ files:
35
35
  - lib/gridle.rb
36
36
  - stylesheets/_gridle.scss
37
37
  - stylesheets/gridle/_common-mixins.scss
38
+ - stylesheets/gridle/_default-states.scss
38
39
  - stylesheets/gridle/_functions.scss
39
40
  - stylesheets/gridle/_generate-mixins.scss
40
41
  - stylesheets/gridle/_gridle.scss