gridle 1.1.0 → 1.2.0

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.
Files changed (31) hide show
  1. checksums.yaml +4 -4
  2. data/lib/gridle.rb +4 -5
  3. data/stylesheets/gridle/_common-mixins.scss +84 -0
  4. data/stylesheets/gridle/_functions.scss +291 -0
  5. data/stylesheets/gridle/_generate-mixins.scss +515 -0
  6. data/stylesheets/gridle/_gridle.scss +28 -1653
  7. data/stylesheets/gridle/_mixins.scss +670 -0
  8. data/stylesheets/gridle/_settings-mixins.scss +143 -0
  9. data/stylesheets/gridle/_settings.scss +84 -0
  10. data/stylesheets/gridle/_silent-classes.scss +102 -0
  11. metadata +12 -39
  12. data/stylesheets/gridle/_12-columns-classes.scss +0 -9
  13. data/stylesheets/gridle/_12-columns-responsive-classes.scss +0 -9
  14. data/stylesheets/gridle/_12-columns-responsive.scss +0 -14
  15. data/stylesheets/gridle/_12-columns.scss +0 -9
  16. data/stylesheets/gridle/_16-columns-classes.scss +0 -9
  17. data/stylesheets/gridle/_16-columns-responsive-classes.scss +0 -9
  18. data/stylesheets/gridle/_16-columns-responsive.scss +0 -14
  19. data/stylesheets/gridle/_16-columns.scss +0 -9
  20. data/stylesheets/gridle/_24-columns-classes.scss +0 -9
  21. data/stylesheets/gridle/_24-columns-responsive-classes.scss +0 -9
  22. data/stylesheets/gridle/_24-columns-responsive.scss +0 -14
  23. data/stylesheets/gridle/_24-columns.scss +0 -9
  24. data/stylesheets/gridle/_960gs-classes.scss +0 -9
  25. data/stylesheets/gridle/_960gs-responsive-classes.scss +0 -9
  26. data/stylesheets/gridle/_960gs-responsive.scss +0 -23
  27. data/stylesheets/gridle/_960gs.scss +0 -18
  28. data/stylesheets/gridle/_unsementic-classes.scss +0 -9
  29. data/stylesheets/gridle/_unsementic-responsive-classes.scss +0 -9
  30. data/stylesheets/gridle/_unsementic-responsive.scss +0 -23
  31. data/stylesheets/gridle/_unsementic.scss +0 -18
@@ -0,0 +1,670 @@
1
+ // |------------------------------------------------------
2
+ // |------------------------------------------------------
3
+ // | Mixins
4
+ // |------------------------------------------------------
5
+ // |------------------------------------------------------
6
+
7
+ // Responsive helpers mixins :
8
+ @mixin gridle_state(
9
+ $state-or-min-width,
10
+ $max-width : null,
11
+ $has-parent : true
12
+ ) {
13
+
14
+ // query list :
15
+ $query : ();
16
+
17
+ // loop on each states :
18
+ @each $_state-or-min-width in $state-or-min-width {
19
+
20
+ // check if is a state :
21
+ @if type-of($_state-or-min-width) == string
22
+ and ($gridle-html-states-classes or $gridle-debug)
23
+ and _gridle_get_state($_state-or-min-width) {
24
+ // html class :
25
+ @if $has-parent {
26
+ html#{_gridle_classname("#{$_state-or-min-width}")} & { @content; }
27
+ } @else {
28
+ html#{_gridle_classname("#{$_state-or-min-width}")} { @content; }
29
+ }
30
+ }
31
+
32
+ // get the media query :
33
+ $q : _get_media_query_for_state($_state-or-min-width, $max-width);
34
+ @if $q {
35
+ $query : append($query, unquote("#{$q}"), comma);
36
+ }
37
+ }
38
+
39
+ // check and print media query :
40
+ @if type-of($query) == list {
41
+ @media #{$query} {
42
+ @content;
43
+ }
44
+ }
45
+ }
46
+
47
+
48
+
49
+ // Container mixin :
50
+ @mixin gridle_container(
51
+ ) {
52
+ @include _gridle_container_common();
53
+ }
54
+
55
+
56
+ // Grid mixin :
57
+ // Set the width of the specified grid column :
58
+ @mixin gridle(
59
+ $columns : $gridle-columns-count,
60
+ $state-context : null,
61
+ $state : null
62
+ ) {
63
+ // common :
64
+ @include _gridle_grid_common();
65
+ // variables :
66
+ $context : $gridle-columns-count;
67
+ @if type-of($state-context) == number {
68
+ $state : $state;
69
+ $context : $state-context;
70
+ } @elseif $state-context {
71
+ $state : $state-context;
72
+ $context : _gridle_get_state_var($state,'context');
73
+ }
74
+ // check if need media query :
75
+ @if $state {
76
+ @include gridle_state($state) {
77
+ @include _gridle($columns, $state, $context);
78
+ }
79
+ } @else {
80
+ @include _gridle($columns,$state,$context);
81
+ }
82
+ }
83
+ @mixin _gridle(
84
+ $columns : $gridle-columns-count,
85
+ $state : null,
86
+ $context : $gridle-columns-count
87
+ ) {
88
+ // vars :
89
+ $width : percentage(1 / $context * $columns);
90
+
91
+ // check if is paddings or margin for gutters :
92
+ @if unquote($gridle-gutter-type) == margin
93
+ {
94
+ width:calc(#{$width} - #{$gridle-gutter-width});
95
+ margin:0 $gridle-gutter-width/2;
96
+
97
+ // if has the parent class, need to adapt :
98
+ $parentSelector : _gridle_classname($gridle-parent-name-pattern,null,null);
99
+ &#{$parentSelector} {
100
+ width:$width;
101
+ margin:0;
102
+ }
103
+
104
+ } @else {
105
+ width:$width;
106
+ }
107
+
108
+ // ie7 support :
109
+ @if $gridle-ie7-support == true {
110
+ *width: expression((this.parentNode.clientWidth/#{$context}*#{$columns} - parseInt(this.currentStyle['paddingLeft']) - parseInt(this.currentStyle['paddingRight'])) + 'px');
111
+ }
112
+
113
+ // debug :
114
+ @if $gridle-debug == true and $gridle-debug-show-class-names == true {
115
+ #{$gridle-debug-selector} {
116
+ &:before {
117
+ content:"grid-#{$state}-#{$columns * $gridle-name-multiplicator}";
118
+ }
119
+ &.parent:before {
120
+ content:"grid-parent-#{$state}-#{$columns * $gridle-name-multiplicator}";
121
+ }
122
+ }
123
+ }
124
+ }
125
+
126
+
127
+ // push :
128
+ // Push the element of the count of column wanted
129
+ @mixin gridle_push(
130
+ $columns : $gridle-columns-count,
131
+ $state-context : null,
132
+ $state : null
133
+ ) {
134
+ // common :
135
+ @include _gridle_push_common();
136
+ // variables :
137
+ $context : $gridle-columns-count;
138
+ @if type-of($state-context) == number {
139
+ $state : $state;
140
+ $context : $state-context;
141
+ } @else {
142
+ $state : $state-context;
143
+ $context : _gridle_get_state_var($state,'context');
144
+ }
145
+ // check if need media query :
146
+ @if $state {
147
+ @include gridle_state($state) {
148
+ @include _gridle_push($columns,$state,$context);
149
+ }
150
+ } @else {
151
+ @include _gridle_push($columns,$state,$context);
152
+ }
153
+ }
154
+ @mixin _gridle_push(
155
+ $columns : $gridle-columns-count,
156
+ $state : null,
157
+ $context : $gridle-columns-count
158
+ ) {
159
+ // vars :
160
+ $width : percentage(1 / $context) * $columns;
161
+ @if $gridle-direction == rtl { $width : $width*-1; }
162
+ left:$width;
163
+
164
+ // debug css :
165
+ @if $gridle-debug == true and $gridle-debug-show-class-names == true {
166
+ #{$gridle-debug-selector} {
167
+ &:after {
168
+ content:"push-#{$state}-#{$columns * $gridle-name-multiplicator}" !important;
169
+ }
170
+ }
171
+ }
172
+
173
+ }
174
+
175
+
176
+ // pull :
177
+ // Pull the element of the count of column wanted
178
+ @mixin gridle_pull(
179
+ $columns : $gridle-columns-count,
180
+ $state-context : null,
181
+ $state : null
182
+ ) {
183
+ // common :
184
+ @include _gridle_pull_common();
185
+ // variables :
186
+ $context : $gridle-columns-count;
187
+ @if type-of($state-context) == number {
188
+ $state : $state;
189
+ $context : $state-context;
190
+ } @else {
191
+ $state : $state-context;
192
+ $context : _gridle_get_state_var($state,'context');
193
+ }
194
+ // check if need media query :
195
+ @if $state {
196
+ @include gridle_state($state) {
197
+ @include _gridle_pull($columns,$state,$context);
198
+ }
199
+ } @else {
200
+ @include _gridle_pull($columns,$state,$context);
201
+ }
202
+ }
203
+ @mixin _gridle_pull(
204
+ $columns : $gridle-columns-count,
205
+ $state : null,
206
+ $context : $gridle-columns-count
207
+ ) {
208
+ // vars :
209
+ $width : percentage(1 / $context) * $columns;
210
+ @if $gridle-direction == rtl { $width : $width*-1; }
211
+ right:$width;
212
+
213
+ // debug css :
214
+ @if $gridle-debug == true and $gridle-debug-show-class-names == true {
215
+ #{$gridle-debug-selector} {
216
+ &:after {
217
+ content:"pull-#{$state}-#{$columns * $gridle-name-multiplicator}" !important;
218
+ }
219
+ }
220
+ }
221
+ }
222
+
223
+
224
+ // push :
225
+ // Push the element of the count of column wanted
226
+ @mixin gridle_prefix(
227
+ $columns : $gridle-columns-count,
228
+ $state-context : null,
229
+ $state : null
230
+ ) {
231
+ // common :
232
+ @include _gridle_prefix_common();
233
+ // variables :
234
+ $context : $gridle-columns-count;
235
+ @if type-of($state-context) == number {
236
+ $state : $state;
237
+ $context : $state-context;
238
+ } @else {
239
+ $state : $state-context;
240
+ $context : _gridle_get_state_var($state,'context');
241
+ }
242
+ // check if need media query :
243
+ @if $state {
244
+ @include gridle_state($state) {
245
+ @include _gridle_prefix($columns,$state,$context);
246
+ }
247
+ } @else {
248
+ @include _gridle_prefix($columns,$state,$context);
249
+ }
250
+ }
251
+ @mixin _gridle_prefix(
252
+ $columns : $gridle-columns-count,
253
+ $state : null,
254
+ $context : $gridle-columns-count
255
+ ) {
256
+ // vars :
257
+ $width : percentage(1 / $context) * $columns;
258
+
259
+ // different method if gutter is padding or margin :
260
+ @if unquote($gridle-gutter-type) == padding
261
+ {
262
+ @if $gridle-direction == rtl { margin-right:$width; }
263
+ @else { margin-left:$width; }
264
+ } @else {
265
+ @if $gridle-direction == rtl {
266
+ margin-right:calc(#{$width} + #{$gridle-gutter-width/2}) !important;
267
+ } @else {
268
+ margin-left:calc(#{$width} + #{$gridle-gutter-width/2}) !important;
269
+ }
270
+ }
271
+
272
+ // debug css :
273
+ @if $gridle-debug == true and $gridle-debug-show-class-names == true {
274
+ #{$gridle-debug-selector} {
275
+ &:after {
276
+ content:"prefix-#{$state}-#{$columns * $gridle-name-multiplicator}" !important;
277
+ }
278
+ }
279
+ }
280
+ }
281
+
282
+
283
+ // pull :
284
+ // Pull the element of the count of column wanted
285
+ @mixin gridle_suffix(
286
+ $columns : $gridle-columns-count,
287
+ $state-context : null,
288
+ $state : null
289
+ ) {
290
+ // common :
291
+ @include _gridle_suffix_common();
292
+ // variables :
293
+ $context : $gridle-columns-count;
294
+ @if type-of($state-context) == number {
295
+ $state : $state;
296
+ $context : $state-context;
297
+ } @else {
298
+ $state : $state-context;
299
+ $context : _gridle_get_state_var($state,'context');
300
+ }
301
+ // check if need media query :
302
+ @if $state {
303
+ @include gridle_state($state) {
304
+ @include _gridle_suffix($columns,$state,$context);
305
+ }
306
+ } @else {
307
+ @include _gridle_suffix($columns,$state,$context);
308
+ }
309
+ }
310
+ @mixin _gridle_suffix(
311
+ $columns : $gridle-columns-count,
312
+ $state : null,
313
+ $context : $gridle-columns-count
314
+ ) {
315
+ // vars :
316
+ $width : percentage(1 / $context) * $columns;
317
+
318
+ // different method if gutter is padding or margin :
319
+ @if unquote($gridle-gutter-type) == padding
320
+ {
321
+ @if $gridle-direction == rtl { margin-left:$width; }
322
+ @else { margin-right:$width; }
323
+ } @else {
324
+ @if $gridle-direction == rtl {
325
+ margin-left:calc(#{$width} + #{$gridle-gutter-width/2}) !important;
326
+ } @else {
327
+ margin-right:calc(#{$width} + #{$gridle-gutter-width/2}) !important;
328
+ }
329
+ }
330
+
331
+ // debug css :
332
+ @if $gridle-debug == true and $gridle-debug-show-class-names == true {
333
+ #{$gridle-debug-selector} {
334
+ &:after {
335
+ content:"suffix-#{$state}-#{$columns * $gridle-name-multiplicator}" !important;
336
+ }
337
+ }
338
+ }
339
+ }
340
+
341
+
342
+ // grid background :
343
+ // Display the grid background debug
344
+ @mixin gridle_grid_background(
345
+ $state-context : null,
346
+ $state : null
347
+ ) {
348
+
349
+ // variables :
350
+ $context : $gridle-columns-count;
351
+ @if type-of($state-context) == number {
352
+ $state : $state;
353
+ $context : $state-context;
354
+ } @elseif $state {
355
+ $state : $state-context;
356
+ $context : _gridle_get_state_var($state,'context');
357
+ }
358
+
359
+ // check if need media query :
360
+ @if $state {
361
+ @include gridle_state($state) {
362
+ @include _gridle_grid_background($state,$context);
363
+ }
364
+ } @else {
365
+ @include _gridle_grid_background($state,$context);
366
+ }
367
+ }
368
+ @mixin _gridle_grid_background(
369
+ $state : null,
370
+ $context : $gridle-columns-count
371
+ ) {
372
+
373
+ position:relative;
374
+ z-index:9999;
375
+ &:before {
376
+ content:'.';
377
+ position:absolute;
378
+ top:0; left:0;
379
+ width:100%; height:100% !important;
380
+ // vars :
381
+ $width : percentage(1 / $context);
382
+ background: linear-gradient(to right, rgba(0,0,0,.01) 50% , rgba(0,0,0,.04) 50%); /* Standard syntax */
383
+ background-size:($width*2) 100%;
384
+ // background-position:$gridle-gutter-width/2 0;
385
+ }
386
+ }
387
+
388
+
389
+ /**
390
+ * Parent clear each
391
+ */
392
+ // Grid mixin :
393
+ // Set the width of the specified grid column :
394
+ @mixin gridle_clear_each(
395
+ $clearEach,
396
+ $clearWhat : both,
397
+ $state : null
398
+ ) {
399
+ // check if need media query :
400
+ @if $state {
401
+ @include gridle_state($state) {
402
+ @include _gridle_clear_each($clearEach, $clearWhat, $state);
403
+ }
404
+ } @else {
405
+ @include _gridle_clear_each($clearEach, $clearWhat, $state);
406
+ }
407
+ }
408
+ @mixin _gridle_clear_each(
409
+ $clearEach,
410
+ $clearWhat,
411
+ $state : null
412
+ ) {
413
+ > *:nth-child(#{$clearEach}n+1) {
414
+ clear : $clearWhat;
415
+ }
416
+ }
417
+
418
+
419
+ // Grid centered :
420
+ @mixin gridle_centered(
421
+ $state : null
422
+ ) {
423
+ // check if need media query :
424
+ @if $state {
425
+ @include gridle_state($state) {
426
+ @include _gridle_centered();
427
+ }
428
+ } @else {
429
+ @include _gridle_centered();
430
+ }
431
+ }
432
+ @mixin _gridle_centered() {
433
+ display:block !important;
434
+ float:none !important;
435
+ margin-left:auto !important;
436
+ margin-right:auto !important;
437
+ clear:both !important;
438
+ }
439
+
440
+
441
+ // Grid parent :
442
+ @mixin gridle_parent(
443
+ $state : null
444
+ ) {
445
+ // common :
446
+ @include _gridle_parent_common();
447
+ // check if need media query :
448
+ @if $state {
449
+ @include gridle_state($state) {
450
+ @include _gridle_parent();
451
+ }
452
+ } @else {
453
+ @include _gridle_parent();
454
+ }
455
+ }
456
+ @mixin _gridle_parent() {
457
+ @if unquote($gridle-gutter-type) == padding
458
+ {
459
+ @include gridle_no_gutter();
460
+ }
461
+ }
462
+
463
+
464
+ /**
465
+ * Vertical align :
466
+ */
467
+ @mixin gridle_parent_vertical_align(
468
+ $state : null
469
+ ) {
470
+ // check if need media query :
471
+ @if $state {
472
+ @include gridle_state($state) {
473
+ @include _gridle_parent_vertical_align();
474
+ }
475
+ } @else {
476
+ @include _gridle_parent_vertical_align();
477
+ }
478
+ }
479
+ @mixin _gridle_parent_vertical_align() {
480
+ vertical-align:middle;
481
+
482
+ > * {
483
+ display:inline-block;
484
+ float:none !important;
485
+ vertical-align:middle;
486
+ }
487
+ }
488
+
489
+
490
+ // Hide on :
491
+ // @param String $media On what state
492
+ @mixin gridle_hide(
493
+ $state : null
494
+ ) {
495
+ // check if need media query :
496
+ @if $state {
497
+ @include gridle_state($state) {
498
+ @include _gridle_hide();
499
+ }
500
+ } @else {
501
+ @include _gridle_hide();
502
+ }
503
+ }
504
+ @mixin _gridle_hide() {
505
+ display:none;
506
+ }
507
+
508
+
509
+ // Not visible on :
510
+ // @param String $media What to hide (one of the 3 state classes name)
511
+ @mixin gridle_not_visible(
512
+ $state : null
513
+ ) {
514
+ // check if need media query :
515
+ @if $state {
516
+ @include gridle_state($state) {
517
+ @include _gridle_not_visible();
518
+ }
519
+ } @else {
520
+ @include _gridle_not_visible();
521
+ }
522
+ }
523
+ @mixin _gridle_not_visible() {
524
+ visibility:hidden;
525
+ }
526
+
527
+
528
+ // Show on
529
+ // @param String $media What to hide (one of the 3 state classes name)
530
+ @mixin gridle_show(
531
+ $state : null
532
+ ) {
533
+ // check if need media query :
534
+ @if $state {
535
+ @include gridle_state($state) {
536
+ @include _gridle_show();
537
+ }
538
+ } @else {
539
+ @include _gridle_show();
540
+ }
541
+ }
542
+ @mixin _gridle_show() {
543
+ display:block;
544
+ }
545
+
546
+
547
+ // Visible on :
548
+ // @param String $media On what state
549
+ @mixin gridle_visible(
550
+ $state : null
551
+ ) {
552
+ // check if need media query :
553
+ @if $state {
554
+ @include gridle_state($state) {
555
+ @include _gridle_visible();
556
+ }
557
+ } @else {
558
+ @include _gridle_visible();
559
+ }
560
+ }
561
+ @mixin _gridle_visible() {
562
+ visibility:visible;
563
+ }
564
+
565
+
566
+ // Gridle Right :
567
+ @mixin gridle_float(
568
+ $float-direction : left,
569
+ $state : null
570
+ ) {
571
+ // check if need media query :
572
+ @if $state {
573
+ @include gridle_state($state) {
574
+ @include gridle_float($float-direction);
575
+ }
576
+ } @else {
577
+ @include gridle_float($float-direction);
578
+ }
579
+ }
580
+ @mixin gridle_float(
581
+ $float-direction : left
582
+ ) {
583
+ float:#{$float-direction};
584
+ }
585
+
586
+
587
+ // Gridle clear :
588
+ // @param String $clear-direction The direction to clear
589
+ // @param String $state The state
590
+ @mixin gridle_clear(
591
+ $clear-direction : both,
592
+ $state : null
593
+ ) {
594
+ // check if need media query :
595
+ @if $state {
596
+ @include gridle_state($state) {
597
+ @include _gridle_clear($clear-direction);
598
+ }
599
+ } @else {
600
+ @include _gridle_clear($clear-direction);
601
+ }
602
+ }
603
+ @mixin _gridle_clear(
604
+ $clear-direction : both
605
+ ) {
606
+ clear:#{$clear-direction};
607
+ }
608
+
609
+
610
+ // Gridle no gutter :
611
+ // @param String $side The side to clear
612
+ // @param String $state The state
613
+ @mixin gridle_no_gutter(
614
+ $side : left right,
615
+ $state : null
616
+ ) {
617
+ // check if need media query :
618
+ @if $state {
619
+ @include gridle_state($state) {
620
+ @include _gridle_no_gutter($side);
621
+ }
622
+ } @else {
623
+ @include _gridle_no_gutter($side);
624
+ }
625
+ }
626
+ @mixin gridle_no_margin(
627
+ $side : left right,
628
+ $state : null
629
+ ) {
630
+ @include gridle_no_gutter($side, $state);
631
+ }
632
+ @mixin _gridle_no_gutter(
633
+ $side : left right
634
+ ) {
635
+ @each $s in $side {
636
+ padding-#{$s} : 0 !important;
637
+ }
638
+ }
639
+
640
+
641
+ // Gridle gutter :
642
+ // @param String $side The side to clear
643
+ // @param String $state The state
644
+ @mixin gridle_gutter(
645
+ $side : left right,
646
+ $state : null
647
+ ) {
648
+ // check if need media query :
649
+ @if $state {
650
+ @include gridle_state($state) {
651
+ @include _gridle_gutter($side);
652
+ }
653
+ } @else {
654
+ @include _gridle_gutter($side);
655
+ }
656
+ }
657
+ // shortcut :
658
+ @mixin gridle_margin(
659
+ $side : left right,
660
+ $state : null
661
+ ) {
662
+ @include gridle_gutter($side, $state);
663
+ }
664
+ @mixin _gridle_gutter(
665
+ $side : left right
666
+ ) {
667
+ @each $s in $side {
668
+ padding-#{$s} : $gridle-gutter-width / 2;
669
+ }
670
+ }