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
40
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
300
Mystery Train Girl
iamkeir
0
160
The Real Fruits of Our Labour
iamkeir
0
100
Other Decks in Technology
See All in Technology
Lufthansa ®️ USA Contact Numbers: Complete 2025 Support Guide
lufthanahelpsupport
0
220
AWS CDK 開発を成功に導くトラブルシューティングガイド
wandora58
3
130
cdk initで生成されるあのファイル達は何なのか/cdk-init-generated-files
tomoki10
0
110
SEQUENCE object comparison - db tech showcase 2025 LT2
nori_shinoda
0
190
Delta airlines Customer®️ USA Contact Numbers: Complete 2025 Support Guide
deltahelp
0
930
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
54
21k
20250707-AI活用の個人差を埋めるチームづくり
shnjtk
6
4k
サイバーエージェントグループのSRE10年の歩みとAI時代の生存戦略
shotatsuge
4
440
United Airlines Customer Service– Call 1-833-341-3142 Now!
airhelp
0
170
React開発にStorybookとCopilotを導入して、爆速でUIを編集・確認する方法
yu_kod
1
300
Coinbase™®️ USA Contact Numbers: Complete 2025 Support Guide
officialcoinbasehelpcenter
0
460
SRE不在の開発チームが障害対応と 向き合った100日間 / 100 days dealing with issues without SREs
shin1988
1
410
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
140
7k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Visualization
eitanlees
146
16k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
GitHub's CSS Performance
jonrohan
1031
460k
Embracing the Ebb and Flow
colly
86
4.7k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
The Invisible Side of Design
smashingmag
301
51k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Documentation Writing (for coders)
carmenintech
72
4.9k
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