update doc and Readme

2 files changed, 18 insertions, 9 deletions

diff --git a/README.md b/README.md
index c2c31f5..af4f419 100644
--- a/README.md
+++ b/README.md
@@ -45,7 +45,7 @@ And include it in your website or Web app <head> part.
 - [tooltips](http://picturepan2.github.io/spectre/#tooltips) - simple tooltip built entirely in CSS
 - [labels](http://picturepan2.github.io/spectre/#labels) - formatted text tags for highlighted, informative information
 - [badges](http://picturepan2.github.io/spectre/#badges) - unread number indicators
-- [toasts](http://picturepan2.github.io/spectre/#toasts)
+- [toasts](http://picturepan2.github.io/spectre/#toasts) - showing alerts or notifications
 - [menus](http://picturepan2.github.io/spectre/#menus) - list of links or buttons for actions and navigation
 - [navigation](http://picturepan2.github.io/spectre/#navigation) - breadcrumb, tabs and pagination
 - [modals](http://picturepan2.github.io/spectre/#modals) - flexible dialog prompts
diff --git a/index.html b/index.html
index 56553be..7784388 100644
--- a/index.html
+++ b/index.html
@@ -300,22 +300,31 @@
                 </div>
             </div>
             <div class="columns">
-                <div class="column col-2">
-                    <div class="bg-grey">col-2</div>
+                <div class="column col-12">
+                    <div class="bg-grey">col-12 (100%)</div>
                 </div>
-                <div class="column col-4">
-                    <div class="bg-grey">col-4</div>
+            </div>
+            <div class="columns">
+                <div class="column col-9">
+                    <div class="bg-grey">col-9 (75%)</div>
                 </div>
-                <div class="column col-4">
-                    <div class="bg-grey">col-4</div>
+            </div>
+            <div class="columns">
+                <div class="column col-6">
+                    <div class="bg-grey">col-6 (50%)</div>
                 </div>
-                <div class="column col-2">
-                    <div class="bg-grey">col-2</div>
+            </div>
+            <div class="columns">
+                <div class="column col-3">
+                    <div class="bg-grey">col-3 (25%)</div>
                 </div>
             </div>
             <section class="notes">
                 <p>Add the class <code class="label">columns</code> to a container. And add any element you want with classname <code class="label">column</code> inside the container. These columns will take up the space equally. You can specific the width of each column by adding class <code class="label">col-[1-12]</code>.</p>
             </section>
+            <section class="notes">
+                <p>When the width of browser viewport is less than 840px and more than 480px, the col-[1-11] will be 50% width to the parent elements.</p>
+            </section>
 
             <!-- layout example -->
 <pre class="code lang-html">