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

**ABOUT EDGE**

Edge is a light-weight responsive Sass framework. No gimmick, just the basic necessity 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).

GRID SYSTEM - COLUMN
==================

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

Our Grid is divided into **12 columns**. Start with row followed by column and its width.

The tag doesn't have to be div, it can be section, article, header, etc.

Sizing:

- Large - above 768px

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

The snippets above is `4 - 8` on Large screen and `6 - 6` on Small screen.

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-8 large-centered column"></div>
    </div>

Feel free to nest the row if you want more than two columns to be centered:

    <section class="row">
      <div class="large-8 large-centered column">
        <div class="row">
          <div class="large-6 column"></div>
          <div class="large-6 column"></div>
        </div>
      </div>
    </section>

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>

The snippets below only has offset on small screen:

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

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

    push-x
    pull-x

Sometimes you want a column to be on the right for Large screen but left-side for Small screen.

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

Push and Pull is ignored on small screen.

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

The snippet above will look like this:

    // on Large screen
    |---main---||aside|

    // on Small screen
    |aside||---main---|

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

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

Tile evenly divides the list into column-like size.

    <ul class="large-tile-4">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>

In the example above, there are 4 list-items per row, 25% width each.

Without small sizing, each item will be 100% width. Here's how you can control the responsiveness:

    <ul class="large-tile-6 small-tile-3">
    </ul>

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

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

Hide or show element on specific screen size. This class is applicable to any elements.

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

Note that small size is below 768px which means it includes mini size.

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

**EXAMPLES**
    
Sidebar hidden on mini screen

    <aside class="sidebar 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>

TEMPLATE GENERATOR
====================

Edge can generate basic template for your project. Run this command inside your project directory:

1. Static HTML

    `edge create html`

2. Standard PHP

    `edge create php`

3. Wordpress
    
    `edge create wordpress`

4. Coming soon: Rails, Sinatra, Django, Flask

COMPASS
=================

Inside the generated 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:

    // $column-gutter : 20px;
    
Become:

    $column-gutter : 30px;

**STARTING FROM SCRATCH**

Here's the guide if you decided not to use the template generator.

There are two main imports:

- **edge** - output all of the framework's styling. Used in conjunction with your own generic style that can be re-used in other project.

    `@import "edge";`

- **edge/helpers** - allow the use of Edge's mixin, doesn't output anything. Used in conjunction with site-specific style

   `@import "edge/helpers";`

Then at the top of **config.rb**, add this line:

    require "edge_framework"

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

You can use Edge by including this in your 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

If you're not planning to override any variables, include `require edge` in your assets pipeline (application.css)
   
    /*
    *= require_self
    *= require edge
    *= require_tree .
    */

Otherwise, use the generator to get the starter kit which includes Setting file.

    rails g edge:install  (COMING SOON)

The Rails generator is not ready yet. Alternatively, copy all the Sass files from any of the Template generator and put it on `assets/stylesheets` directory. Then in your application.css:

    /*
    *= require_self
    *= require framework
    *= require_tree .
    */