Merge branch 'master' into gh-pages

18 files changed, 456 insertions, 169 deletions

diff --git a/README.md b/README.md
index e782f7b..6ba5e56 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,12 @@
 # Spectre
-Spectre, a lightweight and clean CSS framework for faster and extendable development.
+Spectre is a lightweight and clean CSS framework for faster and extendable development.
 
 * lightweight and clean starting point for your project
 * flexbox and responsive layout friendly
-* built in components and utilities
+* built in CSS components and utilities
+
+Spectre is a side project based on years of CSS development work on a large web service project. Spectre only includes modern base CSS styles, layout system, CSS components and utilities, and it can be modified for your project with LESS compiler.
+
+The documentation is still being written carefully, you can look into [the demo page](http://picturepan2.github.io/spectre/) for most usages and demos. Feel free to submit a pull request. Help is always appreciated.
+
+Currently maintained by [Yan Zhu](https://twitter.com/picturepan2).
\ No newline at end of file
diff --git a/demo/img/apple-el-capitan.jpg b/demo/img/apple-el-capitan.jpg
deleted file mode 100644
index f469599..0000000
--- a/demo/img/apple-el-capitan.jpg
+++ /dev/null
diff --git a/demo/img/osx-el-capitan-2.jpg b/demo/img/osx-el-capitan-2.jpg
new file mode 100644
index 0000000..6e56bff
--- /dev/null
+++ b/demo/img/osx-el-capitan-2.jpg
diff --git a/demo/img/osx-el-capitan.jpg b/demo/img/osx-el-capitan.jpg
new file mode 100644
index 0000000..7337afb
--- /dev/null
+++ b/demo/img/osx-el-capitan.jpg
diff --git a/demo/img/osx-yosemite-2.jpg b/demo/img/osx-yosemite-2.jpg
new file mode 100644
index 0000000..0b5befa
--- /dev/null
+++ b/demo/img/osx-yosemite-2.jpg
diff --git a/demo/img/osx-yosemite.jpg b/demo/img/osx-yosemite.jpg
new file mode 100644
index 0000000..80b1cb1
--- /dev/null
+++ b/demo/img/osx-yosemite.jpg
diff --git a/demo/index.html b/demo/index.html
index 8e501af..767a41a 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -7,13 +7,18 @@
     <link rel="stylesheet" href="font/style.css">
     <style>
         header > h4 {
-            margin-top: 4rem;
+            margin-top: 6rem;
+            margin-bottom: 2rem;
         }
         .bg-grey {
             background-color: #efefef;
             padding: 1rem;
             border-radius: .3rem;
         }
+        .notes {
+            margin: 2rem 0;
+            color: #666;
+        }
     </style>
 </head>
 <body>
@@ -21,8 +26,8 @@
         <section id="overview">
             <header class="text-center"><h3>Project Spectre</h3></header>
             <header class="text-center"><h4>introduction</h4></header>
-            <section>
-                <p><strong>Project Spectre</strong> is a lightweight and clean CSS framework for faster and extendable development.</p>
+            <section class="notes">
+                <p><a href="https://github.com/picturepan2/spectre" target="_blank">Project Spectre</a> is a lightweight and clean CSS framework for faster and extendable development.</p>
                 <ul>
                     <li>lightweight and clean starting point for your project</li>
                     <li>flexbox and responsive layout friendly</li>
@@ -33,7 +38,7 @@
 
         <section id="typography">
             <header class="text-center"><h4>typography</h4></header>
-            <section>
+            <section class="notes">
                 <p><strong>typography.less</strong> sets default styles for headings, paragraphs, blockquote, lists elements and some text related utilities. </p>
             </section>
 
@@ -89,8 +94,9 @@
 
         <section id="layout">
             <header class="text-center"><h4>flexbox layout</h4></header>
-            <section>
+            <section class="notes">
                 <p><strong>layout.less</strong> includes flexbox based grid system with 12 columns. </p>
+                <p>Add the class <span class="label">columns</span> to a container. Add any element you want with class <span class="label">column</span> inside the container. These columns will take up the space equally. You can specific the width of each column by adding class <span class="label">col-[1-12]</span>.</p>
             </section>
             <div class="columns">
                 <div class="column">
@@ -144,7 +150,11 @@
 
         <section id="tables">
             <header class="text-center"><h4>tables</h4></header>
-            <table>
+            <section class="notes">
+                <p><strong>tables.less</strong> sets default styles for tables and data sets.</p>
+                <p>Add the class <span class="label">&lt;table&gt;</span> to any table element. The class will add padding, border and emphasized table header. Adding the class <span class="label">selected</span> to a &lt;tr&gt; element will highlight the whole table row. </p>
+            </section>
+            <table class="table">
                 <thead>
                     <tr>
                         <th>name</th>
@@ -184,8 +194,9 @@
 
         <section id="buttons">
             <header class="text-center"><h4>buttons</h4></header>
-            <section>
-                <p><strong>buttons.less</strong> includes simple button style for actions in different types and sizes. Buttons can show loading indicators. </p>
+            <section class="notes">
+                <p><strong>buttons.less</strong> includes simple button style for actions in different types and sizes. </p>
+                <p>Add the class <span class="label">btn</span> to &lt;a&gt;, &lt;input&gt; or &lt;button&gt; elements for a default button. There are classes <span class="label">btn-primary</span> and <span class="label">btn-link</span> for predefined primary and link buttons. A button with the class <span class="label">loading</span> can show loading indicator.  </p>
             </section>
             <div class="columns">
                 <div class="column">
@@ -197,16 +208,19 @@
                     <button class="btn btn-link loading">link button</button>
                 </div>
             </div>
+            <header class="text-center"><h5>button sizes</h5></header>
+            <section class="notes">
+                <p>Add the class <span class="label">btn-sm</span> or <span class="label">btn-lg</span> for small or large size. Also, you can add the class <span class="label">btn-block</span> for a full-width button.</p>
+            </section>
             <div class="columns">
                 <div class="column">
-                    <button class="btn btn-sm">small button</button>
-                    <button class="btn btn-sm"><span class="icon icon-markunread"></span> small button</button>
-                    <button class="btn">normal button</button>
-                    <button class="btn"><span class="icon icon-markunread"></span> normal button</button>
                     <button class="btn btn-lg">large button</button>
                     <button class="btn btn-lg"><span class="icon icon-markunread"></span> large button</button>
+                    <button class="btn btn-primary">normal button</button>
+                    <button class="btn btn-primary"><span class="icon icon-markunread"></span> normal button</button>
+                    <button class="btn btn-sm">small button</button>
+                    <button class="btn btn-sm"><span class="icon icon-markunread"></span> small button</button>
                 </div>
-
             </div>
             <div class="columns">
                 <div class="column">
@@ -217,6 +231,9 @@
 
         <section id="button-groups">
             <header class="text-center"><h4>button groups</h4></header>
+            <section class="notes">
+                <p>If you want to use buttons as a group, add the class <span class="label">btn-group</span> to the container. </p>
+            </section>
             <div class="columns">
                 <div class="column">
                     <div class="btn-group">
@@ -226,7 +243,7 @@
                     </div>
                 </div>
                 <div class="column">
-                    <div class="btn-group">
+                    <div class="btn-group btn-group-block">
                         <button class="btn btn-primary">first button</button>
                         <button class="btn btn-primary">second button</button>
                         <button class="btn btn-primary">third button</button>
@@ -383,7 +400,10 @@
             <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" />
+                    <img src="img/osx-el-capitan.jpg" class="img-responsive rounded" />
+                </div>
+                <div class="column col-6">
+                    <img src="img/osx-el-capitan-2.jpg" class="img-responsive rounded" />
                 </div>
             </div>
         </section>
@@ -479,7 +499,7 @@
 
         <section id="fileicons">
             <header class="text-center"><h4>file icons</h4></header>
-            <section>
+            <section class="notes">
                 <p><strong>fileicons.less</strong> includes a set of file icons. This part is written entirely in CSS as well. </p>
             </section>
             <div class="columns">
@@ -498,21 +518,23 @@
 
         <section id="tooltips">
             <header class="text-center"><h4>tooltips</h4></header>
-            <section>
-                <p><strong>tooltips.less</strong> is built entirely in CSS. </p>
+            <section class="notes">
+                <p><strong>tooltips.less</strong> is a label-like component that appears on hover and focus.</p>
+                <p>Add the class <span class="label">tooltip</span> and the attribute <span class="label">data-tooltip</span>, which contains the tooltip content, to non self closing elements. And add the class name <span class="label">tooltip-right</span>, <span class="label">tooltip-bottom</span> or <span class="label">tooltip-left</span> to define the position of a tooltip. By default, the tooltip appears above the element.</p>
+                <code>&lt;button class=&quot;btn btn-primary tooltip tooltip-right&quot; data-tooltip=&quot;Lorem ipsum dolor sit amet&quot;&gt;right tooltip&lt;/button&gt;</code>
             </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>
+                    <button class="btn btn-primary 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>
+                    <button class="btn btn-primary tooltip tooltip-right" data-tooltip="Lorem ipsum dolor sit amet">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>
+                    <button class="btn btn-primary tooltip tooltip-bottom" data-tooltip="Lorem ipsum dolor sit amet">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>
+                    <button class="btn btn-primary tooltip tooltip-left" data-tooltip="Lorem ipsum dolor sit amet">left tooltip</button>
                 </div>
             </div>
         </section>
@@ -552,13 +574,13 @@
             <div class="columns">
                 <div class="column">
                     <div class="toast">
-                        <button class="btn-clear pull-right"></button>
+                        <button class="btn btn-clear pull-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-primary">
-                        <button class="btn-clear pull-right"></button>
+                        <button class="btn btn-clear pull-right"></button>
                         <span class="icon icon-error_outline"></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                     </div>
                 </div>
@@ -566,25 +588,25 @@
             <div class="columns">
                 <div class="column">
                     <div class="toast toast-success">
-                        <button class="btn-clear pull-right"></button>
+                        <button class="btn btn-clear pull-right"></button>
                         Efficiently unleash cross-media information without cross-media value.
                     </div>
                 </div>
                 <div class="column">
                     <div class="toast toast-info">
-                        <button class="btn-clear pull-right"></button>
+                        <button class="btn btn-clear pull-right"></button>
                         Efficiently unleash cross-media information without cross-media value.
                     </div>
                 </div>
                 <div class="column">
                     <div class="toast toast-warning">
-                        <button class="btn-clear pull-right"></button>
+                        <button class="btn btn-clear pull-right"></button>
                         Efficiently unleash cross-media information without cross-media value.
                     </div>
                 </div>
                 <div class="column">
                     <div class="toast toast-danger">
-                        <button class="btn-clear pull-right"></button>
+                        <button class="btn btn-clear pull-right"></button>
                         Efficiently unleash cross-media information without cross-media value.
                     </div>
                 </div>
@@ -781,20 +803,21 @@
                                     <p>
                                         This is the content inside the modal.
                                     </p>
-                                    <h3>Lorem ipsum</h3>
+                                    <h4>Lorem ipsum</h4>
                                     <p>
                                         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.
                                     </p>
                                     <p>
                                         Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.
                                     </p>
-                                    <h3>Cupcake ipsum</h3>
+                                    <h4>Cupcake ipsum</h4>
                                     <p>
                                         Jelly-o sesame snaps halvah croissant oat cake cookie. Cheesecake bear claw topping. Chupa chups apple pie carrot cake chocolate cake caramels.
                                     </p>
                                     <p>
                                         De braaaiiiins apocalypsi gorger omero prefrontal cortex undead survivor fornix dictum mauris. Hi brains mindless mortuis limbic cortex soulless creaturas optic nerve.
                                     </p>
+                                    <h4>Candy ipsum</h4>
                                     <p>
                                         Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar.
                                     </p>
@@ -812,6 +835,63 @@
                 </div>
             </div>
         </section>
+        <section id="cards">
+            <header class="text-center"><h4>cards</h4></header>
+            <div class="columns">
+                <div class="column col-4">
+                    <div class="card">
+                        <div class="card-image">
+                            <img class="img-responsive" src="img/osx-el-capitan.jpg" />
+                        </div>
+                        <div class="card-header">
+                            <h4 class="card-title">Microsoft</h4>
+                            <h6 class="card-meta">Software and hardware</h6>
+                        </div>
+                        <div class="card-content">
+                            Empower every person and every organization on the planet to achieve more.
+                        </div>
+                        <div class="card-footer">
+                            <a href="#" class="btn btn-primary">Do</a>
+                        </div>
+                    </div>
+                </div>
+                <div class="column col-4">
+                    <div class="card">
+                        <div class="card-header">
+                            <h4 class="card-title">Apple</h4>
+                            <h6 class="card-meta">Hardware and software</h6>
+                        </div>
+                        <div class="card-image">
+                            <img class="img-responsive" src="img/osx-yosemite.jpg" />
+                        </div>
+                        <div class="card-content">
+                            To make a contribution to the world by making tools for the mind that advance humankind.
+                        </div>
+                        <div class="card-footer">
+                            <div class="btn-group btn-group-block">
+                                <button class="btn">Buy</button>
+                                <button class="btn">Buy</button>
+                                <button class="btn">Buy</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="column col-4">
+                    <div class="card">
+                        <div class="card-header">
+                            <h4 class="card-title">Google</h4>
+                            <h6 class="card-meta">Software and hardware</h6>
+                        </div>
+                        <div class="card-content">
+                            Organize the world’s information and make it universally accessible and useful.
+                        </div>
+                        <div class="card-footer">
+                            <a href="#" class="btn btn-primary">Ad</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
     </section>
 </body>
 </html>
\ No newline at end of file
diff --git a/dist/spectre.css b/dist/spectre.css
index da78888..5f698ed 100644
--- a/dist/spectre.css
+++ b/dist/spectre.css
@@ -455,6 +455,24 @@ blockquote p:last-child {
 blockquote small {
   color: #b3b3b3;
 }
+code,
+pre {
+  display: block;
+  margin-top: 1em;
+  margin-bottom: 1em;
+  border-left: 0.2rem solid #5764c6;
+  line-height: 1.8rem;
+  background-color: #f9f9f9;
+}
+code {
+  padding: 1rem 2rem;
+}
+pre code {
+  background-color: transparent;
+  border-left: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
 ul,
 ol {
   margin: 0 0 1rem;
@@ -621,23 +639,22 @@ ol ol {
   max-width: 100%;
   height: auto;
 }
-table {
+.table {
   width: 100%;
 }
-table th,
-table td {
+.table th,
+.table td {
   text-align: left;
   padding: 1.5rem 1rem;
   border-bottom: 0.1rem solid #efefef;
 }
-table th {
+.table th {
   border-color: #c9c9c9;
 }
-table tr.selected {
+.table tr.selected {
   background-color: #f4f4f4;
 }
-.btn,
-button {
+.btn {
   display: inline-block;
   height: 3.2rem;
   padding: .7rem 1.5rem;
@@ -660,27 +677,21 @@ button {
   outline: 0;
 }
 .btn:hover,
-button:hover,
-.btn:focus,
-button:focus {
+.btn:focus {
   color: #fff;
   background-color: #5764c6;
 }
 .btn:active,
-button:active,
-.btn.active,
-button.active {
+.btn.active {
   color: #fff;
   background-color: #4452c0;
 }
-.btn.loading,
-button.loading {
+.btn.loading {
   color: transparent !important;
   position: relative;
   pointer-events: none;
 }
-.btn.loading::after,
-button.loading::after {
+.btn.loading::after {
   border: 2px solid #5764c6;
   border-right-color: transparent;
   border-top-color: transparent;
@@ -698,79 +709,64 @@ button.loading::after {
           animation: loading 500ms infinite linear;
 }
 .btn[disabled],
-button[disabled] {
+.btn .disabled {
   opacity: .5;
   cursor: default;
 }
-.btn.btn-primary,
-button.btn-primary {
+.btn.btn-primary {
   color: #fff;
   border-color: #4452c0;
   background-color: #5764c6;
 }
 .btn.btn-primary:hover,
-button.btn-primary:hover,
-.btn.btn-primary:focus,
-button.btn-primary:focus {
+.btn.btn-primary:focus {
   color: #fff;
   border-color: #3b49af;
   background-color: #4452c0;
 }
 .btn.btn-primary:active,
-button.btn-primary:active,
-.btn.btn-primary.active,
-button.btn-primary.active {
+.btn.btn-primary.active {
   color: #fff;
   border-color: #3b49af;
   background-color: #3b49af;
 }
-.btn.btn-primary.loading::after,
-button.btn-primary.loading::after {
+.btn.btn-primary.loading::after {
   border-color: #fff;
   border-right-color: transparent;
   border-top-color: transparent;
 }
-.btn.btn-link,
-button.btn-link {
+.btn.btn-link {
   color: #5764c6;
   border-color: transparent;
   background-color: transparent;
 }
 .btn.btn-link:hover,
-button.btn-link:hover,
-.btn.btn-link:focus,
-button.btn-link:focus {
+.btn.btn-link:focus {
   color: #35419c;
 }
 .btn.btn-link:active,
-button.btn-link:active,
-.btn.btn-link.active,
-button.btn-link.active {
+.btn.btn-link.active {
   color: #283176;
 }
-.btn.btn-sm,
-button.btn-sm {
+.btn.btn-sm {
   height: 2.4rem;
   border-radius: 2px;
   font-size: 1.2rem;
   line-height: 1.4rem;
   padding: .4rem 1rem;
 }
-.btn.btn-lg,
-button.btn-lg {
+.btn.btn-lg {
   height: 4.2rem;
   border-radius: 4px;
   font-size: 1.8rem;
   line-height: 2rem;
   padding: 1rem 1.8rem;
 }
-.btn.btn-block,
-button.btn-block {
+.btn.btn-block {
   width: 100%;
   display: block;
 }
-.btn.btn-clear,
-button.btn-clear {
+.btn.btn-clear {
   width: 1.4rem;
   height: 1.4rem;
   padding: 0;
@@ -783,14 +779,11 @@ button.btn-clear {
   -webkit-transform: rotate(-45deg);
           transform: rotate(-45deg);
 }
-.btn.btn-clear:hover,
-button.btn-clear:hover {
+.btn.btn-clear:hover {
   opacity: .75;
 }
 .btn.btn-clear::before,
-button.btn-clear::before,
-.btn.btn-clear::after,
-button.btn-clear::after {
+.btn.btn-clear::after {
   content: "";
   display: block;
   position: absolute;
@@ -798,36 +791,29 @@ button.btn-clear::after {
   left: 50%;
   background-color: #333;
 }
-.btn.btn-clear::before,
-button.btn-clear::before {
+.btn.btn-clear::before {
   width: 1rem;
   height: .2rem;
   margin-left: -0.5rem;
   margin-top: -0.1rem;
 }
-.btn.btn-clear::after,
-button.btn-clear::after {
+.btn.btn-clear::after {
   width: .2rem;
   height: 1rem;
   margin-left: -0.1rem;
   margin-top: -0.5rem;
 }
 .btn-group {
-  display: inline-block;
-  vertical-align: middle;
-}
-.btn-group::after {
-  content: "";
-  display: table;
-  clear: both;
-}
-.btn-group::after {
-  content: "";
-  display: table;
-  clear: both;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
 }
 .btn-group .btn {
-  float: left;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1 0 auto;
+      -ms-flex: 1 0 auto;
+          flex: 1 0 auto;
 }
 .btn-group .btn:first-child:not(:last-child) {
   border-top-right-radius: 0;
@@ -844,6 +830,12 @@ button.btn-clear::after {
   border-bottom-left-radius: 0;
   z-index: 99;
 }
+.btn-group.btn-group-block {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
 .form-group:not(:last-child) {
   margin-bottom: 1rem;
 }
@@ -1075,6 +1067,13 @@ textarea.form-input {
   border-radius: .3rem;
   background-color: #efefef;
 }
+.input-group .input-group-addon,
+.input-group .input-group-btn {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1 0 auto;
+      -ms-flex: 1 0 auto;
+          flex: 1 0 auto;
+}
 .input-group .form-input:first-child:not(:last-child),
 .input-group .input-group-addon:first-child:not(:last-child),
 .input-group .input-group-btn:first-child:not(:last-child) {
@@ -1181,6 +1180,51 @@ textarea.form-input {
   overflow: hidden;
   text-overflow: ellipsis;
 }
+.card {
+  display: block;
+  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);
+}
+.card .card-header,
+.card .card-image,
+.card .card-content,
+.card .card-footer {
+  padding: 1.5rem 1.5rem 0 1.5rem;
+}
+.card .card-header:last-child,
+.card .card-image:last-child,
+.card .card-content:last-child,
+.card .card-footer:last-child {
+  padding-bottom: 1.5rem;
+}
+.card .card-image {
+  padding-left: 0;
+  padding-right: 0;
+}
+.card .card-image:first-child {
+  padding-top: 0;
+}
+.card .card-image:first-child img {
+  border-top-left-radius: .3rem;
+  border-top-right-radius: .3rem;
+}
+.card .card-title {
+  margin-top: 0;
+  margin-bottom: .5rem;
+  font-size: 1.6em;
+  line-height: 1;
+}
+.card .card-meta {
+  margin-top: 0;
+  margin-bottom: 0;
+  font-size: 1em;
+  color: #b3b3b3;
+}
 .chip {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -1310,15 +1354,15 @@ textarea.form-input {
 }
 .label {
   display: inline-block;
-  padding: .3rem .5rem;
-  font-size: 80%;
-  line-height: 1;
-  color: #666;
+  padding: .3rem .4rem;
+  font-size: 90%;
+  line-height: 1em;
+  color: #737373;
   background-color: #efefef;
   text-align: center;
   white-space: nowrap;
   vertical-align: middle;
-  margin: -0.3rem 0.5rem 0 0.5rem;
+  margin: -0.3rem 0.1em 0 0.1em;
   border-radius: .2rem;
 }
 .label.label-primary {
@@ -1344,7 +1388,7 @@ textarea.form-input {
 .label.label-lg {
   font-size: 100%;
   line-height: 1.2;
-  padding: .3rem .8rem;
+  padding: .3rem .5rem;
 }
 .menu {
   display: block;
@@ -1519,9 +1563,9 @@ textarea.form-input {
 .tab.tab-block .tab-item {
   float: none;
   -webkit-box-flex: 1;
-  -webkit-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
+  -webkit-flex: 1 0 auto;
+      -ms-flex: 1 0 auto;
+          flex: 1 0 auto;
   text-align: center;
 }
 .toast {
@@ -1584,39 +1628,43 @@ textarea.form-input {
   -webkit-transition: all .216s ease;
   transition: all .216s ease;
 }
-.tooltip:hover::after {
+.tooltip:hover::after,
+.tooltip:focus::after {
   opacity: 1;
   -webkit-transform: translate(-50%, -0.5rem);
           transform: translate(-50%, -0.5rem);
 }
-.tooltip[data-tooltip-pos="right"]::after {
+.tooltip.tooltip-right::after {
   bottom: 50%;
   left: 100%;
   -webkit-transform: translate(0, 50%);
           transform: translate(0, 50%);
 }
-.tooltip[data-tooltip-pos="right"]:hover::after {
+.tooltip.tooltip-right:hover::after,
+.tooltip.tooltip-right:focus::after {
   -webkit-transform: translate(0.5rem, 50%);
           transform: translate(0.5rem, 50%);
 }
-.tooltip[data-tooltip-pos="bottom"]::after {
+.tooltip.tooltip-bottom::after {
   top: 100%;
   bottom: auto;
   -webkit-transform: translate(-50%, 0);
           transform: translate(-50%, 0);
 }
-.tooltip[data-tooltip-pos="bottom"]:hover::after {
+.tooltip.tooltip-bottom:hover::after,
+.tooltip.tooltip-bottom:focus::after {
   -webkit-transform: translate(-50%, 0.5rem);
           transform: translate(-50%, 0.5rem);
 }
-.tooltip[data-tooltip-pos="left"]::after {
+.tooltip.tooltip-left::after {
   right: 100%;
   bottom: 50%;
   left: auto;
   -webkit-transform: translate(0, 50%);
           transform: translate(0, 50%);
 }
-.tooltip[data-tooltip-pos="left"]:hover::after {
+.tooltip.tooltip-left:hover::after,
+.tooltip.tooltip-left:focus::after {
   -webkit-transform: translate(-0.5rem, 50%);
           transform: translate(-0.5rem, 50%);
 }
diff --git a/index.html b/index.html
index 82d9e97..79b3480 100644
--- a/index.html
+++ b/index.html
@@ -7,13 +7,18 @@
     <link rel="stylesheet" href="demo/font/style.css">
     <style>
         header > h4 {
-            margin-top: 4rem;
+            margin-top: 6rem;
+            margin-bottom: 2rem;
         }
         .bg-grey {
             background-color: #efefef;
             padding: 1rem;
             border-radius: .3rem;
         }
+        .notes {
+            margin: 2rem 0;
+            color: #666;
+        }
     </style>
 </head>
 <body>
@@ -21,7 +26,7 @@
     <section id="overview">
         <header class="text-center"><h3>Project Spectre</h3></header>
         <header class="text-center"><h4>introduction</h4></header>
-        <section>
+        <section class="notes">
             <p><a href="https://github.com/picturepan2/spectre" target="_blank">Project Spectre</a> is a lightweight and clean CSS framework for faster and extendable development.</p>
             <ul>
                 <li>lightweight and clean starting point for your project</li>
@@ -33,7 +38,7 @@
 
     <section id="typography">
         <header class="text-center"><h4>typography</h4></header>
-        <section>
+        <section class="notes">
             <p><strong>typography.less</strong> sets default styles for headings, paragraphs, blockquote, lists elements and some text related utilities. </p>
         </section>
 
@@ -89,8 +94,9 @@
 
     <section id="layout">
         <header class="text-center"><h4>flexbox layout</h4></header>
-        <section>
+        <section class="notes">
             <p><strong>layout.less</strong> includes flexbox based grid system with 12 columns. </p>
+            <p>Add the class <span class="label">columns</span> to a container. Add any element you want with class <span class="label">column</span> inside the container. These columns will take up the space equally. You can specific the width of each column by adding class <span class="label">col-[1-12]</span>.</p>
         </section>
         <div class="columns">
             <div class="column">
@@ -144,7 +150,11 @@
 
     <section id="tables">
         <header class="text-center"><h4>tables</h4></header>
-        <table>
+        <section class="notes">
+            <p><strong>tables.less</strong> sets default styles for tables and data sets.</p>
+            <p>Add the class <span class="label">&lt;table&gt;</span> to any table element. The class will add padding, border and emphasized table header. Adding the class <span class="label">selected</span> to a &lt;tr&gt; element will highlight the whole table row. </p>
+        </section>
+        <table class="table">
             <thead>
             <tr>
                 <th>name</th>
@@ -184,8 +194,9 @@
 
     <section id="buttons">
         <header class="text-center"><h4>buttons</h4></header>
-        <section>
-            <p><strong>buttons.less</strong> includes simple button style for actions in different types and sizes. Buttons can show loading indicators. </p>
+        <section class="notes">
+            <p><strong>buttons.less</strong> includes simple button style for actions in different types and sizes. </p>
+            <p>Add the class <span class="label">btn</span> to &lt;a&gt;, &lt;input&gt; or &lt;button&gt; elements for a default button. There are classes <span class="label">btn-primary</span> and <span class="label">btn-link</span> for predefined primary and link buttons. A button with the class <span class="label">loading</span> can show loading indicator.  </p>
         </section>
         <div class="columns">
             <div class="column">
@@ -197,16 +208,19 @@
                 <button class="btn btn-link loading">link button</button>
             </div>
         </div>
+        <header class="text-center"><h5>button sizes</h5></header>
+        <section class="notes">
+            <p>Add the class <span class="label">btn-sm</span> or <span class="label">btn-lg</span> for small or large size. Also, you can add the class <span class="label">btn-block</span> for a full-width button.</p>
+        </section>
         <div class="columns">
             <div class="column">
-                <button class="btn btn-sm">small button</button>
-                <button class="btn btn-sm"><span class="icon icon-markunread"></span> small button</button>
-                <button class="btn">normal button</button>
-                <button class="btn"><span class="icon icon-markunread"></span> normal button</button>
                 <button class="btn btn-lg">large button</button>
                 <button class="btn btn-lg"><span class="icon icon-markunread"></span> large button</button>
+                <button class="btn btn-primary">normal button</button>
+                <button class="btn btn-primary"><span class="icon icon-markunread"></span> normal button</button>
+                <button class="btn btn-sm">small button</button>
+                <button class="btn btn-sm"><span class="icon icon-markunread"></span> small button</button>
             </div>
-
         </div>
         <div class="columns">
             <div class="column">
@@ -217,6 +231,9 @@
 
     <section id="button-groups">
         <header class="text-center"><h4>button groups</h4></header>
+        <section class="notes">
+            <p>If you want to use buttons as a group, add the class <span class="label">btn-group</span> to the container. </p>
+        </section>
         <div class="columns">
             <div class="column">
                 <div class="btn-group">
@@ -226,7 +243,7 @@
                 </div>
             </div>
             <div class="column">
-                <div class="btn-group">
+                <div class="btn-group btn-group-block">
                     <button class="btn btn-primary">first button</button>
                     <button class="btn btn-primary">second button</button>
                     <button class="btn btn-primary">third button</button>
@@ -383,7 +400,10 @@
         <header class="text-center"><h4>media</h4></header>
         <div class="columns">
             <div class="column col-6">
-                <img src="demo/img/apple-el-capitan.jpg" class="img-responsive rounded" />
+                <img src="demo/img/osx-el-capitan.jpg" class="img-responsive rounded" />
+            </div>
+            <div class="column col-6">
+                <img src="demo/img/osx-el-capitan-2.jpg" class="img-responsive rounded" />
             </div>
         </div>
     </section>
@@ -479,7 +499,7 @@
 
     <section id="fileicons">
         <header class="text-center"><h4>file icons</h4></header>
-        <section>
+        <section class="notes">
             <p><strong>fileicons.less</strong> includes a set of file icons. This part is written entirely in CSS as well. </p>
         </section>
         <div class="columns">
@@ -498,21 +518,23 @@
 
     <section id="tooltips">
         <header class="text-center"><h4>tooltips</h4></header>
-        <section>
-            <p><strong>tooltips.less</strong> is built entirely in CSS. </p>
+        <section class="notes">
+            <p><strong>tooltips.less</strong> is a label-like component that appears on hover and focus.</p>
+            <p>Add the class <span class="label">tooltip</span> and the attribute <span class="label">data-tooltip</span>, which contains the tooltip content, to non self closing elements. And add the class name <span class="label">tooltip-right</span>, <span class="label">tooltip-bottom</span> or <span class="label">tooltip-left</span> to define the position of a tooltip. By default, the tooltip appears above the element.</p>
+            <code>&lt;button class=&quot;btn btn-primary tooltip tooltip-right&quot; data-tooltip=&quot;Lorem ipsum dolor sit amet&quot;&gt;right tooltip&lt;/button&gt;</code>
         </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>
+                <button class="btn btn-primary 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>
+                <button class="btn btn-primary tooltip tooltip-right" data-tooltip="Lorem ipsum dolor sit amet">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>
+                <button class="btn btn-primary tooltip tooltip-bottom" data-tooltip="Lorem ipsum dolor sit amet">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>
+                <button class="btn btn-primary tooltip tooltip-left" data-tooltip="Lorem ipsum dolor sit amet">left tooltip</button>
             </div>
         </div>
     </section>
@@ -552,13 +574,13 @@
         <div class="columns">
             <div class="column">
                 <div class="toast">
-                    <button class="btn-clear pull-right"></button>
+                    <button class="btn btn-clear pull-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-primary">
-                    <button class="btn-clear pull-right"></button>
+                    <button class="btn btn-clear pull-right"></button>
                     <span class="icon icon-error_outline"></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                 </div>
             </div>
@@ -566,25 +588,25 @@
         <div class="columns">
             <div class="column">
                 <div class="toast toast-success">
-                    <button class="btn-clear pull-right"></button>
+                    <button class="btn btn-clear pull-right"></button>
                     Efficiently unleash cross-media information without cross-media value.
                 </div>
             </div>
             <div class="column">
                 <div class="toast toast-info">
-                    <button class="btn-clear pull-right"></button>
+                    <button class="btn btn-clear pull-right"></button>
                     Efficiently unleash cross-media information without cross-media value.
                 </div>
             </div>
             <div class="column">
                 <div class="toast toast-warning">
-                    <button class="btn-clear pull-right"></button>
+                    <button class="btn btn-clear pull-right"></button>
                     Efficiently unleash cross-media information without cross-media value.
                 </div>
             </div>
             <div class="column">
                 <div class="toast toast-danger">
-                    <button class="btn-clear pull-right"></button>
+                    <button class="btn btn-clear pull-right"></button>
                     Efficiently unleash cross-media information without cross-media value.
                 </div>
             </div>
@@ -781,20 +803,21 @@
                                 <p>
                                     This is the content inside the modal.
                                 </p>
-                                <h3>Lorem ipsum</h3>
+                                <h4>Lorem ipsum</h4>
                                 <p>
                                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.
                                 </p>
                                 <p>
                                     Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.
                                 </p>
-                                <h3>Cupcake ipsum</h3>
+                                <h4>Cupcake ipsum</h4>
                                 <p>
                                     Jelly-o sesame snaps halvah croissant oat cake cookie. Cheesecake bear claw topping. Chupa chups apple pie carrot cake chocolate cake caramels.
                                 </p>
                                 <p>
                                     De braaaiiiins apocalypsi gorger omero prefrontal cortex undead survivor fornix dictum mauris. Hi brains mindless mortuis limbic cortex soulless creaturas optic nerve.
                                 </p>
+                                <h4>Candy ipsum</h4>
                                 <p>
                                     Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar.
                                 </p>
@@ -812,6 +835,63 @@
             </div>
         </div>
     </section>
+    <section id="cards">
+        <header class="text-center"><h4>cards</h4></header>
+        <div class="columns">
+            <div class="column col-4">
+                <div class="card">
+                    <div class="card-image">
+                        <img class="img-responsive" src="demo/img/osx-el-capitan.jpg" />
+                    </div>
+                    <div class="card-header">
+                        <h4 class="card-title">Microsoft</h4>
+                        <h6 class="card-meta">Software and hardware</h6>
+                    </div>
+                    <div class="card-content">
+                        Empower every person and every organization on the planet to achieve more.
+                    </div>
+                    <div class="card-footer">
+                        <a href="#" class="btn btn-primary">Do</a>
+                    </div>
+                </div>
+            </div>
+            <div class="column col-4">
+                <div class="card">
+                    <div class="card-header">
+                        <h4 class="card-title">Apple</h4>
+                        <h6 class="card-meta">Hardware and software</h6>
+                    </div>
+                    <div class="card-image">
+                        <img class="img-responsive" src="demo/img/osx-yosemite.jpg" />
+                    </div>
+                    <div class="card-content">
+                        To make a contribution to the world by making tools for the mind that advance humankind.
+                    </div>
+                    <div class="card-footer">
+                        <div class="btn-group btn-group-block">
+                            <button class="btn">Buy</button>
+                            <button class="btn">Buy</button>
+                            <button class="btn">Buy</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="column col-4">
+                <div class="card">
+                    <div class="card-header">
+                        <h4 class="card-title">Google</h4>
+                        <h6 class="card-meta">Software and hardware</h6>
+                    </div>
+                    <div class="card-content">
+                        Organize the world’s information and make it universally accessible and useful.
+                    </div>
+                    <div class="card-footer">
+                        <a href="#" class="btn btn-primary">Ad</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
 </section>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/spectre.less b/spectre.less
index 288c031..3332c4b 100644
--- a/spectre.less
+++ b/spectre.less
@@ -19,6 +19,7 @@
 // Components
 @import 'src/avatars.less';
 @import 'src/badges.less';
+@import 'src/cards.less';
 @import 'src/chips.less';
 @import 'src/fileicons.less';
 @import 'src/labels.less';
@@ -27,7 +28,6 @@
 @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/buttons.less b/src/buttons.less
index ef95627..29c8e18 100644
--- a/src/buttons.less
+++ b/src/buttons.less
@@ -1,6 +1,5 @@
 // Buttons
-.btn,
-button {
+.btn {
   display: inline-block;
   height: 3.2rem;
   padding: .7rem 1.5rem;
@@ -53,7 +52,8 @@ button {
     }
   }
 
-  &[disabled] {
+  &[disabled],
+  .disabled {
     opacity: .5;
     cursor: default;
   }
@@ -169,12 +169,10 @@ button {
 }
 
 .btn-group {
-  display: inline-block;
-  vertical-align: middle;
-  .clearfix();
+  display: inline-flex;
 
   .btn {
-    float: left;
+    flex: 1 0 auto;
 
     &:first-child:not(:last-child) {
       border-top-right-radius: 0;
@@ -192,4 +190,8 @@ button {
       z-index: 99;
     }
   }
+
+  &.btn-group-block {
+    display: flex;
+  }
 }
\ No newline at end of file
diff --git a/src/cards.less b/src/cards.less
new file mode 100644
index 0000000..3a9abc5
--- /dev/null
+++ b/src/cards.less
@@ -0,0 +1,47 @@
+// Cards
+.card {
+  display: block;
+  text-align: left;
+  margin: 0;
+  padding: 0;
+  border-radius: .3rem;
+  background-color: #fff;
+  z-index: 999;
+  .shadow;
+
+  .card-header,
+  .card-image,
+  .card-content,
+  .card-footer {
+    padding: 1.5rem 1.5rem 0 1.5rem;
+
+    &:last-child {
+      padding-bottom: 1.5rem;
+    }
+  }
+  .card-image {
+    padding-left: 0;
+    padding-right: 0;
+
+    &:first-child {
+      padding-top: 0;
+
+      img {
+        border-top-left-radius: .3rem;
+        border-top-right-radius: .3rem;
+      }
+    }
+  }
+  .card-title {
+    margin-top: 0;
+    margin-bottom: .5rem;
+    font-size: 1.6em;
+    line-height: 1;
+  }
+  .card-meta {
+    margin-top: 0;
+    margin-bottom: 0;
+    font-size: 1em;
+    color: lighten(@body-font-color, 50%);
+  }
+}
\ No newline at end of file
diff --git a/src/forms.less b/src/forms.less
index eaab29d..996056c 100644
--- a/src/forms.less
+++ b/src/forms.less
@@ -262,6 +262,10 @@
     border-radius: .3rem;
     background-color: @core-border-color;
   }
+  .input-group-addon,
+  .input-group-btn {
+    flex: 1 0 auto;
+  }
 
   .form-input,
   .input-group-addon,
diff --git a/src/labels.less b/src/labels.less
index ac11630..1c16f40 100644
--- a/src/labels.less
+++ b/src/labels.less
@@ -1,15 +1,15 @@
 // Labels
 .label {
   display: inline-block;
-  padding: .3rem .5rem;
-  font-size: 80%;
-  line-height: 1;
-  color: #666;
+  padding: .3rem .4rem;
+  font-size: 90%;
+  line-height: 1em;
+  color: lighten(@body-font-color, 25%);
   background-color: @core-border-color;
   text-align: center;
   white-space: nowrap;
   vertical-align: middle;
-  margin: -.3rem .5rem 0 .5rem;
+  margin: -.3rem .1em 0 .1em;
   border-radius: .2rem;
 
   &.label-primary {
@@ -36,6 +36,6 @@
   &.label-lg {
     font-size: 100%;
     line-height: 1.2;
-    padding: .3rem .8rem;
+    padding: .3rem .5rem;
   }
 }
\ No newline at end of file
diff --git a/src/navigation.less b/src/navigation.less
index 2e0436f..d119099 100644
--- a/src/navigation.less
+++ b/src/navigation.less
@@ -72,10 +72,8 @@
 
     .tab-item {
       float: none;
-      flex: 1;
+      flex: 1 0 auto;
       text-align: center;
     }
   }
 }
-
-// TODO: Tabs with icons
diff --git a/src/tables.less b/src/tables.less
index 920f488..6ad7b93 100644
--- a/src/tables.less
+++ b/src/tables.less
@@ -1,5 +1,5 @@
 // Tables
-table {
+.table {
   width: 100%;
 
   th,
diff --git a/src/tooltips.less b/src/tooltips.less
index 4d0f680..ab3e754 100644
--- a/src/tooltips.less
+++ b/src/tooltips.less
@@ -23,45 +23,49 @@
     pointer-events: none;
     transition: all .216s ease;
   }
-  &:hover {
+  &:hover,
+  &:focus {
     &::after {
       opacity: 1;
       transform: translate(-50%, -.5rem);
     }
   }
 
-  &[data-tooltip-pos="right"] {
+  &.tooltip-right {
     &::after {
       bottom: 50%;
       left: 100%;
       transform: translate(0, 50%);
     }
-    &:hover {
+    &:hover,
+    &:focus {
       &::after {
         transform: translate(.5rem, 50%);
       }
     }
   }
-  &[data-tooltip-pos="bottom"] {
+  &.tooltip-bottom {
     &::after {
       top: 100%;
       bottom: auto;
       transform: translate(-50%, 0);
     }
-    &:hover {
+    &:hover,
+    &:focus {
       &::after {
         transform: translate(-50%, .5rem);
       }
     }
   }
-  &[data-tooltip-pos="left"] {
+  &.tooltip-left {
     &::after {
       right: 100%;
       bottom: 50%;
       left: auto;
       transform: translate(0, 50%);
     }
-    &:hover {
+    &:hover,
+    &:focus {
       &::after {
         transform: translate(-.5rem, 50%);
       }
diff --git a/src/typography.less b/src/typography.less
index 94a596f..bd4c576 100644
--- a/src/typography.less
+++ b/src/typography.less
@@ -50,6 +50,24 @@ blockquote {
     color: lighten(@body-font-color, 50%);
   }
 }
+code,
+pre {
+  display: block;
+  margin-top: 1em;
+  margin-bottom: 1em;
+  border-left: .2rem solid @core-color;
+  line-height: 1.8rem;
+  background-color: lighten(@core-border-color, 4%);
+}
+code {
+  padding: 1rem 2rem;
+}
+pre code {
+  background-color: transparent;
+  border-left: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
 ul,
 ol {
   margin: 0 0 1rem;