Help!
My Stylesheets are a Mess!
http://www.flickr.com/photos/29541077@N00/4711956912/
Wednesday, May 16, 12
Slide 2
Slide 2 text
Chris
Eppstein
Architect: Caring.com
Creator: Compass Stylesheet
Authoring Framework
Core Developer: Sass Stylesheet
Language
@chriseppstein
Wednesday, May 16, 12
Slide 3
Slide 3 text
#cleanstyles
Wednesday, May 16, 12
If you tweet about this talk, please use the hashtag
Slide 4
Slide 4 text
Assumptions
‣Good at CSS
‣Basic knowledge of Sass
‣Large Website/Application
‣Team-based Development
Wednesday, May 16, 12
Slide 5
Slide 5 text
Do your
stylesheets
feel like this?
Incomprehensible
wall of
tangled styles
is
incomprehensible
http://wikibon.org/blog/wp-content/uploads/2011/10/5.„eg
Wednesday, May 16, 12
Slide 6
Slide 6 text
Caring.com
A case study
Wednesday, May 16, 12
Slide 7
Slide 7 text
Caring.com
Four Designs in Four Years.
Wednesday, May 16, 12
each with their own evolution
Slide 8
Slide 8 text
Caring.com
Four Designers in Four Years.
Wednesday, May 16, 12
Like most startups we were moving fast. We knew we hadn’t found the right tone, design,
resonance with our user base.
Slide 9
Slide 9 text
Sass:
A double edged sword
3.5 MB of CSS across 100+ files
Wednesday, May 16, 12
This would be insanity if it was hand authored CSS, but sass let us keep it manageable while
we were learning, evolving, looking for product/market fit.
Slide 10
Slide 10 text
Enough was Enough
Hired Director of UX
@shodoshan
Wednesday, May 16, 12
Slide 11
Slide 11 text
Enough was Enough
Visual Design Firm
@tractorstudios
Wednesday, May 16, 12
Slide 12
Slide 12 text
Enough was Enough
New Product
Wednesday, May 16, 12
Slide 13
Slide 13 text
We found it!
Our users loved the new design.
http://newplateaus.areavoices.com/2012/05/01/are-older-people-happier/
Wednesday, May 16, 12
Finally we’re getting thank you letters and people get upset if our site goes down.
Slide 14
Slide 14 text
New Approach
‣Consistency over Flexibility
‣Optimize Development
‣Grow the Team
Wednesday, May 16, 12
.foundational { ...}
Wednesday, May 16, 12
We built a living styleguide. In this talk, I’m going to explain the process we used to create it.
Slide 21
Slide 21 text
You Have
Thousands of Selectors
Wednesday, May 16, 12
with no coherent strategy
Slide 22
Slide 22 text
You Have
Styles in the Way
Wednesday, May 16, 12
styles from the cascade and document inheritance that are hurting instead of helping
Slide 23
Slide 23 text
You Have
Unpredictable Bugs
Wednesday, May 16, 12
Slide 24
Slide 24 text
You Have
Property Soup
Wednesday, May 16, 12
Slide 25
Slide 25 text
You Have
Accidentally the Stylesheets
Wednesday, May 16, 12
Ended up here because you didn’t have a plan. Because what you need
Slide 26
Slide 26 text
You Need
STRUCTURE
Wednesday, May 16, 12
Slide 27
Slide 27 text
You Need
PATTERNS
Wednesday, May 16, 12
Slide 28
Slide 28 text
You Need
RULES
Wednesday, May 16, 12
Slide 29
Slide 29 text
You Need
CLARITY OF
INTENT
Wednesday, May 16, 12
Slide 30
Slide 30 text
CSS
FRAMEWORKS
will not solve your problem
Wednesday, May 16, 12
Slide 31
Slide 31 text
PRE
PROCESSORS
will not solve your problem
Wednesday, May 16, 12
Slide 32
Slide 32 text
The Problem is
Wednesday, May 16, 12
Slide 33
Slide 33 text
The Problem is
YOU
Wednesday, May 16, 12
Slide 34
Slide 34 text
LOOKING GOOD
is not
done
Wednesday, May 16, 12
Slide 35
Slide 35 text
LOOKING GOOD
is not even
half done
Wednesday, May 16, 12
Slide 36
Slide 36 text
NAME
You have to
Wednesday, May 16, 12
Slide 37
Slide 37 text
ORGANIZE
You have to
Wednesday, May 16, 12
Slide 38
Slide 38 text
DISSECT
You have to
Wednesday, May 16, 12
Slide 39
Slide 39 text
DOCUMENT
You have to
Wednesday, May 16, 12
Slide 40
Slide 40 text
WORK HARD
You have to
Wednesday, May 16, 12
Slide 41
Slide 41 text
REFACTOR
CONSTANTLY
You have to
Wednesday, May 16, 12
Slide 42
Slide 42 text
Or Else
Your stylesheets
will sap the
will to live
from your soul
http://wikibon.org/blog/wp-content/uploads/2011/10/5.„eg
Wednesday, May 16, 12
Slide 43
Slide 43 text
You need better tools.
Wednesday, May 16, 12
Better tools that provide insulation between what you write and what you serve. So that you
are free to organize without constraints.
Slide 44
Slide 44 text
Property Soup Le average sass stylesheet.
Wednesday, May 16, 12
This is decent sass, could be a lot worse, would be a lot worse in css. but it can be so much
better.
Slide 45
Slide 45 text
Constructing an Object
Wednesday, May 16, 12
From each category you can usually only pick 1 class to apply to the same element.
Slide 46
Slide 46 text
Constructing an Object
Wednesday, May 16, 12
From each category you can usually only pick 1 class to apply to the same element.
Slide 47
Slide 47 text
Constructing an Object
Wednesday, May 16, 12
From each category you can usually only pick 1 class to apply to the same element.
Slide 48
Slide 48 text
Constructing an Object
Wednesday, May 16, 12
From each category you can usually only pick 1 class to apply to the same element.
Slide 49
Slide 49 text
Constructing an Object
Wednesday, May 16, 12
From each category you can usually only pick 1 class to apply to the same element.
Slide 50
Slide 50 text
Constructing an Object
Wednesday, May 16, 12
From each category you can usually only pick 1 class to apply to the same element.
Slide 51
Slide 51 text
Constructing an Object
Wednesday, May 16, 12
From each category you can usually only pick 1 class to apply to the same element.
Slide 52
Slide 52 text
Constructing an Object
Unstyled
Background
Container
Typography
Foreground
Margin/Padding
Wednesday, May 16, 12
From each category you can usually only pick 1 class to apply to the same element.
Slide 53
Slide 53 text
Constructing an Object
.calming
.shadow-box
.reading-text
.green-bg-type
.vertically-padded
Wednesday, May 16, 12
From each category you can usually only pick 1 class to apply to the same element.
Slide 54
Slide 54 text
Property Soup Le average sass stylesheet.
Wednesday, May 16, 12
How should we organize our style properties? Alphabetize them! We
can do better than this. We will organize our properties by style concern.
Slide 55
Slide 55 text
Property Soup Le average sass stylesheet.
Alphabetized
Wednesday, May 16, 12
How should we organize our style properties? Alphabetize them! We
can do better than this. We will organize our properties by style concern.
Slide 56
Slide 56 text
Property Soup Le average sass stylesheet.
Alphabetized
Wednesday, May 16, 12
How should we organize our style properties? Alphabetize them! We
can do better than this. We will organize our properties by style concern.
Slide 57
Slide 57 text
Typography The non-color aspects of text.
Wednesday, May 16, 12
Note how the typography and foreground are mixed up?
Slide 58
Slide 58 text
Typography Typographic properties: font-xxx, line-
height, bullets, text-xxx, margin
Wednesday, May 16, 12
Explain the placeholder selector
Slide 59
Slide 59 text
Container Not all paddings are from the same
concern.
Wednesday, May 16, 12
Slide 60
Slide 60 text
Container border, box shadow, padding
Wednesday, May 16, 12
Slide 61
Slide 61 text
Background Background - this one is easy :)
Wednesday, May 16, 12
Slide 62
Slide 62 text
Foreground border-color, color, shadow-color
Wednesday, May 16, 12
you can’t declare text shadow color explicitly, so we have to put all text shadows in the
foreground, otherwise the shadow details would be in the typography.
Slide 63
Slide 63 text
Spacers margin & padding on non-typographic
elements
Wednesday, May 16, 12
Slide 64
Slide 64 text
An Object Description
In Sass, we describe objects using words
and high-level concepts,
not style primitives.
Wednesday, May 16, 12
Isn’t this simpler to understand if you’re reading the code?
We read code more often than we write it. Be nice to your future self.
Slide 65
Slide 65 text
An Object Description
In Sass, we describe objects using words
and high-level concepts,
not style primitives.
Wednesday, May 16, 12
Isn’t this simpler to understand if you’re reading the code?
We read code more often than we write it. Be nice to your future self.
Slide 66
Slide 66 text
An Object Description Our object description is longer now.
Wednesday, May 16, 12
Slide 67
Slide 67 text
An Object Description Our object description is longer now.
Not Re-Usable
Re-Usable
Wednesday, May 16, 12
Slide 68
Slide 68 text
A Sad Reality If you use @extend like this, your
stylesheets will be huge.
Wednesday, May 16, 12
So unless you need the flexibility that semantic markup brings for shared content, etc
Slide 69
Slide 69 text
A Sad Reality Classitis provides a better user
experience.
Wednesday, May 16, 12
Slide 70
Slide 70 text
A Sad Reality Classitis provides a better user
experience.
Wednesday, May 16, 12
Slide 71
Slide 71 text
We Need Browser
Support for @extend
Wednesday, May 16, 12
Do this right now. I’ll wait. Now back to the show.
Slide 72
Slide 72 text
More
Concepts
More Organization
But everything has
a place.
http://www.ultracraft.com/system/accessories/0000/0425/Drawer-Organizer-Metal_full.„g
Wednesday, May 16, 12
Slide 73
Slide 73 text
Library: ‣No output.
‣Mostly presentational in
nature.
Foundation: ‣Core, Shared Styles.
‣Maps Presentation to
Domain.
Application: ‣Features.
‣One-off Pages.
‣Experimental styles.
‣Server traffic patterns
Wednesday, May 16, 12
Slide 74
Slide 74 text
Library: ‣No output.
‣Mostly presentational in
nature.
Foundation: ‣Core, Shared Styles.
‣Maps Presentation to
Domain.
Application: ‣Features.
‣One-off Pages.
‣Experimental styles.
‣Server traffic patterns
Wednesday, May 16, 12
Slide 75
Slide 75 text
Library: ‣No output.
‣Mostly presentational in
nature.
Foundation: ‣Core, Shared Styles.
‣Maps Presentation to
Domain.
Application: ‣Features.
‣One-off Pages.
‣Experimental styles.
‣Server traffic patterns
Wednesday, May 16, 12
Slide 76
Slide 76 text
Progression of a Design
Prototype
Variations
Multiple Uses
Domain Concepts
Presentational Concepts
Concept
App
Styles
Foundation
Classes
Mixin
Library
Wednesday, May 16, 12
This is a generalization, not a rule. Sometimes you skip a step, some concepts never appear
in the foundation.
Slide 77
Slide 77 text
Progression of a Design
Prototype
Variations
Multiple Uses
Domain Concepts
Presentational Concepts
Concept
App
Styles
Foundation
Classes
Mixin
Library
Wednesday, May 16, 12
This is a generalization, not a rule. Sometimes you skip a step, some concepts never appear
in the foundation.
Slide 78
Slide 78 text
Style Concern: Structure
• Floated Grid - Provides the
structure of a page. CSS3 will bring
alternate layout methods.
• Page layouts - Defines how primary
elements adhere to the grid and
respond. Blog Post
Wednesday, May 16, 12
Slide 79
Slide 79 text
Wednesday, May 16, 12
Slide 80
Slide 80 text
Wednesday, May 16, 12
Slide 81
Slide 81 text
Wednesday, May 16, 12
Slide 82
Slide 82 text
Wednesday, May 16, 12
Slide 83
Slide 83 text
Wednesday, May 16, 12
Slide 84
Slide 84 text
Wednesday, May 16, 12
Slide 85
Slide 85 text
Wednesday, May 16, 12
Slide 86
Slide 86 text
Wednesday, May 16, 12
Slide 87
Slide 87 text
Wednesday, May 16, 12
Slide 88
Slide 88 text
Style Concern: Structure
• Layout - Non-grid based structural
patterns.
Wednesday, May 16, 12
Slide 89
Slide 89 text
Style Concern: Structure
• Layout - Non-grid based structural
patterns.
Wednesday, May 16, 12
Slide 90
Slide 90 text
Style Concern: Structure
• Layout - Non-grid based structural
patterns.
Wednesday, May 16, 12
Slide 91
Slide 91 text
Style Concern: Structure
• Layout - Non-grid based structural
patterns.
Wednesday, May 16, 12
Slide 92
Slide 92 text
Style Concern: Structure
• Layout - Non-grid based structural
patterns.
Wednesday, May 16, 12
Slide 93
Slide 93 text
Style Concern: Typography
• Defines how a collection of
typographic elements are styled.
• Vertical Rhythm
• There is no default typography.
Wednesday, May 16, 12
opt-in typography is not the industry standard approach. The industry is mostly wrong about
this. Typographic inheritance can be annoying.
Slide 94
Slide 94 text
Style Concern: Typography
• Defines how a collection of
typographic elements are styled.
• Vertical Rhythm
• There is no default typography.
Opt-in To Typography
Wednesday, May 16, 12
opt-in typography is not the industry standard approach. The industry is mostly wrong about
this. Typographic inheritance can be annoying.
Slide 95
Slide 95 text
Style Concern: Typography
• Defines how a collection of
typographic elements are styled.
• Vertical Rhythm
• There is no default typography.
Wednesday, May 16, 12
opt-in typography is not the industry standard approach. The industry is mostly wrong about
this. Typographic inheritance can be annoying.
Slide 96
Slide 96 text
Style Concern: Typography
• Defines how a collection of
typographic elements are styled.
• Vertical Rhythm
• There is no default typography.
Wednesday, May 16, 12
opt-in typography is not the industry standard approach. The industry is mostly wrong about
this. Typographic inheritance can be annoying.
Slide 97
Slide 97 text
Style Concern: Container
• Define a space using boxes and
separators.
• Accommodate whatever content you
put in them.
Wednesday, May 16, 12
Slide 98
Slide 98 text
Style Concern: Container
• Define a space using boxes and
separators.
• Accommodate whatever content you
put in them.
Wednesday, May 16, 12
Slide 99
Slide 99 text
Style Concern: Container
• Define a space using boxes and
separators.
• Accommodate whatever content you
put in them.
Wednesday, May 16, 12
Slide 100
Slide 100 text
Style Concern: Container
• Define a space using boxes and
separators.
• Accommodate whatever content you
put in them.
Wednesday, May 16, 12
Slide 101
Slide 101 text
Style Concern: Spacers
• Add space using dimensions from
the vertical-rhythm and grid
• Margins
• Paddings
• Un-paddings
Wednesday, May 16, 12
Slide 102
Slide 102 text
Style Concern: Spacers
• Add space using dimensions from
the vertical-rhythm and grid
• Margins
• Paddings
• Un-paddings
Wednesday, May 16, 12
Slide 103
Slide 103 text
Style Concern: Spacers
• Add space using dimensions from
the vertical-rhythm and grid
• Margins
• Paddings
• Un-paddings
Wednesday, May 16, 12
Slide 104
Slide 104 text
Style Concern: Background
• Gives an area background color,
pattern, or imagery.
• Combine with any container.
Wednesday, May 16, 12
Slide 105
Slide 105 text
Style Concern: Background
• Gives an area background color,
pattern, or imagery.
• Combine with any container.
Wednesday, May 16, 12
Slide 106
Slide 106 text
Style Concern: Background
• Gives an area background color,
pattern, or imagery.
• Combine with any container.
Wednesday, May 16, 12
Slide 107
Slide 107 text
Style Concern: Foreground
• Gives color to type and borders
• Often linked to a background
Wednesday, May 16, 12
It would be nice if the relationship was .foreground {@extend .background;} but it’s not (1
foreground has many backgrounds). This @extend approach introduces a fair bit of bloat, but
it forces consistency. It’s a trade-off you can decide to make or not.
Slide 108
Slide 108 text
Style Concern: Foreground
• Gives color to type and borders
• Often linked to a background
Wednesday, May 16, 12
It would be nice if the relationship was .foreground {@extend .background;} but it’s not (1
foreground has many backgrounds). This @extend approach introduces a fair bit of bloat, but
it forces consistency. It’s a trade-off you can decide to make or not.
Slide 109
Slide 109 text
Style Concern: Foreground
• Gives color to type and borders
• Often linked to a background
Wednesday, May 16, 12
It would be nice if the relationship was .foreground {@extend .background;} but it’s not (1
foreground has many backgrounds). This @extend approach introduces a fair bit of bloat, but
it forces consistency. It’s a trade-off you can decide to make or not.
Slide 110
Slide 110 text
Style Concern: Foreground
• Gives color to type and borders
• Often linked to a background
Wednesday, May 16, 12
It would be nice if the relationship was .foreground {@extend .background;} but it’s not (1
foreground has many backgrounds). This @extend approach introduces a fair bit of bloat, but
it forces consistency. It’s a trade-off you can decide to make or not.
Slide 111
Slide 111 text
Style Concern: Foreground
• Gives color to type and borders
• Often linked to a background
Wednesday, May 16, 12
It would be nice if the relationship was .foreground {@extend .background;} but it’s not (1
foreground has many backgrounds). This @extend approach introduces a fair bit of bloat, but
it forces consistency. It’s a trade-off you can decide to make or not.
Slide 112
Slide 112 text
Style Concern: Foreground
• Gives color to type and borders
• Often linked to a background
Wednesday, May 16, 12
It would be nice if the relationship was .foreground {@extend .background;} but it’s not (1
foreground has many backgrounds). This @extend approach introduces a fair bit of bloat, but
it forces consistency. It’s a trade-off you can decide to make or not.
Slide 113
Slide 113 text
Style Concern: Foreground
• Gives color to type and borders
• Often linked to a background
Wednesday, May 16, 12
It would be nice if the relationship was .foreground {@extend .background;} but it’s not (1
foreground has many backgrounds). This @extend approach introduces a fair bit of bloat, but
it forces consistency. It’s a trade-off you can decide to make or not.
Slide 114
Slide 114 text
Style Concern: Foreground
• Gives color to type and borders
• Often linked to a background
Wednesday, May 16, 12
It would be nice if the relationship was .foreground {@extend .background;} but it’s not (1
foreground has many backgrounds). This @extend approach introduces a fair bit of bloat, but
it forces consistency. It’s a trade-off you can decide to make or not.
Slide 115
Slide 115 text
Style Concern: Lists/Tables/Forms
• These are unique beasts
• Might be part of a typography
• Use them semantically
• Class on the main element
Wednesday, May 16, 12
Slide 116
Slide 116 text
Style Concern: Widgets
• Styles for your interactive elements
• SMACSS - Jonathan Snook
Wednesday, May 16, 12
Slide 117
Slide 117 text
Style Concern: Widgets
• Styles for your interactive elements
• SMACSS - Jonathan Snook
Wednesday, May 16, 12
Slide 118
Slide 118 text
Style Concern: Widgets
• Styles for your interactive elements
• SMACSS - Jonathan Snook
Wednesday, May 16, 12
Slide 119
Slide 119 text
Style Concern: Widgets
• Styles for your interactive elements
• SMACSS - Jonathan Snook
Wednesday, May 16, 12
Slide 120
Slide 120 text
Style Concern: Theming
• Color Palette
• Semantic Color Relationships
• Default Variables
• Compile Stylesheet with a different
configuration
Wednesday, May 16, 12
Slide 121
Slide 121 text
Style Concern: Theming
• Color Palette
• Semantic Color Relationships
• Default Variables
• Compile Stylesheet with a different
configuration
Wednesday, May 16, 12
Slide 122
Slide 122 text
Style Concern: Theming
• Color Palette
• Semantic Color Relationships
• Default Variables
• Compile Stylesheet with a different
configuration
Wednesday, May 16, 12
Slide 123
Slide 123 text
Style Concern: Theming
• Color Palette
• Semantic Color Relationships
• Default Variables
• Compile Stylesheet with a different
configuration
Wednesday, May 16, 12
Slide 124
Slide 124 text
Style Concern: Theming
• Color Palette
• Semantic Color Relationships
• Default Variables
• Compile Stylesheet with a different
configuration
Wednesday, May 16, 12
Slide 125
Slide 125 text
Naming is Hard
http://funnyphotosto.com/wp-content/uploads/2012/03/12/screaming.„g
Wednesday, May 16, 12
Slide 126
Slide 126 text
Naming is a
Collaboration
Designers must pick or approve the name.
Unfortunately, designers are not often good at naming things.
Wednesday, May 16, 12
Coders have to name everything they make, but designers don’t. Naming is a skill that must
be developed. You have to learn to explain your intuition and instinct.
Slide 127
Slide 127 text
Naming Docent
Developers, your job is to help them
develop a shared design vocabulary.
Wednesday, May 16, 12
If you are a developer and a designer, you now have an excuse for talking to yourself.
Slide 128
Slide 128 text
The Name Game
Find a name that
describes the intent of a design
element, not the appearance.
Wednesday, May 16, 12
Slide 129
Slide 129 text
The Name Game
A too-specific name is
better than a too-generic name.
Wednesday, May 16, 12
Slide 130
Slide 130 text
The Name Game
Wednesday, May 16, 12
THESAURUS!!!
Slide 131
Slide 131 text
The Name Game
Wednesday, May 16, 12
THESAURUS!!!
Slide 132
Slide 132 text
The Name Game
Wednesday, May 16, 12
THESAURUS!!!
Slide 133
Slide 133 text
The Name Game
Wednesday, May 16, 12
THESAURUS!!!
Slide 134
Slide 134 text
The Name Game
Wednesday, May 16, 12
THESAURUS!!!
Slide 135
Slide 135 text
The Name Game
Wednesday, May 16, 12
THESAURUS!!!
Slide 136
Slide 136 text
The Name Game
Wednesday, May 16, 12
THESAURUS!!!
Slide 137
Slide 137 text
The Name Game
Wednesday, May 16, 12
THESAURUS!!!
Slide 138
Slide 138 text
The Name Game
Wednesday, May 16, 12
THESAURUS!!!
Slide 139
Slide 139 text
The Name Game
Wednesday, May 16, 12
THESAURUS!!!
Slide 140
Slide 140 text
Losing the Name Game
Wednesday, May 16, 12
Sometimes you cannot find a good name, or you find some use of a design that doesn’t
match the current name.
Slide 141
Slide 141 text
Losing the Name Game
Give up: Pick two names
Wednesday, May 16, 12
Sometimes you cannot find a good name, or you find some use of a design that doesn’t
match the current name.
Slide 142
Slide 142 text
Losing the Name Game
Give up: Pick two names
Consistency: Change the design
Wednesday, May 16, 12
Sometimes you cannot find a good name, or you find some use of a design that doesn’t
match the current name.
Slide 143
Slide 143 text
Losing the Name Game
Give up: Pick two names
Consistency: Change the design
Wait: Don’t name it
Wednesday, May 16, 12
Sometimes you cannot find a good name, or you find some use of a design that doesn’t
match the current name.
Slide 144
Slide 144 text
The Designer Wins
http://blog.hubspot.com/Portals/53/images/charlie-sheen-winning.png
Wednesday, May 16, 12
Don’t force a design change just because a name doesn’t match. Intuition is a tricky thing, if
you trust your designer, trust their gut feeling. If you don’t trust your designer... :(
Slide 145
Slide 145 text
Classes or IDs?
Use IDs for unique page elements.
Specificity is good when
styling something specific.
Wednesday, May 16, 12
not always possible to find a document order.
specificity is BETTER than !important.
!important is a nuclear option.
Slide 146
Slide 146 text
Specificity Wars
Time to Refactor!
Wednesday, May 16, 12
Fight the specificity wars, by refactoring; not by rejecting specificity. Document order is not
enough. Keep the same order of specificity at the same level of abstraction.
Slide 147
Slide 147 text
Mixin Library
The presentational concepts upon
which the foundation classes are built.
Wednesday, May 16, 12
Slide 148
Slide 148 text
Structure of a Library Module
1.Dependency Imports
2.Variables, almost always defaulted.
3.Functions
4.Mixins
5.Placeholder selectors
6.Style Selectors
Wednesday, May 16, 12
Placeholders: only import once or use the mixin hack if your module has these
Selectors: Usually don't mix with Functions/mixins/placeholders
Slide 149
Slide 149 text
Read Compass
Compass is a Mixin Library
Wednesday, May 16, 12
Slide 150
Slide 150 text
Breaking the Rules
‣Experiment with new designs
‣Accommodate non-conforming design.
‣Build what you need today
‣Meet your deadlines
‣Diligently factor out what is common
Wednesday, May 16, 12
Slide 151
Slide 151 text
Documentation
‣It's better to show than to tell.
‣Make a living styleguide for
documentation and prototyping.
‣This is your design catalog.
‣Teach the design, don't just
exemplify it.
Wednesday, May 16, 12
Slide 152
Slide 152 text
Downsides
‣Learning curve
‣Harder to debug
‣Classitis
‣A lot of work
Wednesday, May 16, 12
1-2 days of training to become capable. 3-4 weeks to be competent.
It will take > 1 month for an experienced team to build a comprehensive styleguide.
Slide 153
Slide 153 text
Benefits
Everything has a place
http://www.tsf.net.au/gallery/var/albums/Tidy-Cabling/46-cluster_back2.„g?m=1294131614
Wednesday, May 16, 12
Slide 154
Slide 154 text
Benefits
File Size
3.5 MB
1.2 MB
Wednesday, May 16, 12
Better factorization => less duplication. 2/3 reduction of total site-wide styles.
Slide 155
Slide 155 text
Benefits
Efficient communication
Wednesday, May 16, 12
More efficient team thru better communication thanks to new vocabulary. completely
Describing a page design can be done in ~15 minutes.
Slide 156
Slide 156 text
Benefits
Low Coupling
Wednesday, May 16, 12
a clean separation in responsibilities, means changes breaks things less often in unexpected
ways
Slide 157
Slide 157 text
Benefits
Built to last
http://www.flickr.com/photos/wilhelmja/4233621517/
Wednesday, May 16, 12
Ok. Pyramids are probably a bit of an exagguration.
These styles will be used and evolved for several years -- an eternity on the internet.
These styles will be used by a team. For the love of god, don't do
Slide 158
Slide 158 text
Thank you!
Compass is Charityware.
Please donate on our behalf to the
United Mitochondrial Disease Foundation
http://umdf.org/compass
Wednesday, May 16, 12