├── .gitignore ├── QuoteLayout.js ├── README.md ├── deck.mdx ├── dist ├── images │ ├── apropcalypse.png │ ├── brand-scale.png │ ├── css-leak.png │ ├── design-flow.png │ ├── discussion-timeline-connectors.png │ ├── discussion-timeline.png │ ├── discussion-timeline2.png │ ├── distribute1.png │ ├── distribute2.png │ ├── docs.png │ ├── encapsulation.png │ ├── expectations.png │ ├── flash-error.png │ ├── graphql.png │ ├── sprinkle.png │ └── typography.png ├── index.html └── main.js ├── images ├── .DS_Store ├── apropcalypse.png ├── brand-scale.png ├── css-leak.png ├── design-flow.png ├── discussion-timeline-connectors.png ├── discussion-timeline.png ├── discussion-timeline2.png ├── distribute1.png ├── distribute2.png ├── docs.png ├── encapsulation.png ├── expectations.png ├── flash-error.png ├── graphql.png ├── sprinkle.png └── typography.png ├── package-lock.json ├── package.json └── theme.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /QuoteLayout.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Box from 'superbox' 3 | 4 | export default ({ children }) => 5 | 26 | {children} 27 | 28 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Design Systems and React 2 | 3 | Slide deck for my talk at [Zeit React meetup](https://zeit.co/react-meetup) - Friday, August 10th, 2018. 4 | 5 | 🎥 [View rendered slides](https://github-ds.now.sh/), or [watch on YouTube](https://youtu.be/N-5TNKJ7eB0?t=15m25s) 6 | 7 | Built with [mdx-deck](https://github.com/jxnblk/mdx-deck). 8 | -------------------------------------------------------------------------------- /deck.mdx: -------------------------------------------------------------------------------- 1 | import { Image } from 'mdx-deck' 2 | import { FullScreenCode } from 'mdx-deck/layouts' 3 | import QuoteLayout from './QuoteLayout' 4 | export { default as theme } from './theme' 5 | 6 | # Design Systems & React 7 | 8 | --- 9 | 10 | # Diana Mounter 11 | 12 | Design Operations Manager at GitHub 13 | 14 | @broccolini 15 | 16 | --- 17 | # Design Systems at GitHub 18 | 19 | --- 20 | 21 | Design systems are.. 22 | 23 | # Rules, Principles, & Constraints 24 | 25 | --- 26 | 27 | # implemented in design & code 28 | 29 | --- 30 | 31 | **Rule:** minimum color contrast ratio of 4:5:1 32 | 33 | **Constraint:** number of colors in the palette 34 | 35 | **Principle:** use color in a meaningful way 36 | 37 | --- 38 | 39 | ![](/images/flash-error.png) 40 | 41 | ```notes 42 | An implementation example is the design and code for this flash message 43 | ``` 44 | 45 | --- 46 | 47 | # GitHub is 10 years old 🎂 48 | 49 | ```notes 50 | Some context. 51 | ``` 52 | 53 | --- 54 | 55 | # 10 years 56 | 57 | of people contributing design and code (debt) 😅 58 | 59 | --- 60 | 61 | # Ruby on Rails 62 | 63 | ```notes 64 | and it's a monolith 65 | ``` 66 | 67 | --- 68 | 69 | # 🚂 we can't stop the train 70 | 71 | ```notes 72 | When we formed the design systems team, we couldn't stop everything to build the perfect system. 73 | ``` 74 | 75 | --- 76 | 77 | # Primer CSS 78 | 79 | GitHub's design system 80 | 81 | --- 82 | 83 | Object Oriented CSS (OOCSS) 84 | 85 | Block Element Modifier (BEM) 86 | 87 | Functional CSS (Utilities) 88 | 89 | --- 90 | 91 | People no longer had to write much CSS 92 | 93 | --- 94 | 95 | Easier to design in the browser 96 | 97 | --- 98 | 99 | ![](/images/typography.png) 100 | 101 | Styles based on systems worked more harmoniously 102 | 103 | --- 104 | 105 | # Problems 106 | 107 | --- 108 | 109 | export default QuoteLayout 110 | 111 | ```html 112 |
114 | ``` 115 | 116 | ```notes 117 | Lots of classes in the markup. 118 | ``` 119 | 120 | --- 121 | 122 | export default QuoteLayout 123 | 124 | ```html 125 |
126 | 127 | 128 | 131 |
132 | ``` 133 | 134 | ```notes 135 | Lots of repeated markup 136 | ``` 137 | --- 138 | 139 | export default QuoteLayout 140 | 141 | ```css 142 | .wiki-list { 143 | 144 | em { 145 | padding: 3px; 146 | font-style: normal; 147 | font-weight: $font-weight-bold; 148 | background-color: rgba(255, 255, 140, 0.5); 149 | border-radius: 3px; 150 | } 151 | 152 | .description { 153 | margin: 0 0 10px; 154 | overflow: hidden; 155 | line-height: 20px; 156 | } 157 | 158 | .wiki-list-item + .wiki-list-item { 159 | border-top: $border; 160 | } 161 | } 162 | ``` 163 | 164 | --- 165 | 166 | export default QuoteLayout 167 | 168 | ```css 169 | .issue-list { 170 | 171 | em { 172 | padding: 3px; 173 | font-style: normal; 174 | font-weight: $font-weight-bold; 175 | background-color: rgba(255, 255, 140, 0.5); 176 | border-radius: 3px; 177 | } 178 | 179 | .description { 180 | margin: 0 0 10px; 181 | overflow: hidden; 182 | line-height: 20px; 183 | } 184 | 185 | .issue-list-item + .issue-list-item { 186 | border-top: $border; 187 | } 188 | } 189 | ``` 190 | 191 | ```notes 192 | The only thing that's different is the name of the class selector. 193 | ``` 194 | 195 | --- 196 | 197 | ![](/images/css-leak.png) 198 | 199 | --- 200 | 201 | ![](/images/discussion-timeline.png) 202 | 203 | ```notes 204 | There are parts of our code-base we're afraid to touch. One of them is a scss partial named the discussion timeline. It's the source of a huge amount of CSS bugs. 205 | ``` 206 | 207 | --- 208 | 209 | ![](/images/expectations.png) 210 | 211 | ```notes 212 | Parts of GitHub don't respond the way people expect. 213 | ``` 214 | 215 | --- 216 | 217 | # Primer React 218 | 219 | [primer.github.io/primer-react](https://primer.github.io/primer-react/components/) 220 | 221 | --- 222 | 223 | 📍 start here 224 | 225 | ```notes 226 | So where did we start. 227 | ``` 228 | 229 | --- 230 | 231 | export default QuoteLayout 232 | 233 | ```jsx 234 | import classnames from 'classnames' 235 | 236 | const classes = classnames( 237 | className, 238 | 'State', 239 | { 240 | 'State--small': small 241 | } 242 | ) 243 | ``` 244 | 245 | ```notes 246 | using primer css 247 | ``` 248 | 249 | --- 250 | 251 | # Progress is better than correctness 252 | 253 | ```notes 254 | Starting with practical, small steps, that help you begin making progress is better than doing what you imagine the perfect solution to be. 255 | ``` 256 | 257 | --- 258 | export default QuoteLayout 259 | 260 | # Presentational components 261 | 262 | — Dan Abramov 263 | 264 | [Presentational & container components](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0) 265 | 266 | --- 267 | 268 | Presentational components are concerned with _how things look_ 269 | 270 | ```notes 271 | We are focussing on presentational components, because that's more important for our design system, we will probably add some container components for things like forms over time. 272 | ``` 273 | 274 | --- 275 | 276 | ![](/images/distribute1.png) 277 | 278 | ```notes 279 | GitHub.com is not the only application or website we maintain. 280 | ``` 281 | 282 | --- 283 | 284 | ![](/images/distribute2.png) 285 | 286 | ```notes 287 | We want systems to build many websites, that might not always be themed the same, or need the same components. 288 | ``` 289 | 290 | --- 291 | export default QuoteLayout 292 | 293 | # Brand on a spectrum 294 | 295 | — [Sophie Shepherd](https://speakerdeck.com/sophshep/wrangling-githubs-brand) 296 | 297 | ```notes 298 | Not all those sites look exactly like GitHub 299 | ``` 300 | 301 | --- 302 | 303 | ![](/images/brand-scale.png) 304 | 305 | --- 306 | 307 | # Flexibility vs consistency 308 | 309 | ```notes 310 | How do we share styles that let you be consistent with brand and flexible when you need to be? 311 | ``` 312 | 313 | --- 314 | export default QuoteLayout 315 | 316 | # Separate structure and skin 317 | 318 | — [Nicole Sullivan](https://github.com/stubbornella/oocss/wiki#separate-structure-and-skin) 319 | 320 | ```notes 321 | Approaches we took with CSS are still relevant to how we approach design systems with React. Same intent, different implementation. 322 | ``` 323 | 324 | --- 325 | 326 | **Layout:** display, position, padding, margin... 327 | 328 | ```notes 329 | Layout styles are what controls the structure. These are useful for pretty much every website or application you build. They have no theming or "skin". 330 | ``` 331 | 332 | --- 333 | 334 | **Common components:** Alert, Button, Label... 335 | 336 | ```notes 337 | Most web applications need things like Alerts, Buttons, Labels, etc. But marketing websites might not need a lot of these components. 338 | ``` 339 | 340 | --- 341 | 342 | **Theme:** typography scale, spacing scale, color... 343 | 344 | ```notes 345 | The theme values are used in both layout and common components. For example you might have a spacing scale for padding and margin. Sometimes sites need to stick closely to the theme, sometimes they won't. Ideally you should be able to swap out the theme and use the same component markup. 346 | ``` 347 | 348 | --- 349 | 350 | # Sharing system props 351 | 352 | with [styled-system](https://github.com/jxnblk/styled-system) & [emotion.js](https://github.com/emotion-js/emotion) 353 | 354 | ```notes 355 | We started to struggle to make primer-react as flexible as we needed it to be. Alongside CSS from Primer, we started using emotion and styled system to share common system props, like color, spacing, and typography. 356 | ``` 357 | 358 | --- 359 | 360 | export default QuoteLayout 361 | 362 | ```jsx 363 | // theme.js 364 | { 365 | "fontSizes": [ 366 | 12, 367 | 14, 368 | 16, 369 | 20, 370 | 24, 371 | 32, 372 | 40, 373 | 48 374 | ] 375 | } 376 | ``` 377 | 378 | ```notes 379 | Theme values like typography, spacing, and color are stored in a theme.js file. 380 | ``` 381 | --- 382 | 383 | export default QuoteLayout 384 | 385 | ```jsx 386 | // All components 387 | const Base = system('color', 'space') 388 | ``` 389 | 390 | ```jsx 391 | // Typography components 392 | const Text = system('fontSize', 'fontWeight', 393 | 'lineHeight') 394 | ``` 395 | 396 | ```jsx 397 | // Layout components 398 | const Box = system('display', 'width') 399 | ``` 400 | 401 | ```notes 402 | We started off too restrictive with how we shared our system props. Now we've started to create categories of components and they get a common set of props. 403 | ``` 404 | 405 | --- 406 | 407 | export default QuoteLayout 408 | 409 | ```jsx 410 | import {Box, Text, Heading} from 'primer-react' 411 | 412 | const SiteHero = props => ( 413 | 414 | {props.title} 415 | {props.description} 416 | 417 | ) 418 | ``` 419 | 420 | ```notes 421 | This offers a lot of flexibility and makes it easy for applications consuming Primer-react to create new components with primer components and system props. 422 | ``` 423 | 424 | --- 425 | export default QuoteLayout 426 | 427 | # Everything is a component 428 | 429 | [Thinking in React](https://reactjs.org/docs/thinking-in-react.html) 430 | 431 | ```notes 432 | We started to develop some principles, drawing inspiration from things like the Thinking in React documentation 433 | ``` 434 | 435 | --- 436 | 437 | export default QuoteLayout 438 | 439 | ```jsx 440 | // this 441 | 442 | Hello world 443 | 444 | ``` 445 | 446 | ```jsx 447 | // not this 448 |
449 |

Hello world

450 |
451 | ``` 452 | 453 | ```notes 454 | Some developers have asked us why not just use heading tags, why use a component? 455 | ``` 456 | 457 | --- 458 | 459 | ![](/images/css-leak.png) 460 | 461 | ```notes 462 | we don't want to rely on CSS inheritance 463 | ``` 464 | 465 | --- 466 | 467 | ![](/images/encapsulation.png) 468 | 469 | ```notes 470 | because we want to keep styles encapsulated and reduce the damage one component can do, we want to keep the mess contained 471 | ``` 472 | 473 | --- 474 | export default QuoteLayout 475 | 476 | # Minimal API surface area 477 | 478 | — [Sebastián Markbage](https://youtu.be/4anAwXYqLG8) 479 | 480 | ```notes 481 | many folks won't read the documentation, we want developers to be able to quickly learn how to use the design system 482 | ``` 483 | 484 | --- 485 | 486 | # Re-use patterns 487 | 488 | --- 489 | 490 | export default QuoteLayout 491 | 492 | ```jsx 493 | // System props 494 | 495 | 496 | ``` 497 | 498 | ```jsx 499 | 500 | // Scheme props 501 |