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
論文紹介:LLMDet (CVPR2025 Highlight)
tattaka
0
310
生成AI時代の開発組織・技術・プロセス 〜 ログラスの挑戦と考察 〜
itohiro73
1
430
ドメイン特化なCLIPモデルとデータセットの紹介
tattaka
2
580
タイミーのデータモデリング事例と今後のチャレンジ
ttccddtoki
6
2.3k
KiCadでPad on Viaの基板作ってみた
iotengineer22
0
290
生成AI時代 文字コードを学ぶ意義を見出せるか?
hrsued
1
810
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
27k
Oracle Database@Google Cloud:サービス概要のご紹介
oracle4engineer
PRO
0
100
赤煉瓦倉庫勉強会「Databricksを選んだ理由と、絶賛真っ只中のデータ基盤移行体験記」
ivry_presentationmaterials
2
330
LangSmith×Webhook連携で実現するプロンプトドリブンCI/CD
sergicalsix
1
210
SmartNewsにおける 1000+ノード規模 K8s基盤 でのコスト最適化 – Spot・Gravitonの大規模導入への挑戦
vsanna2
0
120
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
2
7.7k
Featured
See All Featured
It's Worth the Effort
3n
185
28k
Navigating Team Friction
lara
187
15k
Agile that works and the tools we love
rasmusluckow
329
21k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Optimizing for Happiness
mojombo
379
70k
Thoughts on Productivity
jonyablonski
69
4.7k
Stop Working from a Prison Cell
hatefulcrawdad
270
21k
Typedesign – Prime Four
hannesfritz
42
2.7k
The Language of Interfaces
destraynor
158
25k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Become a Pro
speakerdeck
PRO
28
5.4k
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