README.md in edge_framework-0.9.9 vs README.md in edge_framework-0.9.10
- old
+ new
@@ -1,25 +1,191 @@
-Welcome to Edge Framework
+EDGE FRAMEWORK
==========================
-Edge is a unobtrusive Sass 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).
-Edge is MIT-licensed and absolutely free to use.
+**OUR PHILOSOPHY**
-Installation
+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).
+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.
-CLI - Template Generator
+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. Open `cmd` or `terminal` in your project directory and type in one of these commands:
+Edge can generate basic template for your project. Run this command inside your project directory:
1. Static HTML
`edge create html`
@@ -31,5 +197,67 @@
`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 .
+ */
\ No newline at end of file