Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Damn Good Pattern Libraries

5e7b5c8f18818bbead8a2093c5ca300d?s=47 Alex Lande
October 18, 2016

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.

5e7b5c8f18818bbead8a2093c5ca300d?s=128

Alex Lande

October 18, 2016
Tweet

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 “

  6. None
  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 },
  21. None
  22. ABOUT THOSE CODE SAMPLES

  23. COMPONENT PLAYGROUND HTTPS://GITHUB.COM/FORMIDABLELABS/ COMPONENT-PLAYGROUND

  24. None
  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

  28. None
  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

  39. None
  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 } }, {
  42. None
  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;

  47. None
  48. HTML { FILTER: BLUR(2PX) CONTRAST(0.5) BRIGHTNESS(1.3) }

  49. None
  50. None
  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