EDGE FRAMEWORK
Edge is a light-weight Sass framework. It specializes in making a website from scratch.
It is based on Foundation by ZURB.
This is v2 docs, go here for v1.
BROWSER SUPPORT
All modern browsers:
- Chrome, Firefox, Safari, Opera
- Android 4.0 and above
- IE 9 and above
INSTALLATION
PC
Install Ruby and type this command in your cmd (command prompt):
gem install edge_framework
MAC
Open your terminal and type:
sudo gem install edge_framework
GETTING STARTED
Generate the template files by running this command in your project directory:
edge create <type>
Available types are: html
, wordpress
, email
, and ghost
.
To compile the Sass, run this command:
compass watch
GRID SYSTEM
<h-row>
<h-column>
Our Grid is divided into 12 columns. Start with <h-row>
followed by <h-column>
.
<h-row>
<h-column class="large-8"></h-column>
<h-column class="large-4"></h-column>
</h-row>
<h-row>
<h-column class="large-8 small-6"></h-column>
<h-column class="large-4 small-6"></h-column>
</h-row>
Note:
h-row
must be followed byh-column
. Nothing in between!Don't add your own styling to the row or column element.
Large is above 768px by default.
Small is below or equal to 768px. If not specified, column will become 100% width.
Nesting
<h-row>
<h-column class="large-8">
<h-row>
<h-column class="large-2"></h-column>
<h-column class="large-10"></h-column>
</h-row>
</h-column>
<h-column class="large-4"></h-column>
</h-row>
Collapse
.collapse
Remove the gutter.
<h-row class="collapse">
<h-column class="large-9 small-6"></h-column>
<h-column class="large-3 small-6"></h-column>
</h-row>
Note:
- Normal row that is nested inside collapsed row will maintain its gutter.
Centering
.centered
.small-centered
Horizontally centering a column.
It is inherited on small screen.
<h-row>
<h-column class="large-7 small-7 centered"></h-column>
</h-row>
Offset
.offset-x
.small-offset-x
Offset leaves a gap before the column.
It is ignored on small screen unless the small sizing is specified.
<h-row>
<h-column class="large-2 column"></h-column>
<h-column class="large-6 offset-4 column"></h-column>
</h-row>
GRID SYSTEM - TILE
<h-tile>
<h-ti>
.block-x
.small-block-x
Evenly divides the list into block size.
<h-tile class="block-3 small-block-2">
<h-ti> 1 </h-ti>
<h-ti> 2 </h-ti>
<h-ti> 3 </h-ti>
<h-ti> 4 </h-ti>
<h-ti> 5 </h-ti>
</h-tile>
Each tile will expand 100% on small screen when the small size is not specified.
Just like row, you can collapse it:
<h-tile class="block-7 collapse"> ... </h-tile>
Convention:
- Don't add your own styling to the tile or ti element.
WORDPRESS
Our WordPress template requires Timber. It is a template engine that separates PHP and HTML into their own file, reducing the amount of "spaghetti" code.
CPT - Custom Post Type
add_post_type( $name, <$args_array> )
Note: The $name
must be one-word, singular, and titleized case. Example:
add_post_type( "Product" );
add_post_type( "Event" );
Optional arguments list:
icon
- Icon names are listed here melchoyce.github.io/dashicons/. Exclude the "dashicons-".
taxonomy
- The custom category term. The naming convention is the same as CPT's name.
columns
- Array of columns shown in admin panel. Possible values are: title
, author
, date
, thumbnail
, and any custom field.
Example:
add_post_type( "Product" , array(
"icon" => "cart",
"taxonomy" => "Brand",
"columns" => array("thumbnail", "title^", "price^", "date")
) );
Notice the ^
at the end of column's name? That indicates that the column is sortable.
COMPASS
The generated template includes config.rb for Compass. So, we can compile it using the command:
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;
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);
}
}
MEDIA QUERY - mixin
below($size)
above($size)
between($smaller-size, $larger-size)
$size = large / small / mini
Below means less than or equal to (<=
).
Above means more than (>
).
Between is inclusive to both (>= smaller-size
and <= larger-size
).
p {
color: black;
@include above(small) {
color: blue;
}
@include below(small) {
color: yellow;
}
}
You can use pixel too:
p {
color: black;
@include above(850px) {
color: pink;
}
@include between(300px, 400px) {
color: green;
}
}
GRID - mixin
row()
$gutter : px - Gutter for columns inside this row
$width : px - The row's max width.
$collapse : bool
column()
$size : int - The large sizing
$small : int - The small sizing
$mini : int - The mini sizing (below 480px)
$offset : int
$centered : bool
$total : int - Total number of columns
Custom grid makes the markup cleaner and easier to change.
// HTML
<h-row>
<h-column class="sidebar"></h-column>
<h-column class="content"></h-column>
</h-row>
// SCSS
.sidebar {
@include column($size: 2, $small: 4, $mini: 12);
// or
@include column(2, 4, 12);
}
.main {
@include column(10, 8, 12);
}
Note:
- Custom column MUST be applied to
h-column
element. The same rule goes to custom row.
GUTTER
Custom gutter is applied to the row
// HTML
<h-row class="my-row">
<h-column class="large-3"></h-column>
<h-column class="large-9"></h-column>
</h-row>
// SCSS
.my-row {
@include row($gutter: 50px);
}
GUTTER on large and small
Unlike the column's sizing. There's no parameter called small-gutter
or mini-gutter
.
So, the workaround is to use media query:
.my-row {
@include row($gutter: 50px);
@include below(small) {
@include row($gutter: 20px);
}
}
Note:
- Use the same workaround for column's
offset
.
COLLAPSE
Collapse is applied to the row
// HTML
<h-row class="my-row">
...
</h-row>
// SCSS
.my-row {
@include row($collapse: true);
}
TOTAL COLUMNS
You can either use $total
parameter or fraction:
.content {
@include column($size: 7, $offset: 3, $total: 15);
}
// or
.content {
@include column($size: 7 / 15, $offset: 3 / 15);
}
ADAPTIVE GRID
Normal Grid always expand to 100% at any screen size. This can be a nuisance for complex responsive site because we need to make sure nothing is misaligned on all size.
Adaptive Grid sets a fixed-width and shrink to the next width when the screen size reaches the breakpoint.
In setting, change the variable $adaptive
to true.
You may add more breakpoints in the variable $adaptive-breakpoint
. You can mix variable and number in the comma-separated list.
Example:
$adaptive-breakpoint: $medium-screen, 900px, $small-screen, 600px, $mini-screen;
TILE - mixin
tile()
$size : int
$small : int
$mini : int
$gutter : px,
$collapse : bool
Mini sizing is available for tile's mixin too.
<h-tile class="products">
...
</h-tile>
.products {
@include tile(7, 4, 2);
}
RAILS
Add this chunk to your gemfile (some already came in default Rails project):
gem 'sass'
gem 'sass-rails', '~> 4.0.0'
gem 'compass-rails'
gem 'edge_framework', '~> 1.2'
Template generator:
rails g edge:install
The command will give you Edge's SCSS files and append the pipeline.
FAQ
- Why should I use Edge over leading frameworks like Boostrap or Foundation?
Edge leans toward those who create website based on designer's wireframe/mockup.
Bootstrap and Foundation offer ready-to-use elements. Trying to match a designer's work with it will just end up in you overriding most of them. And that may result in unexpected style and bloated code.
- Is Edge a mobile-first framework?
No it is not.
- What's changed from v1?
Major changes are:
Grid and Tile now use Web Component.
Visibility class is removed.
Source Ordering (pull and push) is removed.