Mobile andResponsive Design    with Sass
What is a Sass, andHow Will I Know if I’m Shaking it?
I
MobileFirst
What IsThe Mobile Web?
371k Babiesare born each day       Compare that to 1.5 million       mobile device activationshttp://www.lukew.com/presos/...
Most Personal Computer
Most Personal Computer
Constraints:     Space, Attention•   Small screens•   Frequent and sporadic use. Distracted
Capabilities:             New Apis•   Geolocation•   Touch•   Camera•   Orientation
Your phone sees you    when you’re      sleeping.
II
ResponsiveWeb Design
My Website TotallyShrinks On Phones
Fluid Grids Proportional grids   Use %, not px
Fluid Images          src setThe future. Get used to it?
Fluid Images        simple cssThe best we have. For now.
Media Queries                          Magic!•   @media screen and (min-width: 400px) { … }•   @media screen and (min-widt...
Current Properties•   width            •   color•   height           •   color-index•   device-width     •   monochrome•  ...
FeatureDetection
Modernizr•   modernizr.com•   use javascript to test for browser features•   write a css class to <html> if that feature  ...
Modernizr
III
Sass             CSS PreprocessorAdds more power to the process of writing CSS                sass-lang.com
VariablesSass       Compiled CSS
NestingSass       Compiled CSS
MixinsSass                      Compiled CSSSass Mixin
ExtendSetup Extendables                    Use in Sass                    Compiled CSS
Media BubblingSass      Compiled CSS
Compass  Utilities   CSS3  Images  Sprites   More
Compass Extensions
Sassy Buttons That fancy CSS3 button look with         none of the workhttp://jaredhardy.com/sassy-buttons/
Modular Scale    Calculate typographic scalesgithub.com/scottkellum/modular-scale
Survival KitA Toolset for Designing Web Sites         in the Browserthecodingdesigner.com/survivalkit
SusyResponsive grids for Compass      susy.oddbird.net
Singularity Grid               ALPHAInfinite possibilities. Impossibly small.             singularity.gs
BreakpointReally simple media queries in Sass       breakpoint-sass.com
Crazy thingssassy mother effing text shadowsassymothereffingtextshadow.com
IV
DrupalGreat Content Management System.         Bad Templates.
What is the beststarter theme for responsive webdesign in Drupal?
Avoid Cookie Cutters          &Assertive Frameworks
V
Putting It Together
GoalsCustom designs for your needs and content.    Create the mobile experience first.    Have our content meet any device....
Custom Is Your Friend       Start with no theme,     or a “bare-bones” theme.
Zen + Zen Grids•   Zen - Tried and tested in the Drupal•   Zen Grids
Survival KitDesigned For Style Guide Driven Design   Designed For Sass And Compass         Intentionally Simple      Use w...
Demo
The Future
Survival Kit Module Will show the style guide pages from       the standard Survival Kit
Sass Conf  Spring 2013 sassconf.com
Sass Trainings         Follow@GoTeamSass and @Zivtech       for details.
Questions & Contact           Zivtech zivtech.com    Mason Wendell - Creative DirectorTwitter, Dribbble & Drupal: codingde...
Mobile and Responsive Design with Sass
Mobile and Responsive Design with Sass
Mobile and Responsive Design with Sass
Mobile and Responsive Design with Sass
Upcoming SlideShare
Loading in …5
×

Mobile and Responsive Design with Sass

3,463 views

Published on

Is your site ready for the mobile web? Are you sure? Go ahead, check it on your phone, and your kid's phone, and a tablet, and some Android dealies, and a Bleakberry. And a TV or two. I'll wait.

That was an eye-opener, right?

Web design and front end development has never been more complex than it is now, and it's likely to get worse before it gets better. Should you design your site "Mobile First"? How about "Adaptive" or "Responsive"? What's the difference between those again? I want to talk about why you might want to choose these approaches to your project.

CSS is also not really up to the task of managing all this complexity. Sure, it *can* do it, but pure CSS strains almost to the breaking point under the pressure. So let's welcome Sass to the party. Sass is a CSS preprocessor that gives CSS authors the tools we've been aching for in creating and managing large and complex CSS projects. We'll cover a few of the Sass basics, but the real value here is in the more sophisticated tools that let you manage all the moving parts necessary in creating all this new-fangled wizardry.

We'll cover:

- Mobile First
- Adaptive Design
- Responsive Design
- Stand-alone mobile options
- Sass
- Mobile-focused tools
- Compass
- Survival Kit
- Susy

Published in: Technology
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total views
3,463
On SlideShare
0
From Embeds
0
Number of Embeds
355
Actions
Shares
0
Downloads
26
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

Mobile and Responsive Design with Sass

  1. 1. Mobile andResponsive Design with Sass
  2. 2. What is a Sass, andHow Will I Know if I’m Shaking it?
  3. 3. I
  4. 4. MobileFirst
  5. 5. What IsThe Mobile Web?
  6. 6. 371k Babiesare born each day Compare that to 1.5 million mobile device activationshttp://www.lukew.com/presos/preso.asp?26
  7. 7. Most Personal Computer
  8. 8. Most Personal Computer
  9. 9. Constraints: Space, Attention• Small screens• Frequent and sporadic use. Distracted
  10. 10. Capabilities: New Apis• Geolocation• Touch• Camera• Orientation
  11. 11. Your phone sees you when you’re sleeping.
  12. 12. II
  13. 13. ResponsiveWeb Design
  14. 14. My Website TotallyShrinks On Phones
  15. 15. Fluid Grids Proportional grids Use %, not px
  16. 16. Fluid Images src setThe future. Get used to it?
  17. 17. Fluid Images simple cssThe best we have. For now.
  18. 18. 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) { … }
  19. 19. Current Properties• width • color• height • color-index• device-width • monochrome• device-height • resolution• orientation • scan• aspect-ratio • grid• device-aspect- ratio
  20. 20. FeatureDetection
  21. 21. Modernizr• modernizr.com• use javascript to test for browser features• write a css class to <html> if that feature exists
  22. 22. Modernizr
  23. 23. III
  24. 24. Sass CSS PreprocessorAdds more power to the process of writing CSS sass-lang.com
  25. 25. VariablesSass Compiled CSS
  26. 26. NestingSass Compiled CSS
  27. 27. MixinsSass Compiled CSSSass Mixin
  28. 28. ExtendSetup Extendables Use in Sass Compiled CSS
  29. 29. Media BubblingSass Compiled CSS
  30. 30. Compass Utilities CSS3 Images Sprites More
  31. 31. Compass Extensions
  32. 32. Sassy Buttons That fancy CSS3 button look with none of the workhttp://jaredhardy.com/sassy-buttons/
  33. 33. Modular Scale Calculate typographic scalesgithub.com/scottkellum/modular-scale
  34. 34. Survival KitA Toolset for Designing Web Sites in the Browserthecodingdesigner.com/survivalkit
  35. 35. SusyResponsive grids for Compass susy.oddbird.net
  36. 36. Singularity Grid ALPHAInfinite possibilities. Impossibly small. singularity.gs
  37. 37. BreakpointReally simple media queries in Sass breakpoint-sass.com
  38. 38. Crazy thingssassy mother effing text shadowsassymothereffingtextshadow.com
  39. 39. IV
  40. 40. DrupalGreat Content Management System. Bad Templates.
  41. 41. What is the beststarter theme for responsive webdesign in Drupal?
  42. 42. Avoid Cookie Cutters &Assertive Frameworks
  43. 43. V
  44. 44. Putting It Together
  45. 45. GoalsCustom designs for your needs and content. Create the mobile experience first. Have our content meet any device. Be future friendly. Acknowledge and embrace unpredictability.
  46. 46. Custom Is Your Friend Start with no theme, or a “bare-bones” theme.
  47. 47. Zen + Zen Grids• Zen - Tried and tested in the Drupal• Zen Grids
  48. 48. Survival KitDesigned 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
  49. 49. Demo
  50. 50. The Future
  51. 51. Survival Kit Module Will show the style guide pages from the standard Survival Kit
  52. 52. Sass Conf Spring 2013 sassconf.com
  53. 53. Sass Trainings Follow@GoTeamSass and @Zivtech for details.
  54. 54. Questions & Contact Zivtech zivtech.com Mason Wendell - Creative DirectorTwitter, Dribbble & Drupal: codingdesigner github: canarymason

×