add cards code and update new demo images

11 files changed, 182 insertions, 28 deletions

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 54801fe..767a41a 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -243,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>
@@ -400,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>
@@ -800,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>
@@ -831,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 d197a20..5f698ed 100644
--- a/dist/spectre.css
+++ b/dist/spectre.css
@@ -804,21 +804,16 @@ ol ol {
   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;
@@ -835,6 +830,12 @@ ol ol {
   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;
 }
@@ -1179,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;
@@ -1517,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 {
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 47f10ff..29c8e18 100644
--- a/src/buttons.less
+++ b/src/buttons.less
@@ -169,12 +169,10 @@
 }
 
 .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 @@
       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/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