add avatars code

6 files changed, 69 insertions, 34 deletions

diff --git a/demo/img/avatar-1.png b/demo/img/avatar-1.png
new file mode 100644
index 0000000..e28ac6c
--- /dev/null
+++ b/demo/img/avatar-1.png
diff --git a/demo/img/avatar-2.png b/demo/img/avatar-2.png
new file mode 100644
index 0000000..3fcb9d9
--- /dev/null
+++ b/demo/img/avatar-2.png
diff --git a/demo/img/avatar-3.png b/demo/img/avatar-3.png
new file mode 100644
index 0000000..0383958
--- /dev/null
+++ b/demo/img/avatar-3.png
diff --git a/demo/img/avatar-4.png b/demo/img/avatar-4.png
new file mode 100644
index 0000000..3ecedcc
--- /dev/null
+++ b/demo/img/avatar-4.png
diff --git a/demo/img/avatar-5.png b/demo/img/avatar-5.png
new file mode 100644
index 0000000..8019817
--- /dev/null
+++ b/demo/img/avatar-5.png
diff --git a/demo/index.html b/demo/index.html
index b5c2bfe..f824a1e 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -5,8 +5,8 @@
     <title>Spectre, a lightweight and clean CSS framework for faster and extendable development.</title>
     <link rel="stylesheet" href="../dist/spectre.css">
     <style>
-        .columns .column {
-
+        h4 {
+            margin-top: 4rem;
         }
     </style>
 </head>
@@ -19,6 +19,7 @@
                 <p><strong>Project Spectre</strong> is a lightweight and clean CSS framework for faster and extendable development.</p>
             </section>
         </section>
+
         <section id="typography">
             <header class="text-center"><h4>typography</h4></header>
             <section>
@@ -74,6 +75,7 @@
                 </div>
             </div>
         </section>
+
         <section id="layout">
             <header class="text-center"><h4>flexbox layout</h4></header>
             <section>
@@ -128,6 +130,7 @@
                 </div>
             </div>
         </section>
+
         <section id="tables">
             <header class="text-center"><h4>tables</h4></header>
             <table>
@@ -167,6 +170,7 @@
                 </tbody>
             </table>
         </section>
+
         <section id="buttons">
             <header class="text-center"><h4>buttons</h4></header>
             <section>
@@ -193,6 +197,7 @@
                 </div>
             </div>
         </section>
+
         <section id="button-groups">
             <header class="text-center"><h4>button groups</h4></header>
             <div class="columns">
@@ -212,37 +217,7 @@
                 </div>
             </div>
         </section>
-        <section id="media">
-            <header class="text-center"><h4>media</h4></header>
-            <div class="columns">
-                <div class="column col-6">
-                    <img src="img/apple-el-capitan.jpg" class="img-responsive rounded" />
-                </div>
-                <div class="column col-6">
-                    <img src="img/apple-el-capitan.jpg" class="img-responsive rounded" />
-                </div>
-            </div>
-        </section>
-        <section id="tooltips">
-            <header class="text-center"><h4>tooltips</h4></header>
-            <section>
-                <p><strong>tooltips.less</strong> is built entirely in CSS. </p>
-            </section>
-            <div class="columns">
-                <div class="column">
-                    <button class="btn tooltip" data-tooltip="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante." data-tooltip-pos="top">top tooltip</button>
-                </div>
-                <div class="column">
-                    <button class="btn tooltip" data-tooltip="Lorem ipsum dolor sit amet" data-tooltip-pos="right">right tooltip</button>
-                </div>
-                <div class="column">
-                    <button class="btn tooltip" data-tooltip="Lorem ipsum dolor sit amet" data-tooltip-pos="bottom">bottom tooltip</button>
-                </div>
-                <div class="column">
-                    <button class="btn tooltip" data-tooltip="Lorem ipsum dolor sit amet" data-tooltip-pos="left">left tooltip</button>
-                </div>
-            </div>
-        </section>
+
         <section id="forms">
             <header class="text-center"><h4>forms</h4></header>
             <div class="columns">
@@ -367,6 +342,60 @@
                 </div>
             </div>
         </section>
+
+        <section id="media">
+            <header class="text-center"><h4>media</h4></header>
+            <div class="columns">
+                <div class="column col-6">
+                    <img src="img/apple-el-capitan.jpg" class="img-responsive rounded" />
+                </div>
+                <div class="column col-6">
+                    <img src="img/apple-el-capitan.jpg" class="img-responsive rounded" />
+                </div>
+            </div>
+        </section>
+
+        <section id="avatars">
+            <header class="text-center"><h4>avatars</h4></header>
+            <div class="columns">
+                <div class="column col-6">
+                    <img src="img/avatar-1.png" class="avatar avatar-xl" />
+                    <img src="img/avatar-2.png" class="avatar avatar-lg" />
+                    <img src="img/avatar-3.png" class="avatar" />
+                    <img src="img/avatar-4.png" class="avatar avatar-sm" />
+                    <img src="img/avatar-5.png" class="avatar avatar-xs" />
+                </div>
+                <div class="column col-6">
+                    <div class="avatar avatar-xl" data-initial="YZ" style="background-color: #5764c6;"></div>
+                    <div class="avatar avatar-lg" data-initial="YZ" style="background-color: #32b643;"></div>
+                    <div class="avatar" data-initial="YZ" style="background-color: #0193eb;"></div>
+                    <div class="avatar avatar-sm" data-initial="YZ" style="background-color: #ffb700;"></div>
+                    <div class="avatar avatar-xs" data-initial="YZ" style="background-color: #e85600;"></div>
+                </div>
+            </div>
+        </section>
+
+        <section id="tooltips">
+            <header class="text-center"><h4>tooltips</h4></header>
+            <section>
+                <p><strong>tooltips.less</strong> is built entirely in CSS. </p>
+            </section>
+            <div class="columns">
+                <div class="column">
+                    <button class="btn tooltip" data-tooltip="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante." data-tooltip-pos="top">top tooltip</button>
+                </div>
+                <div class="column">
+                    <button class="btn tooltip" data-tooltip="Lorem ipsum dolor sit amet" data-tooltip-pos="right">right tooltip</button>
+                </div>
+                <div class="column">
+                    <button class="btn tooltip" data-tooltip="Lorem ipsum dolor sit amet" data-tooltip-pos="bottom">bottom tooltip</button>
+                </div>
+                <div class="column">
+                    <button class="btn tooltip" data-tooltip="Lorem ipsum dolor sit amet" data-tooltip-pos="left">left tooltip</button>
+                </div>
+            </div>
+        </section>
+
         <section id="labels">
             <header class="text-center"><h4>labels</h4></header>
             <div class="columns">
@@ -396,13 +425,14 @@
                 </div>
             </div>
         </section>
+
         <section id="toasts">
             <header class="text-center"><h4>toasts</h4></header>
             <div class="columns">
                 <div class="column">
                     <div class="toast">
                         <button class="btn-clear pull-right"></button>
-                        Here's a bunch of numbers. They may look random but they're my phone numbers.
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                     </div>
                 </div>
                 <div class="column">
@@ -435,6 +465,7 @@
                 </div>
             </div>
         </section>
+
         <section id="menus">
             <header class="text-center"><h4>menus</h4></header>
             <div class="columns">
@@ -482,6 +513,7 @@
                 </div>
             </div>
         </section>
+
         <section id="breadcrumbs">
             <header class="text-center"><h4>breadcrumbs</h4></header>
             <div class="columns">
@@ -506,6 +538,7 @@
                 </div>
             </div>
         </section>
+
         <section id="tabs">
             <header class="text-center"><h4>tabs</h4></header>
             <div class="columns">
@@ -559,6 +592,7 @@
                 </div>
             </div>
         </section>
+
         <section id="badges">
             <header class="text-center"><h4>badges</h4></header>
             <div class="columns">
@@ -584,6 +618,7 @@
                 </div>
             </div>
         </section>
+
         <section id="modals">
             <header class="text-center"><h4>modals</h4></header>
             <div class="columns">