README.md in edge_framework-1.0.0 vs README.md in edge_framework-1.1.0
- old
+ new
@@ -320,36 +320,50 @@
Custom Post Type
--------------------
- add_post_type( $name, <$icon>, <$taxonomy> )
-
+ add_post_type( $name, <$icon>, <$taxonomy> )
+
Inside `functions.php`, add these codes:
add_post_type("Product", "cart", "Brand");
add_post_type("Event", "calendar");
-All names must be **singular**. The icon name is taken from [melchoyce.github.io/dashicons/](http://melchoyce.github.io/dashicons/).
+The icon name is taken from [melchoyce.github.io/dashicons/](http://melchoyce.github.io/dashicons/).
To enable custom WP Query, create a class with the Post Type's name that extends `Post`.
// still inside functions.php
class Product extends Post {}
class Event extends Post {}
-Now, you can call the functions:
+Now, you can use the custom WP Query:
$products = Product::find_by("brand", "Microsoft")
$events = Event::find()
+Template File
+---------------
+
The template file for custom post is `single-{slug}.php` while custom taxonomy is `taxonomy-{slug}.php`.
Based on the example above, create `single-product.php` for single **Product** template. If we need to list all products within a brand, create `taxonomy-brand.php` which works the same way as `category.php`.
+Naming Convention
+-----------------
+
+All names must be **singular** and no special character.
+
+Space is the only one allowed but its class name is the **combined words**.
+
+ add_post_type("Photo Gallery", "format-gallery");
+
+ class Photogallery extends Post {}
+
COMPASS
=================
@@ -389,20 +403,21 @@
$gutter : px
$total : int // total columns
Custom grid makes the markup cleaner and less duplication.
-It allows one additional sizing: **mini** which is below 480px by default. You can only set mini size when small size is specified.
+It allows one additional breakpoint: **mini** which is below 480px by default. You can only set mini size when small one is specified.
-We still need to write the base class (`.row` and `.column`).
+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>
</div>
+
// SCSS
aside {
@include column(2, 4, 12);
// or
@include column($large: 2, $small: 4, $mini: 12);
@@ -414,18 +429,19 @@
@include column($large: 10, $small: 8, $mini: 12);
}
**GUTTER**
-If you want to modify all the gutters, change it in Setting file. Otherwise, you must customize both row and column.
+Custom gutter must be applied to 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);
}
@@ -435,30 +451,64 @@
main {
@include column($large: 10, $gutter: 50px);
}
+**COLLAPSE**
+
+Collapse must be applied to both row and column.
+
+ .my-row {
+ @include row($collapse: true);
+ }
+
+ main {
+ @include column($large: 10, $collapse: true);
+ }
+
**TOTAL COLUMNS**
+You can either use `$total` parameter or fraction:
+
aside {
- @include column($large: 20, $total: 100);
+ @include column($large: 7, $total: 15);
}
- main {
- @include column($large: 80, $total: 100);
+ // or
+
+ aside {
+ @include column($large: 7 / 15);
}
-**COLLAPSE**
+Custom total columns is useful when you need **to match a given design**.
-Collapse must be applied to both custom row and column.
+Let's say you get this layout that throw off your default grid:
+
+
+
+Here's how you can handle it:
+ // HTML
+ <div class="my-row row">
+ <main class="my-col column"> ... </main>
+ <aside class="side-col column"> ... </aside>
+ </div>
+
+
+ // CSS
.my-row {
- @include row($collapse: true);
+ @include row($gutter: 35px);
}
- main {
- @include column($large: 10, $collapse: true);
+ .my-col {
+ @include column($large: 500 / 735, $gutter: 35px);
}
+
+ .side-col {
+ @include column($large: 200 / 735, $gutter: 35px);
+ }
+
+Remember that we need to include the `.row` and `.column` class.
TILE - mixin
======================
tile()