Mobile and Responsive Design with Sass

Slide 1

Slide 1 text

What is a Sass, and How Will I Know if I’m Shaking it? Friday, July 27, 12

Slide 2

Slide 2 text

Mobile and Responsive Design with Sass Friday, July 27, 12

Slide 3

Slide 3 text

I Friday, July 27, 12

Slide 4

Slide 4 text

Mobile First Friday, July 27, 12

Slide 5

Slide 5 text

The Mobile Web? Friday, July 27, 12

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Most Personal Computer Friday, July 27, 12

Slide 8

Slide 8 text

Most Personal Computer Friday, July 27, 12

Slide 9

Slide 9 text

Constraints & Capabilities • Small screens • Frequent and sporadic use. Distracted • Geolocation • Touch • Camera • Orientation Friday, July 27, 12

Slide 10

Slide 10 text

II Friday, July 27, 12

Slide 11

Slide 11 text

Responsive Web Design Friday, July 27, 12

Slide 12

Slide 12 text

My Website Totally Shrinks On Phones Friday, July 27, 12

Slide 13

Slide 13 text

Friday, July 27, 12

Slide 14

Slide 14 text

Friday, July 27, 12

Slide 15

Slide 15 text

Fluid Grids Proportional grids Use %, not px Friday, July 27, 12

Slide 16

Slide 16 text

Fluid Images src set The future. Get used to it? Friday, July 27, 12

Slide 17

Slide 17 text

Fluid Images simple css The best we have. For now. Friday, July 27, 12

Slide 18

Slide 18 text

Breaking News mattwilcox.net/archive/entry/id/1091 Friday, July 27, 12

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Properties • width • height • device-width • device-height • orientation • aspect-ratio • device-aspect- ratio • color • color-index • monochrome • resolution • scan • grid Friday, July 27, 12

Slide 21

Slide 21 text

Feature Detection Friday, July 27, 12

Slide 22

Slide 22 text

Modernizr • modernizr.com • use javascript to test for browser features • write a css class to if that feature exists Friday, July 27, 12

Slide 23

Slide 23 text

Modernizr Friday, July 27, 12

Slide 24

Slide 24 text

III Friday, July 27, 12

Slide 25

Slide 25 text

Sass CSS Preprocessor Adds more power to the process of writing CSS sass-lang.com Friday, July 27, 12

Slide 26

Slide 26 text

Variables Sass Compiled CSS Friday, July 27, 12

Slide 27

Slide 27 text

Nesting Sass Compiled CSS Friday, July 27, 12

Slide 28

Slide 28 text

Mixins Sass Mixin Compiled CSS Sass Friday, July 27, 12

Slide 29

Slide 29 text

Extend Use in Sass Compiled CSS Setup Extendables Friday, July 27, 12

Slide 30

Slide 30 text

Media Bubbling Compiled CSS Sass Friday, July 27, 12

Slide 31

Slide 31 text

Compass Utilities CSS3 Images Sprites More Friday, July 27, 12

Slide 32

Slide 32 text

Compass Extensions Friday, July 27, 12

Slide 33

Slide 33 text

Sassy Buttons That fancy CSS3 button look with none of the work jaredhardy.com/sassy-buttons Friday, July 27, 12

Slide 34

Slide 34 text

Modular Scale Calculate typographic scales github.com/scottkellum/modular-scale Friday, July 27, 12

Slide 35

Slide 35 text

Survival Kit A Toolset for Designing Web Sites in the Browser thecodingdesigner.com/survivalkit Friday, July 27, 12

Slide 36

Slide 36 text

Susy Responsive grids for Compass susy.oddbird.net Friday, July 27, 12

Slide 37

Slide 37 text

Singularity Grid ALPHA Inﬁnite possibilities. Impossibly small. singularity.gs Friday, July 27, 12

Slide 38

Slide 38 text

Crazy things sassy mother eﬃng text shadow sassymothereﬃngtextshadow.com Friday, July 27, 12

Slide 39

Slide 39 text

Friday, July 27, 12

Slide 40

Slide 40 text

Friday, July 27, 12

Slide 41

Slide 41 text

Breakpoint Really simple media queries in Sass breakpoint-sass.com Friday, July 27, 12

Slide 42

Slide 42 text

Breakpoint Use in Sass Compiled CSS Setup Variables Friday, July 27, 12

Slide 43

Slide 43 text

Breakpoint Use in Sass Compiled CSS Setup Variables Friday, July 27, 12

Slide 44

Slide 44 text

IV Friday, July 27, 12

Slide 45

Slide 45 text

Drupal Great Content Management System. Bad Templates. Friday, July 27, 12

Slide 46

Slide 46 text

What is the best starter theme for responsive web design in Drupal? Friday, July 27, 12

Slide 47

Slide 47 text

Friday, July 27, 12

Slide 48

Slide 48 text

Friday, July 27, 12

Slide 49

Slide 49 text

Avoid Cookie Cutters & Assertive Frameworks Friday, July 27, 12

Slide 50

Slide 50 text

V Friday, July 27, 12

Slide 51

Slide 51 text

Putting It Together Friday, July 27, 12

Slide 52

Slide 52 text

Goals Custom designs for your needs and content. Create the mobile experience ﬁrst. Have our content meet any device. Be future friendly. Acknowledge and embrace unpredictability. Friday, July 27, 12

Slide 53

Slide 53 text

Custom Is Your Friend Start with no theme, or a “bare-bones” theme. Friday, July 27, 12

Slide 54

Slide 54 text

Zen + Zen Grids • Zen - Tried and tested in the Drupal • Zen Grids Friday, July 27, 12

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

Demo Friday, July 27, 12

Slide 57

Slide 57 text

The Future Friday, July 27, 12

Slide 58

Slide 58 text

Survival Kit Module Will show the style guide pages from the standard Survival Kit Friday, July 27, 12

Slide 59

Slide 59 text

Sass Conf Spring 2013 sassconf.com Friday, July 27, 12

Slide 60

Slide 60 text

Sass Trainings Follow @GoTeamSass and @Zivtech for details. Friday, July 27, 12

Slide 61

Slide 61 text

Questions & Contact Zivtech zivtech.com Mason Wendell - Creative Director Twitter, Dribbble & Drupal: codingdesigner github: canarymason Friday, July 27, 12