Downloaded 27 times
Uploaded bynyccamp
Mobile and Responsive Design with Sass
The document discusses mobile and responsive design using Sass, a CSS preprocessor that enhances the power of writing CSS through features like variables, nesting, and mixins. It emphasizes the importance of mobile-first approaches and responsive design techniques such as fluid grids and media queries to create adaptable web experiences. Additionally, it mentions resources and tools for optimizing web design, particularly in the context of Drupal, and the need for custom, future-friendly designs.
More Related Content
Similar to Mobile and Responsive Design with Sass
Mobile and Responsive Design with Sass
- 1. Mobile and Responsive Design with Sass
- 2. What is aSass, and How Will I Know if I’m Shaking it?
- 3.
- 4.
- 5.
- 6. 371k Babies are borneach day Compare that to 1.5 million mobile device activations http://www.lukew.com/presos/preso.asp?26
- 7.
- 8.
- 9. Constraints: Space, Attention • Small screens • Frequent and sporadic use. Distracted
- 10. Capabilities: New Api's • Geolocation • Touch • Camera • Orientation
- 11. Your phone seesyou when you’re sleeping.
- 12.
- 13.
- 14. My Website Totally ShrinksOn Phones
- 15. Fluid Grids Proportionalgrids Use %, not px
- 16. Fluid Images src set The future. Get used to it?
- 17. Fluid Images simple css The best we have. For now.
- 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. Current Properties • width • color • height • color-index • device-width • monochrome • device-height • resolution • orientation • scan • aspect-ratio • grid • device-aspect- ratio
- 20.
- 21. Modernizr • modernizr.com • use javascript to test for browser features • write a css class to <html> if that feature exists
- 22.
- 23.
- 24. Sass CSS Preprocessor Adds more power to the process of writing CSS sass-lang.com
- 25. Variables Sass Compiled CSS
- 26. Nesting Sass Compiled CSS
- 27. Mixins Sass Compiled CSS Sass Mixin
- 28. Extend Setup Extendables Use in Sass Compiled CSS
- 29. Media Bubbling Sass Compiled CSS
- 30. Compass Utilities CSS3 Images Sprites More
- 31.
- 32. Sassy Buttons Thatfancy CSS3 button look with none of the work http://jaredhardy.com/sassy-buttons/
- 33. Modular Scale Calculate typographic scales github.com/scottkellum/modular-scale
- 34. Survival Kit A Toolsetfor Designing Web Sites in the Browser thecodingdesigner.com/survivalkit
- 35. Susy Responsive grids forCompass susy.oddbird.net
- 36. Singularity Grid ALPHA Infinite possibilities. Impossibly small. singularity.gs
- 37. Breakpoint Really simple mediaqueries in Sass breakpoint-sass.com
- 38. Crazy things sassy mothereffing text shadow sassymothereffingtextshadow.com
- 41.
- 42. Drupal Great Content ManagementSystem. Bad Templates.
- 43. What is thebest starter theme for responsive web design in Drupal?
- 46. Avoid Cookie Cutters & Assertive Frameworks
- 47.
- 48.
- 49. Goals Custom designs foryour needs and content. Create the mobile experience first. Have our content meet any device. Be future friendly. Acknowledge and embrace unpredictability.
- 50. Custom Is YourFriend Start with no theme, or a “bare-bones” theme.
- 51. Zen + ZenGrids • Zen - Tried and tested in the Drupal • Zen Grids
- 52. Survival Kit Designed ForStyle 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
- 53.
- 54.
- 55. Survival Kit Module Will show the style guide pages from the standard Survival Kit
- 56. Sass Conf Spring 2013 sassconf.com
- 57. Sass Trainings Follow @GoTeamSass and @Zivtech for details.
- 58. Questions & Contact Zivtech zivtech.com Mason Wendell - Creative Director Twitter, Dribbble & Drupal: codingdesigner github: canarymason