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;
@@ -299,3 +299,6 @@ $flag-icons: ('ad', 'ae', 'af', 'ag', 'ai', 'al', 'am', 'ao', 'aq', 'ar', 'as',
 
 // Hr
 $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; }