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 CHANGED
@@ -1,15 +1,15 @@
1
1
  ---
2
2
  !binary "U0hBMQ==":
3
3
  metadata.gz: !binary |-
4
- ZGI2ODYzNzA5ZDRiYzBkODQxYTE5YWQyNGNiNDg5NTM1YmU5MjcxMg==
4
+ YWQ0OWMwNzIxYzBmYjE5ZTMwYTc0YTI0MGUzYzVlOTEwZTI3NGRiNA==
5
5
  data.tar.gz: !binary |-
6
- OGU3NzBjMTg5MTI2ZWUzMjMxY2FlMWE4Njk2MGJkN2RmYTYyM2U5YQ==
6
+ MjVlNzc3NTEyOTc4Zjg5MjViZjZlN2Y1NWVjNjExYWJkOWVkMGMxNg==
7
7
  SHA512:
8
8
  metadata.gz: !binary |-
9
- MGJmYjU4YjRmMWM2OWUzZmNiNzdjZTM4OTU2ZmZmNTQ2YmUwYzlhOGQ0YmUy
10
- MmUxY2U4MDk5ODdmMmZmNTM5YTFhZjM3ODAwYWRjN2YxMTE2ZjA4ZjRmZTZj
11
- NWQ3Y2ZmMTc1NjIxNWZjNjIwZGQwYWU2ZmRmZmMzNWU2OGI0MzU=
9
+ MDllZWVlNTc3ZWI2OGZlNTQxZTQ0OGM0NTZhYjhlOGUwYzJiMTYzYWVkMjJl
10
+ NjBiZjBjZDI5Y2E3NjliZjhhYmZiMjk4ODlmMTgxMGY5MmRjNzc1NzA4OGFm
11
+ YjBkNWViMGE1MzQ5OWU4ODY2ZGMwMGNhYzcxMGU1Y2RiNzdjZjU=
12
12
  data.tar.gz: !binary |-
13
- MzU2OTlhODhkODcwYzU1OGJlZGNmOGM0ODkxYzkyMGM2YzcwOTU5NDRkMTcw
14
- MzZiYjQ5YzYxNTVmODY4YzAxYTQwZWNiMWFjYWYxNDE1YjNmZTE5MjVjZTEx
15
- YmI4MmNlODhlOTA4MWNhMWFkOWVjMjU3YzJkODA3Y2JiZjgzYWY=
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
  ![Edge Grid - Large and Small](http://cdn.setyono.net/edge/grid-large-small.jpg)
54
54
 
55
- The tag doesn't have to be div, it can be section, article, header, etc.
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
- .large-centered
101
+ .centered
100
102
  .small-centered
101
103
 
102
- You can make a column **horizontally centered** on your screen by adding the class above. Large centering is inherited on small screen.
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 large-centered column"></div>
109
+ <div class="large-7 small-7 centered column"></div>
106
110
  </div>
107
111
 
108
112
  ![Edge Grid - Centered](http://cdn.setyono.net/edge/grid-centered.jpg)
@@ -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
- .large-offset-x
117
+ .offset-x
114
118
  .small-offset-x
115
119
 
116
- Offset is used to leave a **gap** before the column. Large offset is ignored on small screen.
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 large-offset-4 column"></div>
126
+ <div class="large-6 offset-4 column"></div>
121
127
  </div>
122
128
 
123
129
  ![Edge Grid - Offset](http://cdn.setyono.net/edge/grid-offset.jpg)
@@ -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
- Push and Pull is ignored on small screen.
139
+ They are ignored on small screen.
134
140
 
135
- Let's say you want a sidebar to be on the right for large screen; but on the bottom for small screen.
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.large-tile-x
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="large-tile-3 small-tile-2">
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
  ![Edge Grid - Tile](http://cdn.setyono.net/edge/grid-tile.jpg)
163
171
 
164
- Without the small size, the tile will expand 100% on small screen.
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
- Just like row, you can collapse tile too:
180
+ - In your own stylesheet, don't name a class that contains the word "tile".
167
181
 
168
- <ul class="large-tile-7 collapse"></ul>
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
  ![Edge Compass](http://cdn.setyono.net/edge/compass-edge.jpg)
369
383
 
370
- The generated template includes **config.rb** for Compass. So, we can directly compile it using:
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
- $large : int
394
- $small : int
395
- $mini : int
396
- $large-offset : int
397
- $small-offset : int
398
- $mini-offset : int
399
- $push : int
400
- $pull : int
401
- $centered : bool
402
- $collapse : bool
403
- $gutter : px
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
- We need to include the base class in the markup (`.row` and `.column`).
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($large: 2, $small: 4, $mini: 12);
460
+ @include column($size: 2, $small: 4, $mini: 12);
424
461
  }
425
462
 
426
- main {
463
+ .my-col {
427
464
  @include column(10, 8, 12);
428
465
  // or
429
- @include column($large: 10, $small: 8, $mini: 12);
466
+ @include column($size: 10, $small: 8, $mini: 12);
430
467
  }
431
468
 
432
- **GUTTER**
469
+ **Convention**:
470
+
471
+ - We need to include the base class in the markup (`.row` and `.column`).
433
472
 
434
- Custom gutter must be applied to both row and column
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($large: 2, $gutter: 50px);
489
+ aside.column {
490
+ @include column($size: 2, $gutter: 50px);
450
491
  }
451
492
 
452
- main {
453
- @include column($large: 10, $gutter: 50px);
493
+ .my-col {
494
+ @include column($size: 10, $gutter: 50px);
454
495
  }
455
496
 
456
- **COLLAPSE**
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
- main {
465
- @include column($large: 10, $collapse: true);
505
+ .my-col {
506
+ @include column($size: 10, $collapse: true);
466
507
  }
467
508
 
468
- **TOTAL COLUMNS**
509
+ ### TOTAL COLUMNS
469
510
 
470
511
  You can either use `$total` parameter or fraction:
471
512
 
472
- aside {
473
- @include column($large: 7, $total: 15);
513
+ .my-col {
514
+ @include column($size: 7, $offset: 3, $total: 15);
474
515
  }
475
516
 
476
517
  // or
477
518
 
478
- aside {
479
- @include column($large: 7 / 15);
519
+ .my-col {
520
+ @include column($size: 7 / 15, $offset: 3 / 15);
480
521
  }
481
522
 
482
- Custom total columns is useful when you need **to match a given design**.
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 get this layout that throw off your default grid:
532
+ Let's say a designers gives you a design that doesn't follow grid system. Here's an example:
485
533
 
486
534
  ![Pre-given Design](http://cdn.setyono.net/edge/custom-total-column.jpg)
487
535
 
488
- Here's how you can handle it:
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
- // CSS
544
+ // SCSS
498
545
  .my-row {
499
546
  @include row($gutter: 35px);
500
547
  }
501
548
 
502
549
  .my-col {
503
- @include column($large: 500 / 735, $gutter: 35px);
550
+ @include column-px($size: 500px, $width: 735px, $gutter: 35px);
504
551
  }
505
552
 
506
553
  .side-col {
507
- @include column($large: 200 / 735, $gutter: 35px);
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
- $large : int
561
+ $size : int
517
562
  $small : int
518
563
  $mini : int
519
564
  $gutter : px,
520
565
  $collapse : bool
521
566
 
522
- Just like column's mixin, you can set mini size.
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, 1);
572
+ @include tile($size: 7, $small: 4, $mini: 2);
573
+
528
574
  // or
529
- @include tile($large: 4, $small: 2, $mini: 1);
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 = px / large / small / mini
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 below(small) {
597
+ @include above(small) {
569
598
  color: blue;
570
599
  }
571
600
 
572
- @include below(500px) {
573
- color: red;
601
+ @include below(small) {
602
+ color: yellow;
574
603
  }
604
+ }
605
+
606
+ You can use pixel too:
575
607
 
576
- @include between(100px, small) {
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.