Pattern Libraries: DevelopMe Workshop

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

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