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
56
Other Decks in Technology
See All in Technology
〜『世界中の家族のこころのインフラ』を目指して”次の10年”へ〜 SREが導いたグローバルサービスの信頼性向上戦略とその舞台裏 / Towards the Next Decade: Enhancing Global Service Reliability
kohbis
2
310
ネットワーク保護はどう変わるのか?re:Inforce 2025最新アップデート解説
tokushun
0
210
クラウド開発の舞台裏とSRE文化の醸成 / SRE NEXT 2025 Lunch Session
kazeburo
1
240
開発生産性を組織全体の「生産性」へ! 部門間連携の壁を越える実践的ステップ
sudo5in5k
3
7.4k
United™️ Airlines®️ Customer®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedguide
0
240
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
10
130k
ビギナーであり続ける/beginning
ikuodanaka
3
780
Delta airlines®️ USA Contact Numbers: Complete 2025 Support Guide
airtravelguide
0
340
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
960
AWS CDK 開発を成功に導くトラブルシューティングガイド
wandora58
2
110
LangChain Interrupt & LangChain Ambassadors meetingレポート
os1ma
2
320
PO初心者が考えた ”POらしさ”
nb_rady
0
220
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Faster Mobile Websites
deanohume
307
31k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Speed Design
sergeychernyshev
32
1k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Building Adaptive Systems
keathley
43
2.7k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
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]