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
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
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
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
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
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