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
650
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
デザイナーのAI活用とチームへの浸透戦略
ukaoli
0
130
AI駆動なデザイン開発 〜Figma Make でまるっとつくるか、 HTML でシンプルにつくるか〜
t_east
1
1.3k
1920*1080pxに設定したケース / Google Slide Size Test
arthur1
0
3.5k
「描く」という衝動に立ち返る〜Figma Drawがひらく思考のかたち〜
transit_kix
1
1.2k
ランドマークが光る!季節を彩るナビ体験 - Mobility Night #3 -
kitau
0
130
【PoCで終わらない】運用フェーズまで見据えたAI駆動UIデザイン/フロントエンド開発実践
kitami
1
380
街・都市という眼差し。まちづくりにおける規範と実践
sakamon
0
150
地理院地図をもっと楽しく!れきちず新機能のご紹介
hjmkth
1
160
Ana Cortes Visual Development Portfolio 2025
haruanleb
0
120
Мышление дизайнера историями. Как текстовые модели человеческого поведения помогают проектировать
ashapiro
0
420
BPStudy#213〜ビジネスアナリシスとDDD(ドメイン駆動設計)パネルディスカッション資料 / BPStudy213-panel
haru860
0
490
デフォルトの16:9(960*540px)のケース / Google Slide Size Test
arthur1
0
3.5k
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Being A Developer After 40
akosma
91
590k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
The Language of Interfaces
destraynor
162
25k
Code Review Best Practice
trishagee
72
19k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Typedesign – Prime Four
hannesfritz
42
2.8k
What's in a price? How to price your products and services
michaelherold
246
12k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
610
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!