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

Pattern Libraries: DevelopMe Workshop

Pattern Libraries: DevelopMe Workshop

A follow-up Pattern Library workshop for DevelopMe_
https://developme.training/

Keir Moffatt

May 08, 2018
Tweet

More Decks by Keir Moffatt

Other Decks in Technology

Transcript

  1. @iamkeir
    • 18+ years freelance web developer in Bristol
    • Wonderful people, agencies & brands
    • Front-end, specialising in pattern libraries for scale
    • Shopify, Perch, APIs…
    • Snowboard instructor, breakdancer… lemur ranger?

    View Slide

  2. “Simple rarely breaks -
    but if it does,
    simple is easy to fix”
    “Code obvious,
    not clever”
    “Code like the next developer
    is an axe murderer and
    knows where you live”
    “Cheese is
    pleasant”

    View Slide

  3. Pattern libraries
    Make your code loveable

    View Slide

  4. “What is the most efficient way
    to build a 100-page website?”

    View Slide

  5. “What is the most efficient way
    to build a 100-page website?”
    Find patterns, build once, reuse many.

    View Slide

  6. WAT.
    https://boagworld.com/audio/pattern-library/
    Logical, intuitive, consistent, reusable, flexible, extensible, sensible!

    View Slide

  7. In the wild…
    ux.mailchimp.com
    rizzo.lonelyplanet.com
    codepen.io/guide
    bbc.co.uk/gel
    style.bristol.gov.uk
    gov.uk/service-manual
    lightningdesignsystem.com
    styleguides.io

    View Slide

  8. Pattern spotting
    https://alistapart.com/article/from-pages-to-patterns-an-exercise-for-everyone

    View Slide

  9. Exercise: Pattern Spotting

    View Slide

  10. View Slide

  11. View Slide

  12. Universal naming

    View Slide

  13. View Slide

  14. BEM: Block__Element--Modifier

    View Slide

  15. Exercise: Name a thing!

    View Slide

  16. https://codepen.io/iamkeir/pen/ELbvOe?editors=1000

    View Slide

  17. ‘Methodology’
    Naming, structure, organisation, approach.

    View Slide

  18. SMACSS
    Scalable and modular architecture for CSS
    https://smacss.com/
    • Base (e.g. body, anchor)
    • Layout (e.g. header, main)
    • Modules (e.g. carousel, hero)
    • State (e.g. is-collapsed, is-visible)
    • Theme (e.g. color, style)

    View Slide

  19. Atomic Design
    Chemistry, yo!
    http://bradfrost.com/blog/post/atomic-web-design/
    • Atoms (e.g. input, p, button, etc…)
    • Molecules (e.g. search form)
    • Organisms (e.g. site header)
    • Templates (e.g. collection template)
    • Pages (e.g. final site page)

    View Slide

  20. OOCSS
    Object-orientated CSS
    http://oocss.org/
    • Structure vs Skin (e.g. float, margin vs color, background)
    • Container vs Content (reusable content not tied to container/location)

    View Slide

  21. KE-SS*
    Keir’s CSS
    • Core (e.g. typography, media, forms, grid, layout…)
    • Modules (EVERYTHING)
    • Templates (a module party)
    *this isn’t really a thing

    View Slide

  22. View Slide

  23. Bonus: Button Pattern
    https://codepen.io/iamkeir/pen/GdOEzw?editors=1100

    View Slide

  24. Bonus: Separation of concerns
    https://codepen.io/iamkeir/pen/bMaYyZ
    https://jonbellah.com/articles/separation-of-concerns/

    View Slide

  25. “Simple rarely breaks -
    but if it does,
    simple is easy to fix”
    “Code obvious,
    not clever”
    “Code like the next developer
    is an axe murderer and
    knows where you live”
    “Cheese is
    pleasant”

    View Slide

  26. View Slide