Update Docs and add Calendar code

7 files changed, 215 insertions, 106 deletions

diff --git a/docs/src/contents/autocomplete.pug b/docs/src/contents/autocomplete.pug
index 5224c45..ca5eb17 100644
--- a/docs/src/contents/autocomplete.pug
+++ b/docs/src/contents/autocomplete.pug
@@ -102,15 +102,15 @@ pre.code(data-lang='HTML')
 
         <!-- autocomplete suggestion list -->
         <ul class="menu">
-          <!-- menu list chips -->
+          <!-- menu list items -->
           <li class="menu-item">
             <a href="#">
               <div class="tile tile-centered">
                 <div class="tile-icon">
-                  <img src="img/avatar-4.png" class="avatar avatar-sm" alt="Steve Rogers">
+                  ...
                 </div>
                 <div class="tile-content">
-                  Steve Rogers
+                  ...
                 </div>
               </div>
             </a>
diff --git a/docs/src/contents/avatars.pug b/docs/src/contents/avatars.pug
index 2e9886c..4e345c6 100644
--- a/docs/src/contents/avatars.pug
+++ b/docs/src/contents/avatars.pug
@@ -28,6 +28,21 @@ p
   | Add the #[code avatar] class and avatar size class to #{'<div>'}  element.
   | The #[code data-initial] attribute is the name appear inside the avatar.
 
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      <!-- Basic avatar examples -->
+      <figure class="avatar avatar-xl">
+        <img src="img/avatar-1.png" alt="...">
+      </figure>
+
+      <figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5755d9;"></figure>
+
+      <!-- Show initals when avatar image is unavailable or not fully loaded -->
+      <figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5755d9;">
+        <img src="img/avatar-1.png" alt="...">
+      </figure>
+
 .docs-demo.columns
   .column.col-6.col-xs-12
     figure.avatar.avatar-xl
@@ -49,22 +64,10 @@ p
 pre.code(data-lang='HTML')
   code
     :highlight(lang="html")
-      <!-- Basic avatar examples -->
-      <figure class="avatar avatar-xl">
-        <img src="img/avatar-1.png" alt="...">
-      </figure>
-
       <figure class="avatar avatar-xl">
         <img src="img/avatar-1.png" alt="...">
         <img src="img/avatar-5.png" class="avatar-icon" alt="...">
       </figure>
-
-      <figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5755d9;"></figure>
-
-      <!-- Show initals when avatar image is unavailable or not fully loaded -->
-      <figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5755d9;">
-        <img src="img/avatar-1.png" alt="...">
-      </figure>
         
 .docs-demo.columns
   .column.col-6.col-xs-12
diff --git a/docs/src/contents/bars.pug b/docs/src/contents/bars.pug
index df0d17b..4eee25e 100644
--- a/docs/src/contents/bars.pug
+++ b/docs/src/contents/bars.pug
@@ -28,6 +28,7 @@ p
 pre.code(data-lang='HTML')
   code
     :highlight(lang="html")
+      <!-- normal bars -->
       <div class="bar bar-sm">
         <div class="bar-item" role="progressbar" style="width:25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
       </div>
@@ -63,7 +64,7 @@ p
 pre.code(data-lang='HTML')
   code
     :highlight(lang="html")
-      <!-- slider -->
+      <!-- normal slider -->
       <div class="bar bar-slider">
         <div class="bar-item" role="progressbar" style="width:25%;">
           <button class="bar-slider-btn btn" role="slider"></button>
diff --git a/docs/src/contents/calendars.pug b/docs/src/contents/calendars.pug
index 60866dd..d7bf30c 100644
--- a/docs/src/contents/calendars.pug
+++ b/docs/src/contents/calendars.pug
@@ -20,77 +20,159 @@ p
           .calendar-date Fri
           .calendar-date Sat
         .calendar-body
-          .calendar-date.prev-month.disabled
+          .calendar-date.prev-month
             button.date-item 26
-          .calendar-date.prev-month.disabled
+          .calendar-date.prev-month
             button.date-item 27
-          .calendar-date.prev-month.disabled
+          .calendar-date.prev-month
             button.date-item 28
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 1
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 2
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 3
-          .calendar-date.current-month.tooltip(data-tooltip="Today")
+          .calendar-date.tooltip(data-tooltip="Today")
             button.date-item.date-today 4
-          .calendar-date.current-month.tooltip(data-tooltip="Not available")
+          .calendar-date.tooltip(data-tooltip="Not available")
             button.date-item(disabled="") 5
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 6
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 7
-          .calendar-date.current-month.tooltip(data-tooltip="You have appointments")
+          .calendar-date.tooltip(data-tooltip="You have appointments")
             button.date-item.badge 8
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 9
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 10
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 11
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 12
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 13
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 14
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 15
-          .calendar-date.current-month.calendar-range.range-start
-            button.date-item.active 16
-          .calendar-date.current-month.calendar-range
+          .calendar-date.calendar-range.range-start
+            button.date-item 16
+          .calendar-date.calendar-range
             button.date-item 17
-          .calendar-date.current-month.calendar-range
+          .calendar-date.calendar-range
             button.date-item 18
-          .calendar-date.current-month.calendar-range
+          .calendar-date.calendar-range
             button.date-item 19
-          .calendar-date.current-month.calendar-range.range-end
-            button.date-item.active 20
-          .calendar-date.current-month
+          .calendar-date.calendar-range.range-end
+            button.date-item 20
+          .calendar-date
             button.date-item 21
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 22
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 23
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 24
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 25
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 26
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 27
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 28
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 29
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 30
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 31
-          .calendar-date.next-month.disabled
+          .calendar-date.next-month
             button.date-item 1
 
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      <div class="calendar">
+        <!-- calendar navbar -->
+        <div class="calendar-nav navbar">
+          <button class="btn btn-action btn-link btn-lg">
+            <i class="icon icon-arrow-left"></i>
+          </button>
+          <div class="navbar-primary">March 2017</div>
+          <button class="btn btn-action btn-link btn-lg">
+            <i class="icon icon-arrow-right"></i>
+          </button>
+        </div>
+
+        <div class="calendar-container">
+          <div class="calendar-header">
+            <div class="calendar-date">Sun</div>
+            <div class="calendar-date">Mon</div>
+            <div class="calendar-date">Tue</div>
+            <div class="calendar-date">Wed</div>
+            <div class="calendar-date">Thu</div>
+            <div class="calendar-date">Fri</div>
+            <div class="calendar-date">Sat</div>
+          </div>
+
+          <div class="calendar-body">
+            <!-- calendar previous month -->
+            <div class="calendar-date prev-month">
+              <button class="date-item">26</button>
+            </div>
+            ...
+            <div class="calendar-date prev-month">
+              <button class="date-item">28</button>
+            </div>
+
+            <!-- calendar current month -->
+            <div class="calendar-date">
+              <button class="date-item">1</button>
+            </div>
+            <div class="calendar-date">
+              <button class="date-item">2</button>
+            </div>
+            <div class="calendar-date">
+              <button class="date-item">3</button>
+            </div>
+            <!-- calendar date: today -->
+            <div class="calendar-date">
+              <button class="date-item date-today">4</button>
+            </div>
+            <!-- calendar date: tooltip -->
+            <div class="calendar-date tooltip" data-tooltip="You have appointments">
+              <button class="date-item">5</button>
+            </div>
+            <!-- calendar date: not available -->
+            <div class="calendar-date tooltip" data-tooltip="Not available">
+              <button class="date-item" disabled="">6</button>
+            </div>
+
+            <!-- calendar range -->
+            <div class="calendar-date calendar-range range-start">
+              <button class="date-item">7</button>
+            </div>
+            <div class="calendar-date calendar-range">
+              <button class="date-item">8</button>
+            </div>
+            <div class="calendar-date calendar-range range-end">
+              <button class="date-item">9</button>
+            </div>
+            ...
+            <div class="calendar-date">
+              <button class="date-item">31</button>
+            </div>
+
+            <!-- calendar next month -->
+            <div class="calendar-date next-month">
+              <button class="date-item">1</button>
+            </div>
+          </div>
+        </div>
+      </div>
+
 +docs-subheading('calendars-sizes', 'Calendars sizes')
 
 .docs-demo.columns
@@ -112,84 +194,105 @@ p
           .calendar-date Fri
           .calendar-date Sat
         .calendar-body
-          .calendar-date.prev-month.disabled
+          .calendar-date.prev-month
             button.date-item 26
-          .calendar-date.prev-month.disabled
+          .calendar-date.prev-month
             button.date-item 27
             .calendar-events
               a.calendar-event.bg-error.text-light(href="#calendars") Zhonghe Festival
-          .calendar-date.prev-month.disabled
+          .calendar-date.prev-month
             button.date-item 28
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 1
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 2
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 3
-          .calendar-date.current-month.tooltip(data-tooltip="Today")
+          .calendar-date.tooltip(data-tooltip="Today")
             button.date-item.date-today 4
-          .calendar-date.current-month
+          .calendar-date
             button.date-item(disabled="") 5
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 6
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 7
-          .calendar-date.current-month.tooltip(data-tooltip="You have appointments")
+          .calendar-date.tooltip(data-tooltip="You have appointments")
             button.date-item.badge 8
             .calendar-events
               a.calendar-event.bg-primary.text-light(href="#calendars") Product launch event
               a.calendar-event.bg-error.text-light(href="#calendars") International Women's Day
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 9
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 10
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 11
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 12
             .calendar-events
               a.calendar-event.bg-error.text-light(href="#calendars") Arbor Day
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 13
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 14
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 15
-          .calendar-date.current-month.calendar-range.range-start
-            button.date-item.active 16
-          .calendar-date.current-month.calendar-range
+          .calendar-date.calendar-range.range-start
+            button.date-item 16
+          .calendar-date.calendar-range
             button.date-item 17
-          .calendar-date.current-month.calendar-range
+          .calendar-date.calendar-range
             button.date-item 18
-          .calendar-date.current-month.calendar-range
+          .calendar-date.calendar-range
             button.date-item 19
-          .calendar-date.current-month.calendar-range.range-end
-            button.date-item.active 20
+          .calendar-date.calendar-range.range-end
+            button.date-item 20
             .calendar-events
               a.calendar-event.bg-success.text-light(href="#calendars") Spring Equinox
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 21
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 22
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 23
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 24
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 25
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 26
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 27
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 28
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 29
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 30
-          .calendar-date.current-month
+          .calendar-date
             button.date-item 31
           .calendar-date.next-month.disabled
             button.date-item 1
             .calendar-events
-              a.calendar-event.bg-error.text-light(href="#calendars") April Fools' Day
\ No newline at end of file
+              a.calendar-event.bg-error.text-light(href="#calendars") April Fools' Day
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      <div class="calendar calendar-lg">
+        <!-- calendar navbar structure -->
+
+        <div class="calendar-container">
+          <!-- calendar header structure -->
+
+          <div class="calendar-body">
+            <!-- calendar date with events -->
+            <div class="calendar-date">
+              <button class="date-item active">20</button>
+              <div class="calendar-events">
+                <a class="calendar-event bg-success text-light" href="#calendars">Spring Equinox</a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
\ No newline at end of file
diff --git a/docs/src/contents/cards.pug b/docs/src/contents/cards.pug
index be8d17e..979b3bc 100644
--- a/docs/src/contents/cards.pug
+++ b/docs/src/contents/cards.pug
@@ -82,13 +82,13 @@ pre.code(data-lang='HTML')
           <img src="img/osx-el-capitan.jpg" class="img-responsive">
         </div>
         <div class="card-header">
-          <div class="card-title h5">Microsoft</div>
-          <div class="card-subtitle text-gray">Software and hardware</div>
+          <div class="card-title h5">...</div>
+          <div class="card-subtitle text-gray">...</div>
         </div>
         <div class="card-body">
-          Empower every person and every organization on the planet to achieve more.
+          ...
         </div>
         <div class="card-footer">
-          <button class="btn btn-primary">Do</button>
+          <button class="btn btn-primary">...</button>
         </div>
       </div>
\ No newline at end of file
diff --git a/docs/src/contents/grid.pug b/docs/src/contents/grid.pug
index 0665262..dff69f6 100644
--- a/docs/src/contents/grid.pug
+++ b/docs/src/contents/grid.pug
@@ -145,13 +145,12 @@ p
 
 .docs-demo.columns
   .column.col-6
-    .bg-gray
-      .docs-block col-6
-      .columns
-        .column.col-6
-          .bg-primary.docs-block col-6
-        .column.col-6
-          .bg-primary.docs-block col-6
+    .bg-gray.docs-block col-6
+    .columns
+      .column.col-6
+        .bg-primary.docs-block col-6
+      .column.col-6
+        .bg-primary.docs-block col-6
   .column.col-6
     .bg-gray.docs-block col-6
 
diff --git a/docs/src/contents/labels.pug b/docs/src/contents/labels.pug
index cef66d2..f0ad51f 100644
--- a/docs/src/contents/labels.pug
+++ b/docs/src/contents/labels.pug
@@ -1,6 +1,6 @@
 p Labels are formatted text tags for highlighted, informative information.
 
-.columns
+.docs-demo.columns
   .column
     span.label.mr-1 default label
     span.label.label-primary.mr-1 primary label
@@ -13,6 +13,13 @@ p
   | Add the #[code label] class to #{'<span>'} or #{'<small>'} elements.
   | You can add another class #[code label-primary], #[code label-secondary], #[code label-success], #[code label-warning] and #[code label-error] for colored labels.
 
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      <!-- normal labels -->
+      <span class="label">default label</span>
+      <span class="label label-primary">primary label</span>
+
 .docs-demo.columns
   .column
     span.label.label-rounded.mr-1 default label
@@ -24,9 +31,5 @@ p
 pre.code(data-lang='HTML')
   code
     :highlight(lang="html")
-      <!-- normal labels -->
-      <span class="label">default label</span>
-      <span class="label label-primary">primary label</span>
-
       <!-- rounded labels -->
       <span class="label label-rounded label-primary">primary label</span>
\ No newline at end of file