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
39
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
150
The Real Fruits of Our Labour
iamkeir
0
91
Other Decks in Technology
See All in Technology
コンテナ・K8s研修 - 後半 Kubernetes 基礎&ハンズオン【MIXI 24新卒技術研修】
mixi_engineers
PRO
1
120
Classmethod流のPlatform Engineering / classmethod-platform-engineering-devio2024
tomoki10
0
470
テスト・設計研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
170
OSSコミットしてZennの課題を解決した話
dyoshikawa1993
0
150
データ分析を支える技術 生成AI再入門
ishikawa_satoru
0
380
Git 研修 Advanced【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
200
フルリモートワークはエンジニアの夢を叶えたか? #cm_odyssey
mamohacy
2
600
Git 研修 Basic【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
310
【基調講演】変える、今ここから ― IoTとAIで紡ぐ未来
soracom
PRO
0
320
AWSでRAGを作る法方
sonoda_mj
1
140
初中級者用如何使用backlog -VALE TUDOEDITION-
in0u
0
140
Classmethod Odyssey 登壇資料
yamahiro
0
390
Featured
See All Featured
Side Projects
sachag
451
42k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
353
29k
Code Reviewing Like a Champion
maltzj
517
39k
GitHub's CSS Performance
jonrohan
1026
450k
Building Your Own Lightsaber
phodgson
101
5.9k
Scaling GitHub
holman
458
140k
Principles of Awesome APIs and How to Build Them.
keavy
124
16k
The Invisible Side of Design
smashingmag
294
50k
A Tale of Four Properties
chriscoyier
155
22k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
Facilitating Awesome Meetings
lara
46
5.8k
Rebuilding a faster, lazier Slack
samanthasiow
78
8.5k
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