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

Mobile and Responsive Design with Sass

canarymason
July 27, 2012

Mobile and Responsive Design with Sass

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

canarymason

July 27, 2012
Tweet

More Decks by canarymason

Other Decks in Design

Transcript

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

    I’m Shaking it? Friday, July 27, 12
  2. 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
  3. Constraints & Capabilities • Small screens • Frequent and sporadic

    use. Distracted • Geolocation • Touch • Camera • Orientation Friday, July 27, 12
  4. 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
  5. Properties • width • height • device-width • device-height •

    orientation • aspect-ratio • device-aspect- ratio • color • color-index • monochrome • resolution • scan • grid Friday, July 27, 12
  6. Modernizr • modernizr.com • use javascript to test for browser

    features • write a css class to <html> if that feature exists Friday, July 27, 12
  7. Sass CSS Preprocessor Adds more power to the process of

    writing CSS sass-lang.com Friday, July 27, 12
  8. Sassy Buttons That fancy CSS3 button look with none of

    the work jaredhardy.com/sassy-buttons Friday, July 27, 12
  9. Survival Kit A Toolset for Designing Web Sites in the

    Browser thecodingdesigner.com/survivalkit Friday, July 27, 12
  10. 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
  11. Custom Is Your Friend Start with no theme, or a

    “bare-bones” theme. Friday, July 27, 12
  12. Zen + Zen Grids • Zen - Tried and tested

    in the Drupal • Zen Grids Friday, July 27, 12
  13. 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
  14. Survival Kit Module Will show the style guide pages from

    the standard Survival Kit Friday, July 27, 12
  15. Questions & Contact Zivtech zivtech.com Mason Wendell - Creative Director

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