Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Pattern Libraries: DevelopMe Workshop
Search
Keir Moffatt
May 08, 2018
Technology
0
42
Pattern Libraries: DevelopMe Workshop
A follow-up Pattern Library workshop for DevelopMe_
https://developme.training/
Keir Moffatt
May 08, 2018
Tweet
Share
More Decks by Keir Moffatt
See All by Keir Moffatt
Pattern Libraries: How to make your backend love your frontend
iamkeir
1
120
'Responsivable' Web Development
iamkeir
1
950
The Wild Wild Web
iamkeir
2
310
Mystery Train Girl
iamkeir
0
160
The Real Fruits of Our Labour
iamkeir
0
100
Other Decks in Technology
See All in Technology
見てわかるテスト駆動開発
recruitengineers
PRO
6
1.8k
[CV勉強会@関東 CVPR2025 読み会] MegaSaM: Accurate, Fast, and Robust Structure and Motion from Casual Dynamic Videos (Li+, CVPR2025)
abemii
0
200
DuckDB-Wasmを使って ブラウザ上でRDBMSを動かす
hacusk
1
130
認知戦の理解と、市民としての対抗策
hogehuga
0
400
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
30k
microCMS 最新リリース情報(microCMS Meetup 2025)
microcms
0
230
進捗
ydah
1
170
AIドリブンのソフトウェア開発 - うまいやり方とまずいやり方
okdt
PRO
9
700
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
8.6k
Understanding Go GC #coefl_go_jp
bengo4com
0
1.1k
kintone開発チームの紹介
cybozuinsideout
PRO
0
73k
小さなチーム 大きな仕事 - 個人開発でAIをフル活用する
himaratsu
0
130
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
42
2.8k
The Pragmatic Product Professional
lauravandoore
36
6.8k
Facilitating Awesome Meetings
lara
55
6.5k
Statistics for Hackers
jakevdp
799
220k
Why Our Code Smells
bkeepers
PRO
338
57k
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.8k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Designing for humans not robots
tammielis
253
25k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Transcript
@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?
“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”
Pattern libraries Make your code loveable
“What is the most efficient way to build a 100-page
website?”
“What is the most efficient way to build a 100-page
website?” Find patterns, build once, reuse many.
WAT. https://boagworld.com/audio/pattern-library/ Logical, intuitive, consistent, reusable, flexible, extensible, sensible!
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
Pattern spotting https://alistapart.com/article/from-pages-to-patterns-an-exercise-for-everyone
Exercise: Pattern Spotting
None
None
Universal naming
None
BEM: Block__Element--Modifier
Exercise: Name a thing!
https://codepen.io/iamkeir/pen/ELbvOe?editors=1000
‘Methodology’ Naming, structure, organisation, approach.
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)
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)
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)
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
None
Bonus: Button Pattern https://codepen.io/iamkeir/pen/GdOEzw?editors=1100
Bonus: Separation of concerns https://codepen.io/iamkeir/pen/bMaYyZ https://jonbellah.com/articles/separation-of-concerns/
“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”
None