Serving RWD Styles

Deck from my presentation at Frontend Design Conference in St. Petersburg, Florida on June 21, 2013.

Transcript

1. SERVING RWD STYLES @bencallahan Monday, June 24, 13
2. Monday, June 24, 13
3. Monday, June 24, 13
4. CODE AND PROJECT STRUCTURE SERVING RWD STYLES Monday, June 24, 13
5. SERVING RWD STYLES Major Approaches ‣ Single CSS File ‣ Multiple CSS Files ‣ Breakpoint Based Partials ‣ Module Based Partials Monday, June 24, 13
6. SERVING RWD STYLES Major Approaches ‣ Single CSS File ‣ Multiple CSS Files ‣ Breakpoint Based Partials ‣ Module Based Partials CSS PREPROCESSING FTW! Monday, June 24, 13
7. The Example 100% 50% 30% Monday, June 24, 13
8. SERVING RWD STYLES Major Approaches ‣ Single CSS File ‣ Multiple CSS Files ‣ Breakpoint Based Partials ‣ Module Based Partials Monday, June 24, 13
9. Single CSS File HTML <link> CSS Start with styles applied to all Styles scoped to a media query Styles scoped to another media query Monday, June 24, 13
10. /* styles.css */ aside { color: #333; width: 100%; } Single CSS File Monday, June 24, 13
11. /* styles.css */ aside { color: #333; width: 100%; } /* if the viewport width is 40em or greater */ Single CSS File Monday, June 24, 13
12. PAUSE: MEDIA QUERIES Monday, June 24, 13
13. <!-- In your HTML --> <link media=”(min-width: 30em)” ... <link media=”screen and (max-width: 80em)” ... /* In your CSS */ @media (min-width: 30em) { ... } @media screen and (max-width: 80em) { ... } Media Queries Monday, June 24, 13
14. <!-- In your HTML --> <link media=”(min-width: 30em)” ... <link media=”screen and (max-width: 80em)” ... /* In your CSS */ @media (min-width: 30em) { ... } @media screen and (max-width: 80em) { ... } Media Types Monday, June 24, 13
15. 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
16. <!-- In your HTML --> <link media=”(min-width: 30em)” ... <link media=”screen and (max-width: 80em)” ... /* In your CSS */ @media (orientation: portrait) { ... } @media screen and (color) { ... } Media Features Monday, June 24, 13
17. 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
18. Single CSS File HTML <link> CSS Start with styles applied to all Styles scoped to a media query Styles scoped to another media query Monday, June 24, 13
19. Small Viewport Width First HTML <link> CSS Smallest styles Wider styles (mq) Even wider styles (mq) Super wide styles (mq) Monday, June 24, 13
20. Large Viewport Width First HTML <link> CSS Widest styles Wide styles (mq) Narrow styles (mq) Very narrow styles (mq) Monday, June 24, 13
21. /* styles.css */ aside { color: #333; width: 100%; } /* if the viewport width is 40em or greater */ Single CSS File Monday, June 24, 13
22. /* 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
23. /* 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
24. /* 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
25. 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
26. /* 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
27. 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
28. SERVING RWD STYLES Major Approaches ‣ Single CSS File ‣ Multiple CSS Files ‣ Breakpoint Based Partials ‣ Module Based Partials Monday, June 24, 13
29. Multiple CSS Files HTML <link> If this browser is less than IE9... and it’s not IE Mobile... and viewport width is at least 40em... <link> global.css all styles linear layout layout.css only styles for layout http://adactio.com/journal/4494/ Monday, June 24, 13
30. Multiple CSS Files index.html <link href=”global.css” rel=”stylesheet”> <link href=”layout.css” media=”(min-width: 40em)” rel=”stylesheet”> <!--[if (lt IE 9) & (!IEMobile)]> <link href=”layout.css” rel=”stylesheet”> <![endif]--> Monday, June 24, 13
31. Multiple CSS Files index.html <link href=”global.css” rel=”stylesheet”> <link href=”layout.css” media=”(min-width: 40em)” rel=”stylesheet”> <!--[if (lt IE 9) & (!IEMobile)]> <link href=”layout.css” rel=”stylesheet”> <![endif]--> Monday, June 24, 13
32. Multiple CSS Files index.html <link href=”global.css” rel=”stylesheet”> <link href=”layout.css” media=”(min-width: 40em)” rel=”stylesheet”> <!--[if (lt IE 9) & (!IEMobile)]> <link href=”layout.css” rel=”stylesheet”> <![endif]--> Monday, June 24, 13
33. Multiple CSS Files index.html <link href=”global.css” rel=”stylesheet”> <link href=”layout.css” media=”(min-width: 40em)” rel=”stylesheet”> <!--[if (lt IE 9) & (!IEMobile)]> <link href=”layout.css” rel=”stylesheet”> <![endif]--> Monday, June 24, 13
34. Multiple CSS Files index.html <link href=”global.css” rel=”stylesheet”> <link href=”layout.css” media=”(min-width: 40em)” rel=”stylesheet”> <!--[if (lt IE 9) & (!IEMobile)]> <link href=”layout.css” rel=”stylesheet”> <![endif]--> Monday, June 24, 13
35. 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
36. 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
37. 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
38. SERVING RWD STYLES Major Approaches ‣ Single CSS File ‣ Multiple CSS Files ‣ Breakpoint Based Partials ‣ Module Based Partials Monday, June 24, 13
39. Breakpoint Based Partials HTML <link> If this browser is less than IE9... and it’s not IE Mobile... <link> 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
40. Breakpoint Based Partials index.html <link href=”base.css” rel=”stylesheet”> <!--[if (lt IE 9) & (!IEMobile)]> <link href=”no-mq.css” rel=”stylesheet”> <![endif]--> Monday, June 24, 13
41. 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
42. 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
43. 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
44. 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
45. 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
46. 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
47. 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
48. 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
49. PAUSE: CSS PREPROCESSORS Monday, June 24, 13
50. The Big Three: LESS, SASS, and Stylus Monday, June 24, 13
51. LESS ‣ Runs on Node.js ‣ Very similar syntax to SASS ‣ http://lesscss.org/ Monday, June 24, 13
52. Variables are specified with @ symbol /* .less */ @top-variable: 20px; ! #header-shadow { ! position: absolute; ! ! top: @top-variable; ! } LESS syntax Monday, June 24, 13
53. 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
54. /* .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
55. SASS ‣ Runs on Ruby ‣ Has two syntax flavors - .scss & .sass ‣ http://sass-lang.com/ Monday, June 24, 13
56. $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
57. Preprocessors offer many benefits, like all of the awesome stuff Chris showed us... Monday, June 24, 13
58. /*.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
59. 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
60. 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
61. 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
62. _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
63. 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
64. SERVING RWD STYLES Major Approaches ‣ Single CSS File ‣ Multiple CSS Files ‣ Breakpoint Based Partials ‣ Module Based Partials Monday, June 24, 13
65. HTML If < IE9 and not IE Mobile <link> If >= IE9 or IE Mobile or not IE <link> 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
66. Module Based Partials index.html <!--[if (lt IE 9) & (!IEMobile)]> <link href=”no-mq.css” rel=”stylesheet”> <![endif]--> <!--[if (gte IE 9) | (IEMobile)]><!--> <link href=”mq.css” rel=”stylesheet”> <!--<![endif]--> Monday, June 24, 13
67. Module Based Partials index.html <!--[if (lt IE 9) & (!IEMobile)]> <link href=”no-mq.css” rel=”stylesheet”> <![endif]--> <!--[if (gte IE 9) | (IEMobile)]><!--> <link href=”mq.css” rel=”stylesheet”> <!--<![endif]--> Monday, June 24, 13
68. Module Based Partials index.html <!--[if (lt IE 9) & (!IEMobile)]> <link href=”no-mq.css” rel=”stylesheet”> <![endif]--> <!--[if (gte IE 9) | (IEMobile)]><!--> <link href=”mq.css” rel=”stylesheet”> <!--<![endif]--> Monday, June 24, 13
69. Module Based Partials index.html <!--[if (lt IE 9) & (!IEMobile)]> <link href=”no-mq.css” rel=”stylesheet”> <![endif]--> <!--[if (gte IE 9) | (IEMobile)]><!--> <link href=”mq.css” rel=”stylesheet”> <!--<![endif]--> Monday, June 24, 13
70. Module Based Partials index.html <!--[if (lt IE 9) & (!IEMobile)]> <link href=”no-mq.css” rel=”stylesheet”> <![endif]--> <!--[if (gte IE 9) | (IEMobile)]><!--> <link href=”mq.css” rel=”stylesheet”> <!--<![endif]--> Monday, June 24, 13
71. Module Based Partials index.html <!--[if (lt IE 9) & (!IEMobile)]> <link href=”no-mq.css” rel=”stylesheet”> <![endif]--> <!--[if (gte IE 9) | (IEMobile)]><!--> <link href=”mq.css” rel=”stylesheet”> <!--<![endif]--> Monday, June 24, 13
72. 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
73. 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
74. 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
75. 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
76. 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
77. 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
78. 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
79. 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
80. 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
81. 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
82. 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
83. 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
84. 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
85. 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
86. 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
87. https://github.com/sparkbox/SB-Media Monday, June 24, 13
88. https://github.com/Team-Sass/ breakpoint Monday, June 24, 13
89. 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
90. This is so much more natural. Monday, June 24, 13
91. Think more modularly. Try something like SMACSS (from @snookca). Monday, June 24, 13
92. Or MVCSS, from Envy Labs. Monday, June 24, 13
93. BEN’S LATEST THEORY ON WEB PROCESS Monday, June 24, 13
94. The amount of process required is inversely proportional to the skill and experience of your team. Monday, June 24, 13
95. Create the perfect, fully- documented, all-encompassing web design and development process. Or... Monday, June 24, 13
96. Chill out and develop our people. Monday, June 24, 13
97. http://www.flickr.com/photos/kjtfoto Monday, June 24, 13
98. THERE IS NO BREAKPOINT Monday, June 24, 13
99. 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
100. 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
101. There is no Breakpoint Media Query Bookmarklet (by @robtarr) Monday, June 24, 13
102. Monday, June 24, 13
103. Relax. Monday, June 24, 13
104. Invest in people over process. Monday, June 24, 13
105. THANK YOU @bencallahan Monday, June 24, 13