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
950
Design Tokens in Design Systems
jina
9
28k
Designing a Design System
jina
34
7.5k
Living Design Systems
jina
42
2.5M
Lightning Design System
jina
6
660
Sass & Style Guides
jina
11
490
Designing for Enterprise
jina
4
210
Refactoring Web Interfaces
jina
20
1k
In Search of the Single Source of Truth
jina
1
390
Other Decks in Design
See All in Design
root COMPANY DECK / We are hiring!
root_recruit
PRO
1
24k
AI時代に問われる、リサーチの感受性──地域⇄大企業の現場から見えた「違和感」との向き合い方
muture
PRO
0
130
組織の右腕として共創する ー デザインと経営の二つの視点から見えた、新しい支援のかたち/ Designship2025_Nishimura
root_recruit
PRO
0
170
SAMSUL KAMAR ABDUL RAHMAN
samsulrahman32
0
170
【最新】マズロー安達の弟子実績(1期-6期の37人分)
maslow_akkun
0
3.1k
Findyのプロデチームの 歩みとこれから
satty9556
0
320
AIを身近に感じるために、デザイナー全員で一つのサービスを使ってみた
_psyc0_
0
320
Yahoo!フリマ:生成AI利用機能ならではのインターフェース設計について / Yahoo! JAPAN Flea Market: Interface Design Specific to Generative AI Utilization Features
lycorptech_jp
PRO
0
520
21 Ways to Call American Airlines Customer Care Full Guide USA
americanhub
0
220
ドルちゃん
design_dolphins
0
390
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
takanorip
0
650
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
1
2.8k
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
Designing Experiences People Love
moore
142
24k
RailsConf 2023
tenderlove
30
1.3k
Why Our Code Smells
bkeepers
PRO
340
57k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Building a Scalable Design System with Sketch
lauravandoore
463
33k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
Documentation Writing (for coders)
carmenintech
75
5.1k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
Build The Right Thing And Hit Your Dates
maggiecrowley
38
2.9k
Faster Mobile Websites
deanohume
310
31k
BBQ
matthewcrist
89
9.9k
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!