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?
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”
3. Pattern libraries Make your code loveable
4. “What is the most efficient way to build a 100-page website?”
5. “What is the most efficient way to build a 100-page website?” Find patterns, build once, reuse many.
6. WAT. https://boagworld.com/audio/pattern-library/ Logical, intuitive, consistent, reusable, flexible, extensible, sensible!
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
8. Pattern spotting https://alistapart.com/article/from-pages-to-patterns-an-exercise-for-everyone
9. Exercise: Pattern Spotting
12. Universal naming
14. BEM: Block__Element--Modifier
15. Exercise: Name a thing!
16. https://codepen.io/iamkeir/pen/ELbvOe?editors=1000
17. ‘Methodology’ Naming, structure, organisation, approach.
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)
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)
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)
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
23. Bonus: Button Pattern https://codepen.io/iamkeir/pen/GdOEzw?editors=1100
24. Bonus: Separation of concerns https://codepen.io/iamkeir/pen/bMaYyZ https://jonbellah.com/articles/separation-of-concerns/
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”