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
   

   View Slide

2. Monday, June 24, 13
   

   View Slide

3. Monday, June 24, 13
   

   View Slide

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

   View Slide

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

   View Slide

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
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

12. PAUSE:
    MEDIA QUERIES
    Monday, June 24, 13
    

    View Slide

13. 
    /* In your CSS */
    @media (min-width: 30em) { ... }
    @media screen and (max-width: 80em) { ... }
    Media Queries
    Monday, June 24, 13
    

    View Slide

14. 
    /* In your CSS */
    @media (min-width: 30em) { ... }
    @media screen and (max-width: 80em) { ... }
    Media Types
    Monday, June 24, 13
    

    View Slide

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
    

    View Slide

16. 
    /* In your CSS */
    @media (orientation: portrait) { ... }
    @media screen and (color) { ... }
    Media Features
    Monday, June 24, 13
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

30. Multiple CSS Files
    index.html
    
    media=”(min-width: 40em)”
    rel=”stylesheet”>
    
    Monday, June 24, 13
    

    View Slide

31. Multiple CSS Files
    index.html
    
    media=”(min-width: 40em)”
    rel=”stylesheet”>
    
    Monday, June 24, 13
    

    View Slide

32. Multiple CSS Files
    index.html
    
    media=”(min-width: 40em)”
    rel=”stylesheet”>
    
    Monday, June 24, 13
    

    View Slide

33. Multiple CSS Files
    index.html
    
    media=”(min-width: 40em)”
    rel=”stylesheet”>
    
    Monday, June 24, 13
    

    View Slide

34. Multiple CSS Files
    index.html
    
    media=”(min-width: 40em)”
    rel=”stylesheet”>
    
    Monday, June 24, 13
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

49. PAUSE:
    CSS PREPROCESSORS
    Monday, June 24, 13
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

98. THERE IS NO
    BREAKPOINT
    Monday, June 24, 13
    

    View Slide

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
    

    View Slide

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
     

     View Slide

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

     View Slide

102. Monday, June 24, 13
     

     View Slide

103. Relax.
     Monday, June 24, 13
     

     View Slide

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

     View Slide

105. THANK YOU
     @bencallahan
     Monday, June 24, 13
     

     View Slide