Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

Taking Your Pattern Library to the Next Level

David Furnes
November 04, 2015

Taking Your Pattern Library to the Next Level

From Future of Web Design 2015, NYC.

In this session, David will explore ways to take your pattern library to the next level. He'll discuss how to use your style guide as an effective communications tool, manage complexity as your website and design grows more complex, and improve your website architecture with upcoming technologies like React and Web Components.

David Furnes

November 04, 2015
Tweet

More Decks by David Furnes

Other Decks in Programming

Transcript

  1. TAKING YOUR PATTERN LIBRARY TO THE NEXT LEVEL David Furnes

    @dfurnes TAKING YOUR PATTERN LIBRARY TO THE NEXT LEVEL Image Credit: NASA your pattern library
  2. It’s a _______________ __________: built using ___, distributed as an

    _________, documented using ___, and published on ___________.
  3. It’s a library of interface components: built using ___, distributed

    as an _________, documented using ___, and published on ___________.
  4. It’s a library of interface components: built using Sass, distributed

    as an _________, documented using ___, and published on ___________.
  5. It’s a library of interface components: built using Sass, distributed

    as an npm module, documented using ___, and published on ___________.
  6. It’s a library of interface components: built using Sass, distributed

    as an npm module, documented using KSS, and published on ___________.
  7. It’s a library of interface components: built using Sass, distributed

    as an npm module, documented using KSS, and published on GitHub Pages.
  8. YOUR OWN TOOLKIT SINGLE RESPONSIBILITY PRINCIPLE "The single responsibility principle

    states that every class should have a single responsibility, and that responsibility should be entirely encapsulated by the class.”
  9. YOUR OWN TOOLKIT <Revealer start=6> <Gallery columns=3> <Figure img=“gtfo.jpg”> <a

    href=“#”>GTFO</a> <p>Get the filter out! Clean up cigarette butt litter.</p> <Button>Prove It</Button> </Figure> <Figure img=“the-sexiest-words.jpg”> <a href=“#”>#TheSexiestWords</a> <p>Share the hottest ways to ask for consent without killing the mood.</p> <Button>Prove It</Button> </Figure> <!-- … --> </Gallery> </Revealer>
  10. YOUR OWN TOOLKIT <Revealer start=5> <Gallery mosaic=true columns=4 featured=true> <Tile

    title=“GTFO” description=“…” img=“gtfo.jpg” staffPick=true /> <Tile title=“…” description=“…” img=“elephants.jpg” /> <Tile title=“…” description=“…” img=“deer.jpg” /> <Tile title=“…” description=“…” img=“kitten.jpg” /> <Tile title=“…” description=“…” img=“turtle.jpg” /> </Gallery> </Revealer>
  11. THE FUTURE IS NOW "React is all about building reusable

    components. In fact, with React the only thing you do is build components. Since they're so encapsulated, components make code reuse, testing, and separation of concerns easy." – “Why React”, http://facebook.github.io/react/docs/why-react.html
  12. THE FUTURE IS NOW <article class=“figure —left”> <div class=“figure__media”> <img

    src=“img.png"/> </div> <div class=“figure__body”> Hello, Full-Stack Engineers! </div> </article> <Figure layout=‘left’ image=‘img.png’> Hello, Full-Stack Engineers! </Figure>
  13. THE FUTURE IS NOW <article class=“figure —left”> <div class=“figure__media”> <img

    src=“”/> </div> <div class=“figure__body”> Hello, Full-Stack Engineers! </div> </article> ⚠ Required ‘image’ was not supplied in Figure. <Figure layout=‘left’ image=‘ ’> Hello, Full-Stack Engineers! </Figure>
  14. THE FUTURE IS NOW <Button kind=“primary”> Example Button </Button> Button.propTypes

    = { kind: PropTypes.oneOf([‘base’, ‘primary’, ‘secondary’]) };
  15. THE FUTURE IS NOW <Button kind=“secondary”> Example Button </Button> Button.propTypes

    = { kind: PropTypes.oneOf([‘base’, ‘primary’, ‘secondary’]) };
  16. THE FUTURE IS NOW ⚠ Warning <Button kind=“big”> Example Button

    </Button> Button.propTypes = { kind: PropTypes.oneOf([‘base’, ‘primary’, ‘secondary’]) };
  17. THE FUTURE IS NOW <template id=“button-template”> <style> ds-button { border-radius:

    4px; padding: 12px; } .primary { background: #23b7fb; font-size: 24px; } .secondary { background: #444; font-size: 18px; } </style> <content></content> </template> <script> document.registerElement('ds-button', { prototype: Object.create(HTMLButtonElement.prototype), extends: ‘button’, createdCallback: { value: function() { var t = document.querySelector(‘#button-template’); var clone = document.importNode(t.content, true); this.createShadowRoot().appendChild(clone); } } }); </script>
  18. THE FUTURE IS NOW <button is=“ds-button” class=“primary”> Example Button </button>

    <button is=“ds-button” class=“secondary”> Example Button </button>