edge_framework 1.1.0 → 1.2.0

checksums.yaml

@@ -1,15 +1,15 @@
 ---
 !binary "U0hBMQ==":
   metadata.gz: !binary |-
-    ZGI2ODYzNzA5ZDRiYzBkODQxYTE5YWQyNGNiNDg5NTM1YmU5MjcxMg==
+    YWQ0OWMwNzIxYzBmYjE5ZTMwYTc0YTI0MGUzYzVlOTEwZTI3NGRiNA==
   data.tar.gz: !binary |-
-    OGU3NzBjMTg5MTI2ZWUzMjMxY2FlMWE4Njk2MGJkN2RmYTYyM2U5YQ==
+    MjVlNzc3NTEyOTc4Zjg5MjViZjZlN2Y1NWVjNjExYWJkOWVkMGMxNg==
 SHA512:
   metadata.gz: !binary |-
-    MGJmYjU4YjRmMWM2OWUzZmNiNzdjZTM4OTU2ZmZmNTQ2YmUwYzlhOGQ0YmUy
-    MmUxY2U4MDk5ODdmMmZmNTM5YTFhZjM3ODAwYWRjN2YxMTE2ZjA4ZjRmZTZj
-    NWQ3Y2ZmMTc1NjIxNWZjNjIwZGQwYWU2ZmRmZmMzNWU2OGI0MzU=
+    MDllZWVlNTc3ZWI2OGZlNTQxZTQ0OGM0NTZhYjhlOGUwYzJiMTYzYWVkMjJl
+    NjBiZjBjZDI5Y2E3NjliZjhhYmZiMjk4ODlmMTgxMGY5MmRjNzc1NzA4OGFm
+    YjBkNWViMGE1MzQ5OWU4ODY2ZGMwMGNhYzcxMGU1Y2RiNzdjZjU=
   data.tar.gz: !binary |-
-    MzU2OTlhODhkODcwYzU1OGJlZGNmOGM0ODkxYzkyMGM2YzcwOTU5NDRkMTcw
-    MzZiYjQ5YzYxNTVmODY4YzAxYTQwZWNiMWFjYWYxNDE1YjNmZTE5MjVjZTEx
-    YmI4MmNlODhlOTA4MWNhMWFkOWVjMjU3YzJkODA3Y2JiZjgzYWY=
+    NmI0ZDU1OWFlYTcyZWE1NjBkMmZkNWJiZmQ1OTk5ZDMxZDQ1NzBmZWYxYjIx
+    OWZjZTVkN2U0Njc1YTYxMjhjYTY3MjU2NGU4YWViYzY4ZDEwNzhiNGVmMDgy
+    M2U4NmQ5YjE4MmM0ZDMxN2FiM2Q3MDAwYzkxNWQ0ODUwZTBjMTM=

data/README.md

@@ -52,9 +52,7 @@ Our Grid is divided into **12 columns**. Start with "row" followed by "column" u
 
 ![Edge Grid - Large and Small](http://cdn.setyono.net/edge/grid-large-small.jpg)
 
-The tag doesn't have to be div, it can be section, article, header, etc.
-
-Never style either row or column, you might see unexpected behavior.
+The element doesn't have to be div, it can be section, article, header, etc.
 
 Sizing:
 
@@ -62,6 +60,10 @@ Sizing:
 
 - Small - below or equal to 768px, width will be 100% if not specified.
 
+**Convention**:
+
+- Don't add your own style to the `.row` and `.column` elements.
+
 Nesting
 -----------
 
@@ -96,13 +98,15 @@ All nested rows inside collapsed one will be collapsed too.
 Centering
 -----------
 
-    .large-centered
+    .centered
     .small-centered
 
-You can make a column **horizontally centered** on your screen by adding the class above. Large centering is inherited on small screen.
+Horizontally centering a column.
+
+It is inherited on small screen.
 
     <div class="row">
-      <div class="large-7 small-7 large-centered column"></div>
+      <div class="large-7 small-7 centered column"></div>
     </div>
 
 ![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
 Offset
 -----------
 
-    .large-offset-x
+    .offset-x
     .small-offset-x
 
-Offset is used to leave a **gap** before the column. Large offset is ignored on small screen.
+Offset leaves a **gap** before the column.
+
+It is ignored on small screen unless the small sizing is specified.
 
     <div class="row">
       <div class="large-2 column"></div>
-      <div class="large-6 large-offset-4 column"></div>
+      <div class="large-6 offset-4 column"></div>
     </div>
 
 ![Edge Grid - Offset](http://cdn.setyono.net/edge/grid-offset.jpg)
@@ -130,9 +136,11 @@ Column Ordering
 
 **Push** pushes the column to the right, while **Pull** pulls it to the left.
 
-Push and Pull is ignored on small screen.
+They are ignored on small screen.
 
-Let's say you want a sidebar to be on the right for large screen; but on the bottom for small screen.
+**Example**:
+
+Create a sidebar that is located on the left. But if viewed with phone, it is on the bottom.
 
     <div class="row">
       <main class="large-8 push-4 column"></main>
@@ -146,12 +154,12 @@ The snippet above will look like this:
 GRID SYSTEM - TILE
 =================
 
-    ul.large-tile-x
+    ul.tile-x
     ul.small-tile-x
 
 Evenly divides the list into block size.
 
-    <ul class="large-tile-3 small-tile-2">
+    <ul class="tile-3 small-tile-2">
       <li>1</li>
       <li>2</li>
       <li>3</li>
@@ -161,11 +169,17 @@ Evenly divides the list into block size.
 
 ![Edge Grid - Tile](http://cdn.setyono.net/edge/grid-tile.jpg)
 
-Without the small size, the tile will expand 100% on small screen.
+Each tile will expand 100% on small screen when the small size is not specified.
+
+Just like row, you can collapse it:
+
+    <ul class="tile-7 collapse"> ... </ul>
+
+**Convention**:
 
-Just like row, you can collapse tile too:
+- In your own stylesheet, don't name a class that contains the word "tile".
 
-    <ul class="large-tile-7 collapse"></ul>
+- Don't add your own style to the `.tile` and `.tile > li` elements.
 
 TYPOGRAPHY
 ======================
@@ -367,7 +381,7 @@ COMPASS
 
 ![Edge Compass](http://cdn.setyono.net/edge/compass-edge.jpg)
 
-The generated template includes **config.rb** for Compass. So, we can directly compile it using:
+The generated template includes **config.rb** for Compass. So, we can compile it using the command:
 
     compass watch
 
@@ -381,62 +395,89 @@ Become:
 
     $column-gutter : 30px;
 
+EM Converter
+===============
+    
+    .post p {
+      font-size: em(14px);  
+    }
+
+    // Result
+    .post p {
+      font-size: 0.875em;
+    }
+
+The default em size is 16px. It is defined in variable `$body-font-size`.
+
+If the base size is not default, pass it as second parameter:
+    
+    <h1 class="title">
+      Hello <em>World</em>
+    </h1>
+
+    .title {
+      font-size: em(40px);
+
+      em {
+        font-size: em(45px, 40px);
+      }
+    }
+
 GRID - mixin
 ======================
   
     row()
-      $gutter   : px
-      $width    : px
+      $gutter   : px    - Gutter for columns inside this row
+      $width    : px    - The row's max width.
       $collapse : bool
 
     column()
-      $large        : int
-      $small        : int
-      $mini         : int
-      $large-offset : int
-      $small-offset : int
-      $mini-offset  : int
-      $push         : int
-      $pull         : int
-      $centered     : bool
-      $collapse     : bool
-      $gutter       : px
-      $total        : int  // total columns
-
-Custom grid makes the markup cleaner and less duplication.
-
-It allows one additional breakpoint: **mini** which is below 480px by default. You can only set mini size when small one is specified.
+      $size    : int    - The large sizing
+      $small   : int    - The small sizing
+      $mini    : int    - The mini sizing (below 480px)
+      $offset  : int
+      $push    : int
+      $pull    : int
+      $collapse : bool
+      $centered : bool
+      $gutter   : px
+      $total    : int   - Total number of columns
+      
 
-We need to include the base class in the markup (`.row` and `.column`).
+Custom grid makes the markup cleaner and easier to change.
 
     // HTML
     <div class="row">
       <aside class="column"></aside>
-      <main class="column"></main>
+      <main class="my-col column"></main>
     </div>
 
 
     // SCSS
-    aside {
+    aside.column {
       @include column(2, 4, 12);
       // or
-      @include column($large: 2, $small: 4, $mini: 12);
+      @include column($size: 2, $small: 4, $mini: 12);
     }
 
-    main {
+    .my-col {
       @include column(10, 8, 12);
       // or
-      @include column($large: 10, $small: 8, $mini: 12);
+      @include column($size: 10, $small: 8, $mini: 12);
     }
 
-**GUTTER**
+**Convention**:
+
+- We need to include the base class in the markup (`.row` and `.column`).
 
-Custom gutter must be applied to both row and column
+### GUTTER
+
+Custom gutter must be applied to both row and column.
 
     // HTML
     <div class="my-row row">
       <aside class="column"></aside>
-      <main class="column"></main>
+      <main class="my-col column"></main>
     </div>
 
 
@@ -445,15 +486,15 @@ Custom gutter must be applied to both row and column
       @include row($gutter: 50px);
     }
 
-    aside {
-      @include column($large: 2, $gutter: 50px);
+    aside.column {
+      @include column($size: 2, $gutter: 50px);
     }
 
-    main {
-      @include column($large: 10, $gutter: 50px);
+    .my-col {
+      @include column($size: 10, $gutter: 50px);
     }
 
-**COLLAPSE**
+### COLLAPSE
 
 Collapse must be applied to both row and column.
     
@@ -461,88 +502,78 @@ Collapse must be applied to both row and column.
       @include row($collapse: true);
     }
 
-    main {
-      @include column($large: 10, $collapse: true);
+    .my-col {
+      @include column($size: 10, $collapse: true);
     }
 
-**TOTAL COLUMNS**
+### TOTAL COLUMNS
 
 You can either use `$total` parameter or fraction:
 
-    aside {
-      @include column($large: 7, $total: 15);
+    .my-col {
+      @include column($size: 7, $offset: 3, $total: 15);
     }
 
     // or
 
-    aside {
-      @include column($large: 7 / 15);
+    .my-col {
+      @include column($size: 7 / 15, $offset: 3 / 15);
     }
 
-Custom total columns is useful when you need **to match a given design**.
+GRID PIXEL *beta
+===============
+
+    column-px()
+      $size     : px
+      $width    : px
+      $gutter   : px
+      $centered : boolean
 
-Let's say you get this layout that throw off your default grid:
+Let's say a designers gives you a design that doesn't follow grid system. Here's an example:
 
 ![Pre-given Design](http://cdn.setyono.net/edge/custom-total-column.jpg)
 
-Here's how you can handle it:
-    
+With `column-px()` mixin, we can create that layout easily:
+
     // HTML
     <div class="my-row row">
       <main class="my-col column"> ... </main>
       <aside class="side-col column"> ... </aside>
     </div>
-    
 
-    // CSS
+    // SCSS
     .my-row {
       @include row($gutter: 35px);
     }
 
     .my-col {
-      @include column($large: 500 / 735, $gutter: 35px);
+      @include column-px($size: 500px, $width: 735px, $gutter: 35px);
     }
 
     .side-col {
-      @include column($large: 200 / 735, $gutter: 35px);
+      @include column-px($size: 200px, $width: 735px, $gutter: 35px);
     }
 
-Remember that we need to include the `.row` and `.column` class.
-
 TILE - mixin
 ======================
 
     tile()
-      $large    : int
+      $size     : int
       $small    : int
       $mini     : int
       $gutter   : px,
       $collapse : bool
 
-Just like column's mixin, you can set mini size.
+Mini sizing is available for tile's mixin too.
 
     <ul class="products"></ul>
 
     .products {
-      @include tile(4, 2, 1);
+      @include tile($size: 7, $small: 4, $mini: 2);
+      
       // or
-      @include tile($large: 4, $small: 2, $mini: 1);
-    }
-
-VISIBILITY - mixin
-========================
-
-    hide-for($size)
-    show-for($size)
-
-      $size = large / small / mini
-
-It has the same behavior with using the class.
-
-    <aside>...</aside>
-
-    aside {
-      @include hide-for(large);
+      
+      @include tile(7, 4, 2);
     }
 
 MEDIA QUERY - mixin
@@ -552,7 +583,7 @@ MEDIA QUERY - mixin
     above($size)
     between($smaller-size, $larger-size)
     
-    $size = px / large / small / mini
+    $size = large / small / mini
 
 **Below** means less than or equal to (`<=`).
 
@@ -560,24 +591,43 @@ MEDIA QUERY - mixin
 
 **Between** is inclusive to both (`>= smaller-size` and `<= larger-size`).
 
-Other than the usual "large" or "small", you can also use pixel on this mixin.
-
     p {
       color: black;
 
-      @include below(small) {
+      @include above(small) {
         color: blue;
       }
 
-      @include below(500px) {
-        color: red;
+      @include below(small) {
+        color: yellow;
       }
+    }
+
+You can use pixel too:
 
-      @include between(100px, small) {
+    p {
+      color: black;
+      
+      @include above(850px) {
+        color: pink;
+      }
+
+      @include between(300px, 400px) {
         color: green;
       }
     }
 
+VISIBILITY - mixin
+========================
+
+We don't offer mixin for visibility. Use media query instead:
+
+    .sidebar {
+      @include below(small) {
+        display: none;
+      }
+    }
+
 RAILS
 =================
 
@@ -598,3 +648,9 @@ Template generator:
 
 The command will give you Edge's SCSS files and append the pipeline.
 
+FAQ
+===============
+
+1. Is Edge a mobile-first framework?
+
+   No it is not.