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
260
CSS Dev Conf
jina
December 05, 2012
Tweet
Share
More Decks by jina
See All by jina
Design Systems are for People
jina
1
940
Design Tokens in Design Systems
jina
9
28k
Designing a Design System
jina
34
7.4k
Living Design Systems
jina
42
2.3M
Lightning Design System
jina
6
640
Sass & Style Guides
jina
11
480
Designing for Enterprise
jina
4
200
Refactoring Web Interfaces
jina
20
990
In Search of the Single Source of Truth
jina
1
380
Other Decks in Design
See All in Design
アクセシビリティに取り組むメリット
magi1125
1
190
バイアスを凌ぐデザインとコード ―異動直後にどうふるまうか―
kkaru
0
450
minpaku-community-scrum-patterns
norinity1103
1
120
portfolio_YumiYasuda
yum0418
0
290
How to get a Tiger to Tulsa
mcduckyart
0
110
AI時代に淘汰されないデザインのしごと
akinen
1
140
新年あけおめWSの実施スキルをみんなで振り返りタイムのススメ
sugiyama_sukedachi
0
140
【Adobe MAX Japan 2025】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
7
5.7k
7 Core Values of Round-L
wired888
0
260
“使いやすい”が生産性を変える!業務を効率化するためのUX/UI設計ポイント
ncdc
2
420
デザイナーとPMの両ロール_3つのポイント
toy1618
1
330
オリジナルのデザイン地図を作ってみた!〜OpenMapTilesとMaputnikを活用した地図スタイル〜
hjmkth
1
580
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Thoughts on Productivity
jonyablonski
69
4.7k
Six Lessons from altMBA
skipperchong
28
3.9k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Building an army of robots
kneath
306
45k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Documentation Writing (for coders)
carmenintech
72
4.9k
Making Projects Easy
brettharned
116
6.3k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
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!