Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
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
51
Other Decks in Technology
See All in Technology
ポストモーテムレビューをブレームレスに運営し有効な改善アクションを引き出すために必要だったこと / What is needed to operate postmortem blamelessly and elicit improvement actions
yamaguchitk333
0
160
pmconf2024_UPSIDER
upsider_tech
0
3.3k
AWS認定試験の長文問題を早く解くコツ
keke1234ke
0
150
GDGoC開発体験談 - Gemini生成AI活用ハッカソン / GASとFirebaseで挑むパン屋のフードロス解決 -
hotekagi
1
530
Entra ID の基礎(Japan Microsoft 365 コミュニティ カンファレンス 2024)
murachiakira
3
2.3k
AWS re:Invent 2024 予選落ちのBedrockアプデをまとめて解説!
minorun365
PRO
2
240
「今までで一番学びになった瞬間」発表 LT - Shinjuku.rb #96
kozy4324
0
120
乗っ取れKubernetes!!~リスクから学ぶKubernetesセキュリティの考え方~/k8s-risk-and-security
mochizuki875
3
450
突き破って学ぶコンテナセキュリティ/container-breakout-cncj-lt
mochizuki875
6
940
開発者向けツールを魔改造してセキュリティ診断ツールを作っている話 - 第1回 セキュリティ若手の会 LT
pizzacat83
0
260
TimeTreeが経た3つの転換点 ー プロダクト成長過程でその時、その瞬間、何を考えてたか
ysmtysts
1
1.5k
深層学習のリペア技術の最新動向と実際 / DNN Repair Techniques for AI Performance Alignment for Safety Requirements
ishikawafyu
0
220
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
51
7.2k
Fashionably flexible responsive web design (full day workshop)
malarkey
405
65k
Gamification - CAS2011
davidbonilla
80
5k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
0
69
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.3k
Rails Girls Zürich Keynote
gr2m
94
13k
Imperfection Machines: The Place of Print at Facebook
scottboms
266
13k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
16
2.2k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.2k
Optimizing for Happiness
mojombo
376
70k
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]