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
88
Leave me alone!, Barcamp Hasselt
stijnj
0
160
From Nerd to Runner, Barcamp Brussel
stijnj
0
72
Why each website should be accessible, Barcamp Genk
stijnj
0
58
Building and maintaining a website, MacBeurs Genk
stijnj
0
58
Other Decks in Technology
See All in Technology
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
11
77k
VCC 2025 Write-up
bata_24
0
150
AI時代だからこそ考える、僕らが本当につくりたいスクラムチーム / A Scrum Team we really want to create in this AI era
takaking22
6
2.8k
データエンジニアがこの先生きのこるには...?
10xinc
0
430
Pythonによる契約プログラミング入門 / PyCon JP 2025
7pairs
5
2.4k
From Prompt to Product @ How to Web 2025, Bucharest, Romania
janwerner
0
110
Trust as Infrastructure
bcantrill
0
290
BtoBプロダクト開発の深層
16bitidol
0
150
Pure Goで体験するWasmの未来
askua
1
170
PythonとLLMで挑む、 4コマ漫画の構造化データ化
esuji5
1
130
about #74462 go/token#FileSet
tomtwinkle
1
270
Geospatialの世界最前線を探る [2025年版]
dayjournal
3
470
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
48
51k
Done Done
chrislema
185
16k
Side Projects
sachag
455
43k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.2k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
BBQ
matthewcrist
89
9.8k
Bash Introduction
62gerente
615
210k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Faster Mobile Websites
deanohume
310
31k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
Rails Girls Zürich Keynote
gr2m
95
14k
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]