mirror of
https://github.com/bigchaindb/site.git
synced 2024-12-24 02:16:10 +01:00
basic styleguide
This commit is contained in:
parent
e94a292bac
commit
761ee63913
@ -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';
|
||||
|
||||
64
_src/_assets/styles/bigchain/_code.scss
Normal file
64
_src/_assets/styles/bigchain/_code.scss
Normal 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;
|
||||
}
|
||||
63
_src/_assets/styles/bigchain/_syntax.scss
Normal file
63
_src/_assets/styles/bigchain/_syntax.scss
Normal 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 */
|
||||
@ -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
|
||||
//
|
||||
|
||||
58
_src/_assets/styles/page-styleguide.scss
Normal file
58
_src/_assets/styles/page-styleguide.scss
Normal 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
48
_src/_data/colors.yml
Normal 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
|
||||
@ -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
131
_src/styleguide.md
Normal 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>
|
||||
```
|
||||
Loading…
Reference in New Issue
Block a user