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.3M
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
20250129_DAST28_実空間にデジタル資源の接点をデザインする
majimasachi
0
210
デザインシステムの力 Webデザイナーとエンジニアのための実践ガイド / The Power of Design System
spindle
9
4.9k
マンガで分かるサービスデザインガイドライン
senryakuka
1
550
「Figmaプラグイン開発してみた」@スタメンデザイナーオープン勉強会
kiyoshifuwa
0
120
太田博三(@usagisan2020)
otanet
0
220
12年続くB2DサービスとUXデザイン / UX Design keeps B2D service alive over 12 years
tnj
0
280
HCDフォーラム2024 「HCDとHAI ~人間とAIが共存する世界の実現~」
kamechi7222222
0
280
TUNAG BOOK 2024
stmn
0
470
生成AIを受け入れ共創できるデザイナーマインドへープロセス改革を想定したデザイナーの準備ー
takumasaito
1
1.7k
Дизайн современной услуги с Картой процесса-опыта
ashapiro
0
110
Fem tips om ux-text • WSA-dagen 29 jan 2025
jonas_blind_hen
PRO
0
130
ネーミングの極意 - その名は体を現していますか? -
kakukoki
2
470
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
510
110k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
A Tale of Four Properties
chriscoyier
158
23k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Speed Design
sergeychernyshev
25
780
Raft: Consensus for Rubyists
vanstee
137
6.8k
Producing Creativity
orderedlist
PRO
343
39k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Designing Experiences People Love
moore
139
23k
Designing for humans not robots
tammielis
250
25k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.8k
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!