README.md in edge_framework-0.9.10 vs README.md in edge_framework-0.9.11
- old
+ new
@@ -1,71 +1,105 @@
+
+
EDGE FRAMEWORK
==========================
-**ABOUT EDGE**
+Edge is a light-weight responsive Sass framework. No gimmick, just the barebone to build modern website.
-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
+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-4 small-6 column"></div>
+ <div class="large-8 column"></div>
+ <div class="large-4 column"></div>
+ </div>
+
+
+
+ <div class="row">
<div class="large-8 small-6 column"></div>
+ <div class="large-4 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.
+Never style either row or column, you might see unexpected behavior.
+
Sizing:
- Large - above 768px
-- Small (optional) - below or equal to 768px, width will be 100% if not specified.
+- Small - 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.
+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>
+
+
+
+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.
+
+
+
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 class="large-7 small-7 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
@@ -75,72 +109,96 @@
<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.
+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">
- <aside class="large-4 small-4 push-4 column"></aside>
- <main class="large-8 small-8 pull-8 column"></main>
+ <main class="large-8 push-4 column"></main>
+ <aside class="large-4 pull-8 column"></aside>
</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.
+Evenly divides the list into block size.
- <ul class="large-tile-4">
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
+ <ul class="large-tile-3 small-tile-2">
+ <li>1</li>
+ <li>2</li>
+ <li>3</li>
+ <li>4</li>
+ <li>5</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:
+Without the small size, the tile will expand 100% on small screen.
- <ul class="large-tile-6 small-tile-3">
- </ul>
+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>
-Hide or show element on specific screen size. This class is applicable to any elements.
+ <size> = large / small / mini
**Hide** means hidden only on that size. **Show** means visible only on that size.
Sizing:
@@ -148,14 +206,24 @@
- 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 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 - ✓ ✓
@@ -166,98 +234,238 @@
.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**
+EXAMPLE
+--------------
Sidebar hidden on mini screen
- <aside class="sidebar hide-for-mini"></aside>
+ <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>
TEMPLATE GENERATOR
====================
-Edge can generate basic template for your project. Run this command inside your project directory:
+Generate basic template for your project. Run this command inside your project directory:
1. Static HTML
`edge create html`
-2. Standard PHP
-
+2. Static PHP (under construction)
+
`edge create php`
-3. Wordpress
-
- `edge create wordpress`
+3. Rails (run inside Rails project)
-4. Coming soon: Rails, Sinatra, Django, Flask
+ `rails g edge:install`
+4. Coming soon: Wordpress, Sinatra, and 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:
+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;
-**STARTING FROM SCRATCH**
+GRID - mixin
+======================
+
+ row()
+ $gutter : px
+ $width : px
+ $collapse : bool
-Here's the guide if you decided not to use the template generator.
+ 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
-There are two main imports:
+Custom grid makes the markup cleaner and less duplication.
-- **edge** - output all of the framework's styling. Used in conjunction with your own generic style that can be re-used in other project.
+It allows one additional sizing: **mini** which is below 480px on default. You can only set mini size when small size is specified.
- `@import "edge";`
+Base class ("row" and "column") must be explicitly written.
-- **edge/helpers** - allow the use of Edge's mixin, doesn't output anything. Used in conjunction with site-specific style
+ // HTML
+ <div class="row">
+ <aside class="column"></aside>
+ <main class="column"></main>
+ </div>
- `@import "edge/helpers";`
+ // SCSS
+ aside {
+ @include column(2, 4, 12);
+ // or
+ @include column($large: 2, $small: 4, $mini: 12);
+ }
-Then at the top of **config.rb**, add this line:
+ main {
+ @include column(10, 8, 12);
+ // or
+ @include column($large: 10, $small: 8, $mini: 12);
+ }
- require "edge_framework"
+**GUTTER**
+If you want to modify the global gutter, change it in Setting file.
+
+But if you want it only on specific set of columns, apply it in 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);
+ }
+
+**TOTAL COLUMNS**
+
+ aside {
+ @include column($large: 20, $total: 100);
+ }
+
+ main {
+ @include column($large: 80, $total: 100);
+ }
+
+**COLLAPSE**
+
+Collapse must be applied to both custom row and column.
+
+ .my-row {
+ @include row($collapse: true);
+ }
+
+ main {
+ @include column($large: 10, $collapse: true);
+ }
+
+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
=================
-You can use Edge by including this in your Gemfile:
+
+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 .
- */
+Template generator:
-Otherwise, use the generator to get the starter kit which includes Setting file.
+ rails g edge:install
- 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
+The command will give you Edge's SCSS files and append the pipeline.