1
0
mirror of https://github.com/bigchaindb/site.git synced 2024-11-22 09:46:57 +01:00

basic styleguide

This commit is contained in:
Matthias Kretschmann 2015-12-22 14:57:22 +01:00
parent e94a292bac
commit 761ee63913
8 changed files with 388 additions and 5 deletions

View File

@ -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';

View File

@ -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;
}

View File

@ -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 */

View File

@ -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
//

View File

@ -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 }

48
_src/_data/colors.yml Normal file
View File

@ -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

View File

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

131
_src/styleguide.md Normal file
View File

@ -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>
```