edge_framework 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.
- checksums.yaml +8 -8
- data/README.md +149 -93
- data/assets/kitchen-sink.html +23 -29
- data/assets/sass/edge.scss +1 -1
- data/assets/sass/edge/_base.scss +36 -47
- data/assets/sass/edge/_helpers.scss +1 -1
- data/assets/sass/edge/components/_animate.scss +1 -1
- data/assets/sass/edge/components/_button.scss +1 -1
- data/assets/sass/edge/components/_code.scss +1 -1
- data/assets/sass/edge/components/_form.scss +1 -1
- data/assets/sass/edge/components/_grid.scss +179 -181
- data/assets/sass/edge/components/_normalize.scss +2 -1
- data/assets/sass/edge/components/_print.scss +1 -1
- data/assets/sass/edge/components/_tile.scss +84 -79
- data/assets/sass/edge/components/_typography.scss +1 -1
- data/assets/sass/edge/components/_visibility.scss +1 -51
- data/assets/sass/kitchen-sink.scss +58 -58
- data/edge.gemspec +5 -5
- data/lib/edge/version.rb +1 -1
- metadata +18 -19
- data/assets/sass/edge/components/_grid_old.scss +0 -346
checksums.yaml
CHANGED
@@ -1,15 +1,15 @@
|
|
1
1
|
---
|
2
2
|
!binary "U0hBMQ==":
|
3
3
|
metadata.gz: !binary |-
|
4
|
-
|
4
|
+
YWQ0OWMwNzIxYzBmYjE5ZTMwYTc0YTI0MGUzYzVlOTEwZTI3NGRiNA==
|
5
5
|
data.tar.gz: !binary |-
|
6
|
-
|
6
|
+
MjVlNzc3NTEyOTc4Zjg5MjViZjZlN2Y1NWVjNjExYWJkOWVkMGMxNg==
|
7
7
|
SHA512:
|
8
8
|
metadata.gz: !binary |-
|
9
|
-
|
10
|
-
|
11
|
-
|
9
|
+
MDllZWVlNTc3ZWI2OGZlNTQxZTQ0OGM0NTZhYjhlOGUwYzJiMTYzYWVkMjJl
|
10
|
+
NjBiZjBjZDI5Y2E3NjliZjhhYmZiMjk4ODlmMTgxMGY5MmRjNzc1NzA4OGFm
|
11
|
+
YjBkNWViMGE1MzQ5OWU4ODY2ZGMwMGNhYzcxMGU1Y2RiNzdjZjU=
|
12
12
|
data.tar.gz: !binary |-
|
13
|
-
|
14
|
-
|
15
|
-
|
13
|
+
NmI0ZDU1OWFlYTcyZWE1NjBkMmZkNWJiZmQ1OTk5ZDMxZDQ1NzBmZWYxYjIx
|
14
|
+
OWZjZTVkN2U0Njc1YTYxMjhjYTY3MjU2NGU4YWViYzY4ZDEwNzhiNGVmMDgy
|
15
|
+
M2U4NmQ5YjE4MmM0ZDMxN2FiM2Q3MDAwYzkxNWQ0ODUwZTBjMTM=
|
data/README.md
CHANGED
@@ -52,9 +52,7 @@ Our Grid is divided into **12 columns**. Start with "row" followed by "column" u
|
|
52
52
|
|
53
53
|

|
54
54
|
|
55
|
-
The
|
56
|
-
|
57
|
-
Never style either row or column, you might see unexpected behavior.
|
55
|
+
The element doesn't have to be div, it can be section, article, header, etc.
|
58
56
|
|
59
57
|
Sizing:
|
60
58
|
|
@@ -62,6 +60,10 @@ Sizing:
|
|
62
60
|
|
63
61
|
- Small - below or equal to 768px, width will be 100% if not specified.
|
64
62
|
|
63
|
+
**Convention**:
|
64
|
+
|
65
|
+
- Don't add your own style to the `.row` and `.column` elements.
|
66
|
+
|
65
67
|
Nesting
|
66
68
|
-----------
|
67
69
|
|
@@ -96,13 +98,15 @@ All nested rows inside collapsed one will be collapsed too.
|
|
96
98
|
Centering
|
97
99
|
-----------
|
98
100
|
|
99
|
-
.
|
101
|
+
.centered
|
100
102
|
.small-centered
|
101
103
|
|
102
|
-
|
104
|
+
Horizontally centering a column.
|
105
|
+
|
106
|
+
It is inherited on small screen.
|
103
107
|
|
104
108
|
<div class="row">
|
105
|
-
<div class="large-7 small-7
|
109
|
+
<div class="large-7 small-7 centered column"></div>
|
106
110
|
</div>
|
107
111
|
|
108
112
|

|
@@ -110,14 +114,16 @@ You can make a column **horizontally centered** on your screen by adding the cla
|
|
110
114
|
Offset
|
111
115
|
-----------
|
112
116
|
|
113
|
-
.
|
117
|
+
.offset-x
|
114
118
|
.small-offset-x
|
115
119
|
|
116
|
-
Offset
|
120
|
+
Offset leaves a **gap** before the column.
|
121
|
+
|
122
|
+
It is ignored on small screen unless the small sizing is specified.
|
117
123
|
|
118
124
|
<div class="row">
|
119
125
|
<div class="large-2 column"></div>
|
120
|
-
<div class="large-6
|
126
|
+
<div class="large-6 offset-4 column"></div>
|
121
127
|
</div>
|
122
128
|
|
123
129
|

|
@@ -130,9 +136,11 @@ Column Ordering
|
|
130
136
|
|
131
137
|
**Push** pushes the column to the right, while **Pull** pulls it to the left.
|
132
138
|
|
133
|
-
|
139
|
+
They are ignored on small screen.
|
134
140
|
|
135
|
-
|
141
|
+
**Example**:
|
142
|
+
|
143
|
+
Create a sidebar that is located on the left. But if viewed with phone, it is on the bottom.
|
136
144
|
|
137
145
|
<div class="row">
|
138
146
|
<main class="large-8 push-4 column"></main>
|
@@ -146,12 +154,12 @@ The snippet above will look like this:
|
|
146
154
|
GRID SYSTEM - TILE
|
147
155
|
=================
|
148
156
|
|
149
|
-
ul.
|
157
|
+
ul.tile-x
|
150
158
|
ul.small-tile-x
|
151
159
|
|
152
160
|
Evenly divides the list into block size.
|
153
161
|
|
154
|
-
<ul class="
|
162
|
+
<ul class="tile-3 small-tile-2">
|
155
163
|
<li>1</li>
|
156
164
|
<li>2</li>
|
157
165
|
<li>3</li>
|
@@ -161,11 +169,17 @@ Evenly divides the list into block size.
|
|
161
169
|
|
162
170
|

|
163
171
|
|
164
|
-
|
172
|
+
Each tile will expand 100% on small screen when the small size is not specified.
|
173
|
+
|
174
|
+
Just like row, you can collapse it:
|
175
|
+
|
176
|
+
<ul class="tile-7 collapse"> ... </ul>
|
177
|
+
|
178
|
+
**Convention**:
|
165
179
|
|
166
|
-
|
180
|
+
- In your own stylesheet, don't name a class that contains the word "tile".
|
167
181
|
|
168
|
-
|
182
|
+
- Don't add your own style to the `.tile` and `.tile > li` elements.
|
169
183
|
|
170
184
|
TYPOGRAPHY
|
171
185
|
======================
|
@@ -367,7 +381,7 @@ COMPASS
|
|
367
381
|
|
368
382
|

|
369
383
|
|
370
|
-
The generated template includes **config.rb** for Compass. So, we can
|
384
|
+
The generated template includes **config.rb** for Compass. So, we can compile it using the command:
|
371
385
|
|
372
386
|
compass watch
|
373
387
|
|
@@ -381,62 +395,89 @@ Become:
|
|
381
395
|
|
382
396
|
$column-gutter : 30px;
|
383
397
|
|
398
|
+
EM Converter
|
399
|
+
===============
|
400
|
+
|
401
|
+
.post p {
|
402
|
+
font-size: em(14px);
|
403
|
+
}
|
404
|
+
|
405
|
+
// Result
|
406
|
+
.post p {
|
407
|
+
font-size: 0.875em;
|
408
|
+
}
|
409
|
+
|
410
|
+
The default em size is 16px. It is defined in variable `$body-font-size`.
|
411
|
+
|
412
|
+
If the base size is not default, pass it as second parameter:
|
413
|
+
|
414
|
+
<h1 class="title">
|
415
|
+
Hello <em>World</em>
|
416
|
+
</h1>
|
417
|
+
|
418
|
+
.title {
|
419
|
+
font-size: em(40px);
|
420
|
+
|
421
|
+
em {
|
422
|
+
font-size: em(45px, 40px);
|
423
|
+
}
|
424
|
+
}
|
425
|
+
|
384
426
|
GRID - mixin
|
385
427
|
======================
|
386
428
|
|
387
429
|
row()
|
388
|
-
$gutter : px
|
389
|
-
$width : px
|
430
|
+
$gutter : px - Gutter for columns inside this row
|
431
|
+
$width : px - The row's max width.
|
390
432
|
$collapse : bool
|
391
433
|
|
392
434
|
column()
|
393
|
-
$
|
394
|
-
$small
|
395
|
-
$mini
|
396
|
-
$
|
397
|
-
$
|
398
|
-
$
|
399
|
-
$
|
400
|
-
$
|
401
|
-
$
|
402
|
-
$
|
403
|
-
|
404
|
-
$total : int // total columns
|
405
|
-
|
406
|
-
Custom grid makes the markup cleaner and less duplication.
|
407
|
-
|
408
|
-
It allows one additional breakpoint: **mini** which is below 480px by default. You can only set mini size when small one is specified.
|
435
|
+
$size : int - The large sizing
|
436
|
+
$small : int - The small sizing
|
437
|
+
$mini : int - The mini sizing (below 480px)
|
438
|
+
$offset : int
|
439
|
+
$push : int
|
440
|
+
$pull : int
|
441
|
+
$collapse : bool
|
442
|
+
$centered : bool
|
443
|
+
$gutter : px
|
444
|
+
$total : int - Total number of columns
|
445
|
+
|
409
446
|
|
410
|
-
|
447
|
+
Custom grid makes the markup cleaner and easier to change.
|
411
448
|
|
412
449
|
// HTML
|
413
450
|
<div class="row">
|
414
451
|
<aside class="column"></aside>
|
415
|
-
<main class="column"></main>
|
452
|
+
<main class="my-col column"></main>
|
416
453
|
</div>
|
417
454
|
|
418
455
|
|
419
456
|
// SCSS
|
420
|
-
aside {
|
457
|
+
aside.column {
|
421
458
|
@include column(2, 4, 12);
|
422
459
|
// or
|
423
|
-
@include column($
|
460
|
+
@include column($size: 2, $small: 4, $mini: 12);
|
424
461
|
}
|
425
462
|
|
426
|
-
|
463
|
+
.my-col {
|
427
464
|
@include column(10, 8, 12);
|
428
465
|
// or
|
429
|
-
@include column($
|
466
|
+
@include column($size: 10, $small: 8, $mini: 12);
|
430
467
|
}
|
431
468
|
|
432
|
-
**
|
469
|
+
**Convention**:
|
470
|
+
|
471
|
+
- We need to include the base class in the markup (`.row` and `.column`).
|
433
472
|
|
434
|
-
|
473
|
+
### GUTTER
|
474
|
+
|
475
|
+
Custom gutter must be applied to both row and column.
|
435
476
|
|
436
477
|
// HTML
|
437
478
|
<div class="my-row row">
|
438
479
|
<aside class="column"></aside>
|
439
|
-
<main class="column"></main>
|
480
|
+
<main class="my-col column"></main>
|
440
481
|
</div>
|
441
482
|
|
442
483
|
|
@@ -445,15 +486,15 @@ Custom gutter must be applied to both row and column
|
|
445
486
|
@include row($gutter: 50px);
|
446
487
|
}
|
447
488
|
|
448
|
-
aside {
|
449
|
-
@include column($
|
489
|
+
aside.column {
|
490
|
+
@include column($size: 2, $gutter: 50px);
|
450
491
|
}
|
451
492
|
|
452
|
-
|
453
|
-
@include column($
|
493
|
+
.my-col {
|
494
|
+
@include column($size: 10, $gutter: 50px);
|
454
495
|
}
|
455
496
|
|
456
|
-
|
497
|
+
### COLLAPSE
|
457
498
|
|
458
499
|
Collapse must be applied to both row and column.
|
459
500
|
|
@@ -461,88 +502,78 @@ Collapse must be applied to both row and column.
|
|
461
502
|
@include row($collapse: true);
|
462
503
|
}
|
463
504
|
|
464
|
-
|
465
|
-
@include column($
|
505
|
+
.my-col {
|
506
|
+
@include column($size: 10, $collapse: true);
|
466
507
|
}
|
467
508
|
|
468
|
-
|
509
|
+
### TOTAL COLUMNS
|
469
510
|
|
470
511
|
You can either use `$total` parameter or fraction:
|
471
512
|
|
472
|
-
|
473
|
-
@include column($
|
513
|
+
.my-col {
|
514
|
+
@include column($size: 7, $offset: 3, $total: 15);
|
474
515
|
}
|
475
516
|
|
476
517
|
// or
|
477
518
|
|
478
|
-
|
479
|
-
@include column($
|
519
|
+
.my-col {
|
520
|
+
@include column($size: 7 / 15, $offset: 3 / 15);
|
480
521
|
}
|
481
522
|
|
482
|
-
|
523
|
+
GRID PIXEL *beta
|
524
|
+
===============
|
525
|
+
|
526
|
+
column-px()
|
527
|
+
$size : px
|
528
|
+
$width : px
|
529
|
+
$gutter : px
|
530
|
+
$centered : boolean
|
483
531
|
|
484
|
-
Let's say you
|
532
|
+
Let's say a designers gives you a design that doesn't follow grid system. Here's an example:
|
485
533
|
|
486
534
|

|
487
535
|
|
488
|
-
|
489
|
-
|
536
|
+
With `column-px()` mixin, we can create that layout easily:
|
537
|
+
|
490
538
|
// HTML
|
491
539
|
<div class="my-row row">
|
492
540
|
<main class="my-col column"> ... </main>
|
493
541
|
<aside class="side-col column"> ... </aside>
|
494
542
|
</div>
|
495
|
-
|
496
543
|
|
497
|
-
//
|
544
|
+
// SCSS
|
498
545
|
.my-row {
|
499
546
|
@include row($gutter: 35px);
|
500
547
|
}
|
501
548
|
|
502
549
|
.my-col {
|
503
|
-
@include column($
|
550
|
+
@include column-px($size: 500px, $width: 735px, $gutter: 35px);
|
504
551
|
}
|
505
552
|
|
506
553
|
.side-col {
|
507
|
-
@include column($
|
554
|
+
@include column-px($size: 200px, $width: 735px, $gutter: 35px);
|
508
555
|
}
|
509
556
|
|
510
|
-
Remember that we need to include the `.row` and `.column` class.
|
511
|
-
|
512
557
|
TILE - mixin
|
513
558
|
======================
|
514
559
|
|
515
560
|
tile()
|
516
|
-
$
|
561
|
+
$size : int
|
517
562
|
$small : int
|
518
563
|
$mini : int
|
519
564
|
$gutter : px,
|
520
565
|
$collapse : bool
|
521
566
|
|
522
|
-
|
567
|
+
Mini sizing is available for tile's mixin too.
|
523
568
|
|
524
569
|
<ul class="products"></ul>
|
525
570
|
|
526
571
|
.products {
|
527
|
-
@include tile(4, 2
|
572
|
+
@include tile($size: 7, $small: 4, $mini: 2);
|
573
|
+
|
528
574
|
// or
|
529
|
-
|
530
|
-
|
531
|
-
|
532
|
-
VISIBILITY - mixin
|
533
|
-
========================
|
534
|
-
|
535
|
-
hide-for($size)
|
536
|
-
show-for($size)
|
537
|
-
|
538
|
-
$size = large / small / mini
|
539
|
-
|
540
|
-
It has the same behavior with using the class.
|
541
|
-
|
542
|
-
<aside>...</aside>
|
543
|
-
|
544
|
-
aside {
|
545
|
-
@include hide-for(large);
|
575
|
+
|
576
|
+
@include tile(7, 4, 2);
|
546
577
|
}
|
547
578
|
|
548
579
|
MEDIA QUERY - mixin
|
@@ -552,7 +583,7 @@ MEDIA QUERY - mixin
|
|
552
583
|
above($size)
|
553
584
|
between($smaller-size, $larger-size)
|
554
585
|
|
555
|
-
$size =
|
586
|
+
$size = large / small / mini
|
556
587
|
|
557
588
|
**Below** means less than or equal to (`<=`).
|
558
589
|
|
@@ -560,24 +591,43 @@ MEDIA QUERY - mixin
|
|
560
591
|
|
561
592
|
**Between** is inclusive to both (`>= smaller-size` and `<= larger-size`).
|
562
593
|
|
563
|
-
Other than the usual "large" or "small", you can also use pixel on this mixin.
|
564
|
-
|
565
594
|
p {
|
566
595
|
color: black;
|
567
596
|
|
568
|
-
@include
|
597
|
+
@include above(small) {
|
569
598
|
color: blue;
|
570
599
|
}
|
571
600
|
|
572
|
-
@include below(
|
573
|
-
color:
|
601
|
+
@include below(small) {
|
602
|
+
color: yellow;
|
574
603
|
}
|
604
|
+
}
|
605
|
+
|
606
|
+
You can use pixel too:
|
575
607
|
|
576
|
-
|
608
|
+
p {
|
609
|
+
color: black;
|
610
|
+
|
611
|
+
@include above(850px) {
|
612
|
+
color: pink;
|
613
|
+
}
|
614
|
+
|
615
|
+
@include between(300px, 400px) {
|
577
616
|
color: green;
|
578
617
|
}
|
579
618
|
}
|
580
619
|
|
620
|
+
VISIBILITY - mixin
|
621
|
+
========================
|
622
|
+
|
623
|
+
We don't offer mixin for visibility. Use media query instead:
|
624
|
+
|
625
|
+
.sidebar {
|
626
|
+
@include below(small) {
|
627
|
+
display: none;
|
628
|
+
}
|
629
|
+
}
|
630
|
+
|
581
631
|
RAILS
|
582
632
|
=================
|
583
633
|
|
@@ -598,3 +648,9 @@ Template generator:
|
|
598
648
|
|
599
649
|
The command will give you Edge's SCSS files and append the pipeline.
|
600
650
|
|
651
|
+
FAQ
|
652
|
+
===============
|
653
|
+
|
654
|
+
1. Is Edge a mobile-first framework?
|
655
|
+
|
656
|
+
No it is not.
|