flexbox_rb 0.1.0

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml ADDED
@@ -0,0 +1,7 @@
1
+ ---
2
+ SHA1:
3
+ metadata.gz: d3e67aab6c3592a0526d191915d3e5cd2d5113fd
4
+ data.tar.gz: 1371f82bc6a91b97c0bb28891abd53aa27f8c0b9
5
+ SHA512:
6
+ metadata.gz: 717dfd213e063503273aa8d0261f8164446e7a193fa983cd62966677a169cc21ded3a38eab68cdf10dfedc20f35fdad52eb6ca5a70f99f491df85e50778a45c5
7
+ data.tar.gz: f74a8f7a7a30abc9257f77339ddb9bdcef3c6d5c17cc13eddd69f589d613530867ca96facd36d2d9a7b0a9a809cc6412d10ef7b021ce4d294d1ebf42645dda16
@@ -0,0 +1,3 @@
1
+ module FlexboxRb
2
+ VERSION = "0.1.0"
3
+ end
data/lib/flexbox_rb.rb ADDED
@@ -0,0 +1,7 @@
1
+ require "flexbox_rb/version"
2
+
3
+ module FlexboxRb
4
+ class Engine < ::Rails::Engine
5
+
6
+ end
7
+ end
@@ -0,0 +1,1126 @@
1
+ /*
2
+ *
3
+ * Uncomment and set these variables to customize the grid.
4
+ *
5
+ * :root {
6
+ * --gutter-width: 1rem;
7
+ * --outer-margin: 2rem;
8
+ * --gutter-compensation: calc( var( --gutter-width / 2 ) * -1 );
9
+ * --half-gutter-width: calc( var( --gutter-width / 2 ) );
10
+ * --screen-xs-min: 30em;
11
+ * --screen-sm-min: 48em;
12
+ * --screen-md-min: 62em;
13
+ * --screen-lg-min: 75em;
14
+ * --container-sm: calc( 45rem + var( --gutter-width ) );
15
+ * --container-md: calc( 60rem + var( --gutter-width ) );
16
+ * --container-lg: calc( 70rem + var( --gutter-width ) );
17
+ * }
18
+ *
19
+ */
20
+
21
+ .container-fluid {
22
+ margin-right: auto;
23
+ margin-left: auto;
24
+ padding-right: 2rem;
25
+ padding-left: 2rem;
26
+ }
27
+
28
+ .row {
29
+ box-sizing: border-box;
30
+ display: -webkit-box;
31
+ display: -webkit-flex;
32
+ display: -ms-flexbox;
33
+ display: flex;
34
+ -webkit-box-flex: 0;
35
+ -webkit-flex: 0 1 auto;
36
+ -ms-flex: 0 1 auto;
37
+ flex: 0 1 auto;
38
+ -webkit-box-orient: horizontal;
39
+ -webkit-box-direction: normal;
40
+ -webkit-flex-direction: row;
41
+ -ms-flex-direction: row;
42
+ flex-direction: row;
43
+ -webkit-flex-wrap: wrap;
44
+ -ms-flex-wrap: wrap;
45
+ flex-wrap: wrap;
46
+ margin-right: -0.5rem;
47
+ margin-left: -0.5rem;
48
+ }
49
+
50
+ .row.reverse {
51
+ -webkit-box-orient: horizontal;
52
+ -webkit-box-direction: reverse;
53
+ -webkit-flex-direction: row-reverse;
54
+ -ms-flex-direction: row-reverse;
55
+ flex-direction: row-reverse;
56
+ }
57
+
58
+ .col.reverse {
59
+ -webkit-box-orient: vertical;
60
+ -webkit-box-direction: reverse;
61
+ -webkit-flex-direction: column-reverse;
62
+ -ms-flex-direction: column-reverse;
63
+ flex-direction: column-reverse;
64
+ }
65
+
66
+ .col-xs,
67
+ .col-xs-1,
68
+ .col-xs-2,
69
+ .col-xs-3,
70
+ .col-xs-4,
71
+ .col-xs-5,
72
+ .col-xs-6,
73
+ .col-xs-7,
74
+ .col-xs-8,
75
+ .col-xs-9,
76
+ .col-xs-10,
77
+ .col-xs-11,
78
+ .col-xs-12,
79
+ .col-xs-offset-1,
80
+ .col-xs-offset-2,
81
+ .col-xs-offset-3,
82
+ .col-xs-offset-4,
83
+ .col-xs-offset-5,
84
+ .col-xs-offset-6,
85
+ .col-xs-offset-7,
86
+ .col-xs-offset-8,
87
+ .col-xs-offset-9,
88
+ .col-xs-offset-10,
89
+ .col-xs-offset-11,
90
+ .col-xs-offset-12 {
91
+ box-sizing: border-box;
92
+ display: -webkit-box;
93
+ display: -webkit-flex;
94
+ display: -ms-flexbox;
95
+ display: flex;
96
+ -webkit-box-flex: 0;
97
+ -webkit-flex: 0 1 auto;
98
+ -ms-flex: 0 1 auto;
99
+ flex: 0 1 auto;
100
+ -webkit-box-orient: vertical;
101
+ -webkit-box-direction: normal;
102
+ -webkit-flex-direction: column;
103
+ -ms-flex-direction: column;
104
+ flex-direction: column;
105
+ -webkit-box-flex: 0;
106
+ -webkit-flex-grow: 0;
107
+ -ms-flex-positive: 0;
108
+ flex-grow: 0;
109
+ -webkit-flex-shrink: 0;
110
+ -ms-flex-negative: 0;
111
+ flex-shrink: 0;
112
+ padding-right: 0.5rem;
113
+ padding-left: 0.5rem;
114
+ }
115
+
116
+ .col-xs {
117
+ -webkit-box-flex: 1;
118
+ -webkit-flex-grow: 1;
119
+ -ms-flex-positive: 1;
120
+ flex-grow: 1;
121
+ -webkit-flex-basis: 0;
122
+ -ms-flex-preferred-size: 0;
123
+ flex-basis: 0;
124
+ max-width: 100%;
125
+ }
126
+
127
+ .col-xs-1 {
128
+ -webkit-flex-basis: 8.333333333%;
129
+ -ms-flex-preferred-size: 8.333333333%;
130
+ flex-basis: 8.333333333%;
131
+ max-width: 8.333333333%;
132
+ }
133
+
134
+ .col-xs-2 {
135
+ -webkit-flex-basis: 16.666666667%;
136
+ -ms-flex-preferred-size: 16.666666667%;
137
+ flex-basis: 16.666666667%;
138
+ max-width: 16.666666667%;
139
+ }
140
+
141
+ .col-xs-3 {
142
+ -webkit-flex-basis: 25%;
143
+ -ms-flex-preferred-size: 25%;
144
+ flex-basis: 25%;
145
+ max-width: 25%;
146
+ }
147
+
148
+ .col-xs-4 {
149
+ -webkit-flex-basis: 33.333333333%;
150
+ -ms-flex-preferred-size: 33.333333333%;
151
+ flex-basis: 33.333333333%;
152
+ max-width: 33.333333333%;
153
+ }
154
+
155
+ .col-xs-5 {
156
+ -webkit-flex-basis: 41.666666667%;
157
+ -ms-flex-preferred-size: 41.666666667%;
158
+ flex-basis: 41.666666667%;
159
+ max-width: 41.666666667%;
160
+ }
161
+
162
+ .col-xs-6 {
163
+ -webkit-flex-basis: 50%;
164
+ -ms-flex-preferred-size: 50%;
165
+ flex-basis: 50%;
166
+ max-width: 50%;
167
+ }
168
+
169
+ .col-xs-7 {
170
+ -webkit-flex-basis: 58.333333333%;
171
+ -ms-flex-preferred-size: 58.333333333%;
172
+ flex-basis: 58.333333333%;
173
+ max-width: 58.333333333%;
174
+ }
175
+
176
+ .col-xs-8 {
177
+ -webkit-flex-basis: 66.666666667%;
178
+ -ms-flex-preferred-size: 66.666666667%;
179
+ flex-basis: 66.666666667%;
180
+ max-width: 66.666666667%;
181
+ }
182
+
183
+ .col-xs-9 {
184
+ -webkit-flex-basis: 75%;
185
+ -ms-flex-preferred-size: 75%;
186
+ flex-basis: 75%;
187
+ max-width: 75%;
188
+ }
189
+
190
+ .col-xs-10 {
191
+ -webkit-flex-basis: 83.333333333%;
192
+ -ms-flex-preferred-size: 83.333333333%;
193
+ flex-basis: 83.333333333%;
194
+ max-width: 83.333333333%;
195
+ }
196
+
197
+ .col-xs-11 {
198
+ -webkit-flex-basis: 91.666666667%;
199
+ -ms-flex-preferred-size: 91.666666667%;
200
+ flex-basis: 91.666666667%;
201
+ max-width: 91.666666667%;
202
+ }
203
+
204
+ .col-xs-12 {
205
+ -webkit-flex-basis: 100%;
206
+ -ms-flex-preferred-size: 100%;
207
+ flex-basis: 100%;
208
+ max-width: 100%;
209
+ }
210
+
211
+ .col-xs-offset-1 {
212
+ margin-left: 8.333333333%;
213
+ }
214
+
215
+ .col-xs-offset-2 {
216
+ margin-left: 16.666666667%;
217
+ }
218
+
219
+ .col-xs-offset-3 {
220
+ margin-left: 25%;
221
+ }
222
+
223
+ .col-xs-offset-4 {
224
+ margin-left: 33.333333333%;
225
+ }
226
+
227
+ .col-xs-offset-5 {
228
+ margin-left: 41.666666667%;
229
+ }
230
+
231
+ .col-xs-offset-6 {
232
+ margin-left: 50%;
233
+ }
234
+
235
+ .col-xs-offset-7 {
236
+ margin-left: 58.333333333%;
237
+ }
238
+
239
+ .col-xs-offset-8 {
240
+ margin-left: 66.666666667%;
241
+ }
242
+
243
+ .col-xs-offset-9 {
244
+ margin-left: 75%;
245
+ }
246
+
247
+ .col-xs-offset-10 {
248
+ margin-left: 83.333333333%;
249
+ }
250
+
251
+ .col-xs-offset-11 {
252
+ margin-left: 91.666666667%;
253
+ }
254
+
255
+ .start-xs {
256
+ -webkit-box-pack: start;
257
+ -webkit-justify-content: flex-start;
258
+ -ms-flex-pack: start;
259
+ justify-content: flex-start;
260
+ text-align: start;
261
+ }
262
+
263
+ .center-xs {
264
+ -webkit-box-pack: center;
265
+ -webkit-justify-content: center;
266
+ -ms-flex-pack: center;
267
+ justify-content: center;
268
+ text-align: center;
269
+ }
270
+
271
+ .end-xs {
272
+ -webkit-box-pack: end;
273
+ -webkit-justify-content: flex-end;
274
+ -ms-flex-pack: end;
275
+ justify-content: flex-end;
276
+ text-align: end;
277
+ }
278
+
279
+ .top-xs {
280
+ -webkit-box-align: start;
281
+ -webkit-align-items: flex-start;
282
+ -ms-flex-align: start;
283
+ align-items: flex-start;
284
+ }
285
+
286
+ .middle-xs {
287
+ -webkit-box-align: center;
288
+ -webkit-align-items: center;
289
+ -ms-flex-align: center;
290
+ align-items: center;
291
+ }
292
+
293
+ .bottom-xs {
294
+ -webkit-box-align: end;
295
+ -webkit-align-items: flex-end;
296
+ -ms-flex-align: end;
297
+ align-items: flex-end;
298
+ }
299
+
300
+ .around-xs {
301
+ -webkit-justify-content: space-around;
302
+ -ms-flex-pack: distribute;
303
+ justify-content: space-around;
304
+ }
305
+
306
+ .between-xs {
307
+ -webkit-box-pack: justify;
308
+ -webkit-justify-content: space-between;
309
+ -ms-flex-pack: justify;
310
+ justify-content: space-between;
311
+ }
312
+
313
+ .first-xs {
314
+ -webkit-box-ordinal-group: 0;
315
+ -webkit-order: -1;
316
+ -ms-flex-order: -1;
317
+ order: -1;
318
+ }
319
+
320
+ .last-xs {
321
+ -webkit-box-ordinal-group: 2;
322
+ -webkit-order: 1;
323
+ -ms-flex-order: 1;
324
+ order: 1;
325
+ }
326
+
327
+ @media only screen and (min-width: 48em) {
328
+ .container {
329
+ width: 46rem;
330
+ }
331
+
332
+ .col-sm,
333
+ .col-sm-1,
334
+ .col-sm-2,
335
+ .col-sm-3,
336
+ .col-sm-4,
337
+ .col-sm-5,
338
+ .col-sm-6,
339
+ .col-sm-7,
340
+ .col-sm-8,
341
+ .col-sm-9,
342
+ .col-sm-10,
343
+ .col-sm-11,
344
+ .col-sm-12,
345
+ .col-sm-offset-1,
346
+ .col-sm-offset-2,
347
+ .col-sm-offset-3,
348
+ .col-sm-offset-4,
349
+ .col-sm-offset-5,
350
+ .col-sm-offset-6,
351
+ .col-sm-offset-7,
352
+ .col-sm-offset-8,
353
+ .col-sm-offset-9,
354
+ .col-sm-offset-10,
355
+ .col-sm-offset-11,
356
+ .col-sm-offset-12 {
357
+ box-sizing: border-box;
358
+ display: -webkit-box;
359
+ display: -webkit-flex;
360
+ display: -ms-flexbox;
361
+ display: flex;
362
+ -webkit-box-flex: 0;
363
+ -webkit-flex: 0 1 auto;
364
+ -ms-flex: 0 1 auto;
365
+ flex: 0 1 auto;
366
+ -webkit-box-orient: vertical;
367
+ -webkit-box-direction: normal;
368
+ -webkit-flex-direction: column;
369
+ -ms-flex-direction: column;
370
+ flex-direction: column;
371
+ -webkit-box-flex: 0;
372
+ -webkit-flex-grow: 0;
373
+ -ms-flex-positive: 0;
374
+ flex-grow: 0;
375
+ -webkit-flex-shrink: 0;
376
+ -ms-flex-negative: 0;
377
+ flex-shrink: 0;
378
+ padding-right: 0.5rem;
379
+ padding-left: 0.5rem;
380
+ }
381
+
382
+ .col-sm {
383
+ -webkit-box-flex: 1;
384
+ -webkit-flex-grow: 1;
385
+ -ms-flex-positive: 1;
386
+ flex-grow: 1;
387
+ -webkit-flex-basis: 0;
388
+ -ms-flex-preferred-size: 0;
389
+ flex-basis: 0;
390
+ max-width: 100%;
391
+ }
392
+
393
+ .col-sm-1 {
394
+ -webkit-flex-basis: 8.333333333%;
395
+ -ms-flex-preferred-size: 8.333333333%;
396
+ flex-basis: 8.333333333%;
397
+ max-width: 8.333333333%;
398
+ }
399
+
400
+ .col-sm-2 {
401
+ -webkit-flex-basis: 16.666666667%;
402
+ -ms-flex-preferred-size: 16.666666667%;
403
+ flex-basis: 16.666666667%;
404
+ max-width: 16.666666667%;
405
+ }
406
+
407
+ .col-sm-3 {
408
+ -webkit-flex-basis: 25%;
409
+ -ms-flex-preferred-size: 25%;
410
+ flex-basis: 25%;
411
+ max-width: 25%;
412
+ }
413
+
414
+ .col-sm-4 {
415
+ -webkit-flex-basis: 33.333333333%;
416
+ -ms-flex-preferred-size: 33.333333333%;
417
+ flex-basis: 33.333333333%;
418
+ max-width: 33.333333333%;
419
+ }
420
+
421
+ .col-sm-5 {
422
+ -webkit-flex-basis: 41.666666667%;
423
+ -ms-flex-preferred-size: 41.666666667%;
424
+ flex-basis: 41.666666667%;
425
+ max-width: 41.666666667%;
426
+ }
427
+
428
+ .col-sm-6 {
429
+ -webkit-flex-basis: 50%;
430
+ -ms-flex-preferred-size: 50%;
431
+ flex-basis: 50%;
432
+ max-width: 50%;
433
+ }
434
+
435
+ .col-sm-7 {
436
+ -webkit-flex-basis: 58.333333333%;
437
+ -ms-flex-preferred-size: 58.333333333%;
438
+ flex-basis: 58.333333333%;
439
+ max-width: 58.333333333%;
440
+ }
441
+
442
+ .col-sm-8 {
443
+ -webkit-flex-basis: 66.666666667%;
444
+ -ms-flex-preferred-size: 66.666666667%;
445
+ flex-basis: 66.666666667%;
446
+ max-width: 66.666666667%;
447
+ }
448
+
449
+ .col-sm-9 {
450
+ -webkit-flex-basis: 75%;
451
+ -ms-flex-preferred-size: 75%;
452
+ flex-basis: 75%;
453
+ max-width: 75%;
454
+ }
455
+
456
+ .col-sm-10 {
457
+ -webkit-flex-basis: 83.333333333%;
458
+ -ms-flex-preferred-size: 83.333333333%;
459
+ flex-basis: 83.333333333%;
460
+ max-width: 83.333333333%;
461
+ }
462
+
463
+ .col-sm-11 {
464
+ -webkit-flex-basis: 91.666666667%;
465
+ -ms-flex-preferred-size: 91.666666667%;
466
+ flex-basis: 91.666666667%;
467
+ max-width: 91.666666667%;
468
+ }
469
+
470
+ .col-sm-12 {
471
+ -webkit-flex-basis: 100%;
472
+ -ms-flex-preferred-size: 100%;
473
+ flex-basis: 100%;
474
+ max-width: 100%;
475
+ }
476
+
477
+ .col-sm-offset-1 {
478
+ margin-left: 8.333333333%;
479
+ }
480
+
481
+ .col-sm-offset-2 {
482
+ margin-left: 16.666666667%;
483
+ }
484
+
485
+ .col-sm-offset-3 {
486
+ margin-left: 25%;
487
+ }
488
+
489
+ .col-sm-offset-4 {
490
+ margin-left: 33.333333333%;
491
+ }
492
+
493
+ .col-sm-offset-5 {
494
+ margin-left: 41.666666667%;
495
+ }
496
+
497
+ .col-sm-offset-6 {
498
+ margin-left: 50%;
499
+ }
500
+
501
+ .col-sm-offset-7 {
502
+ margin-left: 58.333333333%;
503
+ }
504
+
505
+ .col-sm-offset-8 {
506
+ margin-left: 66.666666667%;
507
+ }
508
+
509
+ .col-sm-offset-9 {
510
+ margin-left: 75%;
511
+ }
512
+
513
+ .col-sm-offset-10 {
514
+ margin-left: 83.333333333%;
515
+ }
516
+
517
+ .col-sm-offset-11 {
518
+ margin-left: 91.666666667%;
519
+ }
520
+
521
+ .start-sm {
522
+ -webkit-box-pack: start;
523
+ -webkit-justify-content: flex-start;
524
+ -ms-flex-pack: start;
525
+ justify-content: flex-start;
526
+ text-align: start;
527
+ }
528
+
529
+ .center-sm {
530
+ -webkit-box-pack: center;
531
+ -webkit-justify-content: center;
532
+ -ms-flex-pack: center;
533
+ justify-content: center;
534
+ text-align: center;
535
+ }
536
+
537
+ .end-sm {
538
+ -webkit-box-pack: end;
539
+ -webkit-justify-content: flex-end;
540
+ -ms-flex-pack: end;
541
+ justify-content: flex-end;
542
+ text-align: end;
543
+ }
544
+
545
+ .top-sm {
546
+ -webkit-box-align: start;
547
+ -webkit-align-items: flex-start;
548
+ -ms-flex-align: start;
549
+ align-items: flex-start;
550
+ }
551
+
552
+ .middle-sm {
553
+ -webkit-box-align: center;
554
+ -webkit-align-items: center;
555
+ -ms-flex-align: center;
556
+ align-items: center;
557
+ }
558
+
559
+ .bottom-sm {
560
+ -webkit-box-align: end;
561
+ -webkit-align-items: flex-end;
562
+ -ms-flex-align: end;
563
+ align-items: flex-end;
564
+ }
565
+
566
+ .around-sm {
567
+ -webkit-justify-content: space-around;
568
+ -ms-flex-pack: distribute;
569
+ justify-content: space-around;
570
+ }
571
+
572
+ .between-sm {
573
+ -webkit-box-pack: justify;
574
+ -webkit-justify-content: space-between;
575
+ -ms-flex-pack: justify;
576
+ justify-content: space-between;
577
+ }
578
+
579
+ .first-sm {
580
+ -webkit-box-ordinal-group: 0;
581
+ -webkit-order: -1;
582
+ -ms-flex-order: -1;
583
+ order: -1;
584
+ }
585
+
586
+ .last-sm {
587
+ -webkit-box-ordinal-group: 2;
588
+ -webkit-order: 1;
589
+ -ms-flex-order: 1;
590
+ order: 1;
591
+ }
592
+ }
593
+
594
+ @media only screen and (min-width: 62em) {
595
+ .container {
596
+ width: 61rem;
597
+ }
598
+
599
+ .col-md,
600
+ .col-md-1,
601
+ .col-md-2,
602
+ .col-md-3,
603
+ .col-md-4,
604
+ .col-md-5,
605
+ .col-md-6,
606
+ .col-md-7,
607
+ .col-md-8,
608
+ .col-md-9,
609
+ .col-md-10,
610
+ .col-md-11,
611
+ .col-md-12,
612
+ .col-md-offset-1,
613
+ .col-md-offset-2,
614
+ .col-md-offset-3,
615
+ .col-md-offset-4,
616
+ .col-md-offset-5,
617
+ .col-md-offset-6,
618
+ .col-md-offset-7,
619
+ .col-md-offset-8,
620
+ .col-md-offset-9,
621
+ .col-md-offset-10,
622
+ .col-md-offset-11,
623
+ .col-md-offset-12 {
624
+ box-sizing: border-box;
625
+ display: -webkit-box;
626
+ display: -webkit-flex;
627
+ display: -ms-flexbox;
628
+ display: flex;
629
+ -webkit-box-flex: 0;
630
+ -webkit-flex: 0 1 auto;
631
+ -ms-flex: 0 1 auto;
632
+ flex: 0 1 auto;
633
+ -webkit-box-orient: vertical;
634
+ -webkit-box-direction: normal;
635
+ -webkit-flex-direction: column;
636
+ -ms-flex-direction: column;
637
+ flex-direction: column;
638
+ -webkit-box-flex: 0;
639
+ -webkit-flex-grow: 0;
640
+ -ms-flex-positive: 0;
641
+ flex-grow: 0;
642
+ -webkit-flex-shrink: 0;
643
+ -ms-flex-negative: 0;
644
+ flex-shrink: 0;
645
+ padding-right: 0.5rem;
646
+ padding-left: 0.5rem;
647
+ }
648
+
649
+ .col-md {
650
+ -webkit-box-flex: 1;
651
+ -webkit-flex-grow: 1;
652
+ -ms-flex-positive: 1;
653
+ flex-grow: 1;
654
+ -webkit-flex-basis: 0;
655
+ -ms-flex-preferred-size: 0;
656
+ flex-basis: 0;
657
+ max-width: 100%;
658
+ }
659
+
660
+ .col-md-1 {
661
+ -webkit-flex-basis: 8.333333333%;
662
+ -ms-flex-preferred-size: 8.333333333%;
663
+ flex-basis: 8.333333333%;
664
+ max-width: 8.333333333%;
665
+ }
666
+
667
+ .col-md-2 {
668
+ -webkit-flex-basis: 16.666666667%;
669
+ -ms-flex-preferred-size: 16.666666667%;
670
+ flex-basis: 16.666666667%;
671
+ max-width: 16.666666667%;
672
+ }
673
+
674
+ .col-md-3 {
675
+ -webkit-flex-basis: 25%;
676
+ -ms-flex-preferred-size: 25%;
677
+ flex-basis: 25%;
678
+ max-width: 25%;
679
+ }
680
+
681
+ .col-md-4 {
682
+ -webkit-flex-basis: 33.333333333%;
683
+ -ms-flex-preferred-size: 33.333333333%;
684
+ flex-basis: 33.333333333%;
685
+ max-width: 33.333333333%;
686
+ }
687
+
688
+ .col-md-5 {
689
+ -webkit-flex-basis: 41.666666667%;
690
+ -ms-flex-preferred-size: 41.666666667%;
691
+ flex-basis: 41.666666667%;
692
+ max-width: 41.666666667%;
693
+ }
694
+
695
+ .col-md-6 {
696
+ -webkit-flex-basis: 50%;
697
+ -ms-flex-preferred-size: 50%;
698
+ flex-basis: 50%;
699
+ max-width: 50%;
700
+ }
701
+
702
+ .col-md-7 {
703
+ -webkit-flex-basis: 58.333333333%;
704
+ -ms-flex-preferred-size: 58.333333333%;
705
+ flex-basis: 58.333333333%;
706
+ max-width: 58.333333333%;
707
+ }
708
+
709
+ .col-md-8 {
710
+ -webkit-flex-basis: 66.666666667%;
711
+ -ms-flex-preferred-size: 66.666666667%;
712
+ flex-basis: 66.666666667%;
713
+ max-width: 66.666666667%;
714
+ }
715
+
716
+ .col-md-9 {
717
+ -webkit-flex-basis: 75%;
718
+ -ms-flex-preferred-size: 75%;
719
+ flex-basis: 75%;
720
+ max-width: 75%;
721
+ }
722
+
723
+ .col-md-10 {
724
+ -webkit-flex-basis: 83.333333333%;
725
+ -ms-flex-preferred-size: 83.333333333%;
726
+ flex-basis: 83.333333333%;
727
+ max-width: 83.333333333%;
728
+ }
729
+
730
+ .col-md-11 {
731
+ -webkit-flex-basis: 91.666666667%;
732
+ -ms-flex-preferred-size: 91.666666667%;
733
+ flex-basis: 91.666666667%;
734
+ max-width: 91.666666667%;
735
+ }
736
+
737
+ .col-md-12 {
738
+ -webkit-flex-basis: 100%;
739
+ -ms-flex-preferred-size: 100%;
740
+ flex-basis: 100%;
741
+ max-width: 100%;
742
+ }
743
+
744
+ .col-md-offset-1 {
745
+ margin-left: 8.333333333%;
746
+ }
747
+
748
+ .col-md-offset-2 {
749
+ margin-left: 16.666666667%;
750
+ }
751
+
752
+ .col-md-offset-3 {
753
+ margin-left: 25%;
754
+ }
755
+
756
+ .col-md-offset-4 {
757
+ margin-left: 33.333333333%;
758
+ }
759
+
760
+ .col-md-offset-5 {
761
+ margin-left: 41.666666667%;
762
+ }
763
+
764
+ .col-md-offset-6 {
765
+ margin-left: 50%;
766
+ }
767
+
768
+ .col-md-offset-7 {
769
+ margin-left: 58.333333333%;
770
+ }
771
+
772
+ .col-md-offset-8 {
773
+ margin-left: 66.666666667%;
774
+ }
775
+
776
+ .col-md-offset-9 {
777
+ margin-left: 75%;
778
+ }
779
+
780
+ .col-md-offset-10 {
781
+ margin-left: 83.333333333%;
782
+ }
783
+
784
+ .col-md-offset-11 {
785
+ margin-left: 91.666666667%;
786
+ }
787
+
788
+ .start-md {
789
+ -webkit-box-pack: start;
790
+ -webkit-justify-content: flex-start;
791
+ -ms-flex-pack: start;
792
+ justify-content: flex-start;
793
+ text-align: start;
794
+ }
795
+
796
+ .center-md {
797
+ -webkit-box-pack: center;
798
+ -webkit-justify-content: center;
799
+ -ms-flex-pack: center;
800
+ justify-content: center;
801
+ text-align: center;
802
+ }
803
+
804
+ .end-md {
805
+ -webkit-box-pack: end;
806
+ -webkit-justify-content: flex-end;
807
+ -ms-flex-pack: end;
808
+ justify-content: flex-end;
809
+ text-align: end;
810
+ }
811
+
812
+ .top-md {
813
+ -webkit-box-align: start;
814
+ -webkit-align-items: flex-start;
815
+ -ms-flex-align: start;
816
+ align-items: flex-start;
817
+ }
818
+
819
+ .middle-md {
820
+ -webkit-box-align: center;
821
+ -webkit-align-items: center;
822
+ -ms-flex-align: center;
823
+ align-items: center;
824
+ }
825
+
826
+ .bottom-md {
827
+ -webkit-box-align: end;
828
+ -webkit-align-items: flex-end;
829
+ -ms-flex-align: end;
830
+ align-items: flex-end;
831
+ }
832
+
833
+ .around-md {
834
+ -webkit-justify-content: space-around;
835
+ -ms-flex-pack: distribute;
836
+ justify-content: space-around;
837
+ }
838
+
839
+ .between-md {
840
+ -webkit-box-pack: justify;
841
+ -webkit-justify-content: space-between;
842
+ -ms-flex-pack: justify;
843
+ justify-content: space-between;
844
+ }
845
+
846
+ .first-md {
847
+ -webkit-box-ordinal-group: 0;
848
+ -webkit-order: -1;
849
+ -ms-flex-order: -1;
850
+ order: -1;
851
+ }
852
+
853
+ .last-md {
854
+ -webkit-box-ordinal-group: 2;
855
+ -webkit-order: 1;
856
+ -ms-flex-order: 1;
857
+ order: 1;
858
+ }
859
+ }
860
+
861
+ @media only screen and (min-width: 75em) {
862
+ .container {
863
+ width: 71rem;
864
+ }
865
+
866
+ .col-lg,
867
+ .col-lg-1,
868
+ .col-lg-2,
869
+ .col-lg-3,
870
+ .col-lg-4,
871
+ .col-lg-5,
872
+ .col-lg-6,
873
+ .col-lg-7,
874
+ .col-lg-8,
875
+ .col-lg-9,
876
+ .col-lg-10,
877
+ .col-lg-11,
878
+ .col-lg-12,
879
+ .col-lg-offset-1,
880
+ .col-lg-offset-2,
881
+ .col-lg-offset-3,
882
+ .col-lg-offset-4,
883
+ .col-lg-offset-5,
884
+ .col-lg-offset-6,
885
+ .col-lg-offset-7,
886
+ .col-lg-offset-8,
887
+ .col-lg-offset-9,
888
+ .col-lg-offset-10,
889
+ .col-lg-offset-11,
890
+ .col-lg-offset-12 {
891
+ box-sizing: border-box;
892
+ display: -webkit-box;
893
+ display: -webkit-flex;
894
+ display: -ms-flexbox;
895
+ display: flex;
896
+ -webkit-box-flex: 0;
897
+ -webkit-flex: 0 1 auto;
898
+ -ms-flex: 0 1 auto;
899
+ flex: 0 1 auto;
900
+ -webkit-box-orient: vertical;
901
+ -webkit-box-direction: normal;
902
+ -webkit-flex-direction: column;
903
+ -ms-flex-direction: column;
904
+ flex-direction: column;
905
+ -webkit-box-flex: 0;
906
+ -webkit-flex-grow: 0;
907
+ -ms-flex-positive: 0;
908
+ flex-grow: 0;
909
+ -webkit-flex-shrink: 0;
910
+ -ms-flex-negative: 0;
911
+ flex-shrink: 0;
912
+ padding-right: 0.5rem;
913
+ padding-left: 0.5rem;
914
+ }
915
+
916
+ .col-lg {
917
+ -webkit-box-flex: 1;
918
+ -webkit-flex-grow: 1;
919
+ -ms-flex-positive: 1;
920
+ flex-grow: 1;
921
+ -webkit-flex-basis: 0;
922
+ -ms-flex-preferred-size: 0;
923
+ flex-basis: 0;
924
+ max-width: 100%;
925
+ }
926
+
927
+ .col-lg-1 {
928
+ -webkit-flex-basis: 8.333333333%;
929
+ -ms-flex-preferred-size: 8.333333333%;
930
+ flex-basis: 8.333333333%;
931
+ max-width: 8.333333333%;
932
+ }
933
+
934
+ .col-lg-2 {
935
+ -webkit-flex-basis: 16.666666667%;
936
+ -ms-flex-preferred-size: 16.666666667%;
937
+ flex-basis: 16.666666667%;
938
+ max-width: 16.666666667%;
939
+ }
940
+
941
+ .col-lg-3 {
942
+ -webkit-flex-basis: 25%;
943
+ -ms-flex-preferred-size: 25%;
944
+ flex-basis: 25%;
945
+ max-width: 25%;
946
+ }
947
+
948
+ .col-lg-4 {
949
+ -webkit-flex-basis: 33.333333333%;
950
+ -ms-flex-preferred-size: 33.333333333%;
951
+ flex-basis: 33.333333333%;
952
+ max-width: 33.333333333%;
953
+ }
954
+
955
+ .col-lg-5 {
956
+ -webkit-flex-basis: 41.666666667%;
957
+ -ms-flex-preferred-size: 41.666666667%;
958
+ flex-basis: 41.666666667%;
959
+ max-width: 41.666666667%;
960
+ }
961
+
962
+ .col-lg-6 {
963
+ -webkit-flex-basis: 50%;
964
+ -ms-flex-preferred-size: 50%;
965
+ flex-basis: 50%;
966
+ max-width: 50%;
967
+ }
968
+
969
+ .col-lg-7 {
970
+ -webkit-flex-basis: 58.333333333%;
971
+ -ms-flex-preferred-size: 58.333333333%;
972
+ flex-basis: 58.333333333%;
973
+ max-width: 58.333333333%;
974
+ }
975
+
976
+ .col-lg-8 {
977
+ -webkit-flex-basis: 66.666666667%;
978
+ -ms-flex-preferred-size: 66.666666667%;
979
+ flex-basis: 66.666666667%;
980
+ max-width: 66.666666667%;
981
+ }
982
+
983
+ .col-lg-9 {
984
+ -webkit-flex-basis: 75%;
985
+ -ms-flex-preferred-size: 75%;
986
+ flex-basis: 75%;
987
+ max-width: 75%;
988
+ }
989
+
990
+ .col-lg-10 {
991
+ -webkit-flex-basis: 83.333333333%;
992
+ -ms-flex-preferred-size: 83.333333333%;
993
+ flex-basis: 83.333333333%;
994
+ max-width: 83.333333333%;
995
+ }
996
+
997
+ .col-lg-11 {
998
+ -webkit-flex-basis: 91.666666667%;
999
+ -ms-flex-preferred-size: 91.666666667%;
1000
+ flex-basis: 91.666666667%;
1001
+ max-width: 91.666666667%;
1002
+ }
1003
+
1004
+ .col-lg-12 {
1005
+ -webkit-flex-basis: 100%;
1006
+ -ms-flex-preferred-size: 100%;
1007
+ flex-basis: 100%;
1008
+ max-width: 100%;
1009
+ }
1010
+
1011
+ .col-lg-offset-1 {
1012
+ margin-left: 8.333333333%;
1013
+ }
1014
+
1015
+ .col-lg-offset-2 {
1016
+ margin-left: 16.666666667%;
1017
+ }
1018
+
1019
+ .col-lg-offset-3 {
1020
+ margin-left: 25%;
1021
+ }
1022
+
1023
+ .col-lg-offset-4 {
1024
+ margin-left: 33.333333333%;
1025
+ }
1026
+
1027
+ .col-lg-offset-5 {
1028
+ margin-left: 41.666666667%;
1029
+ }
1030
+
1031
+ .col-lg-offset-6 {
1032
+ margin-left: 50%;
1033
+ }
1034
+
1035
+ .col-lg-offset-7 {
1036
+ margin-left: 58.333333333%;
1037
+ }
1038
+
1039
+ .col-lg-offset-8 {
1040
+ margin-left: 66.666666667%;
1041
+ }
1042
+
1043
+ .col-lg-offset-9 {
1044
+ margin-left: 75%;
1045
+ }
1046
+
1047
+ .col-lg-offset-10 {
1048
+ margin-left: 83.333333333%;
1049
+ }
1050
+
1051
+ .col-lg-offset-11 {
1052
+ margin-left: 91.666666667%;
1053
+ }
1054
+
1055
+ .start-lg {
1056
+ -webkit-box-pack: start;
1057
+ -webkit-justify-content: flex-start;
1058
+ -ms-flex-pack: start;
1059
+ justify-content: flex-start;
1060
+ text-align: start;
1061
+ }
1062
+
1063
+ .center-lg {
1064
+ -webkit-box-pack: center;
1065
+ -webkit-justify-content: center;
1066
+ -ms-flex-pack: center;
1067
+ justify-content: center;
1068
+ text-align: center;
1069
+ }
1070
+
1071
+ .end-lg {
1072
+ -webkit-box-pack: end;
1073
+ -webkit-justify-content: flex-end;
1074
+ -ms-flex-pack: end;
1075
+ justify-content: flex-end;
1076
+ text-align: end;
1077
+ }
1078
+
1079
+ .top-lg {
1080
+ -webkit-box-align: start;
1081
+ -webkit-align-items: flex-start;
1082
+ -ms-flex-align: start;
1083
+ align-items: flex-start;
1084
+ }
1085
+
1086
+ .middle-lg {
1087
+ -webkit-box-align: center;
1088
+ -webkit-align-items: center;
1089
+ -ms-flex-align: center;
1090
+ align-items: center;
1091
+ }
1092
+
1093
+ .bottom-lg {
1094
+ -webkit-box-align: end;
1095
+ -webkit-align-items: flex-end;
1096
+ -ms-flex-align: end;
1097
+ align-items: flex-end;
1098
+ }
1099
+
1100
+ .around-lg {
1101
+ -webkit-justify-content: space-around;
1102
+ -ms-flex-pack: distribute;
1103
+ justify-content: space-around;
1104
+ }
1105
+
1106
+ .between-lg {
1107
+ -webkit-box-pack: justify;
1108
+ -webkit-justify-content: space-between;
1109
+ -ms-flex-pack: justify;
1110
+ justify-content: space-between;
1111
+ }
1112
+
1113
+ .first-lg {
1114
+ -webkit-box-ordinal-group: 0;
1115
+ -webkit-order: -1;
1116
+ -ms-flex-order: -1;
1117
+ order: -1;
1118
+ }
1119
+
1120
+ .last-lg {
1121
+ -webkit-box-ordinal-group: 2;
1122
+ -webkit-order: 1;
1123
+ -ms-flex-order: 1;
1124
+ order: 1;
1125
+ }
1126
+ }
metadata ADDED
@@ -0,0 +1,77 @@
1
+ --- !ruby/object:Gem::Specification
2
+ name: flexbox_rb
3
+ version: !ruby/object:Gem::Version
4
+ version: 0.1.0
5
+ platform: ruby
6
+ authors:
7
+ - urielhdz
8
+ autorequire:
9
+ bindir: exe
10
+ cert_chain: []
11
+ date: 2015-03-24 00:00:00.000000000 Z
12
+ dependencies:
13
+ - !ruby/object:Gem::Dependency
14
+ name: bundler
15
+ requirement: !ruby/object:Gem::Requirement
16
+ requirements:
17
+ - - "~>"
18
+ - !ruby/object:Gem::Version
19
+ version: '1.8'
20
+ type: :development
21
+ prerelease: false
22
+ version_requirements: !ruby/object:Gem::Requirement
23
+ requirements:
24
+ - - "~>"
25
+ - !ruby/object:Gem::Version
26
+ version: '1.8'
27
+ - !ruby/object:Gem::Dependency
28
+ name: rake
29
+ requirement: !ruby/object:Gem::Requirement
30
+ requirements:
31
+ - - "~>"
32
+ - !ruby/object:Gem::Version
33
+ version: '10.0'
34
+ type: :development
35
+ prerelease: false
36
+ version_requirements: !ruby/object:Gem::Requirement
37
+ requirements:
38
+ - - "~>"
39
+ - !ruby/object:Gem::Version
40
+ version: '10.0'
41
+ description: Allows you to include http://flexboxgrid.com/ in your application alongside
42
+ some view helper methods
43
+ email:
44
+ - uriel.hdzc@gmail.com
45
+ executables: []
46
+ extensions: []
47
+ extra_rdoc_files: []
48
+ files:
49
+ - lib/flexbox_rb.rb
50
+ - lib/flexbox_rb/version.rb
51
+ - vendor/assets/css/flexboxgrid.css
52
+ homepage: https://github.com/urielhdz/flexbox_rb
53
+ licenses:
54
+ - MIT
55
+ metadata:
56
+ allowed_push_host: https://rubygems.org
57
+ post_install_message:
58
+ rdoc_options: []
59
+ require_paths:
60
+ - lib
61
+ required_ruby_version: !ruby/object:Gem::Requirement
62
+ requirements:
63
+ - - ">="
64
+ - !ruby/object:Gem::Version
65
+ version: '0'
66
+ required_rubygems_version: !ruby/object:Gem::Requirement
67
+ requirements:
68
+ - - ">="
69
+ - !ruby/object:Gem::Version
70
+ version: '0'
71
+ requirements: []
72
+ rubyforge_project:
73
+ rubygems_version: 2.4.5
74
+ signing_key:
75
+ specification_version: 4
76
+ summary: Ruby wrapper for FlexBoxGrid
77
+ test_files: []