README.md in edge_framework-1.1.0 vs README.md in edge_framework-1.2.0
- old
+ new
@@ -50,20 +50,22 @@
<div class="large-4 small-6 column"></div>
</div>
-The tag doesn't have to be div, it can be section, article, header, etc.
+The element 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.
+**Convention**:
+
+- Don't add your own style to the `.row` and `.column` elements.
+
Nesting
-----------
<div class="row">
<div class="large-8 column">
@@ -94,32 +96,36 @@
Centering
-----------
- .large-centered
+ .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.
+Horizontally centering a column.
+It is inherited on small screen.
+
<div class="row">
- <div class="large-7 small-7 large-centered column"></div>
+ <div class="large-7 small-7 centered column"></div>
</div>
Offset
-----------
- .large-offset-x
+ .offset-x
.small-offset-x
-Offset is used to leave a **gap** before the column. Large offset is ignored on small screen.
+Offset leaves a **gap** before the column.
+It is ignored on small screen unless the small sizing is specified.
+
<div class="row">
<div class="large-2 column"></div>
- <div class="large-6 large-offset-4 column"></div>
+ <div class="large-6 offset-4 column"></div>
</div>
Column Ordering
@@ -128,14 +134,16 @@
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.
+They are 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.
+**Example**:
+Create a sidebar that is located on the left. But if viewed with phone, it is on the bottom.
+
<div class="row">
<main class="large-8 push-4 column"></main>
<aside class="large-4 pull-8 column"></aside>
</div>
@@ -144,31 +152,37 @@
GRID SYSTEM - TILE
=================
- ul.large-tile-x
+ ul.tile-x
ul.small-tile-x
Evenly divides the list into block size.
- <ul class="large-tile-3 small-tile-2">
+ <ul class="tile-3 small-tile-2">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
-Without the small size, the tile will expand 100% on small screen.
+Each tile will expand 100% on small screen when the small size is not specified.
-Just like row, you can collapse tile too:
+Just like row, you can collapse it:
- <ul class="large-tile-7 collapse"></ul>
+ <ul class="tile-7 collapse"> ... </ul>
+**Convention**:
+
+- In your own stylesheet, don't name a class that contains the word "tile".
+
+- Don't add your own style to the `.tile` and `.tile > li` elements.
+
TYPOGRAPHY
======================
Outside of CSS reset, we don't offer much feature regarding Typography.
@@ -365,11 +379,11 @@
COMPASS
=================
-The generated template includes **config.rb** for Compass. So, we can directly compile it using:
+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.
@@ -379,207 +393,243 @@
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);
+ }
+ }
+
GRID - mixin
======================
row()
- $gutter : px
- $width : px
+ $gutter : px - Gutter for columns inside this row
+ $width : px - The row's max width.
$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
+ $size : int - The large sizing
+ $small : int - The small sizing
+ $mini : int - The mini sizing (below 480px)
+ $offset : int
+ $push : int
+ $pull : int
+ $collapse : bool
+ $centered : bool
+ $gutter : px
+ $total : int - Total number of columns
+
-Custom grid makes the markup cleaner and less duplication.
+Custom grid makes the markup cleaner and easier to change.
-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>
+ <main class="my-col column"></main>
</div>
// SCSS
- aside {
+ aside.column {
@include column(2, 4, 12);
// or
- @include column($large: 2, $small: 4, $mini: 12);
+ @include column($size: 2, $small: 4, $mini: 12);
}
- main {
+ .my-col {
@include column(10, 8, 12);
// or
- @include column($large: 10, $small: 8, $mini: 12);
+ @include column($size: 10, $small: 8, $mini: 12);
}
-**GUTTER**
+**Convention**:
-Custom gutter must be applied to both row and column
+- We need to include the base class in the markup (`.row` and `.column`).
+### 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>
+ <main class="my-col column"></main>
</div>
// SCSS
.my-row {
@include row($gutter: 50px);
}
- aside {
- @include column($large: 2, $gutter: 50px);
+ aside.column {
+ @include column($size: 2, $gutter: 50px);
}
- main {
- @include column($large: 10, $gutter: 50px);
+ .my-col {
+ @include column($size: 10, $gutter: 50px);
}
-**COLLAPSE**
+### COLLAPSE
Collapse must be applied to both row and column.
.my-row {
@include row($collapse: true);
}
- main {
- @include column($large: 10, $collapse: true);
+ .my-col {
+ @include column($size: 10, $collapse: true);
}
-**TOTAL COLUMNS**
+### TOTAL COLUMNS
You can either use `$total` parameter or fraction:
- aside {
- @include column($large: 7, $total: 15);
+ .my-col {
+ @include column($size: 7, $offset: 3, $total: 15);
}
// or
- aside {
- @include column($large: 7 / 15);
+ .my-col {
+ @include column($size: 7 / 15, $offset: 3 / 15);
}
-Custom total columns is useful when you need **to match a given design**.
+GRID PIXEL *beta
+===============
-Let's say you get this layout that throw off your default grid:
+ column-px()
+ $size : px
+ $width : px
+ $gutter : px
+ $centered : boolean
+Let's say a designers gives you a design that doesn't follow grid system. Here's an example:
+
-Here's how you can handle it:
-
+With `column-px()` mixin, we can create that layout easily:
+
// HTML
<div class="my-row row">
<main class="my-col column"> ... </main>
<aside class="side-col column"> ... </aside>
</div>
-
- // CSS
+ // SCSS
.my-row {
@include row($gutter: 35px);
}
.my-col {
- @include column($large: 500 / 735, $gutter: 35px);
+ @include column-px($size: 500px, $width: 735px, $gutter: 35px);
}
.side-col {
- @include column($large: 200 / 735, $gutter: 35px);
+ @include column-px($size: 200px, $width: 735px, $gutter: 35px);
}
-Remember that we need to include the `.row` and `.column` class.
-
TILE - mixin
======================
tile()
- $large : int
+ $size : int
$small : int
$mini : int
$gutter : px,
$collapse : bool
-Just like column's mixin, you can set mini size.
+Mini sizing is available for tile's mixin too.
<ul class="products"></ul>
.products {
- @include tile(4, 2, 1);
+ @include tile($size: 7, $small: 4, $mini: 2);
+
// or
- @include tile($large: 4, $small: 2, $mini: 1);
+
+ @include tile(7, 4, 2);
}
-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
+ $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`).
-Other than the usual "large" or "small", you can also use pixel on this mixin.
-
p {
color: black;
- @include below(small) {
+ @include above(small) {
color: blue;
}
- @include below(500px) {
- color: red;
+ @include below(small) {
+ color: yellow;
}
+ }
- @include between(100px, small) {
+You can use pixel too:
+
+ p {
+ color: black;
+
+ @include above(850px) {
+ color: pink;
+ }
+
+ @include between(300px, 400px) {
color: green;
}
}
+VISIBILITY - mixin
+========================
+
+We don't offer mixin for visibility. Use media query instead:
+
+ .sidebar {
+ @include below(small) {
+ display: none;
+ }
+ }
+
RAILS
=================
@@ -596,5 +646,11 @@
rails g edge:install
The command will give you Edge's SCSS files and append the pipeline.
+FAQ
+===============
+
+1. Is Edge a mobile-first framework?
+
+ No it is not.
\ No newline at end of file