Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Living Style Guides In Sass

Avatar for canarymason canarymason
October 16, 2012
Design
3
400

Living Style Guides In Sass

Presented at the NYC Sass Meetup (October 2012) at Pivotal Labs.

Avatar for canarymason

canarymason

October 16, 2012
Tweet

More Decks by canarymason

See All by canarymason
Mobile and Responsive Design with Sass
Avatar for canarymason canarymason
3
250
The Coding Designer's Survival Kit
Avatar for canarymason canarymason
8
500

Other Decks in Design

See All in Design
アプリ360onWeb使い方と裏ワザ？紹介！
Avatar for ikejun360 ikejun360
0
330
ドルちゃん
Avatar for ドルちゃん design_dolphins
0
440
Designing User Experience through Interaction Design
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
430
「キャリア」のプロダクトをつくる私の「キャリア」への向き合い方 / JAM de NIGHT DESIGN SESSION Vol3
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
1
780
kintone Style Book
Avatar for kintone kintone
4
4.5k
デザインシステムの「種」を使って、受託開発を加速させる
Avatar for akane akane___ui
0
12k
「UXとUIの違い」v2
Avatar for Shirasu3 shirasu3
0
260
portfolio.pdf
Avatar for Fumitaka Ono onof003
0
210
CMS管理画面のアクセシビリティ
Avatar for Rikiya Ihara / magi magi1125
8
2.5k
組織の右腕として共創する ー デザインと経営の二つの視点から見えた、新しい支援のかたち/ Designship2025_Nishimura
Avatar for 株式会社ルート root_recruit
PRO
0
190
佐藤千晶｜ポートフォリオ
Avatar for 佐藤千晶 chimi_chia
0
250
プロダクトリニューアルと同時に進める初めてのデザインシステム
Avatar for PERSOL CAREER Dev | techtekt techtekt
PRO
0
160

Featured

See All Featured
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1371
200k
How Fast Is Fast Enough? [PerfNow 2025]
Avatar for Tammy Everts tammyeverts
2
200
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
49
14k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.2k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
18k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4k
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
8
320
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.6k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
2.9k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.9k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
127
54k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
132
19k

Transcript

  1. Living Style Guides & Sass Wednesday, October 17, 12

  2. Hi, I’m Mason @codingdesigner I design and make websites. I

    love CSS and Sass. Probably too much. Wednesday, October 17, 12

  3. I Make Sass Extensions github.com/canarymason Wednesday, October 17, 12

  4. Crazy things sassy mother effing text shadow sassymothereffingtextshadow.com Wednesday, October

    17, 12

  5. Modular Scale Calculate typographic scales github.com/scottkellum/modular-scale with @scottkellum Wednesday, October

    17, 12

  6. Breakpoint Really simple media queries in Sass breakpoint-sass.com with @snugug

    Wednesday, October 17, 12

  7. Survival Kit A Toolset for Designing Web Sites in the

    Browser thecodingdesigner.com/survivalkit Wednesday, October 17, 12

  8. Contact Me Zivtech zivtech.com Mason Wendell - Creative Director Twitter,

    Dribbble & Drupal: codingdesigner github: canarymason Wednesday, October 17, 12

  9. I Wednesday, October 17, 12

  10. Living Style Guides Wednesday, October 17, 12

  11. BBC GEL Wednesday, October 17, 12

  12. OLI.JP Wednesday, October 17, 12

  13. Zivtech.com Wednesday, October 17, 12

  14. What’s so great? Wednesday, October 17, 12

  15. Your style guide is a: Design Cop Wednesday, October 17,

    12

  16. Your style guide is a: Design Catalog Wednesday, October 17,

    12

  17. Your style guide is a: Design Sherpa Wednesday, October 17,

    12

  18. And Also: Code Teacher Responsive Ready Client Pleasing Institutional Memory

    Wednesday, October 17, 12

  19. II Wednesday, October 17, 12

  20. What’s Sass got to do with it? Wednesday, October 17,

    12

  21. Variables Define colors, dimensions, etc Wednesday, October 17, 12

  22. Mixins Abstract your design ideas into reusable formulas Wednesday, October

    17, 12

  23. Extend Put reused code into reusable silent selectors Wednesday, October

    17, 12

  24. Partials and Nesting Compartmentalize design modules Encourage more flexible and

    future-friendly styles Wednesday, October 17, 12

  25. Use Creativly Wednesday, October 17, 12

  26. Always be Refactoring Wednesday, October 17, 12

  27. What is a Sass, and How Will I Know if

    I’m Shaking it? Wednesday, October 17, 12

  28. Ship. Wednesday, October 17, 12

  29. Questions & Contact Zivtech zivtech.com Mason Wendell - Creative Director

    Twitter, Dribbble & Drupal: codingdesigner github: canarymason Wednesday, October 17, 12