basic styleguide

_src/_assets/styles/bigchain.scss

@@ -24,6 +24,8 @@
 @import 'bigchain/_media';
 @import 'bigchain/_sections';
 @import 'bigchain/_alerts';
+@import 'bigchain/_code';
+@import 'bigchain/_syntax';
 @import 'bigchain/_footer';
 @import 'bigchain/_utilities';
 
@@ -33,3 +35,4 @@
 // specific page styles
 @import 'page-front';
 @import 'page-404';
+@import 'page-styleguide';

_src/_assets/styles/bigchain/_code.scss

@@ -0,0 +1,64 @@
+//
+// Code (inline and block)
+// --------------
+// bigchain.io
+//
+code,
+kbd,
+pre,
+samp {
+    font-family: $font-family-monospace;
+    font-size: .75rem;
+}
+
+// Inline code
+code {
+    padding: 2px 4px;
+    color: $code-color;
+    background-color: $code-bg;
+    border-radius: $border-radius;
+}
+
+// User input typically entered via keyboard
+kbd {
+    padding: 2px 4px;
+    color: $kbd-color;
+    background-color: $kbd-bg;
+    border-radius: $border-radius-sm;
+    box-shadow: inset 0 -1px 0 rgba(0,0,0,.25);
+    kbd {
+        padding: 0;
+        font-size: 100%;
+        font-weight: bold;
+        box-shadow: none;
+    }
+}
+
+// Blocks of code
+pre {
+    display: block;
+    padding: 1em;
+    margin: 0 0 $spacer;
+    line-height: $line-height;
+    word-break: break-all;
+    word-wrap: break-word;
+    color: $pre-color;
+    background-color: $pre-bg;
+    border-radius: $border-radius;
+
+    // Account for some code outputs that place code tags in pre tags
+    code {
+        padding: 0;
+        font-size: inherit;
+        color: inherit;
+        white-space: pre-wrap;
+        background-color: transparent;
+        border-radius: 0;
+    }
+}
+
+// Enable scrollable blocks of code
+.pre-scrollable {
+    max-height: $pre-scrollable-max-height;
+    overflow-y: scroll;
+}

_src/_assets/styles/bigchain/_syntax.scss

@@ -0,0 +1,63 @@
+
+// https://github.com/richleland/pygments-css/blob/master/pastie.css
+
+.highlight .hll { background-color: #ffffcc }
+.highlight .c { color: #888888 } /* Comment */
+.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
+.highlight .k { color: #008800; font-weight: bold } /* Keyword */
+.highlight .cm { color: #888888 } /* Comment.Multiline */
+.highlight .cp { color: #cc0000; font-weight: bold } /* Comment.Preproc */
+.highlight .c1 { color: #888888 } /* Comment.Single */
+.highlight .cs { color: #cc0000; font-weight: bold; background-color: #fff0f0 } /* Comment.Special */
+.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
+.highlight .ge { font-style: italic } /* Generic.Emph */
+.highlight .gr { color: #aa0000 } /* Generic.Error */
+.highlight .gh { color: #303030 } /* Generic.Heading */
+.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
+.highlight .go { color: #888888 } /* Generic.Output */
+.highlight .gp { color: #555555 } /* Generic.Prompt */
+.highlight .gs { font-weight: bold } /* Generic.Strong */
+.highlight .gu { color: #606060 } /* Generic.Subheading */
+.highlight .gt { color: #aa0000 } /* Generic.Traceback */
+.highlight .kc { color: #008800; font-weight: bold } /* Keyword.Constant */
+.highlight .kd { color: #008800; font-weight: bold } /* Keyword.Declaration */
+.highlight .kn { color: #008800; font-weight: bold } /* Keyword.Namespace */
+.highlight .kp { color: #008800 } /* Keyword.Pseudo */
+.highlight .kr { color: #008800; font-weight: bold } /* Keyword.Reserved */
+.highlight .kt { color: #888888; font-weight: bold } /* Keyword.Type */
+.highlight .m { color: #0000DD; font-weight: bold } /* Literal.Number */
+.highlight .s { color: #dd2200; background-color: #fff0f0 } /* Literal.String */
+.highlight .na { color: #336699 } /* Name.Attribute */
+.highlight .nb { color: #003388 } /* Name.Builtin */
+.highlight .nc { color: #bb0066; font-weight: bold } /* Name.Class */
+.highlight .no { color: #003366; font-weight: bold } /* Name.Constant */
+.highlight .nd { color: #555555 } /* Name.Decorator */
+.highlight .ne { color: #bb0066; font-weight: bold } /* Name.Exception */
+.highlight .nf { color: #0066bb; font-weight: bold } /* Name.Function */
+.highlight .nl { color: #336699; font-style: italic } /* Name.Label */
+.highlight .nn { color: #bb0066; font-weight: bold } /* Name.Namespace */
+.highlight .py { color: #336699; font-weight: bold } /* Name.Property */
+.highlight .nt { color: #bb0066; font-weight: bold } /* Name.Tag */
+.highlight .nv { color: #336699 } /* Name.Variable */
+.highlight .ow { color: #008800 } /* Operator.Word */
+.highlight .w { color: #bbbbbb } /* Text.Whitespace */
+.highlight .mf { color: #0000DD; font-weight: bold } /* Literal.Number.Float */
+.highlight .mh { color: #0000DD; font-weight: bold } /* Literal.Number.Hex */
+.highlight .mi { color: #0000DD; font-weight: bold } /* Literal.Number.Integer */
+.highlight .mo { color: #0000DD; font-weight: bold } /* Literal.Number.Oct */
+.highlight .sb { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Backtick */
+.highlight .sc { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Char */
+.highlight .sd { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Doc */
+.highlight .s2 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Double */
+.highlight .se { color: #0044dd; background-color: #fff0f0 } /* Literal.String.Escape */
+.highlight .sh { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Heredoc */
+.highlight .si { color: #3333bb; background-color: #fff0f0 } /* Literal.String.Interpol */
+.highlight .sx { color: #22bb22; background-color: #f0fff0 } /* Literal.String.Other */
+.highlight .sr { color: #008800; background-color: #fff0ff } /* Literal.String.Regex */
+.highlight .s1 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Single */
+.highlight .ss { color: #aa6600; background-color: #fff0f0 } /* Literal.String.Symbol */
+.highlight .bp { color: #003388 } /* Name.Builtin.Pseudo */
+.highlight .vc { color: #336699 } /* Name.Variable.Class */
+.highlight .vg { color: #dd7700 } /* Name.Variable.Global */
+.highlight .vi { color: #3333bb } /* Name.Variable.Instance */
+.highlight .il { color: #0000DD; font-weight: bold } /* Literal.Number.Integer.Long */

_src/_assets/styles/bigchain/_variables.scss

@@ -7,7 +7,6 @@
 //
 // Colors
 //
-//$brand-main-blue:         #003C69 !default;
 $brand-main-blue:         #275B82 !default;
 $brand-main-blue-dark:    #101A25 !default;
 
@@ -108,6 +107,20 @@ $component-active-bg:    $brand-primary !default;
 $gutter-space:              ($spacer * 2) !default;
 
 
+//
+// Code
+//
+$code-color:                    #c7254e !default;
+$code-bg:                       #f9f2f4 !default;
+
+$kbd-color:                     #fff !default;
+$kbd-bg:                        #333 !default;
+
+$pre-bg:                        #f5f5f5 !default;
+$pre-color:                     $gray-dark !default;
+$pre-scrollable-max-height:     340px !default;
+
+
 //
 // Buttons
 //
@@ -154,6 +167,7 @@ $btn-border-radius:              $border-radius !default;
 $btn-border-radius-lg:           $border-radius-lg !default;
 $btn-border-radius-sm:           $border-radius-sm !default;
 
+
 //
 // Forms
 //

_src/_assets/styles/page-styleguide.scss

@@ -0,0 +1,58 @@
+
+.page-styleguide {
+    .highlight { margin-bottom: ($spacer * 2) }
+}
+
+// color swatches
+.color {
+    padding: ($spacer / 2);
+    margin-bottom: 5px;
+    border-radius: $border-radius;
+    border: 1px solid #eee;
+    min-height: 70px;
+
+    &,
+    .color-meta { @extend .transition; }
+
+    .color-meta {
+        display: block;
+        font-family: $font-family-monospace;
+        font-size: 9px;
+        color: #fff;
+        vertical-align: middle;
+        opacity: 0;
+    }
+
+    &:hover {
+        background: #444 !important;
+
+        .color-meta { opacity: 1 }
+    }
+}
+
+.color-hex {
+    margin-top: 5px;
+    font-size: 11px !important;
+    text-align: center;
+    border-top: 1px solid #777;
+    padding-top: 5px;
+}
+
+
+// colors
+.brand-main-blue        { background: $brand-main-blue }
+.brand-main-blue-dark   { background: $brand-main-blue-dark }
+.brand-main-gray        { background: $brand-main-gray }
+.brand-main-brown       { background: $brand-main-brown }
+.brand-main-light       { background: $brand-main-light }
+
+.gray-dark              { background: $gray-dark }
+.gray                   { background: $gray }
+.gray-light             { background: $gray-light }
+.gray-lighter           { background: $gray-lighter }
+.gray-lightest          { background: $gray-lightest }
+
+.brand-success          { background: $brand-success }
+.brand-info             { background: $brand-info }
+.brand-warning          { background: $brand-warning }
+.brand-danger           { background: $brand-danger }

_src/_data/colors.yml

@@ -0,0 +1,48 @@
+
+#
+# Primary
+#
+primary:
+    - name: brand-main-blue
+      hex: 275B82
+    - name: brand-main-blue-dark
+      hex: 101A25
+    - name: brand-main-gray
+      hex: 70859B
+    - name: brand-main-brown
+      hex: B56D00
+    - name: brand-main-light
+      hex: FFFFFF
+
+
+#
+# Grays
+#
+grays:
+    - name: gray-dark
+      hex: 445261
+    - name: gray
+      hex: 70859B
+    - name: gray-light
+      hex: ACB8C5
+    - name: gray-lighter
+      hex: CAD2DA
+    - name: gray-lightest
+      hex: E8EBEF
+
+
+#
+# Errors
+#
+errors:
+    - name: brand-success
+      hex: 388250
+
+    - name: brand-info
+      hex: 3E91CE
+
+    - name: brand-warning
+      hex: 8E8E24
+
+    - name: brand-danger
+      hex: 8F3B39

_src/_layouts/page.html

@@ -3,10 +3,12 @@ layout: base
 ---
 
 <header role="banner" class="page-header background--gray">
-    <svg class="logo logo--sm" aria-labelledby="title">
+    <a href="/">
-        <title>Logo</title>
+        <svg class="logo logo--sm" aria-labelledby="title">
-        <use xlink:href="/assets/img/sprite.svg#logo"></use>
+            <title>Logo</title>
-    </svg>
+            <use xlink:href="/assets/img/sprite.svg#logo"></use>
+        </svg>
+    </a>
 </header>
 
 <section role="main" class="page-content">

_src/styleguide.md

@@ -0,0 +1,131 @@
+---
+layout: page
+
+title: Style Guide
+sitemap: false
+---
+
+## Colors
+
+### Primary
+
+<div class="grid grid--gutters grid--full grid-medium--fit">
+    {% for color in site.data.colors.primary %}
+    <div class="grid__col">
+        <div class="color {{ color.name }}">
+            <span class="color-meta color-name">${{ color.name }}</span>
+            <span class="color-meta color-hex">#{{ color.hex }}</span>
+        </div>
+    </div>
+    {% endfor %}
+</div>
+
+### Grays
+
+<div class="grid grid--gutters grid--full grid-medium--fit">
+    {% for color in site.data.colors.grays %}
+    <div class="grid__col">
+        <div class="color {{ color.name }}">
+            <span class="color-meta color-name">${{ color.name }}</span>
+            <span class="color-meta color-hex">#{{ color.hex }}</span>
+        </div>
+    </div>
+    {% endfor %}
+</div>
+
+### Errors
+
+<div class="grid grid--gutters grid--full grid-medium--fit">
+    {% for color in site.data.colors.errors %}
+    <div class="grid__col">
+        <div class="color {{ color.name }}">
+            <span class="color-meta color-name">${{ color.name }}</span>
+            <span class="color-meta color-hex">#{{ color.hex }}</span>
+        </div>
+    </div>
+    {% endfor %}
+</div>
+
+
+# Typography
+
+## Body Copy
+
+Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis [parturient montes](#), nascetur ridiculus mus. Nullam id dolor id nibh **ultricies vehicula**.
+
+Donec *ullamcorper nulla* non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
+
+```html
+<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis <a href="#">parturient montes</a>, nascetur ridiculus mus. Nullam id dolor id nibh <strong>ultricies vehicula</strong>.</p>
+
+<p>Donec <em>ullamcorper nulla</em> non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>
+```
+
+<p class="large">Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus.</p>
+
+```html
+<p class="large">Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus.</p>
+```
+
+<small>Maecenas sed diam eget risus varius blandit sit amet non magna.</small>
+
+```html
+<small>Maecenas sed diam eget risus varius blandit sit amet non magna.</small>
+```
+
+<p class="mini">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+
+```html
+<p class="mini">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+```
+
+
+## Headings
+
+# Heading 1
+## Heading 2
+### Heading 3
+#### Heading 4
+
+
+## Lists
+
+* Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
+* Est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
+* Maecenas sed diam eget risus varius blandit sit amet non magna.
+
+1. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
+2. Est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
+3. Maecenas sed diam eget risus varius blandit sit amet non magna.
+
+
+## Components
+
+### Buttons
+
+<a class="btn btn-primary">Button</a> <a class="btn btn-primary btn-xs">Button</a> <a class="btn btn-primary btn-sm">Button</a> <a class="btn btn-primary btn-lg">Button</a>
+
+```html
+<a class="btn btn-primary">Button</a>
+<a class="btn btn-primary btn-xs">Button</a>
+<a class="btn btn-primary btn-sm">Button</a>
+<a class="btn btn-primary btn-lg">Button</a>
+```
+
+
+### Alerts
+
+<div class="alert alert-success"><strong class="alert__title">Lucas ipsum</strong> dolor sit amet kenobi ubese yaka weequay aka trioculus</div>
+<div class="alert alert-info"><strong class="alert__title">Lucas ipsum</strong> Lucas ipsum dolor sit amet kenobi ubese yaka weequay aka trioculus</div>
+<div class="alert alert-warning"><strong class="alert__title">Lucas ipsum</strong> Lucas ipsum dolor sit amet kenobi ubese yaka weequay aka trioculus</div>
+<div class="alert alert-danger"><strong class="alert__title">Lucas ipsum</strong> Lucas ipsum dolor sit amet kenobi ubese yaka weequay aka trioculus</div>
+
+```html
+<div class="alert alert-success"><strong class="alert__title">Lucas ipsum</strong>Lucas ipsum dolor sit amet kenobi ubese yaka weequay aka trioculus</div>
+
+<div class="alert alert-info"><strong class="alert__title">Lucas ipsum</strong>Lucas ipsum dolor sit amet kenobi ubese yaka weequay aka trioculus</div>
+
+<div class="alert alert-warning"><strong class="alert__title">Lucas ipsum</strong>Lucas ipsum dolor sit amet kenobi ubese yaka weequay aka trioculus</div>
+
+<div class="alert alert-danger"><strong class="alert__title">Lucas ipsum</strong>Lucas ipsum dolor sit amet kenobi ubese yaka weequay aka trioculus</div>
+```