Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Fractal CSS

Ben Callahan
April 18, 2013

Fractal CSS

Deck from my presentation at the 2013 RWD Summit on Fractal CSS, or how to link responsive web design styles.

Ben Callahan

April 18, 2013
Tweet

More Decks by Ben Callahan

Other Decks in Design

Transcript

  1. SERVING RWD STYLES Major Approaches ‣ Single CSS File ‣

    Multiple CSS Files ‣ Breakpoint Based Partials ‣ Module Based Partials Monday, April 22, 13
  2. Before any of this stuff will work, you need to

    do this: <!-- html --> <meta name="viewport" content="width=device-width; initial-scale=1.0;"> Monday, April 22, 13
  3. And, you should also do this: /* CSS */ @-webkit-viewport

    { width:device-width; } @-moz-viewport { width:device-width; } @-ms-viewport { width:device-width; } @-o-viewport { width:device-width; } @viewport { width:device-width; } Monday, April 22, 13
  4. SERVING RWD STYLES Major Approaches ‣ Single CSS File ‣

    Multiple CSS Files ‣ Breakpoint Based Partials ‣ Module Based Partials Monday, April 22, 13
  5. 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, April 22, 13
  6. /* styles.css */ aside { color: #333; width: 100%; }

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

    /* if the viewport width is 40em or greater */ Single CSS File Monday, April 22, 13
  8. <!-- 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, April 22, 13
  9. <!-- 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, April 22, 13
  10. Media Types all braille, embossed, speech handheld, projection, screen, tv

    print tty http://www.w3.org/TR/CSS21/media.html#media-types Monday, April 22, 13
  11. <!-- 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, April 22, 13
  12. 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, April 22, 13
  13. 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, April 22, 13
  14. Small Viewport Width First HTML <link> CSS Smallest styles Wider

    styles (mq) Even wider styles (mq) Super wide styles (mq) Monday, April 22, 13
  15. Large Viewport Width First HTML <link> CSS Widest styles Wide

    styles (mq) Narrow styles (mq) Very narrow styles (mq) Monday, April 22, 13
  16. /* styles.css */ aside { color: #333; width: 100%; }

    /* if the viewport width is 40em or greater */ Single CSS File Monday, April 22, 13
  17. /* 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, April 22, 13
  18. /* 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, April 22, 13
  19. /* 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, April 22, 13
  20. 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, April 22, 13
  21. /* 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 (min-width: 40em) { aside { width: 100%; } } Single CSS File Large Viewport Width First Monday, April 22, 13
  22. 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, April 22, 13
  23. SERVING RWD STYLES Major Approaches ‣ Single CSS File ‣

    Multiple CSS Files ‣ Breakpoint Based Partials ‣ Module Based Partials Monday, April 22, 13
  24. 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, April 22, 13
  25. 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, April 22, 13
  26. 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, April 22, 13
  27. 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, April 22, 13
  28. 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, April 22, 13
  29. 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, April 22, 13
  30. Multiple CSS Files global.css aside { color: #333; width: 100%;

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

    } layout.css aside { width: 50%; } @media (min-width: 60em) { aside { width: 30%; } } Monday, April 22, 13
  32. 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, April 22, 13
  33. SERVING RWD STYLES Major Approaches ‣ Single CSS File ‣

    Multiple CSS Files ‣ Breakpoint Based Partials ‣ Module Based Partials Monday, April 22, 13
  34. 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, April 22, 13
  35. 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, April 22, 13
  36. 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, April 22, 13
  37. 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, April 22, 13
  38. 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, April 22, 13
  39. 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, April 22, 13
  40. 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, April 22, 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, April 22, 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, April 22, 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, April 22, 13
  44. Similarities ‣ All accept CSS syntax, plus their own specific

    syntax. ‣ All improve CSS by adding variables, importing, mixins, and nesting ‣ All three seek to make CSS authoring a better and more efficient process Monday, April 22, 13
  45. LESS ‣ Runs on Node.js ‣ Very similar syntax to

    SASS ‣ http://lesscss.org/ Monday, April 22, 13
  46. Variables are specified with @ symbol @top-variable: 20px; ! #header-shadow

    { ! position: absolute; ! ! top: @top-variable; ! } LESS syntax Monday, April 22, 13
  47. Stylus ‣ Runs on Node.js ‣ Has a very terse

    syntax - You can omit semi-colons, colons, and braces ‣ http://learnboost.github.com/ stylus/ Monday, April 22, 13
  48. Notice the terse syntax. top-variable = 20px ! #header-shadow !

    position absolute ! ! top top-variable Stylus Syntax Monday, April 22, 13
  49. SASS ‣ Runs on Ruby ‣ Has two syntax flavors

    - .scss & .sass ‣ http://sass-lang.com/ Monday, April 22, 13
  50. /*.scss*/ #main { color: blue; font-size: 0.3em; } /*.sass*/ #main

    color: blue font-size: 0.3em SASS Sytax Monday, April 22, 13
  51. /*.scss*/ ul.food-list{ ! li{ font-size: 1rem; a{ text-decoration:none; } }

    ! } Nesting /*.css*/ .food-list li { color: red; } .food-list li a { text-decoration: none; } Monday, April 22, 13
  52. /*.scss*/ @mixin border-radius( $value : 10px ) { ! -webkit-border-radius:

    $value; ! -moz-border-radius: $value; ! ! ! border-radius: $value; } Mixins /*.scss*/ .btn{ @include border-radius(25px); } Monday, April 22, 13
  53. Mixins ‣ SASS and Stylus both support basic programming like

    loops, if/ else, etc. in Mixins. ‣ LESS only offers “guarded mixins”. Monday, April 22, 13
  54. Compass & Bourbon ‣ Compass (and Bourbon) is a mix-

    in library for SASS ‣ Abstracts alot of vendor prefixes into mixins. ‣ Compass has an ecosystem of plugins built on top of Compass. ‣ With config.rb, Compass lets you check the preprocessor config into source control. Monday, April 22, 13
  55. Importing ‣ Allows you to break up your styles in

    a more modular fashion. - variables, mixins, reset, all seperated. ‣ Better than a standard css import Monday, April 22, 13
  56. this file will compile to base.css @import "compass"; @import "variables";

    @import "breakpoint"; @import "reset"; @import "mixins"; @import "styles"; Importing Monday, April 22, 13
  57. Extends ‣ Extends allow you to reuse styles between various

    selectors. ‣ DRY Principle applied to CSS Monday, April 22, 13
  58. .btn{ color:red; border-radius:25px; } .btn-small{ @extend .btn; font-size: .5rem; }

    Extends .btn-small{ color:red; border-radius:25px; font-size: .5rem; } Monday, April 22, 13
  59. .btn{ color:red; border-radius:25px; } .btn-small{ @extend .btn; font-size: .5rem; }

    Extends .btn-small{ color:red; border-radius:25px; font-size: .5rem; } Monday, April 22, 13
  60. Source Maps ‣ Using pre-processors does present some new challenges.

    ‣ Line-numbers are no longer representative of where the code is. Monday, April 22, 13
  61. Source Maps ‣ Source maps let Chrome know the source

    of the generated CSS. Monday, April 22, 13
  62. Setup Chrome for SASS Source Maps Support ‣ head over

    to chrome://flags - Enable Developer Tools Experiments Monday, April 22, 13
  63. Setup Chrome for SASS Source Maps Support ‣ Enable Support

    for SASS in the Dev Tools options Monday, April 22, 13
  64. The last step is to turn on debug info in

    our CSS /*config.rb*/ sass_options = { :debug_info => true } or /*command line*/ sass --watch -g scss/:css/ Setup Chrome for SASS Source Maps Support Monday, April 22, 13
  65. 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, April 22, 13
  66. _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, April 22, 13
  67. 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, April 22, 13
  68. SERVING RWD STYLES Major Approaches ‣ Single CSS File ‣

    Multiple CSS Files ‣ Breakpoint Based Partials ‣ Module Based Partials Monday, April 22, 13
  69. Module Based Partials HTML If MQs not supported <link> If

    MQs are supported <link> no-mq.css All styles with no MQs mq.css All styles with MQs http://seesparkbox.com/foundry/there_is_no_breakpoint Monday, April 22, 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, April 22, 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, April 22, 13
  72. 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, April 22, 13
  73. 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, April 22, 13
  74. 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, April 22, 13
  75. 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, April 22, 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, April 22, 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, April 22, 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, April 22, 13
  79. 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, April 22, 13
  80. 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, April 22, 13
  81. 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, April 22, 13
  82. Module Based Partials mq.scss @import “compass”; @import “breakpoint”; @import “aside”;

    @import “nav”; @import “footer”; ... no-mq.scss @import “compass”; @import “breakpoint”; $breakpoint-no-queries: true; @import “aside”; @import “nav”; @import “footer”; ... Monday, April 22, 13
  83. Module Based Partials mq.scss @import “compass”; @import “breakpoint”; @import “aside”;

    @import “nav”; @import “footer”; ... no-mq.scss @import “compass”; @import “breakpoint”; $breakpoint-no-queries: true; @import “aside”; @import “nav”; @import “footer”; ... Monday, April 22, 13
  84. Module Based Partials mq.scss @import “compass”; @import “breakpoint”; @import “aside”;

    @import “nav”; @import “footer”; ... no-mq.scss @import “compass”; @import “breakpoint”; $breakpoint-no-queries: true; @import “aside”; @import “nav”; @import “footer”; ... Monday, April 22, 13
  85. Module Based Partials mq.scss @import “compass”; @import “breakpoint”; @import “aside”;

    @import “nav”; @import “footer”; ... no-mq.scss @import “compass”; @import “breakpoint”; $breakpoint-no-queries: true; @import “aside”; @import “nav”; @import “footer”; ... Monday, April 22, 13
  86. Module Based Partials _aside.scss aside { color: #333; width: 100%;

    @include breakpoint(40em, $no-query: true) { width: 50%; } @include breakpoint(60em, $no-query: true) { width: 30%; } } Monday, April 22, 13
  87. Module Based Partials _aside.scss aside { color: #333; width: 100%;

    @include breakpoint(40em, $no-query: true) { width: 50%; } @include breakpoint(60em, $no-query: true) { width: 30%; } } Monday, April 22, 13
  88. Module Based Partials _aside.scss aside { color: #333; width: 100%;

    @include breakpoint(40em, $no-query: true) { width: 50%; } @include breakpoint(60em, $no-query: true) { width: 30%; } } $breakpoint-no-queries: true; Monday, April 22, 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 ‣ Single request for all ‣ Requires Preprocessor Monday, April 22, 13
  90. 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, April 22, 13
  91. 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, April 22, 13
  92. Fractal 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, April 22, 13