package.json incremental mode

package.json

@@ -5,6 +5,7 @@
   "description": "Premium and Open Source dashboard template with responsive and high quality UI.",
   "scripts": {
     "start": "npm-run-all clean css-main js-compile-standalone --parallel browsersync watch",
+    "start-incremental": "npm-run-all clean css-main js-compile-standalone --parallel browsersync watch-incremental",
     "build": "npm-run-all clean html-build css js assets-copy",
     "bundlesize": "bundlesize",
     "browsersync": "node build/browsersync.js",
@@ -19,10 +20,12 @@
     "css-lint": "stylelint \"scss/**/*.scss\" --cache --cache-location .cache/.stylelintcache",
     "css-main": "npm-run-all css-compile css-prefix",
     "css-main-build": "npm-run-all css-lint css-compile css-prefix css-minify",
-    "watch": "npm-run-all --parallel watch-*",
+    "watch": "npm-run-all --parallel watch-css watch-js watch-html",
+    "watch-incremental": "npm-run-all --parallel watch-css watch-js watch-html-incremental",
     "watch-css": "nodemon --watch scss/ --ext scss --exec \"npm run css-main\"",
     "watch-js": "nodemon --watch js/ --ext js --exec \"npm run js-compile-standalone\"",
     "watch-html": "JEKYLL_ENV=development bundle exec jekyll build --watch",
+    "watch-html-incremental": "JEKYLL_ENV=development bundle exec jekyll build --watch --incremental",
     "js": "npm-run-all --sequential js-compile js-libs",
     "js-libs": "rm -rf dist/libs && mkdir dist/libs && node build/copy-libs.js",
     "js-lint": "eslint --cache --cache-location .cache/.eslintcache js build/",

pages/_docs/breadcrumb.md

@@ -1,7 +1,7 @@
 ---
 title: Breadcrumb
 menu: docs.breadcrumb
-description: A breadcrumb navigation provide links back to each previous page the user navigated through, and shows the user's current location in a website.
+description: Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.
 done: true
 ---
 

pages/_docs/cards.md

@@ -9,15 +9,14 @@ The `.card` element is simply a container with a shadow, a border, a radius, and
 ### Default card
 
 {% example html columns=1 %}
-{% include cards/card.html hide-options=true %}
+{% include cards/card.html body="This is some text within a card body." %}
 {% endexample %}
 
-### Advanced card
+### Card with title and image
 
 {% example html columns=1 %}
-{% include cards/card.html show-buttons=true show-footer=true %}
+{% include cards/card.html img-top=true title="Card with title and image" %}
 {% endexample %}
-
 ### Blog post card
 
 The best way to make your post eye-catching is adding an image to it. To do so, just add the image with the `.card-img-top` class. We've added the `.d-flex .flex-column` classes to the `.card-body` to have the author details be on the bottom of the card.
@@ -55,211 +54,31 @@ If you want to create a couple of posts next to each other, add the `.row-deck`
 You can also add the image on the left side of the card. All you need do to is: add the `.card-aside` class to the element with the `.card` class. Then add the image in the `.card-aside-column` element. No worries, tabler will automatically center it and scale to right size:
 
 {% example html columns=3 %}
-{% include cards/blog-single.html type="aside" liked=1 %}
+{% include cards/blog-single.html type="aside" liked=1 article-id=3 %}
 {% endexample %}
 
 ### Color variations
 
 {% example html columns=3 %}
 <div class="row row-deck">
-    <div class="col-md-4">
+    <div class="col-md-6">
-        {% include cards/card.html title="Card status on top" hide-options=true status-position="top" status-color="red" body="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque" %}
+        {% include cards/card.html status-top="danger" title="Card with top status" %}
     </div>
-    <div class="col-md-4">
+    <div class="col-md-6">
-        {% include cards/card.html title="Card status on left side" hide-options=true status-position="left" status-color="blue" body="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque"  %}
+        {% include cards/card.html status-left="green" title="Card with side status" %}
-    </div>
-    <div class="col-md-4">
-        {% include cards/card.html title="Card status on bottom" hide-options=true status-position="bottom" status-color="green" body="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque"  %}
     </div>
 </div>
 {% endexample %}
 
-
+### Stacked card
-### Card with switch
 
 {% example html columns=1 %}
-{% include cards/card.html title="Card with switch" show-switch=true %}
+{% include cards/card.html class="card-stacked" title="Stacked card" %}
 {% endexample %}
 
-### Card with loader
+## Tabbed card
 
-{% example html columns=1 %}
+{% example html columns=2 %}
-{% include cards/card.html title="Card with loader" hide-options=true show-loader=true %}
+{% include cards/card-tabs.html count=4 %}
 {% endexample %}
 
-### Card with badge on image
-
-{% example html columns=3 %}
-<div class="card flex-row flex-row-reverse">
-	<div class="media media-4x3 col-4">
-		<a class="media-content " style="background-image:url({% include ui/image.html id=7 %})">
-		</a>
-		<div class="media-overlay overlay-top">
-			<a href="#"><span class="badge badge-md text-uppercase bg-yellow">NATURE</span></a>
-		</div>
-		<div class="media-action ">
-		</div>
-	</div>
-	<div class="card-body d-flex flex-column">
-		<div class="flex-fill ">
-			<a href="#" class="card-title text-md">
-				It’s 2018, and the race is on between tech giants to decide who will control what you see every time you open your eyes
-			</a>
-			<a class="text-muted mt-2 ">What Not To Wear: The Hats, Scarves In History</a>
-		</div>
-		<div class="">
-			<div class="text-muted text-sm">Feb 28, 10:54 am</div>
-		</div>
-	</div>
-</div>
-{% endexample %}
-
-### Card with badge
-
-{% example html columns=3 %}
-<div class="card flex-row">
-	<div class="media media-4x3 col-5">
-		<a class="media-content " style="background-image:url({% include ui/image.html id=13 %})">
-		</a>
-		<div class="media-action ">
-		</div>
-	</div>
-	<div class="card-body d-flex flex-column ">
-		<div class="flex-fill ">
-			<div class="mb-3">
-				<a href="#">
-					<span class="badge badge-md text-uppercase bg-danger">Fashion</span>
-				</a>
-			</div>
-			<a href="#" class="card-title h-2x">
-				What Not To Wear: The Hats, Scarves In History
-			</a>
-		</div>
-		<div class="">
-			<div class="text-muted text-sm">Feb 26, 1:49 am</div>
-		</div>
-	</div>
-</div>
-{% endexample %}
-
-
-
-### Card with aside image
-
-{% example html columns=3 %}
-<div class="card flex-row">
-	<div class="media media-4x3 col-4">
-		<a class="media-content" style="background-image:url({% include ui/image.html id=6 %})"></a>
-		<div class="media-overlay overlay-top">
-			<a href="#"><span class="badge badge-md text-uppercase bg-white-overlay">MUSIC</span></a>
-		</div>
-		<div class="media-action ">
-		</div>
-	</div>
-	<div class="card-body d-flex flex-column">
-		<div class="flex-fill">
-			<a href="#" class="card-title text-md">
-				Radio Listeners Prepare For An Impending Alien Invasion In This Visually Stunning Short Film
-			</a>
-			<a class="text-muted mt-2">What Not To Wear: The Hats, Scarves In History</a>
-		</div>
-		<div class="text-muted text-sm">Feb 22, 11:38 am</div>
-	</div>
-</div>
-{% endexample %}
-
-### Card with image
-{% example html columns=1 %}
-<div class="card">
-	<img class="card-img-top" src="{{ site.base }}/img/photos/{{ site.data.photos[17].file }}" alt="Card image cap">
-	<div class="card-body">
-		<h5 class="card-title">Card title that wraps to a new line</h5>
-		<p class="card-text">This is a longer card with supporting text below as a natural lead-in to
-			additional content. This content is a little bit longer.</p>
-		<div class="text-muted text-sm">Feb 28, 10:54 am</div>
-	</div>
-</div>
-{% endexample %}
-
-### Quote card
-
-{% example html columns=1 %}
-<div class="card">
-  <cardquote class="cardquote text-white bg-primary mb-0 card-body">
-	 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
-	 <footer class="cardquote-footer">
-		 <small>
-			 Someone famous in <cite title="Source Title">Source Title</cite>
-		 </small>
-	 </footer>
-  </cardquote>
-  </div>
-{% endexample %}
-
-### Another Card
-
-{% example html columns=3 %}
-<div class="row row-deck">
-   <div class="col-6">
-      <div class="card text-center">
-         <div class="card-body">
-            <h5 class="card-title">Card title</h5>
-            <p class="card-text">This card has supporting text below as a natural lead-in to additional
-               content.</p>
-            <p class="card-text">
-               <small class="text-muted">Last updated 3 mins ago</small>
-            </p>
-         </div>
-      </div>
-   </div>
-   <div class="col-6">
-      <div class="card text-right">
-         <div class="card-body">
-            <h5 class="card-title">Card title</h5>
-            <p class="card-text">This card has supporting text below as a natural lead-in to additional
-               content.</p>
-            <p class="card-text">
-               <small class="text-muted">Last updated 3 mins ago</small>
-            </p>
-         </div>
-      </div>
-   </div>
-</div>
-{% endexample %}
-
-### Image card
-
-{% example html columns=1 %}
-<div class="card">
-	<img class="card-img" src="{{ site.base }}/img/photos/{{ site.data.photos[19].file }}" alt="Card image">
-</div>
-{% endexample %}
- 
-### Card with options
-{% example html columns=1 %}
-	{% include cards/card.html title="This is a standard card" show-footer=true %}
-{% endexample %}
-
-### Card with fullscreen
-{% example html columns=1 %}
-	{% include cards/card.html title="With additional fullscreen button" show-fullscreen=true %}
-{% endexample %}
-
-### Card with search
-{% example html columns=1 %}
-	{% include cards/card.html title="Card with search form" show-form=true %}
-{% endexample %}
-
-### Card with search
-{% example html columns=3 %}
-	<div class="row">
-	  <div class="col-lg-6 col-xl-6">
-		  {% include cards/card.html title="Card with alert" alert="Adding action was successful" %}
-	  </div>
-	  <div class="col-lg-6 col-xl-6">
-		  {% include cards/card.html title="Card with alert" alert="Adding action failed" alert-type="danger" %}
-	  </div>
-	</div>
-{% endexample %}
-
-

pages/_includes/cards/blog-single.html

@@ -1,4 +1,5 @@
-{% assign article = include.article | default: site.data.articles[0] %}
+{% assign article-id = include.article-id | default: 2 %}
+{% assign article = include.article | default: site.data.articles[article-id] %}
 {% assign type = include.type | default: 'none' %}
 {% assign author = site.data.people[article.author] %}
 {% assign liked = include.liked | default: false %}
@@ -6,7 +7,7 @@
 {% assign avatar = article.author %}
 
 {% capture card-content %}
-   <h3><a href="#">{{ article.title }}</a></h3>
+   <h3 class="card-title"><a href="#">{{ article.title }}</a></h3>
 
    <div class="text-muted">{{ article.description | truncate: truncate }}</div>
 

scss/ui/_breadcrumbs.scss

@@ -25,4 +25,8 @@
   a {
     color: $text-muted;
   }
+
+  .breadcrumb-item.active {
+    color: $body-color;
+  }
 }

scss/ui/_cards.scss

@@ -78,7 +78,6 @@
     top: -5px;
     right: 5px;
     left: 5px;
-    z-index: -1;
     height: 5px;
     content: "";
     background: $card-bg;

scss/ui/_typo.scss

@@ -125,9 +125,11 @@ Markdown
     margin-bottom: 0;
   }
 
+  > {
     h1, h2, h3, h4, h5, h6 {
       margin-top: 2rem;
     }
+  }
 
   table {
     @extend .table, .table-bordered;