add a style guide section, add existing colors

.gitignore

@@ -3,4 +3,5 @@
 _site
 
 .sass-cache
-/.brackets.json
+.brackets.json
+.jekyll-metadata

_colors/brand-colors.html

@@ -0,0 +1,17 @@
+---
+title: "Brand Colors"
+type: colors
+usage: "Colors associated with Dash itself"
+---
+
+<div class="color__tile color__tile--black-bg">
+  <code class="color__name">$black</code>
+</div>
+
+<div class="color__tile color__tile--white-bg">
+  <code class="color__name">$white</code>
+</div>
+
+<div class="color__tile color__tile--blue-bg">
+  <code class="color__name">$blue</code>
+</div>

_colors/site-colors.html

@@ -0,0 +1,20 @@
+---
+title: "Site Colors"
+type: colors
+---
+
+<div class="color__tile color__tile--red-bg">
+  <code class="color__name">$red</code>
+</div>
+
+<div class="color__tile color__tile--green-bg">
+  <code class="color__name">$green</code>
+</div>
+
+<div class="color__tile color__tile--gray-bg">
+  <code class="color__name">$gray</code>
+</div>
+
+<div class="color__tile color__tile--dark-blue-bg">
+  <code class="color__name">$dark-blue</code>
+</div>

_config.yml

@@ -1,5 +1,8 @@
 markdown: kramdown
-exclude: [README.md, rss.xml, _posts/README.md]
+exclude:
+  - README.md
+  - rss.xml
+  - _posts/README.md
 paginate: 5
 paginate_path: "/blog/page:num/"
 name: Dash
@@ -16,3 +19,9 @@ sass:
 gems: 
   - jekyll-paginate
   - jekyll-multiple-languages-plugin
+
+collections:
+  components: # style guide
+    output: false
+  colors: # style guide
+    output: false

_includes/component-color.html

@@ -0,0 +1,13 @@
+<article class="component">
+  <header class="component__header">
+    <h3 id="guide-{{ entry.title | slugify }}">{{ entry.title }}</h3>
+    {% if entry.usage %}<p><strong>Usage:</strong> {{ entry.usage }}</p>{% endif %}
+  </header>
+
+  <div class="component__content--color">
+    <div class="component__rendered--color">
+      {{ entry.content }}
+    </div>
+  </div>
+
+</article>

_includes/component.html

@@ -0,0 +1,19 @@
+<article class="component">
+  <header class="component__header">
+    <h3 id="guide-{{ entry.title | slugify }}">{{ entry.title }}</h3>
+      {% if entry.usage %}<p><strong>Usage:</strong> {{ entry.usage }}</p>{% endif %}
+  </header>
+
+  <div class="component__content">
+    <div class="component__rendered">
+      {{ entry.content }}
+    </div>
+    <div class="component__code">
+
+{% highlight html %}
+{{ entry.content }}
+{% endhighlight %}
+
+    </div>
+  </div>
+</article>

_layouts/styleguide.html

@@ -0,0 +1,8 @@
+---
+layout: default
+---
+
+<div id="styleguide" class="content">
+  <h1>{{ page.title }}</h1>
+  {{ content }}
+</div>

_sass/_colors.scss

@@ -1,9 +1,38 @@
+// brand colors
 $black:		#2f2f2f;
 $white:		#ffffff;
-
 $blue:		#1c75bc;
+
+// site colors
 $red:		#ec2227;
 $green:		#1dd68a;
-
 $gray:		#f0f0f0;
-$dark-blue:	#0b3b5a;
+$dark-blue:	#0b3b5a;
+
+// for the style guide:
+
+@function contrast-color($color, $dark, $light) {
+  @if (lightness($color) > 50) {
+    @return $dark; // Lighter backgorund, return dark color
+  } @else {
+    @return $light; // Darker background, return light color
+  }
+}
+
+$color:
+  ('black', $black),
+  ('white', $white),
+
+  ('blue', $blue),
+  ('red', $red),
+  ('green', $green),
+
+  ('gray', $gray),
+  ('dark-blue', $dark-blue);
+
+@each $name, $bgcolor in $color {
+  .color__tile--#{$name}-bg {
+    background-color: $bgcolor;
+    color: contrast-color($bgcolor, #000, #fff);
+  }
+}

_sass/_styleguide.scss

@@ -0,0 +1,19 @@
+#styleguide {
+  .component {
+    &:after { // TODO clearfix mixin
+      content: '';
+      display: table;
+      clear: both;
+    }
+  }
+  .component + .component {
+    margin-top: 10px;
+  }
+
+  .color__tile {
+    display: inline-block;
+    padding: 20px;
+    text-align: center;
+    width: 10em;
+  }
+}

assets/css/style.scss

@@ -73,6 +73,7 @@ a.blog_link {
 @import "interior";
 @import "post";
 @import "header";
+@import "styleguide";
 
 @import "1024";
 @import "768";

style-guide/index.html

@@ -0,0 +1,39 @@
+---
+layout: styleguide
+title: Style guide
+description: Collection of website components used on dash.org
+---
+
+Here are all the pieces that make up this website.
+
+{% assign colors = site.colors %}
+{% assign componentsByType = site.components | group_by:"type" %}
+
+<!--
+<nav id="component-selector" class="wrap">
+  <h2>Components</h2>
+  <ul>
+    {% for type in componentsByType %}
+    <li>
+      <a href="#guide-{{ type.name }}">{{ type.name | capitalize }}</a>
+      <ul>
+        {% for entry in type.items %}
+        <a href="#guide-{{ entry.title | slugify }}">{{ entry.title }}</a>
+        {% endfor %}
+      </ul>
+    </li>
+    {% endfor %}
+  </ul>
+</nav>
+-->
+
+<h2 id="guide-colors" class="cf">Colors</h2>
+{% for entry in colors %}
+  {% include component-color.html %}
+{% endfor %}
+{% for type in componentsByType %}
+<h2 id="guide-{{ type.name }}" class="cf">{{ type.name | capitalize }}</h2>
+{% for entry in type.items %}
+  {% include component.html %}
+{% endfor %}
+{% endfor %}