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
36
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
930
The Wild Wild Web
iamkeir
2
260
Mystery Train Girl
iamkeir
0
140
The Real Fruits of Our Labour
iamkeir
0
81
Other Decks in Technology
See All in Technology
サービス開発におけるVue3とTypeScriptの親和性について
tsukuha
0
120
【基本】データベース設計
oracle4engineer
PRO
2
280
Gitlab本から学んだこと - そーだいなるプレイバック / gitlab-book
soudai
7
1.4k
AWSに詳しくない人でも始められるコスト最適化ガイド
yuhta28
2
420
Building a RAG-poweredAI chat appwith Python and VS Code
pamelafox
0
180
Azureの基本的な権限管理の勉強会
yhana
1
2.2k
DevRelによる信頼構築とデータ駆動で変わるエンジニア採用 / DevRel Trust Building to Data Driven Engineering Hiring
bobtani
1
100
コードや知識を組み込む / Incorporate Code and knowledge
ks91
PRO
0
160
中年男性がメインフレームから クラウドへキャリアシフトしてみた
uechishingo
1
430
Babylon.js JAPAN活動紹介 (2024/4)
limes2018
1
130
2024春 注目のWeb系 OSS & SaaS 3選
makies
0
210
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Musicを例に~
otanet
0
320
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
398
65k
For a Future-Friendly Web
brad_frost
172
9k
How to Ace a Technical Interview
jacobian
273
22k
The Pragmatic Product Professional
lauravandoore
26
5.8k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
221
21k
Agile that works and the tools we love
rasmusluckow
325
20k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
15
1.6k
Web Components: a chance to create the future
zenorocha
306
41k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
323
20k
Build your cross-platform service in a week with App Engine
jlugia
226
17k
jQuery: Nuts, Bolts and Bling
dougneiner
60
7.2k
Visualization
eitanlees
137
14k
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