Damn Good Pattern Libraries

Pattern libraries are a great tool for building sustainable design systems on the web. At their most basic, they are catalogs of reusable components, but they can be so much more. Let's look at some ways to push pattern libraries to the next level, turning them into design tools, API documentation, prototyping interfaces, and beyond. We'll talk about why React is the perfect tool for pattern libraries and design systems, and look at some real world examples to see what's possible.

Transcript

1. DAMN GOOD PATTERN LIBRARIES
2. @ALEXLANDE ALEXLANDE.COM
3. WHAT ARE PATTERN LIBRARIES?
4. BOOTSTRAP?
5. TINY BOOTSTRAPS, FOR EVERY CLIENT - DAVE RUPERT “
7. I LOVE SYSTEMS AND DESPISE HAPPENSTANCE - MASSIMO VIGNELLI “
8. GITHUB
9. STARBUCKS
10. WHAT ARE THEY GOOD FOR?
11. CONSISTENT UX
12. CONSISTENT UX LESS IMPLEMENTATION
13. CONSISTENT UX LESS IMPLEMENTATION BETTER UI
14. GREAT BUT WE CAN DO MORE
15. LET’S TALK ABOUT COMPONENTS
16. HTML AS API HARD TO CHANGE IMPOSSIBLE TO VALIDATE <button type="button" class="btn btn-default btn-large" > <i class="icon icon-info" aria-hidden="true"> </i> Help </button>
17. ABSTRACTED API FLEXIBLE, FUTURE-PROOF CONTROLLED AND VALIDATED <Button size="large" icon="info"> Thanks </Button>
18. REACT-DOCGEN HTTPS://GITHUB.COM/REACTJS/REACT- DOCGEN
19. Card.propTypes = { /** * Alternative text */ imageAlt: PropTypes.string.isRequired, imageSize: PropTypes.oneOf([ "large", "small" ]).isRequired, imageUrl: PropTypes.string.isRequired }; Card.defaultProps = { imageSize: "large" };
20. { "displayName": "Card", "props": { "imageAlt": { "type": { "name": "string" }, "required": true, "description": "Alternative text" }, "imageSize": { "type": { "name": "enum", "value": [ { "value": "\"large\"", "computed": false },
22. ABOUT THOSE CODE SAMPLES
23. COMPONENT PLAYGROUND HTTPS://GITHUB.COM/FORMIDABLELABS/ COMPONENT-PLAYGROUND
25. CONTROL PANELS EXPLORE COMPONENT PROPS NO CODE REQUIRED
26. HTTPS://REBASS-BETA.NOW.SH/ COMPONENTS/BUTTON
27. SCRATCH PADS TURN CODE SAMPLES INTO PROTOTYPING ENVIRONMENTS
29. DEMONSTRATING RESPONSIVE DESIGN
30. WE HAVE OPTIONS
31. RESIZE YOUR BROWSER
32. RESIZE YOUR BROWSER USE AN IFRAME
33. HTTPS:// WWW.LIGHTNINGDESIGNSYSTEM.COM/ COMPONENTS/ACTIVITY-TIMELINE/
34. HTTPS:// WWW.LIGHTNINGDESIGNSYSTEM.COM/ COMPONENTS/ACTIVITY-TIMELINE/
35. HTTPS:// WWW.LIGHTNINGDESIGNSYSTEM.COM/ COMPONENTS/ACTIVITY-TIMELINE/
36. HTTPS://GITHUB.COM/IAMDUSTAN/ COMPONENT-PLAYGROUND-RESPONSIVE- IFRAME
37. IMPROVING COLOR PALETTES
38. COLORABLE HTTPS://GITHUB.COM/JXNBLK/COLORABLE
40. var colors = { red: '#FF0000', green: '#008000', blue: '#0000FF' } colorable(colors, { compact: true, threshold: 0 })
41. [ { "hex": "#FF0000", "name": "red", "combinations": [ { "hex": "#008000", "name": "green", "contrast": 1.28483997166146, "accessibility": { "aa": false, "aaLarge": false, "aaa": false, "aaaLarge": false } }, {
43. HTTP://JXNBLK.COM/WRITING/POSTS/ COLOR-PALETTE-DOCUMENTATION-FOR- LIVING-STYLE-GUIDES/
44. SIMULATING LOW VISION & COLOR BLINDNESS
45. HTTPS://GITHUB.COM/SKRATCHDOT/COLOR- BLIND colorBlind.protanopia("#00af66");
46. HTTPS://GITHUB.COM/BTHOLT/POSTCSS- COLORBLIND postcss() .use(colorblindPlugin({ method:'achromatopsia' })) .process(css) .css;
48. HTML { FILTER: BLUR(2PX) CONTRAST(0.5) BRIGHTNESS(1.3) }
51. BUT WAIT, THERE’S MORE
52. ICON VIEWERS
53. ICON VIEWERS ANIMATION DEMOS
54. ICON VIEWERS ANIMATION DEMOS MORE!
55. GOOD
56. GOOD DAMN
57. THANKS @ALEXLANDE ALEXLANDE.COM