├── .gitignore
├── src
    ├── scss
    │   ├── base
    │   │   ├── layout.scss
    │   │   ├── variables.scss
    │   │   └── typography.scss
    │   ├── pages
    │   │   ├── cards.scss
    │   │   ├── grid-system.scss
    │   │   └── colors.scss
    │   ├── style.scss
    │   ├── components
    │   │   ├── ProfilePicture.scss
    │   │   ├── Tag.scss
    │   │   ├── Card.scss
    │   │   ├── DropDown.scss
    │   │   ├── NavBar.scss
    │   │   ├── GridSystem.scss
    │   │   ├── ExternalPage.scss
    │   │   └── Button.scss
    │   └── guide.scss
    └── js
    │   ├── index.js
    │   ├── guide.js
    │   ├── components
    │       └── Card.jsx
    │   └── utils.js
├── .npmignore
├── public
    ├── img
    │   └── block-title-text--hero@2x.png
    ├── css
    │   ├── colors.css
    │   ├── guide.css
    │   └── style.css
    ├── cards.html
    ├── tags.html
    ├── profile-pictures.html
    ├── navbar.html
    ├── index.html
    ├── grid-system.html
    ├── typography.html
    ├── external-pages.html
    └── colors.html
├── .jshintrc
├── .editorconfig
├── server.js
├── scripts
    └── publish-github-pages.sh
├── LICENSE
├── package.json
├── README.md
└── Gulpfile.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist
3 | npm-debug.log
4 | 


--------------------------------------------------------------------------------
/src/scss/base/layout.scss:
--------------------------------------------------------------------------------
1 | *, *:before, *:after {
2 |   box-sizing: inherit;
3 | }


--------------------------------------------------------------------------------
/src/js/index.js:
--------------------------------------------------------------------------------
1 | import Card from './components/Card';
2 | 
3 | module.exports = {
4 |   Card: Card
5 | };
6 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
 1 | .git*
 2 | src/
 3 | public/
 4 | 
 5 | .editorconfig
 6 | .jshintrc
 7 | .gitignore
 8 | Gulpfile.js
 9 | server.js
10 | 


--------------------------------------------------------------------------------
/src/scss/pages/cards.scss:
--------------------------------------------------------------------------------
1 | @import "base/variables";
2 | 
3 | // Card - Modifier
4 | .Card--no-padding {
5 |   margin-bottom: 0;
6 | }


--------------------------------------------------------------------------------
/public/img/block-title-text--hero@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bufferapp/buffer-style/HEAD/public/img/block-title-text--hero@2x.png


--------------------------------------------------------------------------------
/.jshintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "browser": true,
 3 |   "node": true,
 4 |   "esnext": true,
 5 |   "devel": true,
 6 |   "curly": false,
 7 |   "undef": true,
 8 |   "globals": {
 9 |     "React": true
10 |   },
11 |   "-W030": true
12 | }
13 | 


--------------------------------------------------------------------------------
/src/js/guide.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import Card from './components/Card.jsx';
 3 | 
 4 | React.render(
 5 |   (
 6 |     <Card>
 7 |       <p>This is a card</p>
 8 |     </Card>
 9 |   ),
10 |   document.querySelector('#js-card')
11 | );
12 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # Info: http://EditorConfig.org
 2 | 
 3 | # top-most EditorConfig file
 4 | root = true
 5 | 
 6 | [*]
 7 | end_of_line = lf
 8 | charset = utf-8
 9 | trim_trailing_whitespace = true
10 | insert_final_newline = true
11 | indent_style = space
12 | indent_size = 2
13 | 


--------------------------------------------------------------------------------
/src/js/components/Card.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { getValidProps } from '../utils';
 3 | 
 4 | class Card extends React.Component {
 5 |   render () {
 6 |     return (
 7 |       <div className="Card"
 8 |            {...getValidProps(this.props)}>
 9 |         {this.props.children}
10 |       </div>
11 |     )
12 |   }
13 | }
14 | 
15 | export default Card;
16 | 


--------------------------------------------------------------------------------
/server.js:
--------------------------------------------------------------------------------
 1 | var express = require('express');
 2 | var http = require('http');
 3 | var app = express();
 4 | 
 5 | var port = 3000;
 6 | 
 7 | // app.get('/', function (req, res) {
 8 | //   res.redirect('/index.html');
 9 | // });
10 | 
11 | app.use(express.static(__dirname + '/public'));
12 | 
13 | var server = app.listen(port, function () {
14 |   console.log('Style Guide at http://localhost:%s', port);
15 | });
16 | 


--------------------------------------------------------------------------------
/scripts/publish-github-pages.sh:
--------------------------------------------------------------------------------
 1 | git checkout master
 2 | git checkout -b tmp-gh-pages
 3 | 
 4 | gulp github-pages
 5 | 
 6 | # Add all updated public files
 7 | git add public/**/*
 8 | git commit -am 'Add files'
 9 | 
10 | # Split the public folder into the branch gh-pages
11 | git subtree split --prefix public -b gh-pages
12 | git push -f origin gh-pages:gh-pages
13 | git checkout master
14 | git branch -D tmp-gh-pages
15 | git branch -D gh-pages
16 | 


--------------------------------------------------------------------------------
/public/css/colors.css:
--------------------------------------------------------------------------------
 1 | .CardWithColor {
 2 |   margin: -17px -17px 16px -17px;
 3 |   padding: 16px;
 4 |   text-align: center;
 5 |   border-radius: 2px 2px 0 0; }
 6 | 
 7 | .CardWithColor h3 {
 8 |   margin-bottom: 0; }
 9 | 
10 | .CardWithColor p {
11 |   margin-top: 0; }
12 | 
13 | .CardWithColor--blue-1 {
14 |   background-color: #168eea; }
15 | 
16 | .CardWithColor--blue-1 h3 {
17 |   color: #fff; }
18 | 
19 | .CardWithColor--blue-1 p {
20 |   color: rgba(255, 255, 255, 0.75); }
21 | 


--------------------------------------------------------------------------------
/src/scss/style.scss:
--------------------------------------------------------------------------------
 1 | // Base
 2 | @import "base/variables";
 3 | @import "base/typography";
 4 | @import "base/layout";
 5 | 
 6 | // Components
 7 | @import "components/Button";
 8 | @import "components/Card";
 9 | @import "components/ExternalPage";
10 | @import "components/GridSystem";
11 | @import "components/NavBar";
12 | @import "components/ProfilePicture";
13 | @import "components/Tag";
14 | 
15 | // Pages
16 | @import "pages/cards";
17 | @import "pages/colors";
18 | @import "pages/grid-system";


--------------------------------------------------------------------------------
/src/js/utils.js:
--------------------------------------------------------------------------------
 1 | const VALID_PROPS = [
 2 |   'style',
 3 |   'onClick',
 4 |   'onHover',
 5 |   'onSelect',
 6 |   'onHover',
 7 |   'onChange'
 8 |   // TODO - Add more
 9 | ];
10 | 
11 | // TODO - Test performance of reduce vs. for loop
12 | export function getValidProps(originalProps) {
13 |   return VALID_PROPS.reduce(function(props, validPropName) {
14 |     if (validPropName in originalProps)
15 |       props[validPropName] = originalProps[validPropName];
16 |     return props;
17 |   }, {});
18 | }
19 | 


--------------------------------------------------------------------------------
/src/scss/components/ProfilePicture.scss:
--------------------------------------------------------------------------------
 1 | @import "../base/variables";
 2 | 
 3 | // ProfilePicture
 4 | .ProfilePicture {
 5 |   display: block;
 6 |   width: 32px;
 7 |   height: 32px;
 8 |   border-radius: 256px;
 9 | }
10 | 
11 | // ProfilePicture - Modifiers
12 | .ProfilePicture--extra-large {
13 |   width: 128px;
14 |   height: 128px;
15 | }
16 | 
17 | .ProfilePicture--large {
18 |   width: 64px;
19 |   height: 64px;
20 | }
21 | 
22 | .ProfilePicture--medium {
23 |   width: 48px;
24 |   height: 48px;
25 | }
26 | 
27 | .ProfilePicture--small {
28 |   width: 16px;
29 |   height: 16px;
30 | }


--------------------------------------------------------------------------------
/src/scss/components/Tag.scss:
--------------------------------------------------------------------------------
 1 | @import "../base/variables";
 2 | 
 3 | // Tag
 4 | .Tag {
 5 |   display: inline-block;
 6 |   padding: 2px 8px;
 7 |   font-size: 11px;
 8 |   font-weight: 600;
 9 |   color: $shuttle-gray;
10 |   background-color: $geyser;
11 |   border-radius: $border-radius-level-1;
12 | }
13 | 
14 | // Tag - Modifiers
15 | .Tag--margin-right {
16 |   margin-right: 8px;
17 | }
18 | 
19 | .Tag--state-error,
20 | .Tag--type-primary {
21 |   color: $white;
22 | }
23 | 
24 | 
25 | .Tag--state-error {
26 |   background-color: $torch-red;
27 | }
28 | 
29 | .Tag--type-primary {
30 |   background-color: $curious-blue;
31 | }
32 | 


--------------------------------------------------------------------------------
/src/scss/components/Card.scss:
--------------------------------------------------------------------------------
 1 | @import "../base/variables";
 2 | 
 3 | // Card
 4 | .Card {
 5 |   margin-bottom: 16px;
 6 |   padding: 16px;
 7 |   background-color: $white;
 8 |   border: 1px solid $geyser;
 9 |   border-radius: $border-radius-level-1;
10 | }
11 | 
12 | .Card .Card {
13 |   border-radius: $border-radius-level-2;
14 | }
15 | 
16 | .Card .Card .Card {
17 |   border-radius: $border-radius-level-3;
18 | }
19 | 
20 | // Card - Modifiers
21 | .Card--double-padding {
22 |   padding: 32px;
23 | }
24 | 
25 | .Card--empty {
26 |   border-style: dashed;
27 | }
28 | 
29 | .Card--no-border {
30 |   border: 0;
31 | }
32 | 
33 | .Card--no-padding {
34 |   padding: 0;
35 | }
36 | 


--------------------------------------------------------------------------------
/src/scss/pages/grid-system.scss:
--------------------------------------------------------------------------------
 1 | @import "base/variables";
 2 | 
 3 | // ColumnsGroup
 4 | .ColGroup {
 5 |   margin: 32px 0;
 6 | }
 7 | 
 8 | .ColGroup::after {
 9 |   display: block;
10 |   clear: both;
11 |   content: "";
12 | }
13 | 
14 | .ColGroup .ThreeColumns--large:nth-child(1) {
15 |   border-right: 0;
16 | }
17 | 
18 | .ColGroup .ThreeColumns--large:nth-child(3) {
19 |   border-left: 0;
20 | }
21 | 
22 | .ColGroup .ThreeColumns--large,
23 | .ColGroup .ThreeColumns--medium,
24 | .ColGroup .SixColumns--large,
25 | .ColGroup .SixColumns--medium {
26 |   padding: 16px;
27 |   font-size: 12px;
28 | }
29 | 
30 | .ColGroup .ThreeColumns--large,
31 | .ColGroup .ThreeColumns--medium {
32 |   border: 1px solid $geyser;
33 | }
34 | 
35 | .ColGroup .SixColumns--large,
36 | .ColGroup .SixColumns--medium {
37 |   border: 1px solid $geyser;
38 | }


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2015 Buffer
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 
23 | 


--------------------------------------------------------------------------------
/src/scss/base/variables.scss:
--------------------------------------------------------------------------------
 1 | // See http://bufferapp.github.io/buffer-style/colors.html to see how, when, and where we
 2 | // should use the below palettes.
 3 | 
 4 | // Blue Palette
 5 | $curious-blue: #168eea;
 6 | $denim: #137ac9;
 7 | $tory-blue: #0f63a4;
 8 | 
 9 | // Brand Palette
10 | $appdotnet: #4a484c;
11 | $facebook: #3b5998;
12 | $googleplus: #dd4b39;
13 | $linkedin: #007bb6;
14 | $pinterest: #bd081c;
15 | $twitter: #55acee;
16 | 
17 | // Gray Palette
18 | $outer-space: #323b43;
19 | $shuttle-gray: #59626a;
20 | $nevada: #666c72;
21 | $geyser: #ced7df;
22 | $aqua-haze: #f4f7f9;
23 | 
24 | // Shade Palette
25 | $white: #fff;
26 | 
27 | // State Palette
28 | $shamrock: #2fd566;
29 | $saffron: #f1cb3a;
30 | $torch-red: #ff1e1e;
31 | 
32 | // Font
33 | $font-family: "Open Sans", sans-serif;
34 | $font-size: 14px;
35 | $font-weight: 400;
36 | $line-height: 1.5;
37 | 
38 | // Border Radii
39 | $border-radius-level-1: 4px;
40 | $border-radius-level-2: 2px;
41 | $border-radius-level-3: 1px;
42 | 
43 | // Box Shadows
44 | $box-shadow-level-1: 0 1px 2px rgba($outer-space, 0.5);
45 | 
46 | // Animation
47 | $transition-animation-time: 0.1s;
48 | $transition-animation-type: linear;
49 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "buffer-style",
 3 |   "author": "Sunil Sadasivan",
 4 |   "description": "The Buffer Style and Guide",
 5 |   "repository": {
 6 |     "type": "git",
 7 |     "url": "git://github.com/bufferapp/buffer-style.git"
 8 |   },
 9 |   "main": "dist/js/index.js",
10 |   "version": "0.0.4",
11 |   "dependencies": {},
12 |   "devDependencies": {
13 |     "babel-core": "^5.8.23",
14 |     "babel-loader": "^5.3.2",
15 |     "browserify": "^10.2.4",
16 |     "del": "^2.0.0",
17 |     "envify": "^3.0.0",
18 |     "express": "^4.13.3",
19 |     "file-loader": "^0.8.4",
20 |     "gulp": "^3.9.0",
21 |     "gulp-babel": "^5.2.1",
22 |     "gulp-sass": "^2.0.4",
23 |     "gulp-util": "^3.0.6",
24 |     "react": "^0.13.3",
25 |     "react-hot-loader": "^1.3.0",
26 |     "reactify": "^0.15.2",
27 |     "uglify-js": "~2.4.15",
28 |     "watchify": "^2.1.1",
29 |     "webpack": "^1.12.0",
30 |     "webpack-dev-server": "^1.10.1"
31 |   },
32 |   "scripts": {
33 |     "prepublish": "gulp prepublish",
34 |     "github-pages": "./scripts/publish-github-pages.sh",
35 |     "start": "NODE_ENV=development node server.js & gulp watch"
36 |   },
37 |   "browserify": {
38 |     "transform": [
39 |       "reactify",
40 |       "envify"
41 |     ]
42 |   }
43 | }
44 | 


--------------------------------------------------------------------------------
/src/scss/base/typography.scss:
--------------------------------------------------------------------------------
 1 | @import "variables";
 2 | 
 3 | // Body
 4 | body {
 5 |   font-size: $font-size;
 6 |   line-height: $line-height;
 7 |   color: $shuttle-gray;
 8 | }
 9 | 
10 | // Code
11 | code {
12 |   padding: 2px 4px;
13 |   color: $torch-red;
14 |   background-color: rgba($torch-red, 0.1);
15 |   border-radius: $border-radius-level-2;
16 | }
17 | 
18 | // Headings
19 | h1,
20 | h2,
21 | h3,
22 | h4,
23 | h5,
24 | h6 {
25 |   line-height: normal;
26 |   color: $outer-space;
27 | }
28 | 
29 | h1,
30 | h2,
31 | h3 {
32 |   margin: 0 0 32px 0;
33 |   font-weight: 300;
34 | }
35 | 
36 | h1 {
37 |   font-size: 48px;
38 |   line-height: 72px;
39 | }
40 | 
41 | h2 {
42 |   font-size: 40px;
43 |   line-height: 60px;
44 | }
45 | 
46 | h3 {
47 |   font-size: 24px;
48 |   line-height: 36px;
49 | }
50 | 
51 | h4,
52 | h5,
53 | h6 {
54 |   margin: 0 0 16px 0;
55 |   font-size: $font-size;
56 |   line-height: $line-height;
57 | }
58 | 
59 | // Links
60 | a {
61 |   text-decoration: none;
62 | }
63 | 
64 | a:hover {
65 |   text-decoration: underline;
66 | }
67 | 
68 | // Ordered/Unordered Lists
69 | ol,
70 | ul {
71 |   margin: 32px 16px 32px 34px;
72 | }
73 | 
74 | li {
75 |   margin-bottom: 8px;
76 | }
77 | 
78 | .List--style-none {
79 |   list-style: none;
80 | }
81 | 
82 | .List--margin-bottom-0 {
83 |   margin-bottom: 0;
84 | }
85 | 
86 | // Paragraphs
87 | p {
88 |   margin: 16px 0;
89 | }
90 | 
91 | .Paragraph--order-first {
92 |   margin-top: 0;
93 | }
94 | 
95 | .Paragraph--order-last {
96 |   margin-bottom: 0;
97 | }
98 | 


--------------------------------------------------------------------------------
/src/scss/components/DropDown.scss:
--------------------------------------------------------------------------------
 1 | @import "../base/variables";
 2 | 
 3 | // DropDown
 4 | .DropDown {
 5 |   position: relative;
 6 | }
 7 | 
 8 | .DropDown:hover .DropDown__content {
 9 |   display: block;
10 | }
11 | 
12 | // DropDown - Elements
13 | .DropDown__arrow-container {
14 |   position: absolute;
15 |   top: -8px;
16 |   z-index: 1;
17 |   width: 100%;
18 |   height: 8px;
19 | }
20 | 
21 | .DropDown__arrow-container__arrow-outer {
22 |   position: absolute;
23 |   right: 16px;
24 |   width: 0;
25 |   height: 0;
26 |   border-left: 8px solid transparent;
27 |   border-right: 8px solid transparent;
28 |   border-bottom: 8px solid $geyser;
29 | }
30 | 
31 | .DropDown__arrow-container__arrow-inner {
32 |   position: absolute;
33 |   top: 1px;
34 |   right: -8px;
35 |   width: 0;
36 |   height: 0;
37 |   border-left: 8px solid transparent;
38 |   border-right: 8px solid transparent;
39 |   border-bottom: 8px solid $white;
40 | }
41 | 
42 | .DropDown__content {
43 |   position: absolute;
44 |   top: 56px;
45 |   right: 0;
46 |   z-index: 1;
47 |   display: none;
48 |   min-width: 192px;
49 |   white-space: nowrap;
50 |   background-color: $white;
51 |   border: 1px solid $geyser;
52 |   border-radius: $border-radius-level-1;
53 |   box-shadow: $box-shadow-level-1;
54 | }
55 | 
56 | .DropDown__content a {
57 |   display: block;
58 |   padding: 8px 16px;
59 |   line-height: 32px;
60 | }
61 | 
62 | .DropDown__content a:hover {
63 |   text-decoration: none;
64 |   background-color: $aqua-haze;
65 | }
66 | 
67 | .DropDown__content form {
68 |   margin-bottom: 0;
69 | }
70 | 
71 | .DropDown__content li {
72 |   margin-bottom: 0;
73 | }
74 | 
75 | .DropDown__content ul {
76 |   margin: 0;
77 |   list-style: none;
78 | }
79 | 
80 | .DropDown__content__sign-out {
81 |   border-top: 1px solid $geyser;
82 | }
83 | 


--------------------------------------------------------------------------------
/src/scss/components/NavBar.scss:
--------------------------------------------------------------------------------
 1 | @import "../base/variables";
 2 | 
 3 | // NavBar
 4 | .NavBar {
 5 |   flex-direction: row;
 6 |   justify-content: flex-start;
 7 |   align-items: center;
 8 |   z-index: 1;
 9 |   display: flex;
10 |   padding: 0 16px;
11 |   width: 100%;
12 |   height: 64px;
13 |   background-color: $white;
14 |   border-bottom: 1px solid $geyser;
15 | }
16 | 
17 | .NavBar a:hover {
18 |   text-decoration: none;
19 | }
20 | 
21 | .NavBar .bi {
22 |   margin-right: 8px;
23 | }
24 | 
25 | // NavBar - Elements
26 | .NavBar__left-menu,
27 | .NavBar__right-menu {
28 |   flex-direction: row;
29 |   align-items: center;
30 |   display: flex;
31 |   margin: 0;
32 |   list-style: none;
33 | }
34 | 
35 | .NavBar__left-menu {
36 |   justify-content: flex-start;
37 |   flex-grow: 1;
38 | }
39 | 
40 | .NavBar__menu__item {
41 |   margin: 0 32px 0 0;
42 | }
43 | 
44 | .NavBar__menu__item a {
45 |   display: inline-block;
46 | }
47 | 
48 | .NavBar__menu__item .ProfilePicture {
49 |   vertical-align: middle;
50 |   display: inline-block !important;
51 |   margin-right: 8px;
52 | }
53 | 
54 | .NavBar__menu__item__link {
55 |   color: $shuttle-gray;
56 | }
57 | 
58 | .NavBar__right-menu {
59 |   justify-content: flex-end;
60 |   flex-grow: 0;
61 | }
62 | 
63 | .NavBar__right-menu .Button {
64 |   margin-right: 16px;
65 | }
66 | 
67 | .NavBar__title {
68 |   flex-grow: 0;
69 |   margin-right: 50px;
70 |   font-size: 16px;
71 |   font-weight: 600;
72 |   color: $outer-space;
73 | }
74 | 
75 | .NavBar__title:hover {
76 |   text-decoration: none;
77 |   color: $shuttle-gray;
78 | }
79 | 
80 | .NavBar__title a {
81 |   color: $outer-space;
82 | }
83 | 
84 | // NavBar - Element Modifiers
85 | .NavBar__menu__item--active .NavBar__menu__item__link {
86 |   font-weight: 600;
87 |   color: $outer-space;
88 | }
89 | 
90 | .NavBar__menu__item--last {
91 |   margin-right: 0;
92 | }
93 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # buffer-style-guide
 2 | 
 3 | [![NPM Version](https://img.shields.io/npm/v/buffer-style.svg)](https://www.npmjs.com/package/buffer-style)
 4 | 
 5 | A unified style and components to use across Buffer applications and services
 6 | 
 7 | ## Usage
 8 | 
 9 | To use in your project. Use npm to install and use either Webpack or browserify
10 | to build your project:
11 | 
12 | ```
13 | $ npm install --save buffer-style
14 | ```
15 | 
16 | ### React components
17 | 
18 | ```javascript
19 | // ES5
20 | var Card = require('buffer-style').Card;
21 | // ES2015
22 | import { Card } from 'buffer-style'
23 | ```
24 | 
25 | ### CSS
26 | 
27 | To use the css in your project copy the stylesheet from your `node_modules`
28 | directory. Example:
29 | 
30 | ```
31 | $ cp ./node_modules/buffer-style/dist/css/style.css ./my-app/assets/style-code.css
32 | ```
33 | 
34 | 
35 | ## Development
36 | 
37 | ### Installing
38 | 
39 | ```
40 | $ git clone git@github.com:bufferapp/buffer-style.git
41 | $ npm install
42 | $ npm install -g gulp
43 | ```
44 | 
45 | ### Start the dev server and watch compilation
46 | 
47 | This will start a server at `http://localhost:3000` and auto-compile all css and
48 | javascript bundles.
49 | 
50 | ```
51 | $ npm start
52 | ```
53 | 
54 | ### Webpack dev Server
55 | 
56 | \**Work in Progress*\*
57 | 
58 | ### Publishing
59 | 
60 | To publish the style guide for consumption on npm, first run the prepublish task.
61 | 
62 | ```
63 | $ npm run prepublish
64 | $ npm publish
65 | ```
66 | 
67 | To publish on [Github pages](http://bufferapp.github.io/buffer-style/) run:
68 | 
69 | **WARNING!**
70 | Commit all changes! 😅👍
71 | 
72 | ```
73 | $ npm run github-pages
74 | ```
75 | 
76 | ### Directory Structure
77 | ```bash
78 | /src  - all source files for react components and scss files
79 | /public - all files for rendering the style guide only
80 | /dist - all css and js files built to be included in other projects
81 | ```
82 | 


--------------------------------------------------------------------------------
/public/css/guide.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |   margin: 0;
  3 |   padding: 0;
  4 |   box-sizing: border-box; }
  5 | 
  6 | a {
  7 |   text-decoration: none;
  8 |   color: #168eea; }
  9 |   a:hover {
 10 |     text-decoration: underline;
 11 |     color: #0f63a4; }
 12 |   a img {
 13 |     outline: none; }
 14 | 
 15 | body {
 16 |   font-family: "Open Sans", sans-serif;
 17 |   font-size: 14px;
 18 |   font-weight: 400;
 19 |   background-color: #fff; }
 20 | 
 21 | p .bi {
 22 |   margin-right: 0; }
 23 | 
 24 | .app {
 25 |   flex-direction: column;
 26 |   display: flex;
 27 |   min-height: 128vh; }
 28 | 
 29 | .body {
 30 |   flex: 1;
 31 |   display: flex; }
 32 | 
 33 | .sidebar-style-guide-list {
 34 |   margin: 0;
 35 |   list-style: none; }
 36 | 
 37 | .sidebar-style-guide-list li {
 38 |   margin: 0; }
 39 | 
 40 | .sidebar-style-guide-list a.sidebar-style-guide-list--last {
 41 |   border-bottom: 0; }
 42 | 
 43 | .sidebar-style-guide-list a {
 44 |   display: block;
 45 |   padding-top: 8px;
 46 |   padding-bottom: 8px;
 47 |   border-bottom: 1px solid #f4f7f9; }
 48 | 
 49 | .content {
 50 |   flex: 1;
 51 |   margin-top: 16px;
 52 |   margin-right: 16px;
 53 |   margin-bottom: 16px;
 54 |   margin-left: 16px; }
 55 | 
 56 | .code-block {
 57 |   margin-bottom: 32px; }
 58 | 
 59 | .code-block-title {
 60 |   padding: 8px 16px;
 61 |   font-size: 12px;
 62 |   font-weight: 600;
 63 |   color: #323b43;
 64 |   text-transform: uppercase;
 65 |   background-color: #ced7df;
 66 |   border-radius: 2px 2px 0 0; }
 67 | 
 68 | .code-block-render {
 69 |   padding: 32px 16px; }
 70 |   .code-block-render .navbar {
 71 |     position: inherit;
 72 |     margin-bottom: 0; }
 73 |   .code-block-render .sidebar-app {
 74 |     position: inherit;
 75 |     margin: 0 auto; }
 76 |   .code-block-render .metabar {
 77 |     position: relative;
 78 |     z-index: 0;
 79 |     margin: 0; }
 80 |   .code-block-render .tag {
 81 |     display: table; }
 82 |   .code-block-render [class*="Column"],
 83 |   .code-block-render [class*="Columns"] {
 84 |     border: 1px solid #ced7df; }
 85 | 
 86 | .code-block-render--dark {
 87 |   background-color: rgba(50, 59, 67, 0.9); }
 88 | 
 89 | .code-block-render,
 90 | .code-block-code {
 91 |   border-right: 1px solid #ced7df;
 92 |   border-bottom: 1px solid #ced7df;
 93 |   border-left: 1px solid #ced7df; }
 94 | 
 95 | .code-block-code {
 96 |   padding: 16px;
 97 |   background-color: #f4f7f9;
 98 |   border-radius: 0 0 2px 2px;
 99 |   overflow: hidden; }
100 |   .code-block-code pre {
101 |     white-space: pre-wrap; }
102 | 
103 | .sidebar {
104 |   flex-grow: 0;
105 |   flex-direction: column;
106 |   justify-content: flex-start;
107 |   z-index: 1;
108 |   display: flex;
109 |   min-height: 128vh;
110 |   order: -1; }
111 |   .sidebar .Card {
112 |     margin-top: 16px;
113 |     margin-left: 16px; }
114 | 


--------------------------------------------------------------------------------
/src/scss/components/GridSystem.scss:
--------------------------------------------------------------------------------
  1 | @import "../base/variables";
  2 | 
  3 | // Globals
  4 | * {
  5 |   box-sizing: border-box;
  6 | }
  7 | 
  8 | // Adds to all Columns
  9 | [class*="Column"],
 10 | [class*="Columns"] {
 11 |   float: left;
 12 |   padding: 0 16px;
 13 |   width: 100%;
 14 | }
 15 | 
 16 | // GridRow
 17 | .GridRow::after {
 18 |   display: block;
 19 |   clear: both;
 20 |   content: "";
 21 | }
 22 | 
 23 | .GridRow img {
 24 |   max-width: 100%;
 25 |   height: auto;
 26 | }
 27 | 
 28 | // GridContainer
 29 | .GridContainer {
 30 |   margin: 0 auto;
 31 | }
 32 | 
 33 | .GridContainer::after {
 34 |   display: block;
 35 |   clear: both;
 36 |   content: "";
 37 | }
 38 | 
 39 | // Smartphones
 40 | @media screen and (max-width: 768px) {
 41 |   .GridContainer {
 42 |     width: 100%;
 43 |   }
 44 | 
 45 |   .OneColumn--medium {
 46 |     width: 8.33%;
 47 |   }
 48 | 
 49 |   .TwoColumns--medium {
 50 |     width: 16.66%;
 51 |   }
 52 | 
 53 |   .ThreeColumns--medium {
 54 |     width: 25%;
 55 |   }
 56 | 
 57 |   .FourColumns--medium {
 58 |     width: 33.33%;
 59 |   }
 60 | 
 61 |   .FiveColumns--medium {
 62 |     width: 41.66%;
 63 |   }
 64 | 
 65 |   .SixColumns--medium {
 66 |     width: 50%;
 67 |   }
 68 | 
 69 |   .SevenColumns--medium {
 70 |     width: 58.33%;
 71 |   }
 72 | 
 73 |   .EightColumns--medium {
 74 |     width: 66.66%;
 75 |   }
 76 | 
 77 |   .NineColumns--medium {
 78 |     width: 75%;
 79 |   }
 80 | 
 81 |   .TenColumns--medium {
 82 |     width: 83.33%;
 83 |   }
 84 | 
 85 |   .ElevenColumns--medium {
 86 |     width: 91.66%;
 87 |   }
 88 | 
 89 |   .TwelveColumns--medium {
 90 |     width: 100%;
 91 |   }
 92 | 
 93 |   .Button--margin-top--medium {
 94 |     margin-top: 16px;
 95 |   }
 96 | 
 97 |   .Image--margin-top--medium {
 98 |     margin-top: 32px;
 99 |   }
100 | 
101 |   .Image--margin-bottom--medium {
102 |     margin-bottom: 32px;
103 |   }
104 | }
105 | 
106 | // Tablets
107 | @media screen and (min-width: 769px) and (max-width: 959px) {
108 |   .GridContainer {
109 |     width: 100%;
110 |   }
111 | }
112 | 
113 | // Desktop
114 | @media screen and (min-width: 1024px) {
115 |   .GridContainer {
116 |     width: 960px;
117 |   }
118 | 
119 |   .OneColumn--large {
120 |     width: 8.33%;
121 |   }
122 | 
123 |   .TwoColumns--large {
124 |     width: 16.66%;
125 |   }
126 | 
127 |   .ThreeColumns--large {
128 |     width: 25%;
129 |   }
130 | 
131 |   .FourColumns--large {
132 |     width: 33.33%;
133 |   }
134 | 
135 |   .FiveColumns--large {
136 |     width: 41.66%;
137 |   }
138 | 
139 |   .SixColumns--large {
140 |     width: 50%;
141 |   }
142 | 
143 |   .SevenColumns--large {
144 |     width: 58.33%;
145 |   }
146 | 
147 |   .EightColumns--large {
148 |     width: 66.66%;
149 |   }
150 | 
151 |   .NineColumns--large {
152 |     width: 75%;
153 |   }
154 | 
155 |   .TenColumns--large {
156 |     width: 83.33%;
157 |   }
158 | 
159 |   .ElevenColumns--large {
160 |     width: 91.66%;
161 |   }
162 | 
163 |   .TwelveColumns--large {
164 |     width: 100%;
165 |   }
166 | }
167 | 


--------------------------------------------------------------------------------
/src/scss/guide.scss:
--------------------------------------------------------------------------------
  1 | @import "base/variables";
  2 | 
  3 | * {
  4 |     margin: 0;
  5 |     padding: 0;
  6 |     box-sizing: border-box;
  7 | }
  8 | 
  9 | a {
 10 |   text-decoration: none;
 11 |   color: $curious-blue;
 12 | 
 13 |   &:hover {
 14 |     text-decoration: underline;;
 15 |     color: $tory-blue;
 16 |   }
 17 | 
 18 |   img {
 19 |     outline: none;
 20 |   }
 21 | }
 22 | 
 23 | body {
 24 |   font-family: $font-family;
 25 |   font-size: $font-size;
 26 |   font-weight: $font-weight;
 27 |   background-color: $white;
 28 | }
 29 | 
 30 | p {
 31 |   .bi {
 32 |     margin-right: 0;
 33 |   }
 34 | }
 35 | 
 36 | .app {
 37 |   flex-direction: column;
 38 |   display: flex;
 39 |   min-height: 128vh;
 40 | }
 41 | 
 42 | .body {
 43 |   flex: 1;
 44 |   display: flex;
 45 | }
 46 | 
 47 | .sidebar-style-guide-list {
 48 |   margin: 0;
 49 |   list-style: none;
 50 | }
 51 | 
 52 | .sidebar-style-guide-list li {
 53 |   margin: 0;
 54 | }
 55 | 
 56 | .sidebar-style-guide-list a.sidebar-style-guide-list--last {
 57 |   border-bottom: 0;
 58 | }
 59 | 
 60 | .sidebar-style-guide-list a {
 61 |   display: block;
 62 |   padding-top: 8px;
 63 |   padding-bottom: 8px;
 64 |   border-bottom: 1px solid $aqua-haze;
 65 | }
 66 | 
 67 | .content {
 68 |   flex: 1;
 69 |   margin-top: 16px;
 70 |   margin-right: 16px;
 71 |   margin-bottom: 16px;
 72 |   margin-left: 16px;
 73 | }
 74 | 
 75 | .code-block {
 76 |   margin-bottom: 32px;
 77 | }
 78 | 
 79 | .code-block-title {
 80 |   padding: 8px 16px;
 81 |   font-size: 12px;
 82 |   font-weight: 600;
 83 |   color: $outer-space;
 84 |   text-transform: uppercase;
 85 |   background-color: $geyser;
 86 |   border-radius: $border-radius-level-2 $border-radius-level-2 0 0;
 87 | }
 88 | 
 89 | .code-block-render {
 90 |   padding: 32px 16px;
 91 | 
 92 |   .navbar {
 93 |     position: inherit;
 94 |     margin-bottom: 0;
 95 |   }
 96 | 
 97 |   .sidebar-app {
 98 |     position: inherit;
 99 |     margin: 0 auto;
100 |   }
101 | 
102 |   .metabar {
103 |     position: relative;
104 |     z-index: 0;
105 |     margin: 0;
106 |   }
107 | 
108 |   .tag {
109 |     display: table;
110 |   }
111 | 
112 |   [class*="Column"],
113 |   [class*="Columns"] {
114 |     border: 1px solid $geyser;
115 |   }
116 | }
117 | 
118 | .code-block-render--dark {
119 |   background-color: rgba($outer-space, 0.9);
120 | }
121 | 
122 | .code-block-render,
123 | .code-block-code {
124 |   border-right: 1px solid $geyser;
125 |   border-bottom: 1px solid $geyser;
126 |   border-left: 1px solid $geyser;
127 | }
128 | 
129 | .code-block-code {
130 |   padding: 16px;
131 |   background-color: $aqua-haze;
132 |   border-radius: 0 0 $border-radius-level-2 $border-radius-level-2;
133 |   overflow: hidden;
134 | 
135 |   pre {
136 |     white-space: pre-wrap;
137 |   }
138 | }
139 | 
140 | .sidebar {
141 |   flex-grow: 0;
142 |   flex-direction: column;
143 |   justify-content: flex-start;
144 |   z-index: 1;
145 |   display: flex;
146 |   min-height: 128vh;
147 |   order: -1;
148 | 
149 |   .Card {
150 |     margin-top: 16px;
151 |     margin-left: 16px;
152 |   }
153 | }
154 | 


--------------------------------------------------------------------------------
/Gulpfile.js:
--------------------------------------------------------------------------------
  1 | var gulp = require('gulp');
  2 | var gutil = require('gulp-util');
  3 | var del = require('del');
  4 | var babel = require('gulp-babel');
  5 | var sass = require('gulp-sass');
  6 | var webpack = require('webpack');
  7 | var WebpackDevServer = require('webpack-dev-server');
  8 | var path = require('path');
  9 | 
 10 | 
 11 | var paths = {
 12 |   dist: './dist',
 13 |   guide: './public'
 14 | };
 15 | 
 16 | 
 17 | gulp.task('clean', function(cb) {
 18 |   del([paths.dist], cb);
 19 | });
 20 | 
 21 | gulp.task('babel', function(cb) {
 22 |   return gulp
 23 |     .src([
 24 |       '!src/guide.js',
 25 |       'src/**/*.jsx',
 26 |       'src/**/*.js'
 27 |     ])
 28 |     .pipe(babel())
 29 |     .pipe(gulp.dest(paths.dist));
 30 | });
 31 | 
 32 | var webpackConfig = {
 33 |   entry: [
 34 |     './src/js/guide.js'
 35 |   ],
 36 |   output: {
 37 | 		path: __dirname + '/public',
 38 | 		publicPath: '/',
 39 | 		filename: 'js/bundle.js'
 40 | 	},
 41 |   module: {
 42 |     loaders: [
 43 |       {
 44 |         test: /\.jsx?$/,
 45 |         exclude: /node_modules/,
 46 |         loaders: ['react-hot', 'babel?stage=0'],
 47 |       }
 48 |     ]
 49 |   },
 50 |   devtool: '#inline-source-map'
 51 | };
 52 | 
 53 | gulp.task('webpack', function(callback) {
 54 |   webpack(webpackConfig, function(err, stats) {
 55 |     if(err) throw new gutil.PluginError('webpack', err);
 56 |     gutil.log('[webpack] Complete');
 57 |     callback();
 58 |   });
 59 | });
 60 | 
 61 | gulp.task('webpack-dev-server', function(callback) {
 62 | 
 63 |   // Start a webpack-dev-server
 64 |   var compiler = webpack(webpackConfig);
 65 | 
 66 |   new WebpackDevServer(compiler, {
 67 | 
 68 |     contentBase: path.join(__dirname, 'public'),
 69 | 
 70 |     hot: true,
 71 | 
 72 |     // This is where we're running our app server
 73 |     proxy: {
 74 |       '*': 'http://localhost:3000'
 75 |     }
 76 | 
 77 |   }).listen(8080, 'localhost', function(err) {
 78 |     if(err) throw new gutil.PluginError('webpack-dev-server', err);
 79 |     // Server listening
 80 |     gutil.log('[webpack-dev-server]',
 81 |       'http://localhost:8080/webpack-dev-server/index.html');
 82 | 
 83 |     // Comment out to keep the server running
 84 |     // callback();
 85 |   });
 86 | });
 87 | 
 88 | var createSassTask = function(src, dest) {
 89 |   return function(cb) {
 90 |     return gulp
 91 |       .src(src)
 92 |       .pipe(sass().on('error', sass.logError))
 93 |       .pipe(gulp.dest(dest + '/css'));
 94 |   };
 95 | };
 96 | 
 97 | gulp.task('sass-dist', createSassTask(['./src/scss/style.scss'], paths.dist));
 98 | gulp.task('sass-all', createSassTask([ './src/scss/*.scss'], paths.guide));
 99 | 
100 | gulp.task('watch', function() {
101 |   gulp.watch('./src/scss/**/*.scss', ['sass-all']);
102 |   gulp.watch(['./src/js/**/*.js', './src/js/**/*.jsx'], ['webpack']);
103 | });
104 | 
105 | gulp.task('watch:sass', function() {
106 |   gulp.watch('./src/scss/**/*.scss', ['sass-all']);
107 | });
108 | 
109 | gulp.task('dev', ['webpack-dev-server', 'watch:sass']);
110 | 
111 | gulp.task('prepublish', ['clean', 'babel', 'sass-dist']);
112 | 
113 | gulp.task('github-pages', ['clean', 'webpack', 'sass-all']);
114 | 
115 | gulp.task('default', ['publish']);
116 | 


--------------------------------------------------------------------------------
/src/scss/components/ExternalPage.scss:
--------------------------------------------------------------------------------
  1 | @import "../base/variables";
  2 | 
  3 | // Block
  4 | .Block {
  5 |   padding: 64px 0;
  6 |   background-color: $white;
  7 | }
  8 | 
  9 | .Block .bi {
 10 |   margin-right: 8px;
 11 | }
 12 | 
 13 | .Block .bi.bi--right {
 14 |   margin-right: 0;
 15 |   margin-left: 8px;
 16 | }
 17 | 
 18 | .Block .bi.bi--shamrock {
 19 |   color: $shamrock;
 20 | }
 21 | 
 22 | // Block - Modifiers
 23 | .Block--type-alternative {
 24 |   background-color: $aqua-haze;
 25 | }
 26 | 
 27 | .Block--type-dark {
 28 |   text-align: center;
 29 |   background-color: $outer-space;
 30 | }
 31 | 
 32 | .Block--type-dark h2,
 33 | .Block--type-dark h3 {
 34 |   margin-bottom: 0;
 35 | }
 36 | 
 37 | .Block--type-dark h2 {
 38 |   color: $white;
 39 | }
 40 | 
 41 | .Block--type-dark h3 {
 42 |   color: rgba($white, 0.8);
 43 | }
 44 | 
 45 | .Block--type-dark p {
 46 |   color: rgba($white, 0.6);
 47 | }
 48 | 
 49 | .Block--type-dark .Button {
 50 |   margin-top: 32px;
 51 | }
 52 | 
 53 | .Block--type-footer h5,
 54 | .Block--type-footer p {
 55 |   margin-top: 0;
 56 |   margin-bottom: 16px;
 57 | }
 58 | 
 59 | .Block--type-footer ul {
 60 |   margin: 0 0 32px 0;
 61 | }
 62 | 
 63 | // Block - Elements
 64 | .Block__content-block {
 65 |   margin-top: 32px;
 66 | }
 67 | 
 68 | .Block__content-block h2,
 69 | .Block__content-block h3,
 70 | .Block__content-block h4 {
 71 |   margin-bottom: 0;
 72 | }
 73 | 
 74 | .Block__copyright a {
 75 |   color: $shuttle-gray;
 76 | }
 77 | 
 78 | // Block - Element Modifiers
 79 | .Block__content--align-center {
 80 |   text-align: center;
 81 | }
 82 | 
 83 | .Block__content--align-center img {
 84 |   margin: 0 auto;
 85 | }
 86 | 
 87 | .Block__content--align-left {
 88 |   text-align: left;
 89 | }
 90 | 
 91 | .Block__content--align-right {
 92 |   text-align: right;
 93 | }
 94 | 
 95 | .Block__content--margin-bottom-0 h1,
 96 | .Block__content--margin-bottom-0 h2,
 97 | .Block__content--margin-bottom-0 h3,
 98 | .Block__content--margin-bottom-0 h4,
 99 | .Block__content--margin-bottom-0 h5,
100 | .Block__content--margin-bottom-0 h6 {
101 |   margin-bottom: 0;
102 | }
103 | 
104 | .Block__content-block--top {
105 |   margin-top: 0;
106 | }
107 | 
108 | 
109 | // BlockContent
110 | .BlockContent .GridContainer {
111 |   @media screen and (max-width: 768px) { width: 100%; }
112 | }
113 | 
114 | .BlockContent .GridContainer {
115 |   @media screen and (min-width: 769px) and (max-width: 959px) { width: 100%; }
116 | }
117 | 
118 | .BlockContent .GridContainer {
119 |   @media screen and (min-width: 1024px) { width: 640px; }
120 | }
121 | 
122 | // BlockGrid
123 | .BlockGrid p {
124 |   margin-bottom: 0;
125 | }
126 | 
127 | .BlockGrid .ProfilePicture {
128 |   margin-top: 16px;
129 | }
130 | 
131 | // BlockHero
132 | .BlockHero {
133 |   padding-top: 128px;
134 |   padding-bottom: 128px;
135 |   text-align: center;
136 |   background-position: top;
137 |   background-size: cover;
138 |   background-repeat: no-repeat;
139 | }
140 | 
141 | .BlockHero h2,
142 | .BlockHero h3,
143 | .BlockHero p {
144 |   margin-bottom: 0;
145 | }
146 | 
147 | .BlockHero h2 {
148 |   color: $white;
149 | }
150 | 
151 | .BlockHero h3 {
152 |   color: rgba($white, 0.5);
153 | }
154 | 
155 | .BlockHero .Button {
156 |   margin-top: 32px;
157 | }
158 | 


--------------------------------------------------------------------------------
/src/scss/pages/colors.scss:
--------------------------------------------------------------------------------
  1 | @import "base/variables";
  2 | 
  3 | // BlockHero - Modifier
  4 | .BlockHero--colors {
  5 |   background-color: $outer-space;
  6 | }
  7 | 
  8 | // CardWithColor
  9 | .CardWithColor {
 10 |   margin: -17px -17px -17px -17px;
 11 |   padding: 64px 0;
 12 |   text-align: center;
 13 |   border-radius: $border-radius-level-1;
 14 | }
 15 | 
 16 | .CardWithColor h3 {
 17 |   margin-bottom: 0;
 18 | }
 19 | 
 20 | .CardWithColor p {
 21 |   margin: 0;
 22 | }
 23 | 
 24 | // CardWithColor - Elements
 25 | .CardWithColor__content ol,
 26 | .CardWithColor__content ul {
 27 |   margin-right: 0;
 28 |   margin-bottom: 0;
 29 |   margin-left: 0;
 30 | }
 31 | 
 32 | // CardWithColor - Modifiers
 33 | .CardWithColor--color-aqua-haze,
 34 | .CardWithColor--color-white {
 35 |   margin: -16px;
 36 | }
 37 | .CardWithColor--blue-1 {
 38 |   background-color: $curious-blue;
 39 | }
 40 | 
 41 | .CardWithColor--appdotnet h3,
 42 | .CardWithColor--blue-1 h3,
 43 | .CardWithColor--blue-2 h3,
 44 | .CardWithColor--blue-3 h3,
 45 | .CardWithColor--facebook h3,
 46 | .CardWithColor--googleplus h3,
 47 | .CardWithColor--gray-1 h3,
 48 | .CardWithColor--gray-2 h3,
 49 | .CardWithColor--gray-3 h3,
 50 | .CardWithColor--linkedin h3,
 51 | .CardWithColor--pinterest h3,
 52 | .CardWithColor--twitter h3,
 53 | .CardWithColor--red h3 {
 54 |   color: $white;
 55 | }
 56 | 
 57 | .CardWithColor--appdotnet p,
 58 | .CardWithColor--blue-1 p,
 59 | .CardWithColor--blue-2 p,
 60 | .CardWithColor--blue-3 p,
 61 | .CardWithColor--facebook p,
 62 | .CardWithColor--googleplus p,
 63 | .CardWithColor--gray-1 p,
 64 | .CardWithColor--gray-2 p,
 65 | .CardWithColor--gray-3 p,
 66 | .CardWithColor--linkedin p,
 67 | .CardWithColor--pinterest p,
 68 | .CardWithColor--twitter p,
 69 | .CardWithColor--red p {
 70 |   color: rgba($white, 0.75);
 71 | }
 72 | 
 73 | .CardWithColor--appdotnet {
 74 |   background-color: $appdotnet;
 75 | }
 76 | 
 77 | .CardWithColor--blue-2 {
 78 |   background-color: $denim;
 79 | }
 80 | 
 81 | .CardWithColor--blue-3 {
 82 |   background-color: $tory-blue;
 83 | }
 84 | 
 85 | .CardWithColor--facebook {
 86 |   background-color: $facebook;
 87 | }
 88 | 
 89 | .CardWithColor--googleplus {
 90 |   background-color: $googleplus;
 91 | }
 92 | 
 93 | .CardWithColor--gray-1 {
 94 |   background-color: $outer-space;
 95 | }
 96 | 
 97 | .CardWithColor--gray-2 {
 98 |   background-color: $shuttle-gray;
 99 | }
100 | 
101 | .CardWithColor--gray-3 {
102 |   background-color: $nevada;
103 | }
104 | 
105 | .CardWithColor--gray-4 {
106 |   background-color: $geyser;
107 | }
108 | 
109 | .CardWithColor--gray-5 {
110 |   background-color: $aqua-haze;
111 | }
112 | 
113 | .CardWithColor--green {
114 |   background-color: $shamrock;
115 | }
116 | 
117 | .CardWithColor--linkedin {
118 |   background-color: $linkedin;
119 | }
120 | 
121 | .CardWithColor--pinterest {
122 |   background-color: $pinterest;
123 | }
124 | 
125 | .CardWithColor--red {
126 |   background-color: $torch-red;
127 | }
128 | 
129 | .CardWithColor--twitter {
130 |   background-color: $twitter;
131 | }
132 | 
133 | .CardWithColor--white {
134 |   background-color: $white;
135 | }
136 | 
137 | .CardWithColor--yellow {
138 |   background-color: $saffron;
139 | }
140 | 
141 | // GridRow - Modifiers
142 | .GridRow--color-swatch {
143 |   margin-top: 32px;
144 | }
145 | 
146 | .GridRow--color-swatch-last-row .Card {
147 |   margin-bottom: 0;
148 | }
149 | 


--------------------------------------------------------------------------------
/src/scss/components/Button.scss:
--------------------------------------------------------------------------------
  1 | @import "../base/variables";
  2 | 
  3 | // Button
  4 | .Button {
  5 |   display: inline-block;
  6 |   padding: 8px 24px;
  7 |   font-family: $font-family;
  8 |   font-size: $font-size;
  9 |   line-height: $line-height;
 10 |   color: $white;
 11 |   background-color: $curious-blue;
 12 |   border: 1px solid transparent;
 13 |   border-radius: 256px;
 14 |   cursor: pointer;
 15 |   outline: none;
 16 |   transition: background-color $transition-animation-time $transition-animation-type;
 17 | }
 18 | 
 19 | .Button:active {
 20 |   background-color: $tory-blue !important;
 21 | }
 22 | 
 23 | .Button:hover {
 24 |   color: $white;
 25 |   text-decoration: none;
 26 |   background-color: $denim;
 27 | }
 28 | 
 29 | .Button [class*=" bi-"]:before,
 30 | .Button [class^=bi-]:before {
 31 |   vertical-align: baseline;
 32 | }
 33 | 
 34 | .Button .bi {
 35 |   color: $white;
 36 | }
 37 | 
 38 | // Button - Modifiers
 39 | .Button--state-error {
 40 |   color: $torch-red;
 41 |   background-color: transparent;
 42 |   border-color: $torch-red;
 43 | }
 44 | 
 45 | .Button--state-error:active {
 46 |   color: $torch-red !important;
 47 |   background-color: rgba($torch-red, 0.1) !important;
 48 | }
 49 | 
 50 | .Button--state-error:hover {
 51 |     color: $torch-red !important;
 52 |     background-color: transparent;
 53 | }
 54 | 
 55 | .Button--state-error:hover i.bi {
 56 |   color: $white;
 57 | }
 58 | 
 59 | .Button--state-error i.bi {
 60 |   color: $torch-red;
 61 | }
 62 | 
 63 | .Button--type-borderless {
 64 |   color: $curious-blue;
 65 |   background-color: transparent;
 66 |   border: 0;
 67 | }
 68 | 
 69 | .Button--type-borderless:hover {
 70 |   color: $denim;
 71 |   background-color: transparent;
 72 | }
 73 | 
 74 | .Button--type-borderless:active {
 75 |   color: $denim;
 76 |   background-color: transparent !important;
 77 | }
 78 | 
 79 | .Button--type-in-app {
 80 |   padding: 4px 16px;
 81 | }
 82 | 
 83 | .Button--type-secondary {
 84 |   color: $curious-blue;
 85 |   background-color: transparent;
 86 |   border-color: $curious-blue;
 87 | }
 88 | 
 89 | .Button--type-secondary:active {
 90 |   color: $curious-blue !important;
 91 |   background-color: rgba($curious-blue, 0.1) !important;
 92 |   border-color: $curious-blue !important;
 93 | }
 94 | 
 95 | .Button--type-secondary:hover {
 96 |   color: $denim;
 97 |   background-color: transparent;
 98 |   border-color: $denim;
 99 | }
100 | 
101 | .Button--type-secondary i.bi {
102 |   color: $curious-blue;
103 | }
104 | 
105 | .Button--type-small {
106 |   padding: 2px 10px;
107 |   font-size: 11px;
108 | }
109 | 
110 | .Button--type-tertiary {
111 |   color: $nevada;
112 |   background-color: transparent;
113 |   border-color: $geyser;
114 | }
115 | 
116 | .Button--type-tertiary i.bi {
117 |   color: $nevada;
118 | }
119 | 
120 | .Button--type-tertiary:active {
121 |   color: $outer-space !important;
122 |   background-color: rgba($outer-space, 0.1) !important;
123 |   border-color: $outer-space !important;
124 | }
125 | 
126 | .Button--type-tertiary:active i.bi {
127 |   color: $outer-space !important;
128 | }
129 | 
130 | .Button--type-tertiary:hover {
131 |   color: $outer-space;
132 |   background-color: transparent;
133 |   border-color: $outer-space;
134 | }
135 | 
136 | .Button--type-tertiary:hover i.bi {
137 |   color: $outer-space;
138 | }
139 | 
140 | // ButtonIcon
141 | .ButtonIcon {
142 |   align-self: center;
143 |   width: 16px;
144 |   height: 16px;
145 |   font-size: 16px;
146 |   line-height: 12px;
147 |   background-color: transparent;
148 |   border: 0;
149 | }
150 | 


--------------------------------------------------------------------------------
/public/cards.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en-us">
 3 |   <head>
 4 |     <meta http-equiv="X-UA-Compatible" content="IE=Edge">
 5 |     <meta charset="UTF-8">
 6 |     <title>Buffer Style Guide</title>
 7 |     <link href="css/style.css" rel="stylesheet">
 8 |     <link href="css/guide.css" rel="stylesheet">
 9 |     <link href="https://icons.buffer.com/0.11.1/buffer-icons.css" rel="stylesheet" />
10 |     <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,300,400italic,600,700" rel="stylesheet" type="text/css">
11 |   </head>
12 |   <body>
13 |     <div class="NavBar">
14 |       <div class="NavBar__title">
15 |         <a href="index.html"><i class="bi bi-buffer"></i>Style Guide</a>
16 |       </div>
17 |       <ul class="NavBar__left-menu">
18 |         <li class="NavBar__menu__item"><a class="NavBar__menu__item__link" href="index.html">Buttons</a></li>
19 |         <li class="NavBar__menu__item NavBar__menu__item--active"><a class="NavBar__menu__item__link" href="cards.html">Cards</a></li>
20 |         <li class="NavBar__menu__item"><a class="NavBar__menu__item__link" href="colors.html">Colors</a></li>
21 |         <li class="NavBar__menu__item"><a class="NavBar__menu__item__link" href="external-pages.html">External Pages</a></li>
22 |         <li class="NavBar__menu__item"><a class="NavBar__menu__item__link" href="grid-system.html">Grid System</a></li>
23 |         <li class="NavBar__menu__item"><a class="NavBar__menu__item__link" href="navbar.html">NavBar</a></li>
24 |         <li class="NavBar__menu__item"><a class="NavBar__menu__item__link" href="profile-pictures.html">Profile Pictures</a></li>
25 |         <li class="NavBar__menu__item"><a class="NavBar__menu__item__link" href="tags.html">Tags</a></li>
26 |         <li class="NavBar__menu__item NavBar__menu__item--last"><a class="NavBar__menu__item__link" href="typography.html">Typography</a></li>
27 |       </ul>
28 |       <ul class="NavBar__right-menu">
29 |         <li class="NavBar__menu__item NavBar__menu__item--last"><a class="Button Button--secondary" href="https://buffer.com/">Sign up for Free</a></li>
30 |       </ul>
31 |     </div>
32 | 
33 |     <div class="BlockHero BlockHero--colors">
34 |       <div class="GridRow">
35 |         <div class="GridContainer">
36 |           <div class="TwelveColumns--large TwelveColumns--medium">
37 |             <h2>Cards</h2>
38 |             <h3>Cards are objects that can be used to contain information. <code>less/components/Card.less</code> provides a number of predefined card styles, which are documented below, for most use cases.</h3>
39 |           </div>
40 |         </div>
41 |       </div>
42 |     </div>
43 | 
44 |     <div class="Block">
45 |       <div class="GridRow">
46 |         <div class="GridContainer">
47 |           <div class="TwelveColumns--large TwelveColumns--medium">
48 |             <div class="Block__content-block--top">
49 |               <h2>Card</h2>
50 |               <p>This is the default style of a card. To use it, set the <code>class</code> property of a <code>div</code> node to <code>Card</code>.</p>
51 |               <div class="Card">Card content</div>
52 |               <div class="Block__content-block">
53 |                 <h3>Modifiers</h3>
54 |               </div>
55 |               <div class="Block__content-block">
56 |                 <h4>Card--double-padding</h4>
57 |                 <p>Use this modifier to set a cards <code>padding</code> value from <code>16px</code> to <code>32px</code>. To use it, give a <code>div</code> node an additional class of <code>Card--double-padding</code>.</p>
58 |                 <div class="Card Card--double-padding">Card content</div>
59 |               </div>
60 |               <div class="Block__content-block">
61 |                 <h4>Card--empty</h4>
62 |                 <p>Use this modifier to describe a card that has no initial content but is expected to in the future. To use it, give a <code>div</code> node an additional class of <code>Card--empty</code>.</p>
63 |                 <div class="Card Card--empty">Card content</div>
64 |               </div>
65 |               <div class="Block__content-block">
66 |                 <h4>Card--no-border</h4>
67 |                 <p>Use this modifier when a card is displayed on a dark background. To use it, give a <code>div</code> node an additional class of <code>Card--no-border</code>.</p>
68 |                 <div class="Card Card--no-border">Card content</div>
69 |               </div>
70 |               <div class="Block__content-block">
71 |                 <h4>Card--no-padding</h4>
72 |                 <p>Use this modifier to set a cards <code>padding</code> value to <code>0</code>. To use it, give a <code>div</code> node an additional class of <code>Card--no-padding</code>.</p>
73 |                 <div class="Card Card--no-padding">Card content</div>
74 |               </div>
75 |             </div>
76 |           </div>
77 |         </div>
78 |       </div>
79 |     </div>
80 | 
81 |     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
82 |     <script src="js/bundle.js"></script>
83 |   </body>
84 | </html>


--------------------------------------------------------------------------------
/public/tags.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en-us">
 3 |   <head>
 4 |     <meta http-equiv="X-UA-Compatible" content="IE=Edge">
 5 |     <meta charset="UTF-8">
 6 |     <title>Buffer Style Guide</title>
 7 |     <link href="css/style.css" rel="stylesheet">
 8 |     <link href="css/guide.css" rel="stylesheet">
 9 |     <link href="https://icons.buffer.com/0.11.1/buffer-icons.css" rel="stylesheet" />
10 |     <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,300,400italic,600,700" rel="stylesheet" type="text/css">
11 |   </head>
12 |   <body>
13 |     <div class="NavBar">
14 |       <div class="NavBar__title">
15 |         <a href="index.html"><i class="bi bi-buffer"></i>Style Guide</a>
16 |       </div>
17 |       <ul class="NavBar__left-menu">
18 |         <li class="NavBar__menu__item"><a class="NavBar__menu__item__link" href="index.html">Buttons</a></li>
19 |         <li class="NavBar__menu__item"><a class="NavBar__menu__item__link" href="cards.html">Cards</a></li>
20 |         <li class="NavBar__menu__item"><a class="NavBar__menu__item__link" href="colors.html">Colors</a></li>
21 |         <li class="NavBar__menu__item"><a class="NavBar__menu__item__link" href="external-pages.html">External Pages</a></li>
22 |         <li class="NavBar__menu__item"><a class="NavBar__menu__item__link" href="grid-system.html">Grid System</a></li>
23 |         <li class="NavBar__menu__item"><a class="NavBar__menu__item__link" href="navbar.html">NavBar</a></li>
24 |         <li class="NavBar__menu__item"><a class="NavBar__menu__item__link" href="profile-pictures.html">Profile Pictures</a></li>
25 |         <li class="NavBar__menu__item NavBar__menu__item--active"><a class="NavBar__menu__item__link" href="tags.html">Tags</a></li>
26 |         <li class="NavBar__menu__item NavBar__menu__item--last"><a class="NavBar__menu__item__link" href="typography.html">Typography</a></li>
27 |       </ul>
28 |       <ul class="NavBar__right-menu">
29 |         <li class="NavBar__menu__item NavBar__menu__item--last"><a class="Button Button--secondary" href="https://buffer.com/">Sign up for Free</a></li>
30 |       </ul>
31 |     </div>
32 | 
33 |     <div class="BlockHero BlockHero--colors">
34 |       <div class="GridRow">
35 |         <div class="GridContainer">
36 |           <div class="TwelveColumns--large TwelveColumns--medium">
37 |             <h2>Tags</h2>
38 |             <h3>Tags communicate a specific state of information to the user. For example, the amount of posts queued up within a user's connected account. <code>less/components/Tag.less</code> provides a number of predefined tag styles, which are documented below, for most use cases.</h3>
39 |           </div>
40 |         </div>
41 |       </div>
42 |     </div>
43 | 
44 |     <div class="Block">
45 |       <div class="GridRow">
46 |         <div class="GridContainer">
47 |           <div class="TwelveColumns--large TwelveColumns--medium">
48 |             <div class="Block__content-block--top">
49 |               <h2>Tag</h2>
50 |               <p>A <code>div</code> or <code>span</code> node with a class of <code>Tag</code> sets its <code>padding</code> property value to <code>2px 8px</code>, its <code>font-size</code> property value to <code>11px</code>, its <code>font-weight</code> property value to <code>600</code>, its <code>color</code> property value to <code>$shuttle-gray</code>, its <code>background-color</code> property value to <code>@geyser</code>, and its <code>border-radius</code> property value to <code>@border-radius-level-1</code>.</p>
51 |               <p>To use it, give a <code>div</code> or <code>span</code> node a class of <code>Tag</code>.</p>
52 |               <div class="Tag">Text label</div>
53 |             </div>
54 |             <div class="Block__content-block">
55 |               <h3>Modifiers</h3>
56 |             </div>
57 |             <div class="Block__content-block">
58 |               <h4>Tag--margin-right</h4>
59 |               <p>This modifies adds a <code>margin-right</code> property value of <code>8px</code>.</p>
60 |               <div class="Tag Tag--margin-right">Tag 1</div><div class="Tag">Tag 2</div>
61 |             </div>
62 |             <div class="Block__content-block">
63 |               <h4>Tag--state-error</h4>
64 |               <p>This modifies a the <code>color</code> property value to <code>@white</code> and the <code>background-color</code> property value to <code>@torch-red</code>.</p>
65 |               <div class="Tag Tag--state-error">Text label</div>
66 |             </div>
67 |             <div class="Block__content-block">
68 |               <h4>Tag--type-primary</h4>
69 |               <p>This modifies a the <code>color</code> property value to <code>@white</code> and the <code>background-color</code> property value to <code>@curious-blue</code>.</p>
70 |               <div class="Tag Tag--type-primary">Text label</div>
71 |             </div>
72 |           </div>
73 |         </div>
74 |       </div>
75 |     </div>
76 | 
77 |     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
78 |     <script src="js/bundle.js"></script>
79 |   </body>
80 | </html>


--------------------------------------------------------------------------------
/public/profile-pictures.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en-us">
 3 |   <head>
 4 |     <meta http-equiv="X-UA-Compatible" content="IE=Edge">
 5 |     <meta charset="UTF-8">
 6 |     <title>Buffer Style Guide</title>
 7 |     <link href="css/style.css" rel="stylesheet">
 8 |     <link href="css/guide.css" rel="stylesheet">
 9 |     <link href="https://icons.buffer.com/0.11.1/buffer-icons.css" rel="stylesheet" />
10 |     <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,300,400italic,600,700" rel="stylesheet" type="text/css">
11 |   </head>
12 |   <body>
13 |     <div class="NavBar">
14 |       <div class="NavBar__title">
15 |         <a href="index.html"><i class="bi bi-buffer"></i>Style Guide</a>
16 |       </div>
17 |       <ul class="NavBar__left-menu">
18 |         <li class="NavBar__menu__item"><a class="NavBar__menu__item__link" href="index.html">Buttons</a></li>
19 |         <li class="NavBar__menu__item"><a class="NavBar__menu__item__link" href="cards.html">Cards</a></li>
20 |         <li class="NavBar__menu__item"><a class="NavBar__menu__item__link" href="colors.html">Colors</a></li>
21 |         <li class="NavBar__menu__item"><a class="NavBar__menu__item__link" href="external-pages.html">External Pages</a></li>
22 |         <li class="NavBar__menu__item"><a class="NavBar__menu__item__link" href="grid-system.html">Grid System</a></li>
23 |         <li class="NavBar__menu__item"><a class="NavBar__menu__item__link" href="navbar.html">NavBar</a></li>
24 |         <li class="NavBar__menu__item NavBar__menu__item--active"><a class="NavBar__menu__item__link" href="profile-pictures.html">Profile Pictures</a></li>
25 |         <li class="NavBar__menu__item"><a class="NavBar__menu__item__link" href="tags.html">Tags</a></li>
26 |         <li class="NavBar__menu__item NavBar__menu__item--last"><a class="NavBar__menu__item__link" href="typography.html">Typography</a></li>
27 |       </ul>
28 |       <ul class="NavBar__right-menu">
29 |         <li class="NavBar__menu__item NavBar__menu__item--last"><a class="Button Button--secondary" href="https://buffer.com/">Sign up for Free</a></li>
30 |       </ul>
31 |     </div>
32 | 
33 |     <div class="BlockHero BlockHero--colors">
34 |       <div class="GridRow">
35 |         <div class="GridContainer">
36 |           <div class="TwelveColumns--large TwelveColumns--medium">
37 |             <h2>Profile Pictures</h2>
38 |             <h3>Profile pictures are objects that can be used to communicate a familiar connection to the user. <code>less/components/ProfilePicture.less</code> provides a number of predefined card styles, which are documented below, for most use cases.</h3>
39 |           </div>
40 |         </div>
41 |       </div>
42 |     </div>
43 | 
44 |     <div class="Block">
45 |       <div class="GridRow">
46 |         <div class="GridContainer">
47 |           <div class="TwelveColumns--large TwelveColumns--medium">
48 |             <div class="Block__content-block--top">
49 |               <h2>ProfilePicture</h2>
50 |               <p>An <code>img</code> node with a class of <code>ProfilePicture</code> changes its <code>display</code> property value to <code>block</code>, its <code>width</code> property value to <code>32px</code>, its <code>height</code> property value to <code>32px</code>, and its <code>border-radius</code> property value to <code>256px</code>.</p>
51 |               <p>To use it, give an <code>img</code> node a class of <code>ProfilePicture</code>.</p>
52 |               <img alt="A profile picture of Steve Dixon" class="ProfilePicture" src="https://pbs.twimg.com/profile_images/694861974564409344/WpVYdDTj_bigger.jpg" />
53 |             </div>
54 |             <div class="Block__content-block">
55 |               <h3>Modifiers</h3>
56 |             </div>
57 |             <div class="Block__content-block">
58 |               <h4>ProfilePicture--extra-large</h4>
59 |               <p>This modifies a the <code>width</code> and <code>height</code> to <code>128px</code>.</p>
60 |               <img alt="A profile picture of Steve Dixon" class="ProfilePicture ProfilePicture--extra-large" src="https://pbs.twimg.com/profile_images/694861974564409344/WpVYdDTj_bigger.jpg" />
61 |             </div>
62 |             <div class="Block__content-block">
63 |               <h4>ProfilePicture--large</h4>
64 |               <p>This modifies a the <code>width</code> and <code>height</code> to <code>64px</code>.</p>
65 |               <img alt="A profile picture of Steve Dixon" class="ProfilePicture ProfilePicture--large" src="https://pbs.twimg.com/profile_images/694861974564409344/WpVYdDTj_bigger.jpg" />
66 |             </div>
67 |             <div class="Block__content-block">
68 |               <h4>ProfilePicture--medium</h4>
69 |               <p>This modifies a the <code>width</code> and <code>height</code> to <code>48px</code>.</p>
70 |               <img alt="A profile picture of Steve Dixon" class="ProfilePicture ProfilePicture--medium" src="https://pbs.twimg.com/profile_images/694861974564409344/WpVYdDTj_bigger.jpg" />
71 |             </div>
72 |             <div class="Block__content-block">
73 |               <h4>ProfilePicture--small</h4>
74 |               <p>This modifies a the <code>width</code> and <code>height</code> to <code>16px</code>.</p>
75 |               <img alt="A profile picture of Steve Dixon" class="ProfilePicture ProfilePicture--small" src="https://pbs.twimg.com/profile_images/694861974564409344/WpVYdDTj_bigger.jpg" />
76 |             </div>
77 |           </div>
78 |         </div>
79 |       </div>
80 |     </div>
81 | 
82 |     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
83 |     <script src="js/bundle.js"></script>
84 |   </body>
85 | </html>


--------------------------------------------------------------------------------
/public/navbar.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en-us">
 3 |   <head>
 4 |     <meta http-equiv="X-UA-Compatible" content="IE=Edge">
 5 |     <meta charset="UTF-8">
 6 |     <title>Buffer Style Guide</title>
 7 |     <link href="css/style.css" rel="stylesheet">
 8 |     <link href="css/guide.css" rel="stylesheet">
 9 |     <link href="https://icons.buffer.com/0.11.1/buffer-icons.css" rel="stylesheet" />
10 |     <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,300,400italic,600,700" rel="stylesheet" type="text/css">
11 |   </head>
12 |   <body>
13 |     <div class="NavBar">
14 |       <div class="NavBar__title">
15 |         <a href="index.html"><i class="bi bi-buffer"></i>Style Guide</a>
16 |       </div>
17 |       <ul class="NavBar__left-menu">
18 |         <li class="NavBar__menu__item"><a class="NavBar__menu__item__link" href="index.html">Buttons</a></li>
19 |         <li class="NavBar__menu__item"><a class="NavBar__menu__item__link" href="cards.html">Cards</a></li>
20 |         <li class="NavBar__menu__item"><a class="NavBar__menu__item__link" href="colors.html">Colors</a></li>
21 |         <li class="NavBar__menu__item"><a class="NavBar__menu__item__link" href="external-pages.html">External Pages</a></li>
22 |         <li class="NavBar__menu__item"><a class="NavBar__menu__item__link" href="grid-system.html">Grid System</a></li>
23 |         <li class="NavBar__menu__item NavBar__menu__item--active"><a class="NavBar__menu__item__link" href="navbar.html">NavBar</a></li>
24 |         <li class="NavBar__menu__item"><a class="NavBar__menu__item__link" href="profile-pictures.html">Profile Pictures</a></li>
25 |         <li class="NavBar__menu__item"><a class="NavBar__menu__item__link" href="tags.html">Tags</a></li>
26 |         <li class="NavBar__menu__item NavBar__menu__item--last"><a class="NavBar__menu__item__link" href="typography.html">Typography</a></li>
27 |       </ul>
28 |       <ul class="NavBar__right-menu">
29 |         <li class="NavBar__menu__item NavBar__menu__item--last"><a class="Button Button--secondary" href="https://buffer.com/">Sign up for Free</a></li>
30 |       </ul>
31 |     </div>
32 | 
33 |     <div class="BlockHero BlockHero--colors">
34 |       <div class="GridRow">
35 |         <div class="GridContainer">
36 |           <div class="TwelveColumns--large TwelveColumns--medium">
37 |             <h2>NavBar</h2>
38 |             <h3>The <code>NavBar</code> is an object that can be used to navigate. <code>less/components/NavBar.less</code> provides a predefined style, which is documented below, for most use cases.</h3>
39 |           </div>
40 |         </div>
41 |       </div>
42 |     </div>
43 | 
44 |     <div class="Block">
45 |       <div class="GridRow">
46 |         <div class="GridContainer">
47 |           <div class="TwelveColumns--large TwelveColumns--medium">
48 |             <div class="Block__content-block--top">
49 |               <h2>NavBar</h2>
50 |               <p>The <code>NavBar</code> is used both within the app and externally as our primary form of navigation that sits at the top of the viewport. It has three children; <code>NavBar__title</code>, <code>NavBar__left-menu</code>, and <code>NavBar__right-menu</code>.</p> 
51 |               <p>To use it, give a parent <code>div</code> node a <code>class</code> of <code>NavBar</code> and its three children nodes <code>NavBar__title</code>, <code>NavBar__left-menu</code>, and <code>NavBar__right-menu</code> respectively.</p>
52 |               <div class="Block__content-block">
53 |                 <h3>Elements</h3>
54 |               </div>
55 |               <div class="Block__content-block">
56 |                 <h4>NavBar__left-menu</h4>
57 |                 <p><code>NavBar__left-menu</code> is aligned to the left of the <code>NavBar</code> and has a <code>flex-grow</code> property value of <code>1</code>. This means it will always remain wider than <code>NavBar__title</code> and <code>NavBar__right-menu</code>.</p>
58 |               </div>
59 |               <div class="Block__content-block">
60 |                 <h4>NavBar__menu__item</h4>
61 |                 <p><code>NavBar__menu__item</code> objects are children objects of <code>NavBar__left-menu</code> and <code>NavBar__right-menu</code>.</p>
62 |               </div>
63 |               <div class="Block__content-block">
64 |                 <h4>NavBar__menu__item__link</h4>
65 |                 <p><code>NavBar__menu__item__link</code> objects are children objects of <code>NavBar__menu__item</code>.</p>
66 |               </div>
67 |               <div class="Block__content-block">
68 |                 <h4>NavBar__right-menu</h4>
69 |                 <p><code>NavBar__right-menu</code> is aligned to the right of the <code>NavBar</code> and has a <code>flex-grow</code> property value of <code>0</code>. This means its width will be 100% of the total width of its children.</p>
70 |               </div>
71 |               <div class="Block__content-block">
72 |                 <h4>NavBar__title</h4>
73 |                 <p>This element displays a title and is aligned to the left of the <code>NavBar</code> and has a <code>flex-grow</code> property value of <code>0</code>. This means its width will be 100% of the total width of its children.</p>
74 |               </div>
75 |               <div class="Block__content-block">
76 |                 <h3>Element Modifiers</h3>
77 |               </div>
78 |               <div class="Block__content-block">
79 |                 <h4>NavBar__menu__item--active</h4>
80 |                 <p>This modifier changes the property values of children nodes with a class of <code>NavBar__menu__item__link</code>. The <code>font-weight</code> property value is changed to <code>600</code> and the <code>color</code> property value is changed to <code>$outer-space</code>.</p>
81 |               </div>
82 |               <div class="Block__content-block">
83 |                 <h4>NavBar__menu__item--last</h4>
84 |                 <p class="Paragraph--order-last">This modifier changes the <code>margin-right</code> property value to <code>0</code>.</p>
85 |               </div>
86 |             </div>
87 |           </div>
88 |         </div>
89 |       </div>
90 |     </div>
91 | 
92 |     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
93 |     <script src="js/bundle.js"></script>
94 |   </body>
95 | </html>


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en-us">
  3 |   <head>
  4 |     <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  5 |     <meta charset="UTF-8">
  6 |     <title>Buffer Style Guide</title>
  7 |     <link href="css/style.css" rel="stylesheet">
  8 |     <link href="css/guide.css" rel="stylesheet">
  9 |     <link href="https://icons.buffer.com/0.11.1/buffer-icons.css" rel="stylesheet" />
 10 |     <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,300,400italic,600,700" rel="stylesheet" type="text/css">
 11 |   </head>
 12 |   <body>
 13 |     <div class="NavBar">
 14 |       <div class="NavBar__title">
 15 |         <a href="index.html"><i class="bi bi-buffer"></i>Style Guide</a>
 16 |       </div>
 17 |       <ul class="NavBar__left-menu">
 18 |         <li class="NavBar__menu__item NavBar__menu__item--active"><a class="NavBar__menu__item__link" href="index.html">Buttons</a></li>
 19 |         <li class="NavBar__menu__item"><a class="NavBar__menu__item__link" href="cards.html">Cards</a></li>
 20 |         <li class="NavBar__menu__item"><a class="NavBar__menu__item__link" href="colors.html">Colors</a></li>
 21 |         <li class="NavBar__menu__item"><a class="NavBar__menu__item__link" href="external-pages.html">External Pages</a></li>
 22 |         <li class="NavBar__menu__item"><a class="NavBar__menu__item__link" href="grid-system.html">Grid System</a></li>
 23 |         <li class="NavBar__menu__item"><a class="NavBar__menu__item__link" href="navbar.html">NavBars</a></li>
 24 |         <li class="NavBar__menu__item"><a class="NavBar__menu__item__link" href="profile-pictures.html">Profile Pictures</a></li>
 25 |         <li class="NavBar__menu__item"><a class="NavBar__menu__item__link" href="tags.html">Tags</a></li>
 26 |         <li class="NavBar__menu__item NavBar__menu__item--last"><a class="NavBar__menu__item__link" href="typography.html">Typography</a></li>
 27 |       </ul>
 28 |       <ul class="NavBar__right-menu">
 29 |         <li class="NavBar__menu__item NavBar__menu__item--last"><a class="Button Button--secondary" href="https://buffer.com/">Sign up for Free</a></li>
 30 |       </ul>
 31 |     </div>
 32 | 
 33 |     <div class="BlockHero BlockHero--colors">
 34 |       <div class="GridRow">
 35 |         <div class="GridContainer">
 36 |           <div class="TwelveColumns--large TwelveColumns--medium">
 37 |             <h2>Buttons</h2>
 38 |             <h3>We use buttons to initiate actions inside and outside of the Buffer app. <code>less/components/Button.less</code> provides a number of predefined button styles, which are documented below, for most use cases.</h3>
 39 |           </div>
 40 |         </div>
 41 |       </div>
 42 |     </div>
 43 | 
 44 |     <div class="Block">
 45 |       <div class="GridRow">
 46 |         <div class="GridContainer">
 47 |           <div class="TwelveColumns--large TwelveColumns--medium">
 48 |             <div class="Block__content-block--top">
 49 |               <h2>Button</h2>
 50 |               <p>This is the default style of a button. To use it, set the <code>class</code> property of a <code>button</code> or <code>a</code> node to <code>Button</code>.</p>
 51 |               <button class="Button">Button text</button>
 52 |             </div>
 53 |             <div class="Block__content-block">
 54 |               <h3>Modifiers</h3>
 55 |             </div>
 56 |             <div class="Block__content-block">
 57 |               <h4>Button--state-error</h4>
 58 |               <p>Use this modifier to communicate a destructive action to the user. To use it, give an <code>a</code>, <code>button</code>, or <code>div</code> node an additional class of <code>Button--state-error</code>.</p>
 59 |               <button class="Button Button--state-error">Button text</button>
 60 |             </div>
 61 |             <div class="Block__content-block">
 62 |               <h4>Button--type-borderless</h4>
 63 |               <p>Use this modifier to communicate a non-primary action to the user. To use it, give an <code>a</code>, <code>button</code>, or <code>div</code> node an additional class of <code>Button--type-borderless</code>.</p>
 64 |               <button class="Button Button--type-borderless">Button text</button>
 65 |             </div>
 66 |             <div class="Block__content-block">
 67 |               <h4>Button--type-in-app</h4>
 68 |               <p>Use this modifier to communicate an in-app action to the user.  To use it, give an <code>a</code>, <code>button</code>, or <code>div</code> node an additional class of <code>Button--type-in-app</code>.</p>
 69 |               <button class="Button Button--type-in-app">Button text</button>
 70 |             </div>
 71 |             <div class="Block__content-block">
 72 |               <h4>Button--type-secondary</h4>
 73 |               <p>Use this modifier to communicate a secondary action to the user.  To use it, give an <code>a</code>, <code>button</code>, or <code>div</code> node an additional class of <code>Button--type-secondary</code>.</p>
 74 |               <button class="Button Button--type-secondary">Button text</button>
 75 |             </div>
 76 |             <div class="Block__content-block">
 77 |               <h4>Button--type-small</h4>
 78 |               <p>Use this modifier to communicate a primary action to the user when space is limited.  To use it, give an <code>a</code>, <code>button</code>, or <code>div</code> node an additional class of <code>Button--type-small</code>.</p>
 79 |               <button class="Button Button--type-small">Button text</button>
 80 |             </div>
 81 |             <div class="Block__content-block">
 82 |               <h4>Button--type-tertiary</h4>
 83 |               <p>Use this modifier to communicate a tertiary action to the user.  To use it, give an <code>a</code>, <code>button</code>, or <code>div</code> node an additional class of <code>Button--type-tertiary</code>.</p>
 84 |               <button class="Button Button--type-tertiary">Button text</button>
 85 |             </div>
 86 |           </div>
 87 |         </div>
 88 |       </div>
 89 |     </div>
 90 | 
 91 |     <div class="Block Block--type-alternative">
 92 |       <div class="GridRow">
 93 |         <div class="GridContainer">
 94 |           <div class="TwelveColumns--large TwelveColumns--medium">
 95 |             <h2>ButtonIcon</h2>
 96 |             <p>Use to communicate an action to the user using an icon only.  To use it, give an <code>a</code>, <code>button</code>, or <code>div</code> node a class of <code>ButtonIcon</code>.</p>
 97 |             <button class="ButtonIcon"><i class="bi bi-x"></i></button>
 98 |           </div>
 99 |         </div>
100 |       </div>
101 |     </div>
102 | 
103 |     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
104 |     <script src="js/bundle.js"></script>
105 |   </body>
106 | </html>


--------------------------------------------------------------------------------
/public/grid-system.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en-us">
  3 |   <head>
  4 |     <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  5 |     <meta charset="UTF-8">
  6 |     <title>Buffer Style Guide</title>
  7 |     <link href="css/style.css" rel="stylesheet">
  8 |     <link href="css/guide.css" rel="stylesheet">
  9 |     <link href="https://icons.buffer.com/0.11.1/buffer-icons.css" rel="stylesheet" />
 10 |     <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,300,400italic,600,700" rel="stylesheet" type="text/css">
 11 |   </head>
 12 |   <body>
 13 |     <div class="NavBar">
 14 |       <div class="NavBar__title">
 15 |         <a href="index.html"><i class="bi bi-buffer"></i>Style Guide</a>
 16 |       </div>
 17 |       <ul class="NavBar__left-menu">
 18 |         <li class="NavBar__menu__item"><a class="NavBar__menu__item__link" href="index.html">Buttons</a></li>
 19 |         <li class="NavBar__menu__item"><a class="NavBar__menu__item__link" href="cards.html">Cards</a></li>
 20 |         <li class="NavBar__menu__item"><a class="NavBar__menu__item__link" href="colors.html">Colors</a></li>
 21 |         <li class="NavBar__menu__item"><a class="NavBar__menu__item__link" href="external-pages.html">External Pages</a></li>
 22 |         <li class="NavBar__menu__item NavBar__menu__item--active"><a class="NavBar__menu__item__link" href="grid-system.html">Grid System</a></li>
 23 |         <li class="NavBar__menu__item"><a class="NavBar__menu__item__link" href="navbar.html">NavBar</a></li>
 24 |         <li class="NavBar__menu__item"><a class="NavBar__menu__item__link" href="profile-pictures.html">Profile Pictures</a></li>
 25 |         <li class="NavBar__menu__item"><a class="NavBar__menu__item__link" href="tags.html">Tags</a></li>
 26 |         <li class="NavBar__menu__item NavBar__menu__item--last"><a class="NavBar__menu__item__link" href="typography.html">Typography</a></li>
 27 |       </ul>
 28 |       <ul class="NavBar__right-menu">
 29 |         <li class="NavBar__menu__item NavBar__menu__item--last"><a class="Button Button--secondary" href="https://buffer.com/">Sign up for Free</a></li>
 30 |       </ul>
 31 |     </div>
 32 | 
 33 |     <div class="BlockHero BlockHero--colors">
 34 |       <div class="GridRow">
 35 |         <div class="GridContainer">
 36 |           <div class="TwelveColumns--large TwelveColumns--medium">
 37 |             <h2>GridSystem</h2>
 38 |             <h3>Our grid system runs off of a 12-column grid with its container set to <code>960px</code>. <code>less/components/GridSystem.less</code> provides all column widths, which are documented below, for most use cases.</h3>
 39 |           </div>
 40 |         </div>
 41 |       </div>
 42 |     </div>
 43 | 
 44 |     <div class="Block">
 45 |       <div class="GridRow">
 46 |         <div class="GridContainer">
 47 |           <div class="TwelveColumns--large TwelveColumns--medium">
 48 |             <div class="Block__content-block--top">
 49 |               <h2>GridRow</h2>
 50 |               <p>Each row of columns is wrapped within a <code>GridRow</code>. This keeps them organized and prevents a mosaic effect from occuring. <code>GridRow</code> has no defined properties but instead has a state rule for <code>::after</code>, which sets its <code>display</code> property value to <code>block</code>, its <code>clear</code> property value to <code>both</code>, and its <code>content</code> property value to <code>""</code>. Having this rule in place allows every instance of <code>GridRow</code> to fully contain any elements within it that may be floating.</p>
 51 |               <p><code>GridRow</code> also updates any children <code>img</code> nodes to be responsive by setting their <code>max-width</code> property value to <code>100%</code> and their <code>height</code> property value to <code>auto</code>.</p> 
 52 |               <p class="Paragraph--order-last">To use it, give a <code>div</code> node a <code>class</code> of <code>GridRow</code> and place your content inside. A <code>GridRow</code> must go within a <code>Block</code>.</p>
 53 |             </div>
 54 |           </div>
 55 |         </div>
 56 |       </div>
 57 |     </div>
 58 |     
 59 |     <div class="Block Block--type-alternative">
 60 |       <div class="GridRow">
 61 |         <div class="GridContainer">
 62 |           <div class="TwelveColumns--large TwelveColumns--medium">
 63 |             <div class="Block__content-block--top">
 64 |               <h2>GridContainer</h2>
 65 |               <p>The purpose of the <code>GridContainer</code> is to contain a pages content within a set width. This prevents a pages content from spanning 100% of the viewport. Viewports that have a minimum width of <code>1024px</code> have the <code>GridContainer</code> <code>width</code> property value set to <code>960px</code>. Viewports smaller than this have the <code>GridContainer</code> <code>width</code> property value set to </code>100%</code>. A <code>GridContainer</code> has a <code>margin</code> property value of <code>0 auto</code>. Like the <code>GridRow</code>, a <code>GridContainer</code> has a state rule for <code>::after</code>, which sets its <code>display</code> property value to <code>block</code>, its <code>clear</code> property value to <code>both</code>, and its <code>content</code> property value to <code>""</code>. Having this rule in place allows every instance of <code>GridRow</code> to fully contain any elements within it that may be floating.</p>
 66 |               <p class="Paragraph--order-last">To use it, give a <code>div</code> node a <code>class</code> of <code>GridContainer</code> and place your content inside. A <code>GridContainer</code> must go within a <code>GridRow</code>.</p>
 67 |             </div>
 68 |           </div>
 69 |         </div>
 70 |       </div>
 71 |     </div>
 72 | 
 73 |     <div class="Block">
 74 |       <div class="GridRow">
 75 |         <div class="GridContainer">
 76 |           <div class="TwelveColumns--large TwelveColumns--medium">
 77 |             <div class="Block__content-block--top">
 78 |               <h2>Columns</h2>
 79 |               <p>Our grid contains 12 columns. Columns break up content into vertical groups. Depending on the design we're trying to build, depends on the arrangement of the widths of each column. Each <code>GridRow</code> must contain column widths that equate to <code>12</code>. For example:</p>
 80 |               <div class="ColGroup">
 81 |                 <div class="ThreeColumns--large ThreeColumns--medium">3 columns</div>
 82 |                 <div class="SixColumns--large SixColumns--medium">6 columns</div>
 83 |                 <div class="ThreeColumns--large ThreeColumns--medium">3 columns</div>
 84 |               </div>
 85 |               <p>We've chosen to be super descriptive with our column nomenclature. To use a single column, give a <code>div</code> node a <code>class</code> of <code>OneColumn</code> followed by either the <code>--medium</code> or <code>--large</code> modifier. Columns larger than a single column use <code>*Columns</code>, i.e. <code>ThreeColumns</code>, <code>EightColumns</code>, etc.</p> 
 86 |               <h3>Modifiers</h3>
 87 |               <h4>*--large</h4>
 88 |               <p>Any column with a <code>--large</code> modifier will determine how many columns that node will use on a viewport with a width greater than or equal to <code>1024px</code>.</p>
 89 |               <h4>*--medium</h4>
 90 |               <p class="Paragraph--order-last">Any column with a <code>--medium</code> modifier will determine how many columns that node will use on a viewport with a width less than <code>1024px</code>.</p>
 91 |             </div>
 92 |           </div>
 93 |         </div>
 94 |       </div>
 95 |     </div>
 96 | 
 97 |     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
 98 |     <script src="js/bundle.js"></script>
 99 |   </body>
100 | </html>


--------------------------------------------------------------------------------
/public/typography.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en-us">
  3 |   <head>
  4 |     <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  5 |     <meta charset="UTF-8">
  6 |     <title>Buffer Style Guide</title>
  7 |     <link href="css/style.css" rel="stylesheet">
  8 |     <link href="css/guide.css" rel="stylesheet">
  9 |     <link href="https://icons.buffer.com/0.11.1/buffer-icons.css" rel="stylesheet" />
 10 |     <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,300,400italic,600,700" rel="stylesheet" type="text/css">
 11 |   </head>
 12 |   <body>
 13 |     <div class="NavBar">
 14 |       <div class="NavBar__title">
 15 |         <a href="index.html"><i class="bi bi-buffer"></i>Style Guide</a>
 16 |       </div>
 17 |       <ul class="NavBar__left-menu">
 18 |         <li class="NavBar__menu__item"><a class="NavBar__menu__item__link" href="index.html">Buttons</a></li>
 19 |         <li class="NavBar__menu__item"><a class="NavBar__menu__item__link" href="cards.html">Cards</a></li>
 20 |         <li class="NavBar__menu__item"><a class="NavBar__menu__item__link" href="colors.html">Colors</a></li>
 21 |         <li class="NavBar__menu__item"><a class="NavBar__menu__item__link" href="external-pages.html">External Pages</a></li>
 22 |         <li class="NavBar__menu__item"><a class="NavBar__menu__item__link" href="grid-system.html">Grid System</a></li>
 23 |         <li class="NavBar__menu__item"><a class="NavBar__menu__item__link" href="navbar.html">NavBar</a></li>
 24 |         <li class="NavBar__menu__item"><a class="NavBar__menu__item__link" href="profile-pictures.html">Profile Pictures</a></li>
 25 |         <li class="NavBar__menu__item"><a class="NavBar__menu__item__link" href="tags.html">Tags</a></li>
 26 |         <li class="NavBar__menu__item NavBar__menu__item--active"><a class="NavBar__menu__item__link" href="typography.html">Typography</a></li>
 27 |         <li class="NavBar__menu__item NavBar__menu__item--last"><a class="NavBar__menu__item__link" href="variables.html">Variables</a></li>
 28 |       </ul>
 29 |       <ul class="NavBar__right-menu">
 30 |         <li class="NavBar__menu__item NavBar__menu__item--last"><a class="Button Button--secondary" href="https://buffer.com/">Sign up for Free</a></li>
 31 |       </ul>
 32 |     </div>
 33 | 
 34 |     <div class="BlockHero BlockHero--colors">
 35 |       <div class="GridRow">
 36 |         <div class="GridContainer">
 37 |           <div class="TwelveColumns--large TwelveColumns--medium">
 38 |             <h2>Typography</h2>
 39 |             <h3>We exclusively use <a href="https://www.google.com/fonts/specimen/Open+Sans">Open Sans</a> as the base typeface for the Buffer product. <code>less/base/typography.less</code> provides a number of styles, which are documented below, for most use cases.</h3>
 40 |           </div>
 41 |         </div>
 42 |       </div>
 43 |     </div>
 44 | 
 45 |     <div class="Block">
 46 |       <div class="GridRow">
 47 |         <div class="GridContainer">
 48 |           <div class="TwelveColumns--large TwelveColumns--medium">
 49 |             <div class="Block__content-block--top">
 50 |               <h2>Body</h2>
 51 |               <p class="Paragraph--order-last">Our <code>body</code> node has a <code>font-size</code> property value of <code>@font-size</code>, a <code>line-height</code> property value of <code>@line-height</code>, and a <code>color</code> property value of <code>@shuttle-gray</code>.</p>
 52 |             </div>
 53 |           </div>
 54 |         </div>
 55 |       </div>
 56 |     </div>
 57 |     
 58 |     <div class="Block Block--type-alternative">
 59 |       <div class="GridRow">
 60 |         <div class="GridContainer">
 61 |           <div class="TwelveColumns--large TwelveColumns--medium">
 62 |             <div class="Block__content-block--top">
 63 |               <h2>Code</h2>
 64 |               <p class="Paragraph--order-last">Our <code>code</code> node has a <code>padding</code> property value of <code>2px 4px</code>, a <code>color</code> property value of <code>@torch-red</code>, a <code>background-color</code> property value of <code>rgba(@torch-red, 0.1)</code>, and a <code>border-radius</code> property value of <code>@border-radius-level-2</code>.</p>
 65 |             </div>
 66 |           </div>
 67 |         </div>
 68 |       </div>
 69 |     </div>
 70 | 
 71 |     <div class="Block">
 72 |       <div class="GridRow">
 73 |         <div class="GridContainer">
 74 |           <div class="TwelveColumns--large TwelveColumns--medium">
 75 |             <div class="Block__content-block--top">
 76 |               <h2>Headings</h2>
 77 |               <p>All headings have a <code>line-height</code> property value of <code>normal</code> and a <code>color</code> property value of <code>@outer-space</code>.</p>
 78 |               <p><code>h1</code>, <code>h2</code>, and <code>h3</code> nodes have a <code>margin</code> property value of <code>0 0 32px 0</code> and a <code>font-weight</code> property value of <code>300</code>.</p>
 79 |               <p><code>h1</code> nodes have a <code>font-size</code> property value of <code>48px</code> and a <code>line-height</code> property value of <code>72px</code>.</p>
 80 |               <p><code>h2</code> nodes have a <code>font-size</code> property value of <code>40px</code> and a <code>line-height</code> property value of <code>60px</code>.</p>
 81 |               <p><code>h3</code> nodes have a <code>font-size</code> property value of <code>24px</code> and a <code>line-height</code> property value of <code>36px</code>.</p>
 82 |               <p class="Paragraph--order-last"><code>h4</code>, <code>h5</code>, and <code>h6</code> nodes have a <code>margin</code> property value of <code>0 0 16px 0</code>, a <code>font-size</code> property value of <code>@font-size</code>, and a <code>line-height</code> property value of <code>@line-height</code>.</p>
 83 |             </div>
 84 |           </div>
 85 |         </div>
 86 |       </div>
 87 |     </div>
 88 |     
 89 |     <div class="Block Block--type-alternative">
 90 |       <div class="GridRow">
 91 |         <div class="GridContainer">
 92 |           <div class="TwelveColumns--large TwelveColumns--medium">
 93 |             <div class="Block__content-block--top">
 94 |               <h2>Links</h2>
 95 |               <p class="Paragraph--order-last">All <code>a</code> nodes have a <code>text-decoration</code> property value of <code>none</code> and their <code>:hover</code> state has a <code>text-decoration</code> property value of <code>underline</code>.</p>
 96 |             </div>
 97 |           </div>
 98 |         </div>
 99 |       </div>
100 |     </div>
101 |     
102 |     <div class="Block">
103 |       <div class="GridRow">
104 |         <div class="GridContainer">
105 |           <div class="TwelveColumns--large TwelveColumns--medium">
106 |             <div class="Block__content-block--top">
107 |               <h2>Ordered &amp; Unordered Lists</h2>
108 |               <p>All <code>ol</code> and <code>ul</code> nodes have a <code>margin</code> property value of <code>2px 16px 32px 34px</code> and their children <code>li</code> nodes have a <code>margin-bottom</code> property value of <code>8px</code>.</p>
109 |             </div>
110 |             <div class="Block__content-block">
111 |               <h3>Modifiers</h3>
112 |             </div>
113 |             <div class="Block__content-block">
114 |               <h4>List--style-none</h4>
115 |               <p>Use this modifier to set an ordered or unordered lists <code>list-style</code> property value to <code>none</code>.</p>
116 |             </div>
117 |             <div class="Block__content-block">
118 |               <h4>List--margin-bottom-0</h4>
119 |               <p class="Paragraph--order-last">Use this modifier to set an ordered or unordered lists <code>margin-bottom</code> property value to <code>0</code>.</p>
120 |             </div>
121 |           </div>
122 |         </div>
123 |       </div>
124 |     </div>
125 |     
126 |     <div class="Block Block--type-alternative">
127 |       <div class="GridRow">
128 |         <div class="GridContainer">
129 |           <div class="TwelveColumns--large TwelveColumns--medium">
130 |             <div class="Block__content-block--top">
131 |               <h2>Paragraphs</h2>
132 |               <p>All <code>p</code> nodes have a <code>margin</code> property value of <code>16px 0</code>.</p>
133 |             </div>
134 |             <div class="Block__content-block">
135 |               <h3>Modifiers</h3>
136 |             </div>
137 |             <div class="Block__content-block">
138 |               <h4>Paragraph--order-first</h4>
139 |               <p>Use this modifier to set a paragraphs <code>margin-top</code> property value to <code>0</code>.</p>
140 |             </div>
141 |             <div class="Block__content-block">
142 |               <h4>Paragraph--order-last</h4>
143 |               <p class="Paragraph--order-last">Use this modifier to set a paragraphs <code>margin-bottom</code> property value to <code>0</code>.</p>
144 |             </div>
145 |           </div>
146 |         </div>
147 |       </div>
148 |     </div>
149 | 
150 |     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
151 |     <script src="js/bundle.js"></script>
152 |   </body>
153 | </html>


--------------------------------------------------------------------------------
/public/external-pages.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en-us">
  3 |   <head>
  4 |     <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  5 |     <meta charset="UTF-8">
  6 |     <title>Buffer Style Guide</title>
  7 |     <link href="css/style.css" rel="stylesheet">
  8 |     <link href="css/guide.css" rel="stylesheet">
  9 |     <link href="https://icons.buffer.com/0.11.1/buffer-icons.css" rel="stylesheet" />
 10 |     <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,300,400italic,600,700" rel="stylesheet" type="text/css">
 11 |   </head>
 12 |   <body>
 13 |     <div class="NavBar">
 14 |       <div class="NavBar__title">
 15 |         <a href="index.html"><i class="bi bi-buffer"></i>Style Guide</a>
 16 |       </div>
 17 |       <ul class="NavBar__left-menu">
 18 |         <li class="NavBar__menu__item"><a class="NavBar__menu__item__link" href="index.html">Buttons</a></li>
 19 |         <li class="NavBar__menu__item"><a class="NavBar__menu__item__link" href="cards.html">Cards</a></li>
 20 |         <li class="NavBar__menu__item"><a class="NavBar__menu__item__link" href="colors.html">Colors</a></li>
 21 |         <li class="NavBar__menu__item NavBar__menu__item--active"><a class="NavBar__menu__item__link" href="external-pages.html">External Pages</a></li>
 22 |         <li class="NavBar__menu__item"><a class="NavBar__menu__item__link" href="grid-system.html">Grid System</a></li>
 23 |         <li class="NavBar__menu__item"><a class="NavBar__menu__item__link" href="navbar.html">NavBar</a></li>
 24 |         <li class="NavBar__menu__item"><a class="NavBar__menu__item__link" href="profile-pictures.html">Profile Pictures</a></li>
 25 |         <li class="NavBar__menu__item"><a class="NavBar__menu__item__link" href="tags.html">Tags</a></li>
 26 |         <li class="NavBar__menu__item NavBar__menu__item--last"><a class="NavBar__menu__item__link" href="typography.html">Typography</a></li>
 27 |       </ul>
 28 |       <ul class="NavBar__right-menu">
 29 |         <li class="NavBar__menu__item NavBar__menu__item--last"><a class="Button Button--secondary" href="https://buffer.com/">Sign up for Free</a></li>
 30 |       </ul>
 31 |     </div>
 32 | 
 33 |     <div class="BlockHero BlockHero--colors">
 34 |       <div class="GridRow">
 35 |         <div class="GridContainer">
 36 |           <div class="TwelveColumns--large TwelveColumns--medium">
 37 |             <h2>External pages</h2>
 38 |             <h3>External pages are built out of <code>Block</code> objects. <code>less/components/ExternalPage.less</code> provides a number of predefined block styles, which are documented below, for most use cases.</h3>
 39 |           </div>
 40 |         </div>
 41 |       </div>
 42 |     </div>
 43 | 
 44 |     <div class="Block">
 45 |       <div class="GridRow">
 46 |         <div class="GridContainer">
 47 |           <div class="TwelveColumns--large TwelveColumns--medium">
 48 |             <div class="Block__content-block--top">
 49 |               <h2>Block</h2>
 50 |               <p>This is the default style of a <code>Block</code> object.</p>
 51 |               <p>It sets the <code>padding-top</code> and <code>padding-bottom</code> to <code>64px</code> and the <code>background-color</code> to <code>$white</code>.</p>
 52 |               <p>To use it, give a <code>div</code> node a <code>class</code> of <code>Block</code>.</p>
 53 |             </div>
 54 |             <div class="Block__content-block">
 55 |               <h3>Modifiers</h3>
 56 |             </div>
 57 |             <div class="Block__content-block">
 58 |               <h4>Block--type-alternative</h4>
 59 |               <p>This modifier sets the <code>background-color</code> of a <code>Block</code> to <code>$aqua-haze</code>. To use it, give a <code>div</code> node an additional class of <code>Block--type-alternative</code>.</p>
 60 |             </div>
 61 |             <div class="Block__content-block">
 62 |               <h4>Block--type-dark</h4>
 63 |               <p>This modifier sets the <code>text-align</code> of a <code>Block</code> to <code>center</code> and its <code>background-color</code> to <code>$outer-space</code>.</p>
 64 |               <p>It sets the <code>margin-bottom</code> of children <code>h2</code> and <code>h3</code> nodes to <code>0</code></p>
 65 |               <p>It changes the <code>color</code> of a child <code>h2</code> node to <code>$white</code>, the <code>color</code> of a child <code>h3</code> node to <code>0.8</code> of <code>$white</code>, and the <code>color</code> of a child <code>p</code> node to <code>0.6</code> of <code>$white</code>.</p>
 66 |               <p>It sets the <code>margin-top</code> of a child <code>Button</code> node to <code>32px</code>.</p>
 67 |               <p>To use it, give a <code>div</code> node an additional class of <code>Block--type-dark</code>.</p>
 68 |             </div>
 69 |             <div class="Block__content-block">
 70 |               <h4>Block--type-footer</h4>
 71 |               <p>This modifier sets the <code>margin-top</code> of children <code>h5</code> and <code>p</code> nodes to <code>0</code> and their <code>margin-bottom</code> to <code>16px</code> and the <code>margin</code> of children <code>ul</code> nodes to <code>0 0 32px 0</code>.</p>
 72 |               <p>To use it, give a <code>div</code> node an additional class of <code>Block--type-footer</code>.</p>
 73 |             </div>
 74 |             <div class="Block__content-block">
 75 |               <h3>Elements</h3>
 76 |             </div>
 77 |             <div class="Block__content-block">
 78 |               <h4>Block__content-block</h4>
 79 |               <p>This element sets the <code>margin-top</code> of the node to <code>32px</code> and the <code>margin-bottom</code> of <code>h2</code> and <code>h3</code> nodes contained within it to <code>0</code>.</p>
 80 |             </div>
 81 |             <div class="Block__content-block">
 82 |               <h4>Block__copyright</h4>
 83 |               <p>This element sets the <code>color</code> of <code>a</code> nodes contained within it to <code>$shuttle-gray</code>.</p>
 84 |             </div>
 85 |             <div class="Block__content-block">
 86 |               <h3>Element Modifiers</h3>
 87 |             </div>
 88 |             <div class="Block__content-block">
 89 |               <h4>Block__content--center</h4>
 90 |               <p>This modifier sets the <code>text-align</code> of the node to <code>center</code> and the <code>margin</code> of <code>img</code> nodes contained within it to <code>0 auto</code>.</p>
 91 |             </div>
 92 |             <div class="Block__content-block">
 93 |               <h4>Block__content--margin-bottom-0</h4>
 94 |               <p>This modifier sets the <code>margin-bottom</code> of <code>h1</code>, <code>h2</code>, <code>h3</code>, <code>h4</code>, <code>h5</code>, and <code>h6</code> nodes to <code>0</code>.</p>
 95 |             </div>
 96 |             <div class="Block__content-block">
 97 |               <h4>Block__content-block--left</h4>
 98 |               <p>This modifier sets the <code>text-align</code> of the node to <code>left</code>.</p>
 99 |             </div>
100 |             <div class="Block__content-block">
101 |               <h4>Block__content-block--top</h4>
102 |               <p class="Paragraph--order-last">This modifier sets the <code>margin-top</code> of the node to <code>0</code>.</p>
103 |             </div>
104 |           </div>
105 |         </div>
106 |       </div>
107 |     </div>
108 |     
109 |     <div class="Block Block--type-alternative">
110 |       <div class="GridRow">
111 |         <div class="GridContainer">
112 |           <div class="TwelveColumns--large TwelveColumns--medium">
113 |             <div class="Block__content-block--top">
114 |               <h2>BlockContent</h2>
115 |               <p class="Paragraph--order-last">Add this class to a <code>Block</code> object to reduce the width of a <code>GridContainer</code> within it to <code>640px</code> on a desktop and <code>100%</code> on tablets and smartphones.</p>
116 |             </div>
117 |           </div>
118 |         </div>
119 |       </div>
120 |     </div>
121 | 
122 |     <div class="Block">
123 |       <div class="GridRow">
124 |         <div class="GridContainer">
125 |           <div class="TwelveColumns--large TwelveColumns--medium">
126 |             <div class="Block__content-block--top">
127 |               <h2>BlockGrid</h2>
128 |               <p>Add this class to a <code>Block</code> object to set the <code>margin-bottom</code> of a <code>p</code> node contained within it to <code>0</code>.</p>
129 |               <p class="Paragraph--order-last">It sets the <code>margin-top</code> of a <code>ProfilePicture</code> object contained within it to <code>16px</code>.</p>
130 |             </div>
131 |           </div>
132 |         </div>
133 |       </div>
134 |     </div>
135 | 
136 |     <div class="Block Block--type-alternative">
137 |       <div class="GridRow">
138 |         <div class="GridContainer">
139 |           <div class="TwelveColumns--large TwelveColumns--medium">
140 |             <div class="Block__content-block--top">
141 |               <h2>BlockHero</h2>
142 |               <p>This is the default style of a <code>BlockHero</code> object. It sets the <code>padding-top</code> and <code>padding-bottom</code> to <code>128px</code>, <code>text-align</code> to <code>center</code>, <code>background-position</code> to <code>top</code>, <code>background-size</code> to <code>cover</code>, and its <code>background-repeat</code> to <code>no-repeat</code>.</p>
143 |               <p>It sets the <code>margin-bottom</code> of <code>h2</code>, <code>h3</code> and <code>p</code> nodes to <code>0</code>, the <code>color</code> of <code>h2</code> nodes to <code>$white</code>, and the <code>color</code> of <code>h3</code> nodes to <code>0.5</code> of <code>$white</code>.</p>
144 |               <p class="Paragraph--order-last">It sets the <code>margin-top</code> of a <code>Button</code> object contained within it to <code>32px</code>.</p>
145 |             </div>
146 |           </div>
147 |         </div>
148 |       </div>
149 |     </div>
150 | 
151 |     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
152 |     <script src="js/bundle.js"></script>
153 |   </body>
154 | </html>


--------------------------------------------------------------------------------
/public/colors.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en-us">
  3 |   <head>
  4 |     <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  5 |     <meta charset="UTF-8">
  6 |     <title>Buffer Style Guide</title>
  7 |     <link href="css/style.css" rel="stylesheet">
  8 |     <link href="css/guide.css" rel="stylesheet">
  9 |     <link href="https://icons.buffer.com/0.11.1/buffer-icons.css" rel="stylesheet" />
 10 |     <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,300,400italic,600,700" rel="stylesheet" type="text/css">
 11 |   </head>
 12 |   <body>
 13 |     <div class="NavBar">
 14 |       <div class="NavBar__title">
 15 |         <a href="index.html"><i class="bi bi-buffer"></i>Style Guide</a>
 16 |       </div>
 17 |       <ul class="NavBar__left-menu">
 18 |         <li class="NavBar__menu__item"><a class="NavBar__menu__item__link" href="index.html">Buttons</a></li>
 19 |         <li class="NavBar__menu__item"><a class="NavBar__menu__item__link" href="cards.html">Cards</a></li>
 20 |         <li class="NavBar__menu__item NavBar__menu__item--active"><a class="NavBar__menu__item__link" href="colors.html">Colors</a></li>
 21 |         <li class="NavBar__menu__item"><a class="NavBar__menu__item__link" href="external-pages.html">External Pages</a></li>
 22 |         <li class="NavBar__menu__item"><a class="NavBar__menu__item__link" href="grid-system.html">Grid System</a></li>
 23 |         <li class="NavBar__menu__item"><a class="NavBar__menu__item__link" href="navbar.html">NavBar</a></li>
 24 |         <li class="NavBar__menu__item"><a class="NavBar__menu__item__link" href="profile-pictures.html">Profile Pictures</a></li>
 25 |         <li class="NavBar__menu__item"><a class="NavBar__menu__item__link" href="tags.html">Tags</a></li>
 26 |         <li class="NavBar__menu__item NavBar__menu__item--last"><a class="NavBar__menu__item__link" href="typography.html">Typography</a></li>
 27 |       </ul>
 28 |       <ul class="NavBar__right-menu">
 29 |         <li class="NavBar__menu__item NavBar__menu__item--last"><a class="Button Button--secondary" href="https://buffer.com/">Sign up for Free</a></li>
 30 |       </ul>
 31 |     </div>
 32 | 
 33 |     <div class="BlockHero BlockHero--colors">
 34 |       <div class="GridRow">
 35 |         <div class="GridContainer">
 36 |           <div class="TwelveColumns--large TwelveColumns--medium">
 37 |             <h2>Colors</h2>
 38 |             <h3>At Buffer, we use five palettes; Blue, Brand, Gray, State, and Shade. These can be found as part of <code>less/base/variables.less</code></h3>
 39 |           </div>
 40 |         </div>
 41 |       </div>
 42 |     </div>
 43 | 
 44 |     <div class="Block">
 45 |       <div class="GridRow">
 46 |         <div class="GridContainer">
 47 |           <div class="TwelveColumns--large TwelveColumns--medium">
 48 |             <h2>Blue Palette</h2>
 49 |             <p>Our blue palette is used to describe primary actions such as pimary buttons, links, and other objects that fall into this category. When thinking about what defines a primary action, it is the first action we're looking for a user to take.</p>
 50 |             <p>We use <code>@curious-blue</code> as the main blue color for the object, <code>@denim</code> for its <code>:hover</code> state, and <code>@tory-blue</code> for its <code>:active</code> state.</p>
 51 |           </div>
 52 |         </div>
 53 |       </div>
 54 |       <div class="GridRow GridRow--color-swatch GridRow--color-swatch-last-row">
 55 |         <div class="GridContainer">
 56 |           <div class="FourColumns--large TwelveColumns--medium">
 57 |             <div class="Card">
 58 |               <div class="CardWithColor CardWithColor--blue-1">
 59 |                 <h3>@curious-blue</h3>
 60 |                 <p>#168eea</p>
 61 |               </div>
 62 |             </div>
 63 |           </div>
 64 |           <div class="FourColumns--large TwelveColumns--medium">
 65 |             <div class="Card">
 66 |               <div class="CardWithColor CardWithColor--blue-2">
 67 |                 <h3>@denim</h3>
 68 |                 <p>#137ac9</p>
 69 |               </div>
 70 |             </div>
 71 |           </div>
 72 |           <div class="FourColumns--large TwelveColumns--medium">
 73 |             <div class="Card">
 74 |               <div class="CardWithColor CardWithColor--blue-3">
 75 |                 <h3>@tory-blue</h3>
 76 |                 <p>#0f63a4</p>
 77 |               </div>
 78 |             </div>
 79 |           </div>
 80 |         </div>
 81 |       </div>
 82 |     </div>
 83 | 
 84 |     <div class="Block Block--type-alternative">
 85 |       <div class="GridRow">
 86 |         <div class="GridContainer">
 87 |           <div class="TwelveColumns--large TwelveColumns--medium">
 88 |             <h2>Brand Palette</h2>
 89 |             <p>Our brand palette is used to describe the various brands represented in the Buffer product.</p>
 90 |           </div>
 91 |         </div>
 92 |       </div>
 93 |       <div class="GridRow GridRow--color-swatch">
 94 |         <div class="GridContainer">
 95 |           <div class="FourColumns--large TwelveColumns--medium">
 96 |             <div class="Card">
 97 |               <div class="CardWithColor CardWithColor--appdotnet">
 98 |                 <h3>@appdotnet</h3>
 99 |                 <p>#4a484c</p>
100 |               </div>
101 |             </div>
102 |           </div>
103 |           <div class="FourColumns--large TwelveColumns--medium">
104 |             <div class="Card">
105 |               <div class="CardWithColor CardWithColor--facebook">
106 |                 <h3>@facebook</h3>
107 |                 <p>#3b5998</p>
108 |               </div>
109 |             </div>
110 |           </div>
111 |           <div class="FourColumns--large TwelveColumns--medium">
112 |             <div class="Card">
113 |               <div class="CardWithColor CardWithColor--googleplus">
114 |                 <h3>@googleplus</h3>
115 |                 <p>#dd4b39</p>
116 |               </div>
117 |             </div>
118 |           </div>
119 |         </div>
120 |       </div>
121 |       <div class="GridRow GridRow--color-swatch GridRow--color-swatch-last-row">
122 |         <div class="GridContainer">
123 |           <div class="FourColumns--large TwelveColumns--medium">
124 |             <div class="Card">
125 |               <div class="CardWithColor CardWithColor--linkedin">
126 |                 <h3>@linkedin</h3>
127 |                 <p>#007bb6</p>
128 |               </div>
129 |             </div>
130 |           </div>
131 |           <div class="FourColumns--large TwelveColumns--medium">
132 |             <div class="Card">
133 |               <div class="CardWithColor CardWithColor--pinterest">
134 |                 <h3>@pinterest</h3>
135 |                 <p>#bd081c</p>
136 |               </div>
137 |             </div>
138 |           </div>
139 |           <div class="FourColumns--large TwelveColumns--medium">
140 |             <div class="Card">
141 |               <div class="CardWithColor CardWithColor--twitter">
142 |                 <h3>@twitter</h3>
143 |                 <p>#55acee</p>
144 |               </div>
145 |             </div>
146 |           </div>
147 |         </div>
148 |       </div>
149 |     </div>
150 | 
151 |     <div class="Block">
152 |       <div class="GridRow GridRow--colors">
153 |         <div class="GridContainer">
154 |           <div class="TwelveColumns--large TwelveColumns--medium">
155 |             <h2>Gray Palette</h2>
156 |             <p>Our gray palette is used in most objects; from typography and border colors to backgrounds and shadows.</p>
157 |             <p>We use <code>@outer-space</code> for the <code>color</code> of <code>input</code>, <code>label</code>, the active <code>NavBar__menu__item</code>, <code>h1</code> through <code>h6</code>, the <code>:active</code> state of a <code>Button--type-tertiary</code> (including its <code>background-color</code> property at 10% opacity), and the <code>:hover</code> state of a <code>Button--type-tertiary</code>.</p>
158 |             <p>We use <code>@shuttle-gray</code> for the <code>color</code> of <code>body</code>, <code>NavBar__menu__item</code>, and <code>Tag</code>.</p>
159 |             <p>We use <code>@nevada</code> for the <code>border-color</code> and <code>color</code> of <code>Button--type-tertiary</code>.</p>
160 |             <p>We use <code>@geyser</code> for the <code>border-color</code> of all objects that require a border.</p>
161 |             <p>We use <code>@aqua-haze</code> for an alternative, light background color.</p>
162 |           </div>
163 |         </div>
164 |       </div>
165 |       <div class="GridRow GridRow--color-swatch">
166 |         <div class="GridContainer">
167 |           <div class="FourColumns--large TwelveColumns--medium">
168 |             <div class="Card">
169 |               <div class="CardWithColor CardWithColor--gray-1">
170 |                 <h3>@outer-space</h3>
171 |                 <p>#323b43</p>
172 |               </div>
173 |             </div>
174 |           </div>
175 |           <div class="FourColumns--large TwelveColumns--medium">
176 |             <div class="Card">
177 |               <div class="CardWithColor CardWithColor--gray-2">
178 |                 <h3>@shuttle-gray</h3>
179 |                 <p>#59626a</p>
180 |               </div>
181 |             </div>
182 |           </div>
183 |           <div class="FourColumns--large TwelveColumns--medium">
184 |             <div class="Card">
185 |               <div class="CardWithColor CardWithColor--gray-3">
186 |                 <h3>@nevada</h3>
187 |                 <p>#666c72</p>
188 |               </div>
189 |             </div>
190 |           </div>
191 |         </div>
192 |       </div>
193 |       <div class="GridRow GridRow--color-swatch-last-row">
194 |         <div class="GridContainer">
195 |           <div class="FourColumns--large TwelveColumns--medium">
196 |             <div class="Card">
197 |               <div class="CardWithColor CardWithColor--gray-4">
198 |                 <h3>@geyser</h3>
199 |                 <p>#ced7df</p>
200 |               </div>
201 |             </div>
202 |           </div>
203 |           <div class="FourColumns--large TwelveColumns--medium">
204 |             <div class="Card">
205 |               <div class="CardWithColor CardWithColor--color-aqua-haze CardWithColor--gray-5">
206 |                 <h3>@aqua-haze</h3>
207 |                 <p>#f4f7f9</p>
208 |               </div>
209 |             </div>
210 |           </div>
211 |         </div>
212 |       </div>
213 |     </div>
214 | 
215 |     <div class="Block Block--type-alternative">
216 |       <div class="GridRow">
217 |         <div class="GridContainer">
218 |           <div class="TwelveColumns--large TwelveColumns--medium">
219 |             <h2>Shade Palette</h2>
220 |             <p>We only use one shade; <code>@white</code>, which is either used as a <code>background-color</code> or a <code>color</code>. When used as a <code>color</code>, it can be coupled with an opacity variation.</p>
221 |           </div>
222 |         </div>
223 |       </div>
224 |       <div class="GridRow GridRow--color-swatch GridRow--color-swatch-last-row">
225 |         <div class="GridContainer">
226 |           <div class="FourColumns--large TwelveColumns--medium">
227 |             <div class="Card">
228 |               <div class="CardWithColor CardWithColor--white CardWithColor--color-white">
229 |                 <h3>@white</h3>
230 |                 <p>#fff</p>
231 |               </div>
232 |             </div>
233 |           </div>
234 |         </div>
235 |       </div>
236 |     </div>
237 | 
238 |     <div class="Block">
239 |       <div class="GridRow">
240 |         <div class="GridContainer">
241 |           <div class="TwelveColumns--large TwelveColumns--medium">
242 |             <h2>State Palette</h2>
243 |             <p>Our state palette includes three colors used to describe the state of a given object.</p>
244 |             <p>We use <code>@shamrock</code> as the <code>background-color</code> at <code>20%</code> or the <code>color</code> of any object that has a <code>--state-success</code>.</p>
245 |             <p>We use <code>@saffron</code> as the <code>background-color</code> at <code>20%</code> or the <code>color</code> of any object that has a <code>--state-warning</code>.</p>
246 |             <p>We use <code>@torch-red</code> as the <code>background-color</code> at <code>20%</code> or the <code>color</code> of any object that has a <code>--state-error</code>.</p>
247 |           </div>
248 |         </div>
249 |       </div>
250 |       <div class="GridRow GridRow--color-swatch GridRow--color-swatch-last-row">
251 |         <div class="GridContainer">
252 |           <div class="FourColumns--large TwelveColumns--medium">
253 |             <div class="Card">
254 |               <div class="CardWithColor CardWithColor--green">
255 |                 <h3>@shamrock</h3>
256 |                 <p>#2fd566</p>
257 |               </div>
258 |             </div>
259 |           </div>
260 |           <div class="FourColumns--large TwelveColumns--medium">
261 |             <div class="Card">
262 |               <div class="CardWithColor CardWithColor--yellow">
263 |                 <h3>@saffron</h3>
264 |                 <p>#f1cb3a</p>
265 |               </div>
266 |             </div>
267 |           </div>
268 |           <div class="FourColumns--large TwelveColumns--medium">
269 |             <div class="Card">
270 |               <div class="CardWithColor CardWithColor--red">
271 |                 <h3>@torch-red</h3>
272 |                 <p>#ff1e1e</p>
273 |               </div>
274 |             </div>
275 |           </div>
276 |         </div>
277 |       </div>
278 |     </div>
279 |     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
280 |     <script src="js/bundle.js"></script>
281 |   </body>
282 | </html>
283 | 


--------------------------------------------------------------------------------
/public/css/style.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |   font-size: 14px;
  3 |   line-height: 1.5;
  4 |   color: #59626a; }
  5 | 
  6 | code {
  7 |   padding: 2px 4px;
  8 |   color: #ff1e1e;
  9 |   background-color: rgba(255, 30, 30, 0.1);
 10 |   border-radius: 2px; }
 11 | 
 12 | h1,
 13 | h2,
 14 | h3,
 15 | h4,
 16 | h5,
 17 | h6 {
 18 |   line-height: normal;
 19 |   color: #323b43; }
 20 | 
 21 | h1,
 22 | h2,
 23 | h3 {
 24 |   margin: 0 0 32px 0;
 25 |   font-weight: 300; }
 26 | 
 27 | h1 {
 28 |   font-size: 48px;
 29 |   line-height: 72px; }
 30 | 
 31 | h2 {
 32 |   font-size: 40px;
 33 |   line-height: 60px; }
 34 | 
 35 | h3 {
 36 |   font-size: 24px;
 37 |   line-height: 36px; }
 38 | 
 39 | h4,
 40 | h5,
 41 | h6 {
 42 |   margin: 0 0 16px 0;
 43 |   font-size: 14px;
 44 |   line-height: 1.5; }
 45 | 
 46 | a {
 47 |   text-decoration: none; }
 48 | 
 49 | a:hover {
 50 |   text-decoration: underline; }
 51 | 
 52 | ol,
 53 | ul {
 54 |   margin: 32px 16px 32px 34px; }
 55 | 
 56 | li {
 57 |   margin-bottom: 8px; }
 58 | 
 59 | .List--style-none {
 60 |   list-style: none; }
 61 | 
 62 | .List--margin-bottom-0 {
 63 |   margin-bottom: 0; }
 64 | 
 65 | p {
 66 |   margin: 16px 0; }
 67 | 
 68 | .Paragraph--order-first {
 69 |   margin-top: 0; }
 70 | 
 71 | .Paragraph--order-last {
 72 |   margin-bottom: 0; }
 73 | 
 74 | *, *:before, *:after {
 75 |   box-sizing: inherit; }
 76 | 
 77 | .Button {
 78 |   display: inline-block;
 79 |   padding: 8px 24px;
 80 |   font-family: "Open Sans", sans-serif;
 81 |   font-size: 14px;
 82 |   line-height: 1.5;
 83 |   color: #fff;
 84 |   background-color: #168eea;
 85 |   border: 1px solid transparent;
 86 |   border-radius: 256px;
 87 |   cursor: pointer;
 88 |   outline: none;
 89 |   transition: background-color 0.1s linear; }
 90 | 
 91 | .Button:active {
 92 |   background-color: #0f63a4 !important; }
 93 | 
 94 | .Button:hover {
 95 |   color: #fff;
 96 |   text-decoration: none;
 97 |   background-color: #137ac9; }
 98 | 
 99 | .Button [class*=" bi-"]:before,
100 | .Button [class^=bi-]:before {
101 |   vertical-align: baseline; }
102 | 
103 | .Button .bi {
104 |   color: #fff; }
105 | 
106 | .Button--state-error {
107 |   color: #ff1e1e;
108 |   background-color: transparent;
109 |   border-color: #ff1e1e; }
110 | 
111 | .Button--state-error:active {
112 |   color: #ff1e1e !important;
113 |   background-color: rgba(255, 30, 30, 0.1) !important; }
114 | 
115 | .Button--state-error:hover {
116 |   color: #ff1e1e !important;
117 |   background-color: transparent; }
118 | 
119 | .Button--state-error:hover i.bi {
120 |   color: #fff; }
121 | 
122 | .Button--state-error i.bi {
123 |   color: #ff1e1e; }
124 | 
125 | .Button--type-borderless {
126 |   color: #168eea;
127 |   background-color: transparent;
128 |   border: 0; }
129 | 
130 | .Button--type-borderless:hover {
131 |   color: #137ac9;
132 |   background-color: transparent; }
133 | 
134 | .Button--type-borderless:active {
135 |   color: #137ac9;
136 |   background-color: transparent !important; }
137 | 
138 | .Button--type-in-app {
139 |   padding: 4px 16px; }
140 | 
141 | .Button--type-secondary {
142 |   color: #168eea;
143 |   background-color: transparent;
144 |   border-color: #168eea; }
145 | 
146 | .Button--type-secondary:active {
147 |   color: #168eea !important;
148 |   background-color: rgba(22, 142, 234, 0.1) !important;
149 |   border-color: #168eea !important; }
150 | 
151 | .Button--type-secondary:hover {
152 |   color: #137ac9;
153 |   background-color: transparent;
154 |   border-color: #137ac9; }
155 | 
156 | .Button--type-secondary i.bi {
157 |   color: #168eea; }
158 | 
159 | .Button--type-small {
160 |   padding: 2px 10px;
161 |   font-size: 11px; }
162 | 
163 | .Button--type-tertiary {
164 |   color: #666c72;
165 |   background-color: transparent;
166 |   border-color: #ced7df; }
167 | 
168 | .Button--type-tertiary i.bi {
169 |   color: #666c72; }
170 | 
171 | .Button--type-tertiary:active {
172 |   color: #323b43 !important;
173 |   background-color: rgba(50, 59, 67, 0.1) !important;
174 |   border-color: #323b43 !important; }
175 | 
176 | .Button--type-tertiary:active i.bi {
177 |   color: #323b43 !important; }
178 | 
179 | .Button--type-tertiary:hover {
180 |   color: #323b43;
181 |   background-color: transparent;
182 |   border-color: #323b43; }
183 | 
184 | .Button--type-tertiary:hover i.bi {
185 |   color: #323b43; }
186 | 
187 | .ButtonIcon {
188 |   align-self: center;
189 |   width: 16px;
190 |   height: 16px;
191 |   font-size: 16px;
192 |   line-height: 12px;
193 |   background-color: transparent;
194 |   border: 0; }
195 | 
196 | .Card {
197 |   margin-bottom: 16px;
198 |   padding: 16px;
199 |   background-color: #fff;
200 |   border: 1px solid #ced7df;
201 |   border-radius: 4px; }
202 | 
203 | .Card .Card {
204 |   border-radius: 2px; }
205 | 
206 | .Card .Card .Card {
207 |   border-radius: 1px; }
208 | 
209 | .Card--double-padding {
210 |   padding: 32px; }
211 | 
212 | .Card--empty {
213 |   border-style: dashed; }
214 | 
215 | .Card--no-border {
216 |   border: 0; }
217 | 
218 | .Card--no-padding {
219 |   padding: 0; }
220 | 
221 | .Block {
222 |   padding: 64px 0;
223 |   background-color: #fff; }
224 | 
225 | .Block .bi {
226 |   margin-right: 8px; }
227 | 
228 | .Block .bi.bi--right {
229 |   margin-right: 0;
230 |   margin-left: 8px; }
231 | 
232 | .Block .bi.bi--shamrock {
233 |   color: #2fd566; }
234 | 
235 | .Block--type-alternative {
236 |   background-color: #f4f7f9; }
237 | 
238 | .Block--type-dark {
239 |   text-align: center;
240 |   background-color: #323b43; }
241 | 
242 | .Block--type-dark h2,
243 | .Block--type-dark h3 {
244 |   margin-bottom: 0; }
245 | 
246 | .Block--type-dark h2 {
247 |   color: #fff; }
248 | 
249 | .Block--type-dark h3 {
250 |   color: rgba(255, 255, 255, 0.8); }
251 | 
252 | .Block--type-dark p {
253 |   color: rgba(255, 255, 255, 0.6); }
254 | 
255 | .Block--type-dark .Button {
256 |   margin-top: 32px; }
257 | 
258 | .Block--type-footer h5,
259 | .Block--type-footer p {
260 |   margin-top: 0;
261 |   margin-bottom: 16px; }
262 | 
263 | .Block--type-footer ul {
264 |   margin: 0 0 32px 0; }
265 | 
266 | .Block__content-block {
267 |   margin-top: 32px; }
268 | 
269 | .Block__content-block h2,
270 | .Block__content-block h3,
271 | .Block__content-block h4 {
272 |   margin-bottom: 0; }
273 | 
274 | .Block__copyright a {
275 |   color: #59626a; }
276 | 
277 | .Block__content--align-center {
278 |   text-align: center; }
279 | 
280 | .Block__content--align-center img {
281 |   margin: 0 auto; }
282 | 
283 | .Block__content--align-left {
284 |   text-align: left; }
285 | 
286 | .Block__content--align-right {
287 |   text-align: right; }
288 | 
289 | .Block__content--margin-bottom-0 h1,
290 | .Block__content--margin-bottom-0 h2,
291 | .Block__content--margin-bottom-0 h3,
292 | .Block__content--margin-bottom-0 h4,
293 | .Block__content--margin-bottom-0 h5,
294 | .Block__content--margin-bottom-0 h6 {
295 |   margin-bottom: 0; }
296 | 
297 | .Block__content-block--top {
298 |   margin-top: 0; }
299 | 
300 | @media screen and (max-width: 768px) {
301 |   .BlockContent .GridContainer {
302 |     width: 100%; } }
303 | 
304 | @media screen and (min-width: 769px) and (max-width: 959px) {
305 |   .BlockContent .GridContainer {
306 |     width: 100%; } }
307 | 
308 | @media screen and (min-width: 1024px) {
309 |   .BlockContent .GridContainer {
310 |     width: 640px; } }
311 | 
312 | .BlockGrid p {
313 |   margin-bottom: 0; }
314 | 
315 | .BlockGrid .ProfilePicture {
316 |   margin-top: 16px; }
317 | 
318 | .BlockHero {
319 |   padding-top: 128px;
320 |   padding-bottom: 128px;
321 |   text-align: center;
322 |   background-position: top;
323 |   background-size: cover;
324 |   background-repeat: no-repeat; }
325 | 
326 | .BlockHero h2,
327 | .BlockHero h3,
328 | .BlockHero p {
329 |   margin-bottom: 0; }
330 | 
331 | .BlockHero h2 {
332 |   color: #fff; }
333 | 
334 | .BlockHero h3 {
335 |   color: rgba(255, 255, 255, 0.5); }
336 | 
337 | .BlockHero .Button {
338 |   margin-top: 32px; }
339 | 
340 | * {
341 |   box-sizing: border-box; }
342 | 
343 | [class*="Column"],
344 | [class*="Columns"] {
345 |   float: left;
346 |   padding: 0 16px;
347 |   width: 100%; }
348 | 
349 | .GridRow::after {
350 |   display: block;
351 |   clear: both;
352 |   content: ""; }
353 | 
354 | .GridRow img {
355 |   max-width: 100%;
356 |   height: auto; }
357 | 
358 | .GridContainer {
359 |   margin: 0 auto; }
360 | 
361 | .GridContainer::after {
362 |   display: block;
363 |   clear: both;
364 |   content: ""; }
365 | 
366 | @media screen and (max-width: 768px) {
367 |   .GridContainer {
368 |     width: 100%; }
369 |   .OneColumn--medium {
370 |     width: 8.33%; }
371 |   .TwoColumns--medium {
372 |     width: 16.66%; }
373 |   .ThreeColumns--medium {
374 |     width: 25%; }
375 |   .FourColumns--medium {
376 |     width: 33.33%; }
377 |   .FiveColumns--medium {
378 |     width: 41.66%; }
379 |   .SixColumns--medium {
380 |     width: 50%; }
381 |   .SevenColumns--medium {
382 |     width: 58.33%; }
383 |   .EightColumns--medium {
384 |     width: 66.66%; }
385 |   .NineColumns--medium {
386 |     width: 75%; }
387 |   .TenColumns--medium {
388 |     width: 83.33%; }
389 |   .ElevenColumns--medium {
390 |     width: 91.66%; }
391 |   .TwelveColumns--medium {
392 |     width: 100%; }
393 |   .Button--margin-top--medium {
394 |     margin-top: 16px; }
395 |   .Image--margin-top--medium {
396 |     margin-top: 32px; }
397 |   .Image--margin-bottom--medium {
398 |     margin-bottom: 32px; } }
399 | 
400 | @media screen and (min-width: 769px) and (max-width: 959px) {
401 |   .GridContainer {
402 |     width: 100%; } }
403 | 
404 | @media screen and (min-width: 1024px) {
405 |   .GridContainer {
406 |     width: 960px; }
407 |   .OneColumn--large {
408 |     width: 8.33%; }
409 |   .TwoColumns--large {
410 |     width: 16.66%; }
411 |   .ThreeColumns--large {
412 |     width: 25%; }
413 |   .FourColumns--large {
414 |     width: 33.33%; }
415 |   .FiveColumns--large {
416 |     width: 41.66%; }
417 |   .SixColumns--large {
418 |     width: 50%; }
419 |   .SevenColumns--large {
420 |     width: 58.33%; }
421 |   .EightColumns--large {
422 |     width: 66.66%; }
423 |   .NineColumns--large {
424 |     width: 75%; }
425 |   .TenColumns--large {
426 |     width: 83.33%; }
427 |   .ElevenColumns--large {
428 |     width: 91.66%; }
429 |   .TwelveColumns--large {
430 |     width: 100%; } }
431 | 
432 | .NavBar {
433 |   flex-direction: row;
434 |   justify-content: flex-start;
435 |   align-items: center;
436 |   z-index: 1;
437 |   display: flex;
438 |   padding: 0 16px;
439 |   width: 100%;
440 |   height: 64px;
441 |   background-color: #fff;
442 |   border-bottom: 1px solid #ced7df; }
443 | 
444 | .NavBar a:hover {
445 |   text-decoration: none; }
446 | 
447 | .NavBar .bi {
448 |   margin-right: 8px; }
449 | 
450 | .NavBar__left-menu,
451 | .NavBar__right-menu {
452 |   flex-direction: row;
453 |   align-items: center;
454 |   display: flex;
455 |   margin: 0;
456 |   list-style: none; }
457 | 
458 | .NavBar__left-menu {
459 |   justify-content: flex-start;
460 |   flex-grow: 1; }
461 | 
462 | .NavBar__menu__item {
463 |   margin: 0 32px 0 0; }
464 | 
465 | .NavBar__menu__item a {
466 |   display: inline-block; }
467 | 
468 | .NavBar__menu__item .ProfilePicture {
469 |   vertical-align: middle;
470 |   display: inline-block !important;
471 |   margin-right: 8px; }
472 | 
473 | .NavBar__menu__item__link {
474 |   color: #59626a; }
475 | 
476 | .NavBar__right-menu {
477 |   justify-content: flex-end;
478 |   flex-grow: 0; }
479 | 
480 | .NavBar__right-menu .Button {
481 |   margin-right: 16px; }
482 | 
483 | .NavBar__title {
484 |   flex-grow: 0;
485 |   margin-right: 50px;
486 |   font-size: 16px;
487 |   font-weight: 600;
488 |   color: #323b43; }
489 | 
490 | .NavBar__title:hover {
491 |   text-decoration: none;
492 |   color: #59626a; }
493 | 
494 | .NavBar__title a {
495 |   color: #323b43; }
496 | 
497 | .NavBar__menu__item--active .NavBar__menu__item__link {
498 |   font-weight: 600;
499 |   color: #323b43; }
500 | 
501 | .NavBar__menu__item--last {
502 |   margin-right: 0; }
503 | 
504 | .ProfilePicture {
505 |   display: block;
506 |   width: 32px;
507 |   height: 32px;
508 |   border-radius: 256px; }
509 | 
510 | .ProfilePicture--extra-large {
511 |   width: 128px;
512 |   height: 128px; }
513 | 
514 | .ProfilePicture--large {
515 |   width: 64px;
516 |   height: 64px; }
517 | 
518 | .ProfilePicture--medium {
519 |   width: 48px;
520 |   height: 48px; }
521 | 
522 | .ProfilePicture--small {
523 |   width: 16px;
524 |   height: 16px; }
525 | 
526 | .Tag {
527 |   display: inline-block;
528 |   padding: 2px 8px;
529 |   font-size: 11px;
530 |   font-weight: 600;
531 |   color: #59626a;
532 |   background-color: #ced7df;
533 |   border-radius: 4px; }
534 | 
535 | .Tag--margin-right {
536 |   margin-right: 8px; }
537 | 
538 | .Tag--state-error,
539 | .Tag--type-primary {
540 |   color: #fff; }
541 | 
542 | .Tag--state-error {
543 |   background-color: #ff1e1e; }
544 | 
545 | .Tag--type-primary {
546 |   background-color: #168eea; }
547 | 
548 | .Card--no-padding {
549 |   margin-bottom: 0; }
550 | 
551 | .BlockHero--colors {
552 |   background-color: #323b43; }
553 | 
554 | .CardWithColor {
555 |   margin: -17px -17px -17px -17px;
556 |   padding: 64px 0;
557 |   text-align: center;
558 |   border-radius: 4px; }
559 | 
560 | .CardWithColor h3 {
561 |   margin-bottom: 0; }
562 | 
563 | .CardWithColor p {
564 |   margin: 0; }
565 | 
566 | .CardWithColor__content ol,
567 | .CardWithColor__content ul {
568 |   margin-right: 0;
569 |   margin-bottom: 0;
570 |   margin-left: 0; }
571 | 
572 | .CardWithColor--color-aqua-haze,
573 | .CardWithColor--color-white {
574 |   margin: -16px; }
575 | 
576 | .CardWithColor--blue-1 {
577 |   background-color: #168eea; }
578 | 
579 | .CardWithColor--appdotnet h3,
580 | .CardWithColor--blue-1 h3,
581 | .CardWithColor--blue-2 h3,
582 | .CardWithColor--blue-3 h3,
583 | .CardWithColor--facebook h3,
584 | .CardWithColor--googleplus h3,
585 | .CardWithColor--gray-1 h3,
586 | .CardWithColor--gray-2 h3,
587 | .CardWithColor--gray-3 h3,
588 | .CardWithColor--linkedin h3,
589 | .CardWithColor--pinterest h3,
590 | .CardWithColor--twitter h3,
591 | .CardWithColor--red h3 {
592 |   color: #fff; }
593 | 
594 | .CardWithColor--appdotnet p,
595 | .CardWithColor--blue-1 p,
596 | .CardWithColor--blue-2 p,
597 | .CardWithColor--blue-3 p,
598 | .CardWithColor--facebook p,
599 | .CardWithColor--googleplus p,
600 | .CardWithColor--gray-1 p,
601 | .CardWithColor--gray-2 p,
602 | .CardWithColor--gray-3 p,
603 | .CardWithColor--linkedin p,
604 | .CardWithColor--pinterest p,
605 | .CardWithColor--twitter p,
606 | .CardWithColor--red p {
607 |   color: rgba(255, 255, 255, 0.75); }
608 | 
609 | .CardWithColor--appdotnet {
610 |   background-color: #4a484c; }
611 | 
612 | .CardWithColor--blue-2 {
613 |   background-color: #137ac9; }
614 | 
615 | .CardWithColor--blue-3 {
616 |   background-color: #0f63a4; }
617 | 
618 | .CardWithColor--facebook {
619 |   background-color: #3b5998; }
620 | 
621 | .CardWithColor--googleplus {
622 |   background-color: #dd4b39; }
623 | 
624 | .CardWithColor--gray-1 {
625 |   background-color: #323b43; }
626 | 
627 | .CardWithColor--gray-2 {
628 |   background-color: #59626a; }
629 | 
630 | .CardWithColor--gray-3 {
631 |   background-color: #666c72; }
632 | 
633 | .CardWithColor--gray-4 {
634 |   background-color: #ced7df; }
635 | 
636 | .CardWithColor--gray-5 {
637 |   background-color: #f4f7f9; }
638 | 
639 | .CardWithColor--green {
640 |   background-color: #2fd566; }
641 | 
642 | .CardWithColor--linkedin {
643 |   background-color: #007bb6; }
644 | 
645 | .CardWithColor--pinterest {
646 |   background-color: #bd081c; }
647 | 
648 | .CardWithColor--red {
649 |   background-color: #ff1e1e; }
650 | 
651 | .CardWithColor--twitter {
652 |   background-color: #55acee; }
653 | 
654 | .CardWithColor--white {
655 |   background-color: #fff; }
656 | 
657 | .CardWithColor--yellow {
658 |   background-color: #f1cb3a; }
659 | 
660 | .GridRow--color-swatch {
661 |   margin-top: 32px; }
662 | 
663 | .GridRow--color-swatch-last-row .Card {
664 |   margin-bottom: 0; }
665 | 
666 | .ColGroup {
667 |   margin: 32px 0; }
668 | 
669 | .ColGroup::after {
670 |   display: block;
671 |   clear: both;
672 |   content: ""; }
673 | 
674 | .ColGroup .ThreeColumns--large:nth-child(1) {
675 |   border-right: 0; }
676 | 
677 | .ColGroup .ThreeColumns--large:nth-child(3) {
678 |   border-left: 0; }
679 | 
680 | .ColGroup .ThreeColumns--large,
681 | .ColGroup .ThreeColumns--medium,
682 | .ColGroup .SixColumns--large,
683 | .ColGroup .SixColumns--medium {
684 |   padding: 16px;
685 |   font-size: 12px; }
686 | 
687 | .ColGroup .ThreeColumns--large,
688 | .ColGroup .ThreeColumns--medium {
689 |   border: 1px solid #ced7df; }
690 | 
691 | .ColGroup .SixColumns--large,
692 | .ColGroup .SixColumns--medium {
693 |   border: 1px solid #ced7df; }
694 | 


--------------------------------------------------------------------------------