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

Mobile and Responsive Design with Sass

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for canarymason canarymason
July 27, 2012
Design
3
260

Mobile and Responsive Design with Sass

What is a Sass, and how will I know if I'm shaking it?

Avatar for canarymason

canarymason

July 27, 2012
Tweet

More Decks by canarymason

See All by canarymason
Living Style Guides In Sass
Avatar for canarymason canarymason
3
410
The Coding Designer's Survival Kit
Avatar for canarymason canarymason
8
520

Other Decks in Design

See All in Design
チームをデザイン対象にする / Design for your team
Avatar for 株式会社カミナシ kaminashi
1
760
はじめての演奏会フライヤーデザイン
Avatar for Kaito Kikuchi chorkaichan
1
240
Storyboard Assignment: Storyboard from Comic Strip
Avatar for Mandalyn Teo lynteo
3
200
UI/UX & Web Design Portfolio 2025｜Madoka Kumagai
Avatar for Madoka madoka_portfolio
2
170
公開スライド）熊本市様-電子申請中級編
Avatar for @Garyuten garyuten
0
950
図じゃなく言語で描く - Common Ground for Design AI Operations.
Avatar for Kazuki Ikeda kazukiikeda
1
700
Goodpatch Tour💙 / We are hiring!
Avatar for Goodpatch Inc. goodpatch
31
1M
AIスライドデザインを生成する仕組みを社内共有する
Avatar for 太田賢一 kenichiota0711
5
4.7k
アイデアを加速させる！Firefly ボードで発想の幅を広げよう
Avatar for コネクリ connecre
1
340
コムデマネージャーがプロダクトデザインに挑戦した。むずかしくて楽しかった。
Avatar for payatsun payatsusan213
0
230
CREATIVE CLASS受講課題｜無印良品を題材としたブランド再構築について
Avatar for satoshi kobayashi happy_ferret153
0
680
Diverse Design Team Deck
Avatar for Diverse diverse
0
870

Featured

See All Featured
Everyday Curiosity
Avatar for Cassini Nazir cassininazir
0
150
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
49
9.9k
Designing for Performance
Avatar for Lara Hogan lara
611
70k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
96
14k
エンジニアに許された特別な時間の終わり
Avatar for watany watany
106
240k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.3k
Redefining SEO in the New Era of Traffic Generation
Avatar for Szymon Słowik szymonslowik
1
230
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
2.3k
Exploring anti-patterns in Rails
Avatar for Elle Meredith aemeredith
2
280
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
Avatar for Ryan Jones ryanjones
0
86
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
21k
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
31k

Transcript

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

    I’m Shaking it? Friday, July 27, 12

  2. Mobile and Responsive Design with Sass Friday, July 27, 12

  3. I Friday, July 27, 12

  4. Mobile First Friday, July 27, 12

  5. The Mobile Web? Friday, July 27, 12

  6. 371k Babies are born each day Compare that to 1.5

    million mobile device activations http://www.lukew.com/presos/preso.asp?26 Friday, July 27, 12

  7. Most Personal Computer Friday, July 27, 12

  8. Most Personal Computer Friday, July 27, 12

  9. Constraints & Capabilities • Small screens • Frequent and sporadic

    use. Distracted • Geolocation • Touch • Camera • Orientation Friday, July 27, 12

  10. II Friday, July 27, 12

  11. Responsive Web Design Friday, July 27, 12

  12. My Website Totally Shrinks On Phones Friday, July 27, 12

  13. Friday, July 27, 12

  14. Friday, July 27, 12

  15. Fluid Grids Proportional grids Use %, not px Friday, July

    27, 12

  16. Fluid Images src set The future. Get used to it?

    Friday, July 27, 12

  17. Fluid Images simple css The best we have. For now.

    Friday, July 27, 12

  18. Breaking News mattwilcox.net/archive/entry/id/1091 Friday, July 27, 12

  19. Media Queries Magic! • @media screen and (min-width: 400px) {

    … } • @media screen and (min-width: 400px) and (max- width: 700px) { … } • @media screen and (device-width: 800px) { … } • @media screen and (device-aspect-ratio: 16/9) { … } Friday, July 27, 12

  20. Properties • width • height • device-width • device-height •

    orientation • aspect-ratio • device-aspect- ratio • color • color-index • monochrome • resolution • scan • grid Friday, July 27, 12

  21. Feature Detection Friday, July 27, 12

  22. Modernizr • modernizr.com • use javascript to test for browser

    features • write a css class to <html> if that feature exists Friday, July 27, 12

  23. Modernizr Friday, July 27, 12

  24. III Friday, July 27, 12

  25. Sass CSS Preprocessor Adds more power to the process of

    writing CSS sass-lang.com Friday, July 27, 12

  26. Variables Sass Compiled CSS Friday, July 27, 12

  27. Nesting Sass Compiled CSS Friday, July 27, 12

  28. Mixins Sass Mixin Compiled CSS Sass Friday, July 27, 12

  29. Extend Use in Sass Compiled CSS Setup Extendables Friday, July

    27, 12

  30. Media Bubbling Compiled CSS Sass Friday, July 27, 12

  31. Compass Utilities CSS3 Images Sprites More Friday, July 27, 12

  32. Compass Extensions Friday, July 27, 12

  33. Sassy Buttons That fancy CSS3 button look with none of

    the work jaredhardy.com/sassy-buttons Friday, July 27, 12

  34. Modular Scale Calculate typographic scales github.com/scottkellum/modular-scale Friday, July 27, 12

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

    Browser thecodingdesigner.com/survivalkit Friday, July 27, 12

  36. Susy Responsive grids for Compass susy.oddbird.net Friday, July 27, 12

  37. Singularity Grid ALPHA Infinite possibilities. Impossibly small. singularity.gs Friday, July

    27, 12

  38. Crazy things sassy mother effing text shadow sassymothereffingtextshadow.com Friday, July

    27, 12

  39. Friday, July 27, 12

  40. Friday, July 27, 12

  41. Breakpoint Really simple media queries in Sass breakpoint-sass.com Friday, July

    27, 12

  42. Breakpoint Use in Sass Compiled CSS Setup Variables Friday, July

    27, 12

  43. Breakpoint Use in Sass Compiled CSS Setup Variables Friday, July

    27, 12

  44. IV Friday, July 27, 12

  45. Drupal Great Content Management System. Bad Templates. Friday, July 27,

    12

  46. What is the best starter theme for responsive web design

    in Drupal? Friday, July 27, 12

  47. Friday, July 27, 12

  48. Friday, July 27, 12

  49. Avoid Cookie Cutters & Assertive Frameworks Friday, July 27, 12

  50. V Friday, July 27, 12

  51. Putting It Together Friday, July 27, 12

  52. Goals Custom designs for your needs and content. Create the

    mobile experience first. Have our content meet any device. Be future friendly. Acknowledge and embrace unpredictability. Friday, July 27, 12

  53. Custom Is Your Friend Start with no theme, or a

    “bare-bones” theme. Friday, July 27, 12

  54. Zen + Zen Grids • Zen - Tried and tested

    in the Drupal • Zen Grids Friday, July 27, 12

  55. Survival Kit Designed For Style Guide Driven Design Designed For

    Sass And Compass Intentionally Simple Use whatever grid you like Just a few guides, but use whatever styles you like Friday, July 27, 12

  56. Demo Friday, July 27, 12

  57. The Future Friday, July 27, 12

  58. Survival Kit Module Will show the style guide pages from

    the standard Survival Kit Friday, July 27, 12

  59. Sass Conf Spring 2013 sassconf.com Friday, July 27, 12

  60. Sass Trainings Follow @GoTeamSass and @Zivtech for details. Friday, July

    27, 12

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

    Twitter, Dribbble & Drupal: codingdesigner github: canarymason Friday, July 27, 12