Download - Mobile and Responsive Design with Sass
![Page 1: Mobile and Responsive Design with Sass](https://reader034.vdocuments.net/reader034/viewer/2022052410/5557997ad8b42a4a5d8b45ec/html5/thumbnails/1.jpg)
Mobile and Responsive Design
with Sass
![Page 2: Mobile and Responsive Design with Sass](https://reader034.vdocuments.net/reader034/viewer/2022052410/5557997ad8b42a4a5d8b45ec/html5/thumbnails/2.jpg)
What is a Sass, and How Will I Know if
I’m Shaking it?
![Page 3: Mobile and Responsive Design with Sass](https://reader034.vdocuments.net/reader034/viewer/2022052410/5557997ad8b42a4a5d8b45ec/html5/thumbnails/3.jpg)
I
![Page 4: Mobile and Responsive Design with Sass](https://reader034.vdocuments.net/reader034/viewer/2022052410/5557997ad8b42a4a5d8b45ec/html5/thumbnails/4.jpg)
Mobile First
![Page 5: Mobile and Responsive Design with Sass](https://reader034.vdocuments.net/reader034/viewer/2022052410/5557997ad8b42a4a5d8b45ec/html5/thumbnails/5.jpg)
What Is The Mobile Web?
![Page 6: Mobile and Responsive Design with Sass](https://reader034.vdocuments.net/reader034/viewer/2022052410/5557997ad8b42a4a5d8b45ec/html5/thumbnails/6.jpg)
371k Babies are born each day
Compare that to 1.5 million mobile device activations
http://www.lukew.com/presos/preso.asp?26
![Page 7: Mobile and Responsive Design with Sass](https://reader034.vdocuments.net/reader034/viewer/2022052410/5557997ad8b42a4a5d8b45ec/html5/thumbnails/7.jpg)
Most Personal Computer
![Page 8: Mobile and Responsive Design with Sass](https://reader034.vdocuments.net/reader034/viewer/2022052410/5557997ad8b42a4a5d8b45ec/html5/thumbnails/8.jpg)
Most Personal Computer
![Page 9: Mobile and Responsive Design with Sass](https://reader034.vdocuments.net/reader034/viewer/2022052410/5557997ad8b42a4a5d8b45ec/html5/thumbnails/9.jpg)
Constraints: Space, Attention
• Small screens
• Frequent and sporadic use. Distracted
![Page 10: Mobile and Responsive Design with Sass](https://reader034.vdocuments.net/reader034/viewer/2022052410/5557997ad8b42a4a5d8b45ec/html5/thumbnails/10.jpg)
Capabilities: New Api's
• Geolocation
• Touch
• Camera
• Orientation
![Page 11: Mobile and Responsive Design with Sass](https://reader034.vdocuments.net/reader034/viewer/2022052410/5557997ad8b42a4a5d8b45ec/html5/thumbnails/11.jpg)
Your phone sees you when you’re
sleeping.
![Page 12: Mobile and Responsive Design with Sass](https://reader034.vdocuments.net/reader034/viewer/2022052410/5557997ad8b42a4a5d8b45ec/html5/thumbnails/12.jpg)
II
![Page 13: Mobile and Responsive Design with Sass](https://reader034.vdocuments.net/reader034/viewer/2022052410/5557997ad8b42a4a5d8b45ec/html5/thumbnails/13.jpg)
Responsive Web Design
![Page 14: Mobile and Responsive Design with Sass](https://reader034.vdocuments.net/reader034/viewer/2022052410/5557997ad8b42a4a5d8b45ec/html5/thumbnails/14.jpg)
My Website Totally Shrinks On Phones
![Page 15: Mobile and Responsive Design with Sass](https://reader034.vdocuments.net/reader034/viewer/2022052410/5557997ad8b42a4a5d8b45ec/html5/thumbnails/15.jpg)
Fluid GridsProportional grids
Use %, not px
![Page 16: Mobile and Responsive Design with Sass](https://reader034.vdocuments.net/reader034/viewer/2022052410/5557997ad8b42a4a5d8b45ec/html5/thumbnails/16.jpg)
Fluid Imagessrc set
The future. Get used to it?
![Page 17: Mobile and Responsive Design with Sass](https://reader034.vdocuments.net/reader034/viewer/2022052410/5557997ad8b42a4a5d8b45ec/html5/thumbnails/17.jpg)
Fluid Imagessimple css
The best we have. For now.
![Page 18: Mobile and Responsive Design with Sass](https://reader034.vdocuments.net/reader034/viewer/2022052410/5557997ad8b42a4a5d8b45ec/html5/thumbnails/18.jpg)
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) { … }
![Page 19: Mobile and Responsive Design with Sass](https://reader034.vdocuments.net/reader034/viewer/2022052410/5557997ad8b42a4a5d8b45ec/html5/thumbnails/19.jpg)
Current Properties• width
• height
• device-width
• device-height
• orientation
• aspect-ratio
• device-aspect-ratio
• color
• color-index
• monochrome
• resolution
• scan
• grid
![Page 20: Mobile and Responsive Design with Sass](https://reader034.vdocuments.net/reader034/viewer/2022052410/5557997ad8b42a4a5d8b45ec/html5/thumbnails/20.jpg)
Feature Detection
![Page 21: Mobile and Responsive Design with Sass](https://reader034.vdocuments.net/reader034/viewer/2022052410/5557997ad8b42a4a5d8b45ec/html5/thumbnails/21.jpg)
Modernizr
• modernizr.com
• use javascript to test for browser features
• write a css class to <html> if that feature exists
![Page 22: Mobile and Responsive Design with Sass](https://reader034.vdocuments.net/reader034/viewer/2022052410/5557997ad8b42a4a5d8b45ec/html5/thumbnails/22.jpg)
Modernizr
![Page 23: Mobile and Responsive Design with Sass](https://reader034.vdocuments.net/reader034/viewer/2022052410/5557997ad8b42a4a5d8b45ec/html5/thumbnails/23.jpg)
III
![Page 24: Mobile and Responsive Design with Sass](https://reader034.vdocuments.net/reader034/viewer/2022052410/5557997ad8b42a4a5d8b45ec/html5/thumbnails/24.jpg)
SassCSS Preprocessor
Adds more power to the process of writing CSS
sass-lang.com
![Page 25: Mobile and Responsive Design with Sass](https://reader034.vdocuments.net/reader034/viewer/2022052410/5557997ad8b42a4a5d8b45ec/html5/thumbnails/25.jpg)
Variables
Sass
Compiled CSS
![Page 26: Mobile and Responsive Design with Sass](https://reader034.vdocuments.net/reader034/viewer/2022052410/5557997ad8b42a4a5d8b45ec/html5/thumbnails/26.jpg)
Nesting
Sass
Compiled CSS
![Page 27: Mobile and Responsive Design with Sass](https://reader034.vdocuments.net/reader034/viewer/2022052410/5557997ad8b42a4a5d8b45ec/html5/thumbnails/27.jpg)
Mixins
Sass Mixin
Compiled CSSSass
![Page 28: Mobile and Responsive Design with Sass](https://reader034.vdocuments.net/reader034/viewer/2022052410/5557997ad8b42a4a5d8b45ec/html5/thumbnails/28.jpg)
Extend
Use in Sass
Compiled CSS
Setup Extendables
![Page 29: Mobile and Responsive Design with Sass](https://reader034.vdocuments.net/reader034/viewer/2022052410/5557997ad8b42a4a5d8b45ec/html5/thumbnails/29.jpg)
Media Bubbling
Compiled CSSSass
![Page 30: Mobile and Responsive Design with Sass](https://reader034.vdocuments.net/reader034/viewer/2022052410/5557997ad8b42a4a5d8b45ec/html5/thumbnails/30.jpg)
CompassUtilities
CSS3
Images
Sprites
More
![Page 31: Mobile and Responsive Design with Sass](https://reader034.vdocuments.net/reader034/viewer/2022052410/5557997ad8b42a4a5d8b45ec/html5/thumbnails/31.jpg)
Compass Extensions
![Page 32: Mobile and Responsive Design with Sass](https://reader034.vdocuments.net/reader034/viewer/2022052410/5557997ad8b42a4a5d8b45ec/html5/thumbnails/32.jpg)
Sassy ButtonsThat fancy CSS3 button look with
none of the work
http://jaredhardy.com/sassy-buttons/
![Page 33: Mobile and Responsive Design with Sass](https://reader034.vdocuments.net/reader034/viewer/2022052410/5557997ad8b42a4a5d8b45ec/html5/thumbnails/33.jpg)
Modular ScaleCalculate typographic scales
github.com/scottkellum/modular-scale
![Page 34: Mobile and Responsive Design with Sass](https://reader034.vdocuments.net/reader034/viewer/2022052410/5557997ad8b42a4a5d8b45ec/html5/thumbnails/34.jpg)
Survival KitA Toolset for Designing Web Sites
in the Browser
thecodingdesigner.com/survivalkit
![Page 35: Mobile and Responsive Design with Sass](https://reader034.vdocuments.net/reader034/viewer/2022052410/5557997ad8b42a4a5d8b45ec/html5/thumbnails/35.jpg)
SusyResponsive grids for Compass
susy.oddbird.net
![Page 36: Mobile and Responsive Design with Sass](https://reader034.vdocuments.net/reader034/viewer/2022052410/5557997ad8b42a4a5d8b45ec/html5/thumbnails/36.jpg)
Singularity GridALPHA
Infinite possibilities. Impossibly small.
singularity.gs
![Page 37: Mobile and Responsive Design with Sass](https://reader034.vdocuments.net/reader034/viewer/2022052410/5557997ad8b42a4a5d8b45ec/html5/thumbnails/37.jpg)
BreakpointReally simple media queries in Sass
breakpoint-sass.com
![Page 38: Mobile and Responsive Design with Sass](https://reader034.vdocuments.net/reader034/viewer/2022052410/5557997ad8b42a4a5d8b45ec/html5/thumbnails/38.jpg)
Crazy thingssassy mother effing text shadow
sassymothereffingtextshadow.com
![Page 39: Mobile and Responsive Design with Sass](https://reader034.vdocuments.net/reader034/viewer/2022052410/5557997ad8b42a4a5d8b45ec/html5/thumbnails/39.jpg)
![Page 40: Mobile and Responsive Design with Sass](https://reader034.vdocuments.net/reader034/viewer/2022052410/5557997ad8b42a4a5d8b45ec/html5/thumbnails/40.jpg)
![Page 41: Mobile and Responsive Design with Sass](https://reader034.vdocuments.net/reader034/viewer/2022052410/5557997ad8b42a4a5d8b45ec/html5/thumbnails/41.jpg)
IV
![Page 42: Mobile and Responsive Design with Sass](https://reader034.vdocuments.net/reader034/viewer/2022052410/5557997ad8b42a4a5d8b45ec/html5/thumbnails/42.jpg)
DrupalGreat Content Management System.
Bad Templates.
![Page 43: Mobile and Responsive Design with Sass](https://reader034.vdocuments.net/reader034/viewer/2022052410/5557997ad8b42a4a5d8b45ec/html5/thumbnails/43.jpg)
What is the best starter theme for responsive web
design in Drupal?
![Page 44: Mobile and Responsive Design with Sass](https://reader034.vdocuments.net/reader034/viewer/2022052410/5557997ad8b42a4a5d8b45ec/html5/thumbnails/44.jpg)
![Page 45: Mobile and Responsive Design with Sass](https://reader034.vdocuments.net/reader034/viewer/2022052410/5557997ad8b42a4a5d8b45ec/html5/thumbnails/45.jpg)
![Page 46: Mobile and Responsive Design with Sass](https://reader034.vdocuments.net/reader034/viewer/2022052410/5557997ad8b42a4a5d8b45ec/html5/thumbnails/46.jpg)
Avoid Cookie Cutters &
Assertive Frameworks
![Page 47: Mobile and Responsive Design with Sass](https://reader034.vdocuments.net/reader034/viewer/2022052410/5557997ad8b42a4a5d8b45ec/html5/thumbnails/47.jpg)
V
![Page 48: Mobile and Responsive Design with Sass](https://reader034.vdocuments.net/reader034/viewer/2022052410/5557997ad8b42a4a5d8b45ec/html5/thumbnails/48.jpg)
Putting It Together
![Page 49: Mobile and Responsive Design with Sass](https://reader034.vdocuments.net/reader034/viewer/2022052410/5557997ad8b42a4a5d8b45ec/html5/thumbnails/49.jpg)
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.
![Page 50: Mobile and Responsive Design with Sass](https://reader034.vdocuments.net/reader034/viewer/2022052410/5557997ad8b42a4a5d8b45ec/html5/thumbnails/50.jpg)
Custom Is Your FriendStart with no theme,
or a “bare-bones” theme.
![Page 51: Mobile and Responsive Design with Sass](https://reader034.vdocuments.net/reader034/viewer/2022052410/5557997ad8b42a4a5d8b45ec/html5/thumbnails/51.jpg)
Zen + Zen Grids
• Zen - Tried and tested in the Drupal
• Zen Grids
![Page 52: Mobile and Responsive Design with Sass](https://reader034.vdocuments.net/reader034/viewer/2022052410/5557997ad8b42a4a5d8b45ec/html5/thumbnails/52.jpg)
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
![Page 53: Mobile and Responsive Design with Sass](https://reader034.vdocuments.net/reader034/viewer/2022052410/5557997ad8b42a4a5d8b45ec/html5/thumbnails/53.jpg)
Demo
![Page 54: Mobile and Responsive Design with Sass](https://reader034.vdocuments.net/reader034/viewer/2022052410/5557997ad8b42a4a5d8b45ec/html5/thumbnails/54.jpg)
The Future
![Page 55: Mobile and Responsive Design with Sass](https://reader034.vdocuments.net/reader034/viewer/2022052410/5557997ad8b42a4a5d8b45ec/html5/thumbnails/55.jpg)
Survival Kit ModuleWill show the style guide pages from
the standard Survival Kit
![Page 56: Mobile and Responsive Design with Sass](https://reader034.vdocuments.net/reader034/viewer/2022052410/5557997ad8b42a4a5d8b45ec/html5/thumbnails/56.jpg)
Sass ConfSpring 2013
sassconf.com
![Page 57: Mobile and Responsive Design with Sass](https://reader034.vdocuments.net/reader034/viewer/2022052410/5557997ad8b42a4a5d8b45ec/html5/thumbnails/57.jpg)
Sass TrainingsFollow
@GoTeamSass and @Zivtech
for details.
![Page 58: Mobile and Responsive Design with Sass](https://reader034.vdocuments.net/reader034/viewer/2022052410/5557997ad8b42a4a5d8b45ec/html5/thumbnails/58.jpg)
Questions & Contact
Zivtech zivtech.com
Mason Wendell - Creative Director
Twitter, Dribbble & Drupal: codingdesigner
github: canarymason