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

Mobile and Responsive Design with Sass

Avatar for canarymason canarymason
July 27, 2012
Design
3
250

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
400
The Coding Designer's Survival Kit
Avatar for canarymason canarymason
8
500

Other Decks in Design

See All in Design
「UXとUIの違い」v2
Avatar for Shirasu3 shirasu3
0
250
「批評」を習慣にするための仕組みと場のデザイン/uxdesign202507
Avatar for 日本経済新聞社 エンジニア採用事務局 nikkei_engineer_recruiting
6
860
地理院地図をもっと楽しく！れきちず新機能のご紹介
Avatar for Hajime Kato hjmkth
1
160
役立つシステムを作るためのAI活用
Avatar for 神崎 kanzaki
0
100
【PoCで終わらない】運用フェーズまで見据えたAI駆動UIデザイン/フロントエンド開発実践
Avatar for 北見海貴 kitami
1
380
一次体験を起点にしたUX改善の取り組み / Direct Experience Driven UX Improvements
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
0
190
Design Studio Deck | インクルーシブデザインスタジオCULUUM
Avatar for インクルーシブデザインスタジオCULUMU culumu
3
4.2k
デザインから開発まで一貫したデザインシステムを構築するベストプラクティス / Best Practices for Building a Consistent Design System from Design to Development
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
550
ブランドパーソナリティ言語化における生成AI活用の実際
Avatar for Hiroki Hosaka h0sa
0
310
不確実性の時代にみんなで試したFigma × MCP × Cursor ハンズオン
Avatar for PERSOL CAREER Dev | techtekt techtekt
PRO
7
900
第4回関東Kaggler会LT HCD-Net人間中心設計スペシャリストが語るNotebookメダルの取り方
Avatar for Isao utm529f
0
1.2k
AI時代に、僕たちデザイナーはどう歩むか
Avatar for kim kazuhirokimura
0
390

Featured

See All Featured
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
248
1.3M
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
514
110k
Writing Fast Ruby
Avatar for Erik Berlin sferik
629
62k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
462
33k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
301
51k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.2k
Scaling GitHub
Avatar for Zach Holman holman
463
140k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
49
14k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
56
14k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
224
10k

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