Slide 1

Slide 1 text

SERVING RWD STYLES @bencallahan Monday, June 24, 13

Slide 2

Slide 2 text

Monday, June 24, 13

Slide 3

Slide 3 text

Monday, June 24, 13

Slide 4

Slide 4 text

CODE AND PROJECT STRUCTURE SERVING RWD STYLES Monday, June 24, 13

Slide 5

Slide 5 text

SERVING RWD STYLES Major Approaches ‣ Single CSS File ‣ Multiple CSS Files ‣ Breakpoint Based Partials ‣ Module Based Partials Monday, June 24, 13

Slide 6

Slide 6 text

SERVING RWD STYLES Major Approaches ‣ Single CSS File ‣ Multiple CSS Files ‣ Breakpoint Based Partials ‣ Module Based Partials CSS PREPROCESSING FTW! Monday, June 24, 13

Slide 7

Slide 7 text

The Example 100% 50% 30% Monday, June 24, 13

Slide 8

Slide 8 text

SERVING RWD STYLES Major Approaches ‣ Single CSS File ‣ Multiple CSS Files ‣ Breakpoint Based Partials ‣ Module Based Partials Monday, June 24, 13

Slide 9

Slide 9 text

Single CSS File HTML CSS Start with styles applied to all Styles scoped to a media query Styles scoped to another media query Monday, June 24, 13

Slide 10

Slide 10 text

/* styles.css */ aside { color: #333; width: 100%; } Single CSS File Monday, June 24, 13

Slide 11

Slide 11 text

/* styles.css */ aside { color: #333; width: 100%; } /* if the viewport width is 40em or greater */ Single CSS File Monday, June 24, 13

Slide 12

Slide 12 text

PAUSE: MEDIA QUERIES Monday, June 24, 13

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Media Types all braille, embossed, speech handheld, projection, screen, tv print tty http://www.w3.org/TR/CSS21/media.html#media-types Monday, June 24, 13

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Media Features width, height device-width, device-height orientation aspect-ratio, device-aspect-ratio color, color-index, monochrome resolution, scan, grid http://www.w3.org/TR/css3-mediaqueries Monday, June 24, 13

Slide 18

Slide 18 text

Single CSS File HTML CSS Start with styles applied to all Styles scoped to a media query Styles scoped to another media query Monday, June 24, 13

Slide 19

Slide 19 text

Small Viewport Width First HTML CSS Smallest styles Wider styles (mq) Even wider styles (mq) Super wide styles (mq) Monday, June 24, 13

Slide 20

Slide 20 text

Large Viewport Width First HTML CSS Widest styles Wide styles (mq) Narrow styles (mq) Very narrow styles (mq) Monday, June 24, 13

Slide 21

Slide 21 text

/* styles.css */ aside { color: #333; width: 100%; } /* if the viewport width is 40em or greater */ Single CSS File Monday, June 24, 13

Slide 22

Slide 22 text

/* styles.css */ aside { color: #333; width: 100%; } /* if the viewport width is 40em or greater */ @media (min-width: 40em) { aside { width: 50%; } } Single CSS File Monday, June 24, 13

Slide 23

Slide 23 text

/* styles.css */ aside { color: #333; width: 100%; } /* if the viewport width is 40em or greater */ @media (min-width: 40em) { aside { width: 50%; } } Single CSS File Monday, June 24, 13

Slide 24

Slide 24 text

/* styles.css */ aside { color: #333; width: 100%; } /* if the viewport width is 40em or greater */ @media (min-width: 40em) { aside { width: 50%; } } /* if the viewport width is 60em or greater */ @media (min-width: 60em) { aside { width: 30%; } } Single CSS File Monday, June 24, 13

Slide 25

Slide 25 text

Single CSS File /* styles.css */ aside { color: #333; width: 100%; } /* if the viewport width is 40em or greater */ @media (min-width: 40em) { aside { width: 50%; } } /* if the viewport width is 60em or greater */ @media (min-width: 60em) { aside { width: 30%; } } Small Viewport Width First Monday, June 24, 13

Slide 26

Slide 26 text

/* styles.css */ aside { color: #333; width: 30%; } /* if the viewport width is 60em or less */ @media (max-width: 60em) { aside { width: 50%; } } /* if the viewport width is 40em or less */ @media (max-width: 40em) { aside { width: 100%; } } Single CSS File Large Viewport Width First Monday, June 24, 13

Slide 27

Slide 27 text

SERVING RWD STYLES Single CSS File ‣ Simple to implement ‣ Single request ‣ Doesn’t require a preprocessor ‣ Requires JS to serve large layout to old IE if starting with small layouts ‣ Large sites can be difficult to maintain because of the size of the single file Monday, June 24, 13

Slide 28

Slide 28 text

SERVING RWD STYLES Major Approaches ‣ Single CSS File ‣ Multiple CSS Files ‣ Breakpoint Based Partials ‣ Module Based Partials Monday, June 24, 13

Slide 29

Slide 29 text

Multiple CSS Files HTML If this browser is less than IE9... and it’s not IE Mobile... and viewport width is at least 40em... global.css all styles linear layout layout.css only styles for layout http://adactio.com/journal/4494/ Monday, June 24, 13

Slide 30

Slide 30 text

Multiple CSS Files index.html Monday, June 24, 13

Slide 31

Slide 31 text

Multiple CSS Files index.html Monday, June 24, 13

Slide 32

Slide 32 text

Multiple CSS Files index.html Monday, June 24, 13

Slide 33

Slide 33 text

Multiple CSS Files index.html Monday, June 24, 13

Slide 34

Slide 34 text

Multiple CSS Files index.html Monday, June 24, 13

Slide 35

Slide 35 text

Multiple CSS Files global.css aside { color: #333; width: 100%; } layout.css aside { width: 50%; } @media (min-width: 60em) { aside { width: 30%; } } Monday, June 24, 13

Slide 36

Slide 36 text

Multiple CSS Files global.css aside { color: #333; width: 100%; } layout.css aside { width: 50%; } @media (min-width: 60em) { aside { width: 30%; } } Monday, June 24, 13

Slide 37

Slide 37 text

SERVING RWD STYLES Multiple CSS Files ‣ Doesn’t require a preprocessor ‣ At least two requests ‣ Requires you to separate layout from other styles ‣ Allows you to start with small layouts and serve a single large layout to old IE without JS - Requests go up if you use multiple MQs Monday, June 24, 13

Slide 38

Slide 38 text

SERVING RWD STYLES Major Approaches ‣ Single CSS File ‣ Multiple CSS Files ‣ Breakpoint Based Partials ‣ Module Based Partials Monday, June 24, 13

Slide 39

Slide 39 text

Breakpoint Based Partials HTML If this browser is less than IE9... and it’s not IE Mobile... base.css all styles/MQ blocks no-mq.css MQ styles from base without the MQs http://nicolasgallagher.com/mobile-first-css-sass-and-ie/ Monday, June 24, 13

Slide 40

Slide 40 text

Breakpoint Based Partials index.html Monday, June 24, 13

Slide 41

Slide 41 text

Breakpoint Based Partials base.css aside { color: #333; width: 100%; } @media (min-width: 40em) { aside { width: 50%; } } @media (min-width: 60em) { aside { width: 30%; } } no-mq.css aside { width: 50%; } aside { width: 30%; } Monday, June 24, 13

Slide 42

Slide 42 text

Breakpoint Based Partials base.css aside { color: #333; width: 100%; } @media (min-width: 40em) { aside { width: 50%; } } @media (min-width: 60em) { aside { width: 30%; } } no-mq.css aside { width: 50%; } aside { width: 30%; } Monday, June 24, 13

Slide 43

Slide 43 text

Breakpoint Based Partials base.css aside { color: #333; width: 100%; } @media (min-width: 40em) { aside { width: 50%; } } @media (min-width: 60em) { aside { width: 30%; } } no-mq.css aside { width: 50%; } aside { width: 30%; } Monday, June 24, 13

Slide 44

Slide 44 text

Breakpoint Based Partials base.css aside { color: #333; width: 100%; } @media (min-width: 40em) { aside { width: 50%; } } @media (min-width: 60em) { aside { width: 30%; } } no-mq.css aside { width: 50%; } aside { width: 30%; } Monday, June 24, 13

Slide 45

Slide 45 text

Breakpoint Based Partials base.css aside { color: #333; width: 100%; } @media (min-width: 40em) { aside { width: 50%; } } @media (min-width: 60em) { aside { width: 30%; } } no-mq.css aside { width: 50%; } aside { width: 30%; } Monday, June 24, 13

Slide 46

Slide 46 text

Breakpoint Based Partials base.css aside { color: #333; width: 100%; } @media (min-width: 40em) { aside { width: 50%; } } @media (min-width: 60em) { aside { width: 30%; } } no-mq.css aside { width: 50%; } aside { width: 30%; } Monday, June 24, 13

Slide 47

Slide 47 text

Breakpoint Based Partials base.css aside { color: #333; width: 100%; } @media (min-width: 40em) { aside { width: 50%; } } @media (min-width: 60em) { aside { width: 30%; } } no-mq.css aside { width: 50%; } aside { width: 30%; } Monday, June 24, 13

Slide 48

Slide 48 text

Breakpoint Based Partials base.css aside { color: #333; width: 100%; } @media (min-width: 40em) { aside { width: 50%; } } @media (min-width: 60em) { aside { width: 30%; } } no-mq.css aside { width: 50%; } aside { width: 30%; } Monday, June 24, 13

Slide 49

Slide 49 text

PAUSE: CSS PREPROCESSORS Monday, June 24, 13

Slide 50

Slide 50 text

The Big Three: LESS, SASS, and Stylus Monday, June 24, 13

Slide 51

Slide 51 text

LESS ‣ Runs on Node.js ‣ Very similar syntax to SASS ‣ http://lesscss.org/ Monday, June 24, 13

Slide 52

Slide 52 text

Variables are specified with @ symbol /* .less */ @top-variable: 20px; ! #header-shadow { ! position: absolute; ! ! top: @top-variable; ! } LESS syntax Monday, June 24, 13

Slide 53

Slide 53 text

Stylus ‣ Runs on Node.js ‣ Has a flexible syntax - You can omit semi-colons, colons, and braces ‣ http://learnboost.github.com/ stylus/ Monday, June 24, 13

Slide 54

Slide 54 text

/* .styl */ top-variable = 20px ! #main-header ! position absolute ! ! top top-variable #footer { ! background: blue ! ! border 1px solid #00f; } Notice the terse, forgiving syntax. Stylus Syntax Monday, June 24, 13

Slide 55

Slide 55 text

SASS ‣ Runs on Ruby ‣ Has two syntax flavors - .scss & .sass ‣ http://sass-lang.com/ Monday, June 24, 13

Slide 56

Slide 56 text

$main-color: blue /* .scss */ #main { color: $main-color; font-size: 0.3em; } /* .sass */ #main color: $main-color font-size: 0.3em SASS Sytax Monday, June 24, 13

Slide 57

Slide 57 text

Preprocessors offer many benefits, like all of the awesome stuff Chris showed us... Monday, June 24, 13

Slide 58

Slide 58 text

/*.scss*/ @mixin border-radius( $value : 10px ) { ! -webkit-border-radius: $value; ! -moz-border-radius: $value; ! ! ! border-radius: $value; } Mixins .btn { @include border-radius(25px); } Monday, June 24, 13

Slide 59

Slide 59 text

Importing ‣ Allows you to break up your styles across files - variables, mixins, reset, all separated ‣ Better than a standard css import Monday, June 24, 13

Slide 60

Slide 60 text

this file will compile to base.css /* base.scss */ @import "compass"; @import "variables"; @import "reset"; @import "mixins"; @import "header"; @import "hero"; @import "whatever"; Importing Monday, June 24, 13

Slide 61

Slide 61 text

Breakpoint Based Partials base.css aside { color: #333; width: 100%; } @media (min-width: 40em) { aside { width: 50%; } } @media (min-width: 60em) { aside { width: 30%; } } no-mq.css aside { width: 50%; } aside { width: 30%; } Monday, June 24, 13

Slide 62

Slide 62 text

_40em.scss aside { width: 50%; } Breakpoint Based Partials base.scss @import “smallest”; @media (min-width: 40em) { @import “40em”; } @media (min-width: 60em) { @import “60em”; } no-mq.scss @import “40em”; @import “60em”; _60em.scss aside { width: 30%; } _smallest.scss aside { color: #333; width: 100%;} Monday, June 24, 13

Slide 63

Slide 63 text

SERVING RWD STYLES Breakpoint Based Partials ‣ Allows you to start with small layouts and serve large layout to old IE without JS ‣ Only 1 or 2 requests ‣ Requires preprocessor ‣ Maintenance can be complex Monday, June 24, 13

Slide 64

Slide 64 text

SERVING RWD STYLES Major Approaches ‣ Single CSS File ‣ Multiple CSS Files ‣ Breakpoint Based Partials ‣ Module Based Partials Monday, June 24, 13

Slide 65

Slide 65 text

HTML If < IE9 and not IE Mobile If >= IE9 or IE Mobile or not IE Module Based Partials no-mq.css All styles with no MQs mq.css All styles with MQs http://seesparkbox.com/foundry/there_is_no_breakpoint Monday, June 24, 13

Slide 66

Slide 66 text

Module Based Partials index.html Monday, June 24, 13

Slide 67

Slide 67 text

Module Based Partials index.html Monday, June 24, 13

Slide 68

Slide 68 text

Module Based Partials index.html Monday, June 24, 13

Slide 69

Slide 69 text

Module Based Partials index.html Monday, June 24, 13

Slide 70

Slide 70 text

Module Based Partials index.html Monday, June 24, 13

Slide 71

Slide 71 text

Module Based Partials index.html Monday, June 24, 13

Slide 72

Slide 72 text

Module Based Partials mq.css aside { color: #333; width: 100%; } @media (min-width: 40em) { aside { width: 50%; } } @media (min-width: 60em) { aside { width: 30%; } } no-mq.css aside { color: #333; width: 100%; width: 50%; width: 30%; } Monday, June 24, 13

Slide 73

Slide 73 text

Module Based Partials mq.css aside { color: #333; width: 100%; } @media (min-width: 40em) { aside { width: 50%; } } @media (min-width: 60em) { aside { width: 30%; } } no-mq.css aside { color: #333; width: 100%; width: 50%; width: 30%; } Monday, June 24, 13

Slide 74

Slide 74 text

Module Based Partials mq.css aside { color: #333; width: 100%; } @media (min-width: 40em) { aside { width: 50%; } } @media (min-width: 60em) { aside { width: 30%; } } no-mq.css aside { color: #333; width: 100%; width: 50%; width: 30%; } Monday, June 24, 13

Slide 75

Slide 75 text

Module Based Partials mq.css aside { color: #333; width: 100%; } @media (min-width: 40em) { aside { width: 50%; } } @media (min-width: 60em) { aside { width: 30%; } } no-mq.css aside { color: #333; width: 100%; width: 50%; width: 30%; } Monday, June 24, 13

Slide 76

Slide 76 text

Module Based Partials mq.css aside { color: #333; width: 100%; } @media (min-width: 40em) { aside { width: 50%; } } @media (min-width: 60em) { aside { width: 30%; } } no-mq.css aside { color: #333; width: 100%; width: 50%; width: 30%; } Monday, June 24, 13

Slide 77

Slide 77 text

Module Based Partials mq.css aside { color: #333; width: 100%; } @media (min-width: 40em) { aside { width: 50%; } } @media (min-width: 60em) { aside { width: 30%; } } no-mq.css aside { color: #333; width: 100%; width: 50%; width: 30%; } Monday, June 24, 13

Slide 78

Slide 78 text

Module Based Partials mq.css aside { color: #333; width: 100%; } @media (min-width: 40em) { aside { width: 50%; } } @media (min-width: 60em) { aside { width: 30%; } } no-mq.css aside { color: #333; width: 100%; width: 50%; width: 30%; } Monday, June 24, 13

Slide 79

Slide 79 text

Module Based Partials mq.scss @import “compass”; @import “sb-media”; @import “aside”; @import “nav”; @import “footer”; ... no-mq.scss @import “compass”; @import “sb-media”; $sb-no-mq-support: true; @import “aside”; @import “nav”; @import “footer”; ... Monday, June 24, 13

Slide 80

Slide 80 text

Module Based Partials mq.scss @import “compass”; @import “sb-media”; @import “aside”; @import “nav”; @import “footer”; ... no-mq.scss @import “compass”; @import “sb-media”; $sb-no-mq-support: true; @import “aside”; @import “nav”; @import “footer”; ... Monday, June 24, 13

Slide 81

Slide 81 text

Module Based Partials mq.scss @import “compass”; @import “sb-media”; @import “aside”; @import “nav”; @import “footer”; ... no-mq.scss @import “compass”; @import “sb-media”; $sb-no-mq-support: true; @import “aside”; @import “nav”; @import “footer”; ... Monday, June 24, 13

Slide 82

Slide 82 text

Module Based Partials mq.scss @import “compass”; @import “sb-media”; @import “aside”; @import “nav”; @import “footer”; ... no-mq.scss @import “compass”; @import “sb-media”; $sb-no-mq-support: true; @import “aside”; @import “nav”; @import “footer”; ... Monday, June 24, 13

Slide 83

Slide 83 text

Module Based Partials _aside.scss aside { color: #333; width: 100%; @include sb-media(40em) { width: 50%; } @include sb-media(60em) { width: 30%; } } Monday, June 24, 13

Slide 84

Slide 84 text

Module Based Partials _aside.scss aside { color: #333; width: 100%; @include sb-media(40em) { width: 50%; } @include sb-media(60em) { width: 30%; } } Monday, June 24, 13

Slide 85

Slide 85 text

Module Based Partials _aside.scss aside { color: #333; width: 100%; @include sb-media(40em) { width: 50%; } @include sb-media(60em) { width: 30%; } } $sb-no-mq-support: true; aside { color: #333; width: 100%; width: 50%; width: 30%; } Monday, June 24, 13

Slide 86

Slide 86 text

Module Based Partials $no-­‐mq-­‐support:  false  !default; $serve-­‐to-­‐nomq-­‐max-­‐width:60em; @mixin  sb-­‐media($query)  {    @if  $no-­‐mq-­‐support{        @if  $query  <  $serve-­‐to-­‐nomq-­‐max-­‐width  {            @content;        }    }  @else  {        @media  (  'min-­‐width:'  +  $query  )  {            @content;        }    } } https://github.com/sparkbox/SB-Media Monday, June 24, 13

Slide 87

Slide 87 text

https://github.com/sparkbox/SB-Media Monday, June 24, 13

Slide 88

Slide 88 text

https://github.com/Team-Sass/ breakpoint Monday, June 24, 13

Slide 89

Slide 89 text

SERVING RWD STYLES Module Based Partials ‣ Single Request ‣ Easy Maintenance ‣ Allows you to start with small layouts and serve large layout to old IE without JS ‣ Requires Preprocessor Monday, June 24, 13

Slide 90

Slide 90 text

This is so much more natural. Monday, June 24, 13

Slide 91

Slide 91 text

Think more modularly. Try something like SMACSS (from @snookca). Monday, June 24, 13

Slide 92

Slide 92 text

Or MVCSS, from Envy Labs. Monday, June 24, 13

Slide 93

Slide 93 text

BEN’S LATEST THEORY ON WEB PROCESS Monday, June 24, 13

Slide 94

Slide 94 text

The amount of process required is inversely proportional to the skill and experience of your team. Monday, June 24, 13

Slide 95

Slide 95 text

Create the perfect, fully- documented, all-encompassing web design and development process. Or... Monday, June 24, 13

Slide 96

Slide 96 text

Chill out and develop our people. Monday, June 24, 13

Slide 97

Slide 97 text

http://www.flickr.com/photos/kjtfoto Monday, June 24, 13

Slide 98

Slide 98 text

THERE IS NO BREAKPOINT Monday, June 24, 13

Slide 99

Slide 99 text

There is no Breakpoint aside { // general styles // major shift at 40em // major shift at 60em ... } aside { // general styles // major shift at 40em // minor tweak at 42em // minor tweak at 53.5em // minor tweak at 56em // major shift at 60em // minor tweak at 72.2em // minor tweak at 74em ... } Monday, June 24, 13

Slide 100

Slide 100 text

There is no Breakpoint aside { // general styles // major shift at 40em // major shift at 60em ... } aside { // general styles // major shift at 40em // minor tweak at 42em // minor tweak at 53.5em // minor tweak at 56em // major shift at 60em // minor tweak at 72.2em // minor tweak at 74em ... } Monday, June 24, 13

Slide 101

Slide 101 text

There is no Breakpoint Media Query Bookmarklet (by @robtarr) Monday, June 24, 13

Slide 102

Slide 102 text

Monday, June 24, 13

Slide 103

Slide 103 text

Relax. Monday, June 24, 13

Slide 104

Slide 104 text

Invest in people over process. Monday, June 24, 13

Slide 105

Slide 105 text

THANK YOU @bencallahan Monday, June 24, 13