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

Mobile and Responsive Design with Sass

00065382e220ffbc1f20668c1ac3454a?s=47 canarymason
July 27, 2012
Design
3
170

Mobile and Responsive Design with Sass

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

00065382e220ffbc1f20668c1ac3454a?s=128

canarymason

July 27, 2012
Tweet

More Decks by canarymason

See All by canarymason
00065382e220ffbc1f20668c1ac3454a?s=48 canarymason
3
290
00065382e220ffbc1f20668c1ac3454a?s=48 canarymason
8
380

Other Decks in Design

See All in Design
859e8975e599ea0d6d9e84eb9e35bdb6?s=48 3mp
0
530
A6164c2cb62281a24febe6f722775b98?s=48 miterashishohei
2
910
A8cc43c01d74d9e6c05542c3fddf9204?s=48 agirlwithapen
0
220
Bd2cd58cea35f0c4d8965329b8a9d252?s=48 mtym27
5
4.3k
25448e5eb61d4fd7b35ed73d722f9ad9?s=48 sawa_zen
1
530
B178bf6ab8dcf16d726d0a4479d0d6a2?s=48 jvmal
0
190
C31f714e8a8984e1bc3c1e402af1d7c1?s=48 bemu
2
640
97cd6dacd55edd934728a50a583e0507?s=48 depot_branding
0
110
Ca63f6ee64787c337d905b069085324c?s=48 juliannaromero
0
170
Ca63f6ee64787c337d905b069085324c?s=48 juliannaromero
0
150
92151711459a4e3a191f791238f6259d?s=48 chiemitaki
0
1.2k
372b0d6ab90110521a5d3aa09f736abc?s=48 seathinner
1
200

Featured

See All Featured
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
324
54k
Aff5641764408271f7bc398f2097edd0?s=48 denniskardys
222
120k
9128d500301ae51524e887bb680f471d?s=48 caitiem20
314
18k
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
443
29k
170b760e0147792d0140e59ec78e9893?s=48 eitanlees
119
11k
39488f9d172ab92fd352f2cd7b73258d?s=48 mza
82
4.4k
48c098b6579220a67a6ba949be6e4b5a?s=48 revolveconf
203
9.9k
24fc194843a71f10949be18d5a692682?s=48 gr2m
86
11k
C620790ae5bf5b50c245b2e0ef95f338?s=48 deanohume
294
28k
7edec06b5435e0dac07a353b2cc26253?s=48 geeforr
335
29k
Dafc4723e9a1c067796c0fec6f509774?s=48 lemiorhan
633
49k
7559f6cff1f5efc2d210965febd4d71c?s=48 bermonpainter
348
27k

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