![Edge Framework](http://cdn.setyono.net/edge/logo.jpg)

EDGE FRAMEWORK
==========================

Edge is a light-weight responsive Sass framework. No gimmick, just the barebone to build modern website.

It is based on [Foundation by ZURB](http://www.zurb.com).

**OUR PHILOSOPHY**

My personal preference is to have a framework not do something and implement it myself than have a framework do something and figure out how to do the opposite.

INSTALLATION
-----------------

    gem install edge_framework

Windows PC doesn't come with Ruby pre-installed, so you can follow [this Ruby installation guide](https://docs.google.com/document/d/155e-Dx4SnQj_bMrM24kI4_ZEmBp-TQ_tuinhMvZsIhM/edit?usp=sharing) we wrote.

After you installed Ruby, type in the command above on `cmd` (command prompt).

BROWSER SUPPORT
------------------

All modern browsers:

- Chrome, Firefox, Safari, Opera
- Android 4.0 and above
- IE 9 and above

GRID SYSTEM
==================
    .row
    .column
    .large-x
    .small-x

Our Grid is divided into **12 columns**. Start with "row" followed by "column" used in conjunction with its width.

    <div class="row">
      <div class="large-8 column"></div>
      <div class="large-4 column"></div>
    </div>

![Edge Grid - Large only](http://cdn.setyono.net/edge/grid-large.jpg)

    <div class="row">
      <div class="large-8 small-6 column"></div>
      <div class="large-4 small-6 column"></div>
    </div>

![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.

Sizing:

- Large - above 768px

- Small - below or equal to 768px, width will be 100% if not specified.

Nesting
-----------

    <div class="row">
      <div class="large-8 column">
        <div class="row">
          <div class="large-2 column"></div>
          <div class="large-10 column"></div>
        </div>
      </div>
      <div class="large-4 column"></div>
    </div>

![Edge Grid - Nesting](http://cdn.setyono.net/edge/grid-nesting.jpg)

Collapse
-----------

    .row.collapse

Remove the gutter.

    <div class="row collapse">
      <div class="large-9 small-6 column"></div>
      <div class="large-3 small-6 column"></div>
    </div>

All nested rows inside collapsed one will be collapsed too.

![Edge Grid - Collapse](http://cdn.setyono.net/edge/grid-collapse.jpg)

Centering
-----------

    .large-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.

    <div class="row">
      <div class="large-7 small-7 large-centered column"></div>
    </div>

![Edge Grid - Centered](http://cdn.setyono.net/edge/grid-centered.jpg)

Offset
-----------

    .large-offset-x
    .small-offset-x

Offset is used to leave a **gap** before the column. Large offset is ignored on small screen.

    <div class="row">
      <div class="large-2 column"></div>
      <div class="large-6 large-offset-4 column"></div>
    </div>

![Edge Grid - Offset](http://cdn.setyono.net/edge/grid-offset.jpg)

Column Ordering
-----------------

    push-x
    pull-x

**Push** pushes the column to the right, while **Pull** pulls it to the left.

Push and Pull is 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.

    <div class="row">
      <main class="large-8 push-4 column"></main>
      <aside class="large-4 pull-8 column"></aside>
    </div>

The snippet above will look like this:

![Edge Grid - Ordering](http://cdn.setyono.net/edge/grid-ordering.jpg)

GRID SYSTEM - TILE
=================

    ul.large-tile-x
    ul.small-tile-x

Evenly divides the list into block size.

    <ul class="large-tile-3 small-tile-2">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>

![Edge Grid - Tile](http://cdn.setyono.net/edge/grid-tile.jpg)

Without the small size, the tile will expand 100% on small screen.

Just like row, you can collapse tile too:

    <ul class="large-tile-7 collapse"></ul>

TYPOGRAPHY
======================

Outside of CSS reset, we don't offer much feature regarding Typography.

Default Unordered list (ul) has bullet point, but most of the time we don't need it. So, we made a convention on how to write `ul`.

Without class

    <ul>...<ul>
    
    Result:
    • List 1
    • List 2
    • List 3

With any class

    <ul class="something">...</ul>
  
    Result:
    List 1
    List 2
    List 3

If you want horizontal list, add `.inline-list` class.

    <ul class="inline-list">...</ul>
    
    Result:
    List 1 List 2 List 3

VISIBILITY
==================

    .hide-for-<size>
    .show-for-<size>

    <size> = large / small / mini

**Hide** means hidden only on that size. **Show** means visible only on that size.

Sizing:

- Large - above 768px

- Small - below or equal to 768px

- Mini - below or equal to 480px

**VISIBILITY SCALE**

    0-----480-----768------------->

    |-mini-|

    |----small-----|

                   |----large----->

Notice that small size includes the mini portion too.

**VISIBILITY TABLE**

    ✓ = visible

                       Large  Small  Mini

    .hide-for-large      -      ✓     ✓
    .hide-for-small      ✓      -     -
    .hide-for-mini       ✓      ✓     -

    .show-for-large      ✓      -     -
    .show-for-small      -      ✓     ✓
    .show-for-mini       -      -     ✓

From the table, we can see that some classes like `.hide-for-large` and `.show-for-small` have same result. It is up to your preference on which word makes more sense.

EXAMPLE
--------------
    
Sidebar hidden on mini screen

    <aside hide-for-mini"></aside>

Slider visible only on large screen
    
    <div role="banner" class="show-for-large"></div>
    // or
    <div role="banner" class="hide-for-small"></div>

BOILERPLATE GENERATOR
========================

Generate basic template for your project. Run this command inside your project directory:

1. Static HTML

    `edge create html`

2. Static PHP
    
    `edge create php`

3. Wordpress 3.8+ (Min PHP 5.3)

    `edge create wordpress`

4. Rails (run inside Rails project)

    `rails g edge:install`

5. Coming soon: Sinatra and Flask


WORDPRESS
====================

![Edge Wordpress](http://cdn.setyono.net/edge/wp-edge.jpg)

Features:

- Auto add header and footer.
- Independent from any plugin.
- Cleaner WP Query call.
- Easily create custom post type and taxonomy.

Custom WP Query
---------------------

    Post::find()
        get all posts.

    Post::find($args_array)
        get post(s) based on the arguments array.

    Post::find_by($key, $value)
        faster way of writing Post::find(array( $key => $value ))

All of the functions above returns `WP_Query()` object. [Refer here](https://gist.github.com/luetkemj/2023628) for available argument.

Example:
    
    $posts = Post::find_by("category_name", "featured");
    
    if( $posts->have_posts() ):
      while( $posts->have_posts() ): $posts->the_post();
        ...
      endwhile;
    endif;


Custom Post Type
--------------------

![Wordpress Custom Type](http://cdn.setyono.net/edge/wp-post-type.jpg)

    add_post_type( $name, <$icon>, <$taxonomy> )

Inside `functions.php`, add these codes:

    add_post_type("Product", "cart", "Brand");
    add_post_type("Event", "calendar");

The icon name is taken from [melchoyce.github.io/dashicons/](http://melchoyce.github.io/dashicons/).

To enable custom WP Query, create a class with the Post Type's name that extends `Post`.

    // still inside functions.php
    class Product extends Post {}
    class Event extends Post {}

Now, you can use the custom WP Query:

    $products = Product::find_by("brand", "Microsoft")
    $events = Event::find()

Template File
---------------

The template file for custom post is `single-{slug}.php` while custom taxonomy is `taxonomy-{slug}.php`.

Based on the example above, create `single-product.php` for single **Product** template. If we need to list all products within a brand, create `taxonomy-brand.php` which works the same way as `category.php`.

Naming Convention
-----------------

All names must be **singular** and no special character.

Space is the only one allowed but its class name is the **combined words**. 

    add_post_type("Photo Gallery", "format-gallery");

    class Photogallery extends Post {}

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:

    compass watch

Inside the template, go to `assets/sass/` and you will see `_settings.scss`. This file overrides the default styling like primary color or column's gutter.

Just uncomment the variable and change the value. For example:

    // $column-gutter : 20px;

Become:

    $column-gutter : 30px;

GRID - mixin
======================
  
    row()
      $gutter   : px
      $width    : px
      $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.

We need to include the base class in the markup (`.row` and `.column`).

    // HTML
    <div class="row">
      <aside class="column"></aside>
      <main class="column"></main>
    </div>


    // SCSS
    aside {
      @include column(2, 4, 12);
      // or
      @include column($large: 2, $small: 4, $mini: 12);
    }

    main {
      @include column(10, 8, 12);
      // or
      @include column($large: 10, $small: 8, $mini: 12);
    }

**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>
    </div>


    // SCSS
    .my-row {
      @include row($gutter: 50px);
    }

    aside {
      @include column($large: 2, $gutter: 50px);
    }

    main {
      @include column($large: 10, $gutter: 50px);
    }

**COLLAPSE**

Collapse must be applied to both row and column.
    
    .my-row {
      @include row($collapse: true);
    }

    main {
      @include column($large: 10, $collapse: true);
    }

**TOTAL COLUMNS**

You can either use `$total` parameter or fraction:

    aside {
      @include column($large: 7, $total: 15);
    }

    // or

    aside {
      @include column($large: 7 / 15);
    }

Custom total columns is useful when you need **to match a given design**.

Let's say you get this layout that throw off your default grid:

![Pre-given Design](http://cdn.setyono.net/edge/custom-total-column.jpg)

Here's how you can handle it:
    
    // HTML
    <div class="my-row row">
      <main class="my-col column"> ... </main>
      <aside class="side-col column"> ... </aside>
    </div>
    

    // CSS
    .my-row {
      @include row($gutter: 35px);
    }

    .my-col {
      @include column($large: 500 / 735, $gutter: 35px);
    }

    .side-col {
      @include column($large: 200 / 735, $gutter: 35px);
    }

Remember that we need to include the `.row` and `.column` class.

TILE - mixin
======================

    tile()
      $large    : int
      $small    : int
      $mini     : int
      $gutter   : px,
      $collapse : bool

Just like column's mixin, you can set mini size.

    <ul class="products"></ul>

    .products {
      @include tile(4, 2, 1);
      // 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);
    }

MEDIA QUERY - mixin
=========================

    below($size)
    above($size)
    between($smaller-size, $larger-size)
    
    $size = px / large / small / mini

**Below** means less than or equal to (`<=`).

**Above** means more than (`>`).

**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) {
        color: blue;
      }

      @include below(500px) {
        color: red;
      }

      @include between(100px, small) {
        color: green;
      }
    }

RAILS
=================

![Edge Rails](http://cdn.setyono.net/edge/rails-edge.jpg)

Gemfile:

    gem 'sass', '= 3.2.14'
    gem 'sass-rails', '~> 4.0.0'
    gem 'compass-rails'
    gem 'edge_framework'

The latest version of Sass (3.3.x) is not compatible with latest Compass (0.12.x). So until they fixed it, use Sass version 3.2.14

Template generator:

    rails g edge:install

The command will give you Edge's SCSS files and append the pipeline.