add avatars code

10 files changed, 250 insertions, 132 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">
diff --git a/dist/spectre.css b/dist/spectre.css
index 0d20d3f..18bf8ad 100644
--- a/dist/spectre.css
+++ b/dist/spectre.css
@@ -391,7 +391,7 @@ body {
   background-color: #fff;
 }
 a {
-  color: #5764C6;
+  color: #5764c6;
   text-decoration: underline;
 }
 a:hover,
@@ -632,10 +632,10 @@ button {
   display: inline-block;
   height: 3.2rem;
   padding: .7rem 1.5rem;
-  border: 0.1rem solid #5764C6;
+  border: 0.1rem solid #5764c6;
   background-color: transparent;
   border-radius: 3px;
-  color: #5764C6;
+  color: #5764c6;
   font-size: 1.4rem;
   line-height: 1.6rem;
   text-align: center;
@@ -655,7 +655,7 @@ button:hover,
 .btn:focus,
 button:focus {
   color: #fff;
-  background-color: #5764C6;
+  background-color: #5764c6;
 }
 .btn:active,
 button:active,
@@ -672,7 +672,7 @@ button.loading {
 }
 .btn.loading::after,
 button.loading::after {
-  border: 2px solid #5764C6;
+  border: 2px solid #5764c6;
   border-right-color: transparent;
   border-top-color: transparent;
   border-radius: 8px;
@@ -697,7 +697,7 @@ button[disabled] {
 button.btn-primary {
   color: #fff;
   border-color: #4452c0;
-  background-color: #5764C6;
+  background-color: #5764c6;
 }
 .btn.btn-primary:hover,
 button.btn-primary:hover,
@@ -723,7 +723,7 @@ button.btn-primary.loading::after {
 }
 .btn.btn-link,
 button.btn-link {
-  color: #5764C6;
+  color: #5764c6;
   border-color: transparent;
   background-color: transparent;
 }
@@ -879,7 +879,7 @@ button.btn-clear::after {
   outline: 0;
 }
 .form-input:focus {
-  border-color: #5764C6;
+  border-color: #5764c6;
 }
 .form-input[disabled] {
   opacity: .75;
@@ -909,11 +909,11 @@ textarea.form-input {
 }
 .has-success .form-input,
 .form-input.input-success {
-  border-color: #32B643;
+  border-color: #32b643;
 }
 .has-danger .form-input,
 .form-input.input-danger {
-  border-color: #E85600;
+  border-color: #e85600;
 }
 .form-label {
   display: block;
@@ -931,7 +931,7 @@ textarea.form-input {
   outline: 0;
 }
 .form-select:focus {
-  border-color: #5764C6;
+  border-color: #5764c6;
 }
 .form-select.select-sm {
   height: 2.4rem;
@@ -971,8 +971,8 @@ textarea.form-input {
 }
 .form-checkbox input:checked,
 .form-radio input:checked {
-  background-color: #5764C6;
-  border-color: #5764C6;
+  background-color: #5764c6;
+  border-color: #5764c6;
 }
 .form-checkbox input {
   border-radius: .2rem;
@@ -1045,50 +1045,52 @@ textarea.form-input {
   transition: left .15s ease;
 }
 .form-switch input:checked {
-  background-color: #5764C6;
-  border-color: #5764C6;
+  background-color: #5764c6;
+  border-color: #5764c6;
 }
 .form-switch input:checked::after {
   left: 1.2rem;
   background-color: #fff;
 }
-.label {
+.avatar {
   display: inline-block;
-  padding: .3rem .5rem;
-  font-size: 80%;
+  width: 3.2rem;
+  height: 3.2rem;
+  font-size: 1.4rem;
+  font-weight: 300;
   line-height: 1;
-  color: #666;
-  background-color: #efefef;
-  text-align: center;
-  white-space: nowrap;
+  border-radius: 50%;
   vertical-align: middle;
-  margin: -0.3rem 0.5rem 0 0.5rem;
-  border-radius: .2rem;
-}
-.label.label-primary {
-  color: #fff;
-  background-color: #5764C6;
+  position: relative;
 }
-.label.label-success {
+.avatar::after {
+  content: attr(data-initial);
+  position: absolute;
+  top: 50%;
+  left: 50%;
   color: #fff;
-  background-color: #32B643;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
 }
-.label.label-info {
-  color: #fff;
-  background-color: #0193eb;
+.avatar.avatar-xs {
+  width: 1.6rem;
+  height: 1.6rem;
+  font-size: .8rem;
 }
-.label.label-warning {
-  color: #fff;
-  background-color: #ffb700;
+.avatar.avatar-sm {
+  width: 2.4rem;
+  height: 2.4rem;
+  font-size: 1rem;
 }
-.label.label-danger {
-  color: #fff;
-  background-color: #E85600;
+.avatar.avatar-lg {
+  width: 4.8rem;
+  height: 4.8rem;
+  font-size: 2rem;
 }
-.label.label-lg {
-  font-size: 100%;
-  line-height: 1.2;
-  padding: .3rem .8rem;
+.avatar.avatar-xl {
+  width: 6.4rem;
+  height: 6.4rem;
+  font-size: 2.6rem;
 }
 .badge {
   position: relative;
@@ -1100,7 +1102,7 @@ textarea.form-input {
   font-size: 1.2rem;
   text-align: center;
   line-height: 1.4rem;
-  background-color: #5764C6;
+  background-color: #5764c6;
   display: block;
   width: 2rem;
   height: 2rem;
@@ -1113,39 +1115,43 @@ textarea.form-input {
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.toast {
-  display: block;
-  width: 100%;
-  padding: 1.4rem;
+.label {
+  display: inline-block;
+  padding: .3rem .5rem;
+  font-size: 80%;
+  line-height: 1;
   color: #666;
-  border: 0.1rem solid #eaeaea;
-  border-radius: .3rem;
   background-color: #efefef;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  margin: -0.3rem 0.5rem 0 0.5rem;
+  border-radius: .2rem;
 }
-.toast.toast-primary {
+.label.label-primary {
   color: #fff;
-  background-color: #5764C6;
-  border-color: #4f5dc3;
+  background-color: #5764c6;
 }
-.toast.toast-success {
+.label.label-success {
   color: #fff;
-  background-color: #32B643;
-  border-color: #30ae40;
+  background-color: #32b643;
 }
-.toast.toast-info {
+.label.label-info {
   color: #fff;
   background-color: #0193eb;
-  border-color: #018de1;
 }
-.toast.toast-warning {
+.label.label-warning {
   color: #fff;
   background-color: #ffb700;
-  border-color: #f5b000;
 }
-.toast.toast-danger {
+.label.label-danger {
   color: #fff;
-  background-color: #E85600;
-  border-color: #de5200;
+  background-color: #e85600;
+}
+.label.label-lg {
+  font-size: 100%;
+  line-height: 1.2;
+  padding: .3rem .8rem;
 }
 .menu {
   display: block;
@@ -1212,6 +1218,37 @@ textarea.form-input {
   border-bottom: 0.1rem solid #efefef;
   margin: .5rem;
 }
+.modal {
+  width: 50vw;
+  text-align: left;
+  margin: 0;
+  padding: 0;
+  border-radius: .3rem;
+  background-color: #fff;
+  z-index: 999;
+  box-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.3);
+  display: block;
+  float: none;
+  margin-left: auto;
+  margin-right: auto;
+}
+.modal .modal-header {
+  padding: 1.5rem;
+  border-bottom: 1px solid #efefef;
+}
+.modal .modal-header .modal-title {
+  margin: 0;
+}
+.modal .modal-body {
+  position: relative;
+  padding: 1.5rem;
+  max-height: 50vh;
+  overflow-y: auto;
+}
+.modal .modal-footer {
+  padding: 1.5rem;
+  text-align: right;
+}
 .breadcrumb {
   list-style: none;
   margin: .5rem 0;
@@ -1263,11 +1300,11 @@ textarea.form-input {
 }
 .tab .tab-item:hover,
 .tab .tab-item:focus {
-  border-bottom-color: #5764C6;
+  border-bottom-color: #5764c6;
 }
 .tab .tab-item:hover a,
 .tab .tab-item:focus a {
-  color: #5764C6;
+  color: #5764c6;
 }
 .tab .tab-item.active {
   border-bottom-color: #3b49af;
@@ -1289,36 +1326,39 @@ textarea.form-input {
           flex: 1;
   text-align: center;
 }
-.modal {
-  width: 50vw;
-  text-align: left;
-  margin: 0;
-  padding: 0;
-  border-radius: .3rem;
-  background-color: #fff;
-  z-index: 999;
-  box-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.3);
+.toast {
   display: block;
-  float: none;
-  margin-left: auto;
-  margin-right: auto;
+  width: 100%;
+  padding: 1.4rem;
+  color: #666;
+  border: 0.1rem solid #eaeaea;
+  border-radius: .3rem;
+  background-color: #efefef;
 }
-.modal .modal-header {
-  padding: 1.5rem;
-  border-bottom: 1px solid #efefef;
+.toast.toast-primary {
+  color: #fff;
+  background-color: #5764c6;
+  border-color: #4f5dc3;
 }
-.modal .modal-header .modal-title {
-  margin: 0;
+.toast.toast-success {
+  color: #fff;
+  background-color: #32b643;
+  border-color: #30ae40;
 }
-.modal .modal-body {
-  position: relative;
-  padding: 1.5rem;
-  max-height: 50vh;
-  overflow-y: auto;
+.toast.toast-info {
+  color: #fff;
+  background-color: #0193eb;
+  border-color: #018de1;
 }
-.modal .modal-footer {
-  padding: 1.5rem;
-  text-align: right;
+.toast.toast-warning {
+  color: #fff;
+  background-color: #ffb700;
+  border-color: #f5b000;
+}
+.toast.toast-danger {
+  color: #fff;
+  background-color: #e85600;
+  border-color: #de5200;
 }
 .tooltip {
   position: relative;
diff --git a/spectre.less b/spectre.less
index dd185df..d067ee2 100644
--- a/spectre.less
+++ b/spectre.less
@@ -17,14 +17,15 @@
 @import 'src/forms.less';
 
 // Components
-@import 'src/labels.less';
+@import 'src/avatars.less';
 @import 'src/badges.less';
-@import 'src/toasts.less';
+@import 'src/labels.less';
 @import 'src/menus.less';
-@import 'src/navigation.less';
-//@import 'src/cards.less';
 @import 'src/modals.less';
+@import 'src/navigation.less';
+@import 'src/toasts.less';
 @import 'src/tooltips.less';
+//@import 'src/cards.less';
 //@import 'src/animations.less';
 
 // Utility classes
diff --git a/src/avatars.less b/src/avatars.less
new file mode 100644
index 0000000..1576698
--- /dev/null
+++ b/src/avatars.less
@@ -0,0 +1,42 @@
+// Avatars
+.avatar {
+  display: inline-block;
+  width: 3.2rem;
+  height: 3.2rem;
+  font-size: 1.4rem;
+  font-weight: 300;
+  line-height: 1;
+  border-radius: 50%;
+  vertical-align: middle;
+  position: relative;
+
+  &::after {
+    content: attr(data-initial);
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    color: #fff;
+    transform: translate(-50%, -50%);
+  }
+
+  &.avatar-xs {
+    width: 1.6rem;
+    height: 1.6rem;
+    font-size: .8rem;
+  }
+  &.avatar-sm {
+    width: 2.4rem;
+    height: 2.4rem;
+    font-size: 1rem;
+  }
+  &.avatar-lg {
+    width: 4.8rem;
+    height: 4.8rem;
+    font-size: 2rem;
+  }
+  &.avatar-xl {
+    width: 6.4rem;
+    height: 6.4rem;
+    font-size: 2.6rem;
+  }
+}
\ No newline at end of file
diff --git a/src/variables.less b/src/variables.less
index 23220df..14882ae 100644
--- a/src/variables.less
+++ b/src/variables.less
@@ -7,14 +7,14 @@
 @body-font-family: "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", WenQuanYi Micro Hei, sans-serif;
 
 // Colors
-@core-color: #5764C6;
-@core-link-color: #5764C6;
+@core-color: #5764c6;
+@core-link-color: #5764c6;
 @core-border-color: #efefef;
 @control-color: #c5c5c5;
-@control-color-success: #32B643;
+@control-color-success: #32b643;
 @control-color-info: #0193eb;
 @control-color-warning: #ffb700;
-@control-color-danger: #E85600;
+@control-color-danger: #e85600;
 
 
 // Mixins