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

Damn Good Pattern Libraries

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.

Alex Lande

October 18, 2016
Tweet

More Decks by Alex Lande

Other Decks in Programming

Transcript

  1. 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>
  2. Card.propTypes = { /** * Alternative text */ imageAlt: PropTypes.string.isRequired,

    imageSize: PropTypes.oneOf([ "large", "small" ]).isRequired, imageUrl: PropTypes.string.isRequired }; Card.defaultProps = { imageSize: "large" };
  3. { "displayName": "Card", "props": { "imageAlt": { "type": { "name":

    "string" }, "required": true, "description": "Alternative text" }, "imageSize": { "type": { "name": "enum", "value": [ { "value": "\"large\"", "computed": false },
  4. var colors = { red: '#FF0000', green: '#008000', blue: '#0000FF'

    } colorable(colors, { compact: true, threshold: 0 })
  5. [ { "hex": "#FF0000", "name": "red", "combinations": [ { "hex":

    "#008000", "name": "green", "contrast": 1.28483997166146, "accessibility": { "aa": false, "aaLarge": false, "aaa": false, "aaaLarge": false } }, {