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
Front-end style guides, Fronteers @ WHITE
Search
Stijn Janssen
August 30, 2012
Technology
6
300
Front-end style guides, Fronteers @ WHITE
Stijn Janssen
August 30, 2012
Tweet
Share
More Decks by Stijn Janssen
See All by Stijn Janssen
Front-end style guides, Fronteers @ Microsoft Belgium
stijnj
0
85
Leave me alone!, Barcamp Hasselt
stijnj
0
160
From Nerd to Runner, Barcamp Brussel
stijnj
0
69
Why each website should be accessible, Barcamp Genk
stijnj
0
54
Building and maintaining a website, MacBeurs Genk
stijnj
0
52
Other Decks in Technology
See All in Technology
サイバー攻撃を想定したセキュリティガイドライン 策定とASM及びCNAPPの活用方法
syoshie
3
1.4k
小学3年生夏休みの自由研究「夏休みに Copilot で遊んでみた」
taichinakamura
0
180
組み込みアプリパフォーマンス格闘記 検索画面編
wataruhigasi
1
140
KnowledgeBaseDocuments APIでベクトルインデックス管理を自動化する
iidaxs
1
280
ハイテク休憩
sat
PRO
2
180
能動的ドメイン名ライフサイクル管理のすゝめ / Practice on Active Domain Name Lifecycle Management
nttcom
0
250
日本版とグローバル版のモバイルアプリ統合の開発の裏側と今後の展望
miichan
1
140
生成AIのガバナンスの全体像と現実解
fnifni
1
210
[Ruby] Develop a Morse Code Learning Gem & Beep from Strings
oguressive
1
190
[JAWS-UG新潟#20] re:Invent2024 -CloudOperationsアップデートについて-
shintaro_fukatsu
0
120
.NET 9 のパフォーマンス改善
nenonaninu
0
1.3k
5分でわかるDuckDB
chanyou0311
10
3.3k
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
810
Testing 201, or: Great Expectations
jmmastey
41
7.1k
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
Thoughts on Productivity
jonyablonski
68
4.4k
RailsConf 2023
tenderlove
29
940
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
127
18k
Speed Design
sergeychernyshev
25
680
Agile that works and the tools we love
rasmusluckow
328
21k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
48
2.2k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
530
We Have a Design System, Now What?
morganepeng
51
7.3k
Transcript
FRONT-END STYLE GUIDES
STIJN JANSSEN
Front-end developer @ Inventis
Front-end developer @ Inventis
Front-end developer @ Inventis
None
None
None
None
A good developer should be lazy (and dumb). http://blogoscoped.com/archive/2005-08-24-n14.html http://www.codinghorror.com/blog/2005/08/how-to-be-lazy-dumb-and-successful.html
http://programmer.97things.oreilly.com/wiki/index.php/Be_Stupid_and_Lazy
DRY http://en.wikipedia.org/wiki/Don%27t_repeat_yourself
http://www.flickr.com/photos/klmircea/3210506796/
None
LISTS • Tutorials • Code snippets • Best practices •
Tips from experts • Browserbugs
None
FRONT-END STYLE GUIDE
FRONT-END STYLE GUIDE
A GUIDE • Contains useful information • Recurring tasks •
Manual, encyclopedia, price guide, ...
FRONT-END STYLE GUIDE
To provide uniformity in style and formatting of a document
website http://en.wikipedia.org/wiki/Style_guide
A STYLE GUIDE • Defines how a guide should look
• Takes decisions for you • ISO, branding, ...
FRONT-END STYLE GUIDE
Developer A Developer B Project X Project Y
Developer A Developer B Project X Project Y
None
A FRONT-END STYLE GUIDE aims to improve team collaboration
THE BENEFITS • Sharing knowledge • Ideal starting point for
new co-workers • Great reference for interns
THE TEAM VERSION
None
DECISIONS • Folder structure, naming conventions, ... • Spaces or
tabs? • LESS or SASS • BEM, SMACSS or OOCSS? • Should we pass JSLint? • H5BP or Bootstrap?
http://na.isobar.com/standards/
THE PROJECT VERSION
DESIGN • Fonts • Colors • Headings (h1-6) • Content
(p, ol, ul, ...) • Buttons • Form elements
http://www.pukkelpop.be/nl/styleguide/subpage
DECISIONS • Which font should we use for headings? •
Vertical rhythm of 6px • Images must have 12px margin around text • Should we use formal or informal language in content?
http://www.starbucks.com/static/reference/styleguide/
MORE BENEFITS • Happy designers (consistency) • Easy to optimize
elements • Perfect starting point for a redesign on bigger projects • Testable!
TIPS & RESOURCES
TIPS • Don’t reinvent the wheel (link to existing resources)
• Start early in the project • Everybody should be involved (client, desinger, ...) • Extend, never replace • Think abstract
RESOURCES • http://pea.rs/ • http://www.alistapart.com/articles/building-twitter-bootstrap/ • http://smacss.com/book/ • http://24ways.org/2011/front-end-style-guides •
https://gimmebar.com/loves/maban/collection/front-end- styleguides
EXAMPLES • Technisch • Isobar (http://na.isobar.com/standards/) • Grafisch • Ubuntu
(http://design.ubuntu.com/web) • BBC (http://www.bbc.co.uk/gel) • Tekstueel • Wikipedia (http://en.wikipedia.org/wiki/Wikipedia:Manual_of_Style)
THANKS!
QUESTIONS?
STIJN JANSSEN • @stijnj •
[email protected]