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
87
Leave me alone!, Barcamp Hasselt
stijnj
0
160
From Nerd to Runner, Barcamp Brussel
stijnj
0
71
Why each website should be accessible, Barcamp Genk
stijnj
0
56
Building and maintaining a website, MacBeurs Genk
stijnj
0
55
Other Decks in Technology
See All in Technology
生成AIをテストプロセスに活用し"よう"としている話 #jasstnano
makky_tyuyan
0
210
Agentic DevOps時代の生存戦略
kkamegawa
0
510
In Praise of "Normal" Engineers (LDX3)
charity
2
1.1k
Perk アプリの技術選定とリリースから1年弱経ってのふりかえり
stomk
0
110
Create a Rails8 responsive app with Gemini and RubyLLM
palladius
0
120
Snowflake Intelligenceで実現できるノーコードAI活用
takumimukaiyama
1
260
CIでのgolangci-lintの実行を約90%削減した話
kazukihayase
0
310
AWS全冠したので振りかえってみる
tajimon
0
150
「規約、知識、オペレーション」から考える中規模以上の開発組織のCursorルールの 考え方・育て方 / Cursor Rules for Coding Styles, Domain Knowledges and Operations
yuitosato
6
1.9k
CSS、JSをHTMLテンプレートにまとめるフロントエンド戦略
d120145
0
110
TODAY 看世界(?) 是我們在看扣啦!
line_developers_tw
PRO
0
260
CI/CDとタスク共有で加速するVibe Coding
tnbe21
0
210
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
46
14k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
660
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
780
Building an army of robots
kneath
306
45k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Git: the NoSQL Database
bkeepers
PRO
430
65k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
123
52k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Documentation Writing (for coders)
carmenintech
71
4.9k
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
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]