Merge pull request #26 from picturepan2/feature/more-toasts

Feature/more toasts

1 files changed, 17 insertions, 3 deletions

diff --git a/index.html b/index.html
index 6caa566..5326dab 100644
--- a/index.html
+++ b/index.html
@@ -89,7 +89,7 @@
             <section class="notes">
                 <p>There are 3 ways to get started with Spectre CSS framework in your projects. You can either manually install or use NPM and Bower.</p>
                 <h5>Install manually</h5>
-                <p>Download the compiled and minified <a href="https://github.com/picturepan2/spectre/tree/master/dist" target="_blank">Spectre CSS file</a> (about 26KB):</p>
+                <p>Download the compiled and minified <a href="https://github.com/picturepan2/spectre/tree/master/dist" target="_blank">Spectre CSS file</a> (about 27KB):</p>
                 <p><a href="https://github.com/picturepan2/spectre/tree/master/dist" target="_blank" class="btn btn-primary">Download Spectre.css</a></p>
                 <h5>Install with NPM</h5>
                 <!-- install with npm example -->
@@ -1359,9 +1359,23 @@
                     </div>
                 </div>
             </div>
+            <div class="columns">
+                <div class="column">
+                    <div class="toast toast-success">
+                        <button class="btn btn-clear float-right"></button>
+                        <span class="icon icon-error_outline"></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                    </div>
+                </div>
+                <div class="column">
+                    <div class="toast toast-danger">
+                        <button class="btn btn-clear float-right"></button>
+                        <span class="icon icon-error_outline"></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                    </div>
+                </div>
+            </div>
             <section class="notes">
                 <p>Add a container element with the class <code>toast</code>. You can add any text within the container, and even icons. You may also add a close button with the class <code>btn-clear</code> if you need. </p>
-                <p>And you can add the class <code>toast-primary</code> for primary toast color.</p>
+                <p>And you can add the class <code>toast-primary</code>, <code>toast-success</code> or <code>toast-danger</code> for additional toast colors.</p>
             </section>
 
             <!-- toasts example -->
@@ -2142,7 +2156,7 @@
     <footer class="bg-grey">
         <section id="copyright" class="grid-footer grid-960">
             <p>
-                <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub Repo</a> | <a href="#">Back to top</a> | version: 0.1.12
+                <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub Repo</a> | <a href="#">Back to top</a> | version: 0.1.14
             </p>
             <p>Designed and built with love by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
         </section>