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
CSS Dev Conf
Search
jina
December 05, 2012
Design
6
250
CSS Dev Conf
jina
December 05, 2012
Tweet
Share
More Decks by jina
See All by jina
Design Systems are for People
jina
1
880
Design Tokens in Design Systems
jina
9
28k
Designing a Design System
jina
34
7.3k
Living Design Systems
jina
42
1.4M
Lightning Design System
jina
6
630
Sass & Style Guides
jina
11
460
Designing for Enterprise
jina
4
190
Refactoring Web Interfaces
jina
20
970
In Search of the Single Source of Truth
jina
1
360
Other Decks in Design
See All in Design
Illustrator2025がやってきた!私が好きな新機能
hamko1114
0
110
「ちょっといいUI」を目指す努力 / Striving for Little Big Details
usagimaru
6
4.1k
利用者が離れないUX/UIデザイン 長く使われる業務アプリデザインのポイント
ncdc
5
440
ネットワークセキュリティ科 学科紹介
sklbj_unz
0
180
#yumemi_grow 読書シェア会 vol.1 - スコット・バークン著『デザインはどのように世界をつくるのか』
kaitou
1
100
共通言語としてのデザイントークンと Figmaでの運用
kamy0042
0
240
Goodpatch Tour💙 / We are hiring!
goodpatch
31
790k
急成長中のWINTICKETにおける ちいさくはじめるライティング改善 / winticket-writing
cyberagentdevelopers
PRO
1
280
生成AIを受け入れ共創できるデザイナーマインドへープロセス改革を想定したデザイナーの準備ー
takumasaito
1
1.7k
Masked shaman-Storyboard 2025
ashley0521
0
170
パンくずリストかわいい(breadcrumb so cute)
ysuda
0
170
Managing Design Systems (Antwerp 2024)
nathanacurtis
1
390
Featured
See All Featured
Navigating Team Friction
lara
183
15k
GraphQLとの向き合い方2022年版
quramy
44
13k
Raft: Consensus for Rubyists
vanstee
137
6.8k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
9
450
A Tale of Four Properties
chriscoyier
158
23k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
960
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
A designer walks into a library…
pauljervisheath
205
24k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Practical Orchestrator
shlominoach
186
10k
Transcript
Style-Guide Driven UI Design with Sass Jina Bolton // Product
Designer // Do CSS Dev Conf // 2012
None
A fractured process makes for a fractured user experience.” ”
—Nate Fortin
Create pages
Create pages
Create systems
It used to be that designers made an object and
walked away. Today the emphasis must shift to designing the entire life cycle.” ” —Paul Saffo
Writing an Interface Style Guide | A List Apart Articles
Style Guide Elements
Brand Guidelines Logos Tone & Voice Copywriting Standards Typography Color
Palettes
Layout Grids Spacing Image & Media Sizes
Development Standards HTML, CSS, & JS Naming Conventions Directory Structures
Validation & QA Version Control
Design | Android Developers
Style | Design | Android Developers
Patterns | Design | Android Developers
Building Blocks | Design | Android Developers
Building Blocks | Design | Android Developers
Do Android Design Comp Library on Project Wiki on GitHub
Style Guide | Starbucks
Promo Layout A | Style Guide | Starbucks
Toggled Backgrounds | Style Guide | Starbucks
Toggled Baseline | Style Guide | Starbucks
Toggled Boxes | Style Guide | Starbucks
Toggled Grid | Style Guide | Starbucks
All of the Toggles! | Style Guide | Starbucks
Style Tiles
Style Tile for The Washington Examiner Site 2012 Campaign Site
CSS Preprocessors + Style Guides = Super Rad
Keep documentation current & useful
Easier maintainability
DRY Development
Patterns & Proportions
Stylus
sass-lang.com
compass-style.org
Sass Benefits
Nesting
ul.items a { ... } ul.items:hover { ... } .ie-6
ul.items a { ... } Output: SCSS: ul.items a { ... &:hover { ... } .ie-6 & { ... } }
ul.items { ... } @media print { ul.items { ...
} } Output: SCSS: ul.items a { ... @media print { ... } }
.sidebar { border: 1px solid #eee; border-top-color: #fff; border-left: 0;
} Output: SCSS: .sidebar { border: 1px solid #eee { top-color: #fff; left: 0; } }
Variables
body { color: #444; } footer { background: #444; }
Output: SCSS: $text: #444; $bg: $text; body { color: $text; } footer { background: $bg; }
Mixins & Extend
.module { padding: 1em; } .info { padding: 2em }
Output: SCSS: @mixin spacing($s: 1em) { padding: $s; } .module { @include spacing; } .info { @include spacing(2em); }
.message, .error { ... } .message.alert, .error.alert { ... }
.error { ... } Output: SCSS: .message { ... &.alert { ... } } .error { ... @extend .message; }
Placeholder Selectors
.module, .sidebar { color: #444; } .sidebar, .main { width:
240px; } Output: SCSS: .module { color: #444; } %grid-1 { width: 240px; } .sidebar { @extend .module; @extend %grid-1; } .main { @extend %grid-1; }
Color Functions
$text: #444 color: lighten($text, 5%); color: darken($text, 5%); color: saturate($text,
5%); color: adjust-hue($text, 180); color: grayscale($text); color: mix($text, #fff);
sassme.arc90.com/
Commenting Options
/* Multiline comment; appears in output */ Output: SCSS: /*
Multiline comment; appears in output */ // Singleline comment; // Hidden from output
Operations
body { font-size: 24px; } Output: SCSS: $size: 12px; body
{ font-size: $size * 2; }
Functions
.i-red { background: url(red.png); } .i-blue { background: url(blue.png); }
Output: SCSS: @each $c in red, blue { .i-#{$c} { background: url(#{$c}.png); } }
.i-red { color: red; } .i-blue { color: blue; }
Output: SCSS: @mixin i($color) { @if $color == red { color: red; } @else { color: blue; } } .i-red { @include i(red); } .i-blue { @include i; }
Error Reporting
First Variables. Then Mixins. Then @extend. Then more advanced stuff!
Start with baby steps
Stay organized
Clarity is beautiful.
Clarity > Brevity
If you’re nesting more than 3 levels deep, you’re probably
doing something wrong.
File Organization images/ content/ layout/ javascripts/ vendor/ stylesheets/ vendor/
Front-end Maintainability with Sass and Style Guides | Engine Yard
Blog
Engine Yard App Cloud, Early 2011
Engine Yard App Cloud, Early 2011
jacobrask.github.com/styledocco/
jacobrask.github.com/styledocco/styledocco/examples/bootstrap/docs/buttons.html
My Typical Sass Organization
// ---------------------------------- // 01. VENDOR FRAMEWORKS @import "compass"; @import "susy";
// ------------------------------------ // 02. RESET * { @include box-sizing(border-box); }
@import "vendor/normalize";
// --------------------------------------------------------- // 03. DEPENDENCIES // Variables/mixins/placeholders/etc // These don’t
emit CSS on their own // until they are used. @import "dependencies/measurements"; @import "dependencies/typography"; @import "dependencies/color"; @import "dependencies/images"; @import "dependencies/themes";
// --------------------------------------------------------- // 04. FOUNDATION // Plain semantic HTML //
No classes/IDs are introduced yet. @import "foundation/page"; @import "foundation/links"; @import "foundation/headings"; @import "foundation/text"; @import "foundation/lists"; @import "foundation/forms";
// ---------------------------------- // 05. COMPONENTS // Reusable modules, components, etc.
@import "components/buttons"; @import "components/messaging"; @import "components/dropdowns";
// ---------------------------------- // 06. LAYOUT @import "layout/grid"; @import "layout/banner"; @import
"layout/navigation"; @import "layout/complementary"; @import "layout/contentinfo";
// ---------------------------------- // 07. TOOLS @import "tools/helpers"; @import "tools/print";
Do
Caption and/or URL
http://codepen.io/jina/pen/iosjp
do.com’s Rainbow Color Stripe
Do Style Guide
Do Style Guide
Do Style Guide
What else?
compass.handlino.com
mhs.github.com/scout-app
livereload.com
codekit.com
susy.oddbird.net
stuffandnonsense.co.uk/projects/320andup
smacss.com
blesscss.com
Just give it a try!
sass-lang.com
Team Sass Design FTW!
Sass Logo Inspiration
None
None
Sass Brand Guidelines
Sass Style Tile
Current Design Progress. Stay tuned!
@TeamSassDesign
#teamSass
Be regular and orderly in your life so that you
may be violent and original in your work.” ” —Gustave Flaubert
sushiandrobots.com
artinmycoffee.com
speakerdeck.com/u/jina
@jina Thank You!