styleguide

_config.yml

@@ -68,7 +68,7 @@ author:
 
 docs-menu:
   - title: Getting started
-    pages: [index]
+    pages: [index, styleguide]
   - title: Components
     pages: [alerts, avatars, buttons, cards, charts, form-components, tags, typography]
 
@@ -142,6 +142,22 @@ theme-colors:
 #    hex: '#343a40'
 #    name: Dark
 
+color_variants:
+  - name: 'Default'
+    suffix: ''
+  - name: 'Dark'
+    suffix: -dark
+  - name: 'Darker'
+    suffix: -darker
+  - name: 'Darkest'
+    suffix: -darkest
+  - name: 'Light'
+    suffix: -light
+  - name: 'Lighter'
+    suffix: -lighter
+  - name: 'Lightest'
+    suffix: -lightest
+
 social-buttons:
   facebook:
     icon: fa fa-facebook

src/_data/commits.yml

@@ -1,4 +1,3 @@
----
 - commiter:
     name: Earvin Yoakley
     position: CEO

src/_docs/styleguide.md

@@ -0,0 +1,54 @@
+---
+title: Styleguide
+icon: fe fe-image
+description: Welcome to Tabler style guide. If you're new here, have a look through some of the topics on the side.
+---
+
+### Contextual colors
+
+A background fill can be applied to a container using one of the `.bg-[color]` classes.
+
+{% example html %}
+{% for color in site.theme-colors %}
+<div class="d-flex align-items-center mb-4">
+  <div class="w-7 h-7 bg-{{ color[0] }} rounded mr-4"></div>
+  <div>
+    <strong>{{ color[1].name }}</strong><br />
+    <code>.bg-{{ color[0] }}</code>
+  </div>
+</div>
+{% endfor %}
+{% endexample %}
+
+### Other colors
+
+Instead of using contextual classes you can use ordinary color names.
+
+{% example html %}
+{% for color in site.colors %}
+<div class="d-flex align-items-center mb-4">
+  <div class="w-7 h-7 bg-{{ color[0] }} rounded mr-4"></div>
+  <div>
+    <strong>{{ color[1].name }}</strong><br />
+    <code>.bg-{{ color[0] }}</code>
+  </div>
+</div>
+{% endfor %}
+{% endexample %}
+
+### Tinting backgrounds
+
+Translucent background fills to shade an element against a background. You can use one of few suffixes:  
+`-darkest`, `-darker`, `-dark`, `-lightest`, `-lighter` or `-light`. 
+ 
+{% example html %}
+{% for variant in site.color_variants %}
+<div class="d-flex align-items-center mb-4">
+  <div class="w-7 h-7 bg-blue{{ variant.suffix }} rounded mr-4"></div>
+  <div>
+    <strong>{{ variant.name }} blue</strong><br />
+    <code>.bg-blue{{ variant.suffix }}</code>
+  </div>
+</div>
+{% endfor %}
+{% endexample %}

src/assets/scss/_variables.scss

@@ -126,7 +126,7 @@ $body-color: $gray-700;
 
 // Code
 $code-font-size: 85%;
-$code-color: $gray-600;
+$code-color: inherit;
 
 $kbd-color: #fff;
 $kbd-bg: $gray-800;
@@ -298,4 +298,7 @@ $badge-font-weight: 600;
 $flag-icons: ('ad', 'ae', 'af', 'ag', 'ai', 'al', 'am', 'ao', 'aq', 'ar', 'as', 'at', 'au', 'aw', 'ax', 'az', 'ba', 'bb', 'bd', 'be', 'bf', 'bg', 'bh', 'bi', 'bj', 'bl', 'bm', 'bn', 'bo', 'bq', 'br', 'bs', 'bt', 'bv', 'bw', 'by', 'bz', 'ca', 'cc', 'cd', 'cf', 'cg', 'ch', 'ci', 'ck', 'cl', 'cm', 'cn', 'co', 'cr', 'cu', 'cv', 'cw', 'cx', 'cy', 'cz', 'de', 'dj', 'dk', 'dm', 'do', 'dz', 'ec', 'ee', 'eg', 'eh', 'er', 'es', 'et', 'eu', 'fi', 'fj', 'fk', 'fm', 'fo', 'fr', 'ga', 'gb-eng', 'gb-nir', 'gb-sct', 'gb-wls', 'gb', 'gd', 'ge', 'gf', 'gg', 'gh', 'gi', 'gl', 'gm', 'gn', 'gp', 'gq', 'gr', 'gs', 'gt', 'gu', 'gw', 'gy', 'hk', 'hm', 'hn', 'hr', 'ht', 'hu', 'id', 'ie', 'il', 'im', 'in', 'io', 'iq', 'ir', 'is', 'it', 'je', 'jm', 'jo', 'jp', 'ke', 'kg', 'kh', 'ki', 'km', 'kn', 'kp', 'kr', 'kw', 'ky', 'kz', 'la', 'lb', 'lc', 'li', 'lk', 'lr', 'ls', 'lt', 'lu', 'lv', 'ly', 'ma', 'mc', 'md', 'me', 'mf', 'mg', 'mh', 'mk', 'ml', 'mm', 'mn', 'mo', 'mp', 'mq', 'mr', 'ms', 'mt', 'mu', 'mv', 'mw', 'mx', 'my', 'mz', 'na', 'nc', 'ne', 'nf', 'ng', 'ni', 'nl', 'no', 'np', 'nr', 'nu', 'nz', 'om', 'pa', 'pe', 'pf', 'pg', 'ph', 'pk', 'pl', 'pm', 'pn', 'pr', 'ps', 'pt', 'pw', 'py', 'qa', 're', 'ro', 'rs', 'ru', 'rw', 'sa', 'sb', 'sc', 'sd', 'se', 'sg', 'sh', 'si', 'sj', 'sk', 'sl', 'sm', 'sn', 'so', 'sr', 'ss', 'st', 'sv', 'sx', 'sy', 'sz', 'tc', 'td', 'tf', 'tg', 'th', 'tj', 'tk', 'tl', 'tm', 'tn', 'to', 'tr', 'tt', 'tv', 'tw', 'tz', 'ua', 'ug', 'um', 'un', 'us', 'uy', 'uz', 'va', 'vc', 've', 'vg', 'vi', 'vn', 'vu', 'wf', 'ws', 'ye', 'yt', 'za', 'zm', 'zw');
 
 // Hr
-$hr-border-color: $border-color;
+$hr-border-color: $border-color;
+
+// Thumbnails
+$thumbnail-bg: #fff

src/assets/scss/dashboard/_colors.scss

@@ -1,11 +1,8 @@
-.colors-list {
+@each $color, $value in $colors {
-	display: block;
+	@include bg-variant(".bg-#{$color}-lightest", mix($value, #fff, 10%));
-}
+	@include bg-variant(".bg-#{$color}-lighter", mix($value, #fff, 30%));
-
+	@include bg-variant(".bg-#{$color}-light", mix($value, #fff, 70%));
-.colors-list-item {
+	@include bg-variant(".bg-#{$color}-dark", mix($value, #000, 80%));
-	display: inline-block;
+	@include bg-variant(".bg-#{$color}-darker", mix($value, #000, 40%));
-	width: 1rem;
+	@include bg-variant(".bg-#{$color}-darkest", mix($value, #000, 20%));
-	height: 1rem;
-	border-radius: 3px;
-	vertical-align: middle;
 }

src/assets/scss/dashboard/_type.scss

@@ -45,6 +45,20 @@ blockquote {
 	}
 }
 
+code {
+	background: rgba(0, 0, 0, 0.025);
+	border: 1px solid rgba(#000, .05);
+	border-radius: 3px;
+	padding: 3px;
+
+	pre & {
+		padding: 0;
+		border-radius: 0;
+		border: none;
+		background: none;
+	}
+}
+
 hr {
 	margin-top: 2rem;
 	margin-bottom: 2rem;
@@ -67,16 +81,15 @@ img {
 	max-width: 100%;
 }
 
-
 .text-wrap {
 	font-size: 1rem;
 	line-height: 1.66;
 
-	>:first-child {
+	> :first-child {
 		margin-top: 0;
 	}
 
-	>:last-child {
+	> :last-child {
 		margin-bottom: 0;
 	}
 

src/assets/scss/dashboard/_utilities.scss

@@ -24,6 +24,8 @@
 	}
 }
 
-.o-auto { overflow: auto !important; }
+.o-auto   { overflow: auto !important; }
 .o-hidden { overflow: hidden !important; }
 
+.shadow	      { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important; }
+.shadow-none  { box-shadow: none !important; }