├── .editorconfig ├── .gitignore ├── .jshintrc ├── .npmignore ├── Gulpfile.js ├── LICENSE ├── README.md ├── package.json ├── public ├── cards.html ├── colors.html ├── css │ ├── colors.css │ ├── guide.css │ └── style.css ├── external-pages.html ├── grid-system.html ├── img │ └── block-title-text--hero@2x.png ├── index.html ├── js │ └── bundle.js ├── navbar.html ├── profile-pictures.html ├── tags.html └── typography.html ├── scripts └── publish-github-pages.sh ├── server.js └── src ├── js ├── components │ └── Card.jsx ├── guide.js ├── index.js └── utils.js └── scss ├── base ├── layout.scss ├── typography.scss └── variables.scss ├── components ├── Button.scss ├── Card.scss ├── DropDown.scss ├── ExternalPage.scss ├── GridSystem.scss ├── NavBar.scss ├── ProfilePicture.scss └── Tag.scss ├── guide.scss ├── pages ├── cards.scss ├── colors.scss └── grid-system.scss └── style.scss /.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 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | npm-debug.log 4 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .git* 2 | src/ 3 | public/ 4 | 5 | .editorconfig 6 | .jshintrc 7 | .gitignore 8 | Gulpfile.js 9 | server.js 10 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /public/cards.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Buffer Style Guide 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 | Style Guide 16 |
17 | 28 | 31 |
32 | 33 |
34 |
35 |
36 |
37 |

Cards

38 |

Cards are objects that can be used to contain information. less/components/Card.less provides a number of predefined card styles, which are documented below, for most use cases.

39 |
40 |
41 |
42 |
43 | 44 |
45 |
46 |
47 |
48 |
49 |

Card

50 |

This is the default style of a card. To use it, set the class property of a div node to Card.

51 |
Card content
52 |
53 |

Modifiers

54 |
55 |
56 |

Card--double-padding

57 |

Use this modifier to set a cards padding value from 16px to 32px. To use it, give a div node an additional class of Card--double-padding.

58 |
Card content
59 |
60 |
61 |

Card--empty

62 |

Use this modifier to describe a card that has no initial content but is expected to in the future. To use it, give a div node an additional class of Card--empty.

63 |
Card content
64 |
65 |
66 |

Card--no-border

67 |

Use this modifier when a card is displayed on a dark background. To use it, give a div node an additional class of Card--no-border.

68 |
Card content
69 |
70 |
71 |

Card--no-padding

72 |

Use this modifier to set a cards padding value to 0. To use it, give a div node an additional class of Card--no-padding.

73 |
Card content
74 |
75 |
76 |
77 |
78 |
79 |
80 | 81 | 82 | 83 | 84 | -------------------------------------------------------------------------------- /public/colors.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Buffer Style Guide 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 | Style Guide 16 |
17 | 28 | 31 |
32 | 33 |
34 |
35 |
36 |
37 |

Colors

38 |

At Buffer, we use five palettes; Blue, Brand, Gray, State, and Shade. These can be found as part of less/base/variables.less

39 |
40 |
41 |
42 |
43 | 44 |
45 |
46 |
47 |
48 |

Blue Palette

49 |

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.

50 |

We use @curious-blue as the main blue color for the object, @denim for its :hover state, and @tory-blue for its :active state.

51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |

@curious-blue

60 |

#168eea

61 |
62 |
63 |
64 |
65 |
66 |
67 |

@denim

68 |

#137ac9

69 |
70 |
71 |
72 |
73 |
74 |
75 |

@tory-blue

76 |

#0f63a4

77 |
78 |
79 |
80 |
81 |
82 |
83 | 84 |
85 |
86 |
87 |
88 |

Brand Palette

89 |

Our brand palette is used to describe the various brands represented in the Buffer product.

90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |

@appdotnet

99 |

#4a484c

100 |
101 |
102 |
103 |
104 |
105 | 109 |
110 |
111 |
112 |
113 |
114 |

@googleplus

115 |

#dd4b39

116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |

@linkedin

127 |

#007bb6

128 |
129 |
130 |
131 |
132 |
133 |
134 |

@pinterest

135 |

#bd081c

136 |
137 |
138 |
139 |
140 |
141 | 145 |
146 |
147 |
148 |
149 |
150 | 151 |
152 |
153 |
154 |
155 |

Gray Palette

156 |

Our gray palette is used in most objects; from typography and border colors to backgrounds and shadows.

157 |

We use @outer-space for the color of input, label, the active NavBar__menu__item, h1 through h6, the :active state of a Button--type-tertiary (including its background-color property at 10% opacity), and the :hover state of a Button--type-tertiary.

158 |

We use @shuttle-gray for the color of body, NavBar__menu__item, and Tag.

159 |

We use @nevada for the border-color and color of Button--type-tertiary.

160 |

We use @geyser for the border-color of all objects that require a border.

161 |

We use @aqua-haze for an alternative, light background color.

162 |
163 |
164 |
165 |
166 |
167 |
168 |
169 |
170 |

@outer-space

171 |

#323b43

172 |
173 |
174 |
175 |
176 |
177 |
178 |

@shuttle-gray

179 |

#59626a

180 |
181 |
182 |
183 |
184 |
185 |
186 |

@nevada

187 |

#666c72

188 |
189 |
190 |
191 |
192 |
193 |
194 |
195 |
196 |
197 |
198 |

@geyser

199 |

#ced7df

200 |
201 |
202 |
203 |
204 |
205 |
206 |

@aqua-haze

207 |

#f4f7f9

208 |
209 |
210 |
211 |
212 |
213 |
214 | 215 |
216 |
217 |
218 |
219 |

Shade Palette

220 |

We only use one shade; @white, which is either used as a background-color or a color. When used as a color, it can be coupled with an opacity variation.

221 |
222 |
223 |
224 |
225 |
226 |
227 |
228 |
229 |

@white

230 |

#fff

231 |
232 |
233 |
234 |
235 |
236 |
237 | 238 |
239 |
240 |
241 |
242 |

State Palette

243 |

Our state palette includes three colors used to describe the state of a given object.

244 |

We use @shamrock as the background-color at 20% or the color of any object that has a --state-success.

245 |

We use @saffron as the background-color at 20% or the color of any object that has a --state-warning.

246 |

We use @torch-red as the background-color at 20% or the color of any object that has a --state-error.

247 |
248 |
249 |
250 |
251 |
252 |
253 |
254 |
255 |

@shamrock

256 |

#2fd566

257 |
258 |
259 |
260 |
261 |
262 |
263 |

@saffron

264 |

#f1cb3a

265 |
266 |
267 |
268 |
269 |
270 |
271 |

@torch-red

272 |

#ff1e1e

273 |
274 |
275 |
276 |
277 |
278 |
279 | 280 | 281 | 282 | 283 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /public/external-pages.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Buffer Style Guide 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 | Style Guide 16 |
17 | 28 | 31 |
32 | 33 |
34 |
35 |
36 |
37 |

External pages

38 |

External pages are built out of Block objects. less/components/ExternalPage.less provides a number of predefined block styles, which are documented below, for most use cases.

39 |
40 |
41 |
42 |
43 | 44 |
45 |
46 |
47 |
48 |
49 |

Block

50 |

This is the default style of a Block object.

51 |

It sets the padding-top and padding-bottom to 64px and the background-color to $white.

52 |

To use it, give a div node a class of Block.

53 |
54 |
55 |

Modifiers

56 |
57 |
58 |

Block--type-alternative

59 |

This modifier sets the background-color of a Block to $aqua-haze. To use it, give a div node an additional class of Block--type-alternative.

60 |
61 |
62 |

Block--type-dark

63 |

This modifier sets the text-align of a Block to center and its background-color to $outer-space.

64 |

It sets the margin-bottom of children h2 and h3 nodes to 0

65 |

It changes the color of a child h2 node to $white, the color of a child h3 node to 0.8 of $white, and the color of a child p node to 0.6 of $white.

66 |

It sets the margin-top of a child Button node to 32px.

67 |

To use it, give a div node an additional class of Block--type-dark.

68 |
69 |
70 |

Block--type-footer

71 |

This modifier sets the margin-top of children h5 and p nodes to 0 and their margin-bottom to 16px and the margin of children ul nodes to 0 0 32px 0.

72 |

To use it, give a div node an additional class of Block--type-footer.

73 |
74 |
75 |

Elements

76 |
77 |
78 |

Block__content-block

79 |

This element sets the margin-top of the node to 32px and the margin-bottom of h2 and h3 nodes contained within it to 0.

80 |
81 |
82 |

Block__copyright

83 |

This element sets the color of a nodes contained within it to $shuttle-gray.

84 |
85 |
86 |

Element Modifiers

87 |
88 |
89 |

Block__content--center

90 |

This modifier sets the text-align of the node to center and the margin of img nodes contained within it to 0 auto.

91 |
92 |
93 |

Block__content--margin-bottom-0

94 |

This modifier sets the margin-bottom of h1, h2, h3, h4, h5, and h6 nodes to 0.

95 |
96 |
97 |

Block__content-block--left

98 |

This modifier sets the text-align of the node to left.

99 |
100 |
101 |

Block__content-block--top

102 |

This modifier sets the margin-top of the node to 0.

103 |
104 |
105 |
106 |
107 |
108 | 109 |
110 |
111 |
112 |
113 |
114 |

BlockContent

115 |

Add this class to a Block object to reduce the width of a GridContainer within it to 640px on a desktop and 100% on tablets and smartphones.

116 |
117 |
118 |
119 |
120 |
121 | 122 |
123 |
124 |
125 |
126 |
127 |

BlockGrid

128 |

Add this class to a Block object to set the margin-bottom of a p node contained within it to 0.

129 |

It sets the margin-top of a ProfilePicture object contained within it to 16px.

130 |
131 |
132 |
133 |
134 |
135 | 136 |
137 |
138 |
139 |
140 |
141 |

BlockHero

142 |

This is the default style of a BlockHero object. It sets the padding-top and padding-bottom to 128px, text-align to center, background-position to top, background-size to cover, and its background-repeat to no-repeat.

143 |

It sets the margin-bottom of h2, h3 and p nodes to 0, the color of h2 nodes to $white, and the color of h3 nodes to 0.5 of $white.

144 |

It sets the margin-top of a Button object contained within it to 32px.

145 |
146 |
147 |
148 |
149 |
150 | 151 | 152 | 153 | 154 | -------------------------------------------------------------------------------- /public/grid-system.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Buffer Style Guide 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 | Style Guide 16 |
17 | 28 | 31 |
32 | 33 |
34 |
35 |
36 |
37 |

GridSystem

38 |

Our grid system runs off of a 12-column grid with its container set to 960px. less/components/GridSystem.less provides all column widths, which are documented below, for most use cases.

39 |
40 |
41 |
42 |
43 | 44 |
45 |
46 |
47 |
48 |
49 |

GridRow

50 |

Each row of columns is wrapped within a GridRow. This keeps them organized and prevents a mosaic effect from occuring. GridRow has no defined properties but instead has a state rule for ::after, which sets its display property value to block, its clear property value to both, and its content property value to "". Having this rule in place allows every instance of GridRow to fully contain any elements within it that may be floating.

51 |

GridRow also updates any children img nodes to be responsive by setting their max-width property value to 100% and their height property value to auto.

52 |

To use it, give a div node a class of GridRow and place your content inside. A GridRow must go within a Block.

53 |
54 |
55 |
56 |
57 |
58 | 59 |
60 |
61 |
62 |
63 |
64 |

GridContainer

65 |

The purpose of the GridContainer 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 1024px have the GridContainer width property value set to 960px. Viewports smaller than this have the GridContainer width property value set to 100%. A GridContainer has a margin property value of 0 auto. Like the GridRow, a GridContainer has a state rule for ::after, which sets its display property value to block, its clear property value to both, and its content property value to "". Having this rule in place allows every instance of GridRow to fully contain any elements within it that may be floating.

66 |

To use it, give a div node a class of GridContainer and place your content inside. A GridContainer must go within a GridRow.

67 |
68 |
69 |
70 |
71 |
72 | 73 |
74 |
75 |
76 |
77 |
78 |

Columns

79 |

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 GridRow must contain column widths that equate to 12. For example:

80 |
81 |
3 columns
82 |
6 columns
83 |
3 columns
84 |
85 |

We've chosen to be super descriptive with our column nomenclature. To use a single column, give a div node a class of OneColumn followed by either the --medium or --large modifier. Columns larger than a single column use *Columns, i.e. ThreeColumns, EightColumns, etc.

86 |

Modifiers

87 |

*--large

88 |

Any column with a --large modifier will determine how many columns that node will use on a viewport with a width greater than or equal to 1024px.

89 |

*--medium

90 |

Any column with a --medium modifier will determine how many columns that node will use on a viewport with a width less than 1024px.

91 |
92 |
93 |
94 |
95 |
96 | 97 | 98 | 99 | 100 | -------------------------------------------------------------------------------- /public/img/block-title-text--hero@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bufferapp/buffer-style/bb18ed7f99cb34c435ecb20edb5509ba3f5327b5/public/img/block-title-text--hero@2x.png -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Buffer Style Guide 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 | Style Guide 16 |
17 | 28 | 31 |
32 | 33 |
34 |
35 |
36 |
37 |

Buttons

38 |

We use buttons to initiate actions inside and outside of the Buffer app. less/components/Button.less provides a number of predefined button styles, which are documented below, for most use cases.

39 |
40 |
41 |
42 |
43 | 44 |
45 |
46 |
47 |
48 |
49 |

Button

50 |

This is the default style of a button. To use it, set the class property of a button or a node to Button.

51 | 52 |
53 |
54 |

Modifiers

55 |
56 |
57 |

Button--state-error

58 |

Use this modifier to communicate a destructive action to the user. To use it, give an a, button, or div node an additional class of Button--state-error.

59 | 60 |
61 |
62 |

Button--type-borderless

63 |

Use this modifier to communicate a non-primary action to the user. To use it, give an a, button, or div node an additional class of Button--type-borderless.

64 | 65 |
66 |
67 |

Button--type-in-app

68 |

Use this modifier to communicate an in-app action to the user. To use it, give an a, button, or div node an additional class of Button--type-in-app.

69 | 70 |
71 |
72 |

Button--type-secondary

73 |

Use this modifier to communicate a secondary action to the user. To use it, give an a, button, or div node an additional class of Button--type-secondary.

74 | 75 |
76 |
77 |

Button--type-small

78 |

Use this modifier to communicate a primary action to the user when space is limited. To use it, give an a, button, or div node an additional class of Button--type-small.

79 | 80 |
81 |
82 |

Button--type-tertiary

83 |

Use this modifier to communicate a tertiary action to the user. To use it, give an a, button, or div node an additional class of Button--type-tertiary.

84 | 85 |
86 |
87 |
88 |
89 |
90 | 91 |
92 |
93 |
94 |
95 |

ButtonIcon

96 |

Use to communicate an action to the user using an icon only. To use it, give an a, button, or div node a class of ButtonIcon.

97 | 98 |
99 |
100 |
101 |
102 | 103 | 104 | 105 | 106 | -------------------------------------------------------------------------------- /public/navbar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Buffer Style Guide 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 | Style Guide 16 |
17 | 28 | 31 |
32 | 33 |
34 |
35 |
36 |
37 |

NavBar

38 |

The NavBar is an object that can be used to navigate. less/components/NavBar.less provides a predefined style, which is documented below, for most use cases.

39 |
40 |
41 |
42 |
43 | 44 |
45 |
46 |
47 |
48 |
49 |

NavBar

50 |

The NavBar 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; NavBar__title, NavBar__left-menu, and NavBar__right-menu.

51 |

To use it, give a parent div node a class of NavBar and its three children nodes NavBar__title, NavBar__left-menu, and NavBar__right-menu respectively.

52 |
53 |

Elements

54 |
55 |
56 |

NavBar__left-menu

57 |

NavBar__left-menu is aligned to the left of the NavBar and has a flex-grow property value of 1. This means it will always remain wider than NavBar__title and NavBar__right-menu.

58 |
59 |
60 |

NavBar__menu__item

61 |

NavBar__menu__item objects are children objects of NavBar__left-menu and NavBar__right-menu.

62 |
63 |
64 |

NavBar__menu__item__link

65 |

NavBar__menu__item__link objects are children objects of NavBar__menu__item.

66 |
67 |
68 |

NavBar__right-menu

69 |

NavBar__right-menu is aligned to the right of the NavBar and has a flex-grow property value of 0. This means its width will be 100% of the total width of its children.

70 |
71 |
72 |

NavBar__title

73 |

This element displays a title and is aligned to the left of the NavBar and has a flex-grow property value of 0. This means its width will be 100% of the total width of its children.

74 |
75 |
76 |

Element Modifiers

77 |
78 |
79 |

NavBar__menu__item--active

80 |

This modifier changes the property values of children nodes with a class of NavBar__menu__item__link. The font-weight property value is changed to 600 and the color property value is changed to $outer-space.

81 |
82 |
83 |

NavBar__menu__item--last

84 |

This modifier changes the margin-right property value to 0.

85 |
86 |
87 |
88 |
89 |
90 |
91 | 92 | 93 | 94 | 95 | -------------------------------------------------------------------------------- /public/profile-pictures.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Buffer Style Guide 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 | Style Guide 16 |
17 | 28 | 31 |
32 | 33 |
34 |
35 |
36 |
37 |

Profile Pictures

38 |

Profile pictures are objects that can be used to communicate a familiar connection to the user. less/components/ProfilePicture.less provides a number of predefined card styles, which are documented below, for most use cases.

39 |
40 |
41 |
42 |
43 | 44 |
45 |
46 |
47 |
48 |
49 |

ProfilePicture

50 |

An img node with a class of ProfilePicture changes its display property value to block, its width property value to 32px, its height property value to 32px, and its border-radius property value to 256px.

51 |

To use it, give an img node a class of ProfilePicture.

52 | A profile picture of Steve Dixon 53 |
54 |
55 |

Modifiers

56 |
57 |
58 |

ProfilePicture--extra-large

59 |

This modifies a the width and height to 128px.

60 | A profile picture of Steve Dixon 61 |
62 |
63 |

ProfilePicture--large

64 |

This modifies a the width and height to 64px.

65 | A profile picture of Steve Dixon 66 |
67 |
68 |

ProfilePicture--medium

69 |

This modifies a the width and height to 48px.

70 | A profile picture of Steve Dixon 71 |
72 |
73 |

ProfilePicture--small

74 |

This modifies a the width and height to 16px.

75 | A profile picture of Steve Dixon 76 |
77 |
78 |
79 |
80 |
81 | 82 | 83 | 84 | 85 | -------------------------------------------------------------------------------- /public/tags.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Buffer Style Guide 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 | Style Guide 16 |
17 | 28 | 31 |
32 | 33 |
34 |
35 |
36 |
37 |

Tags

38 |

Tags communicate a specific state of information to the user. For example, the amount of posts queued up within a user's connected account. less/components/Tag.less provides a number of predefined tag styles, which are documented below, for most use cases.

39 |
40 |
41 |
42 |
43 | 44 |
45 |
46 |
47 |
48 |
49 |

Tag

50 |

A div or span node with a class of Tag sets its padding property value to 2px 8px, its font-size property value to 11px, its font-weight property value to 600, its color property value to $shuttle-gray, its background-color property value to @geyser, and its border-radius property value to @border-radius-level-1.

51 |

To use it, give a div or span node a class of Tag.

52 |
Text label
53 |
54 |
55 |

Modifiers

56 |
57 |
58 |

Tag--margin-right

59 |

This modifies adds a margin-right property value of 8px.

60 |
Tag 1
Tag 2
61 |
62 |
63 |

Tag--state-error

64 |

This modifies a the color property value to @white and the background-color property value to @torch-red.

65 |
Text label
66 |
67 |
68 |

Tag--type-primary

69 |

This modifies a the color property value to @white and the background-color property value to @curious-blue.

70 |
Text label
71 |
72 |
73 |
74 |
75 |
76 | 77 | 78 | 79 | 80 | -------------------------------------------------------------------------------- /public/typography.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Buffer Style Guide 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 | Style Guide 16 |
17 | 29 | 32 |
33 | 34 |
35 |
36 |
37 |
38 |

Typography

39 |

We exclusively use Open Sans as the base typeface for the Buffer product. less/base/typography.less provides a number of styles, which are documented below, for most use cases.

40 |
41 |
42 |
43 |
44 | 45 |
46 |
47 |
48 |
49 |
50 |

Body

51 |

Our body node has a font-size property value of @font-size, a line-height property value of @line-height, and a color property value of @shuttle-gray.

52 |
53 |
54 |
55 |
56 |
57 | 58 |
59 |
60 |
61 |
62 |
63 |

Code

64 |

Our code node has a padding property value of 2px 4px, a color property value of @torch-red, a background-color property value of rgba(@torch-red, 0.1), and a border-radius property value of @border-radius-level-2.

65 |
66 |
67 |
68 |
69 |
70 | 71 |
72 |
73 |
74 |
75 |
76 |

Headings

77 |

All headings have a line-height property value of normal and a color property value of @outer-space.

78 |

h1, h2, and h3 nodes have a margin property value of 0 0 32px 0 and a font-weight property value of 300.

79 |

h1 nodes have a font-size property value of 48px and a line-height property value of 72px.

80 |

h2 nodes have a font-size property value of 40px and a line-height property value of 60px.

81 |

h3 nodes have a font-size property value of 24px and a line-height property value of 36px.

82 |

h4, h5, and h6 nodes have a margin property value of 0 0 16px 0, a font-size property value of @font-size, and a line-height property value of @line-height.

83 |
84 |
85 |
86 |
87 |
88 | 89 |
90 |
91 |
92 |
93 |
94 |

Links

95 |

All a nodes have a text-decoration property value of none and their :hover state has a text-decoration property value of underline.

96 |
97 |
98 |
99 |
100 |
101 | 102 |
103 |
104 |
105 |
106 |
107 |

Ordered & Unordered Lists

108 |

All ol and ul nodes have a margin property value of 2px 16px 32px 34px and their children li nodes have a margin-bottom property value of 8px.

109 |
110 |
111 |

Modifiers

112 |
113 |
114 |

List--style-none

115 |

Use this modifier to set an ordered or unordered lists list-style property value to none.

116 |
117 |
118 |

List--margin-bottom-0

119 |

Use this modifier to set an ordered or unordered lists margin-bottom property value to 0.

120 |
121 |
122 |
123 |
124 |
125 | 126 |
127 |
128 |
129 |
130 |
131 |

Paragraphs

132 |

All p nodes have a margin property value of 16px 0.

133 |
134 |
135 |

Modifiers

136 |
137 |
138 |

Paragraph--order-first

139 |

Use this modifier to set a paragraphs margin-top property value to 0.

140 |
141 |
142 |

Paragraph--order-last

143 |

Use this modifier to set a paragraphs margin-bottom property value to 0.

144 |
145 |
146 |
147 |
148 |
149 | 150 | 151 | 152 | 153 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 |
9 | {this.props.children} 10 |
11 | ) 12 | } 13 | } 14 | 15 | export default Card; 16 | -------------------------------------------------------------------------------- /src/js/guide.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Card from './components/Card.jsx'; 3 | 4 | React.render( 5 | ( 6 | 7 |

This is a card

8 | 9 | ), 10 | document.querySelector('#js-card') 11 | ); 12 | -------------------------------------------------------------------------------- /src/js/index.js: -------------------------------------------------------------------------------- 1 | import Card from './components/Card'; 2 | 3 | module.exports = { 4 | Card: Card 5 | }; 6 | -------------------------------------------------------------------------------- /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/base/layout.scss: -------------------------------------------------------------------------------- 1 | *, *:before, *:after { 2 | box-sizing: inherit; 3 | } -------------------------------------------------------------------------------- /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/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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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/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/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/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/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 | -------------------------------------------------------------------------------- /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/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 | -------------------------------------------------------------------------------- /src/scss/pages/cards.scss: -------------------------------------------------------------------------------- 1 | @import "base/variables"; 2 | 3 | // Card - Modifier 4 | .Card--no-padding { 5 | margin-bottom: 0; 6 | } -------------------------------------------------------------------------------- /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/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 | } -------------------------------------------------------------------------------- /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"; --------------------------------------------------------------------------------