Save 37% off PRO during our Black Friday Sale! »

Fractal CSS

Fe8510ee8e06c36d02799dbf8f934b9c?s=47 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.

Fe8510ee8e06c36d02799dbf8f934b9c?s=128

Ben Callahan

April 18, 2013
Tweet

Transcript

  1. FRACTAL CSS @bencallahan #rwdsummit APRIL 2013 Monday, April 22, 13

  2. Monday, April 22, 13

  3. https://www.google.com/search? q=fractals&source=lnms&tbm=isch Monday, April 22, 13

  4. CODE AND PROJECT STRUCTURE SERVING RWD STYLES Monday, April 22,

    13
  5. SERVING RWD STYLES Major Approaches ‣ Single CSS File ‣

    Multiple CSS Files ‣ Breakpoint Based Partials ‣ Module Based Partials Monday, April 22, 13
  6. 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
  7. 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
  8. SERVING RWD STYLES Major Approaches ‣ Single CSS File ‣

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

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

    /* if the viewport width is 40em or greater */ Single CSS File Monday, April 22, 13
  12. PAUSE: MEDIA QUERIES Monday, April 22, 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, April 22, 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, April 22, 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, April 22, 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, April 22, 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, April 22, 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, April 22, 13
  19. Small Viewport Width First HTML <link> CSS Smallest styles Wider

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

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

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

    Multiple CSS Files ‣ Breakpoint Based Partials ‣ Module Based Partials Monday, April 22, 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, April 22, 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, April 22, 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, April 22, 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, April 22, 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, April 22, 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, April 22, 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, April 22, 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, April 22, 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, April 22, 13
  38. SERVING RWD STYLES Major Approaches ‣ Single CSS File ‣

    Multiple CSS Files ‣ Breakpoint Based Partials ‣ Module Based Partials Monday, April 22, 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, April 22, 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, 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. 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
  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, April 22, 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, April 22, 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, April 22, 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, April 22, 13
  49. PAUSE: CSS PREPROCESSORS Monday, April 22, 13

  50. The Big Three: LESS, SASS, and Stylus Monday, April 22,

    13
  51. 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
  52. LESS ‣ Runs on Node.js ‣ Very similar syntax to

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

    { ! position: absolute; ! ! top: @top-variable; ! } LESS syntax Monday, April 22, 13
  54. 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
  55. Notice the terse syntax. top-variable = 20px ! #header-shadow !

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

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

    color: blue font-size: 0.3em SASS Sytax Monday, April 22, 13
  58. How do pre-processors make authoring CSS better? Monday, April 22,

    13
  59. /*.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
  60. Nesting can be abused. Nesting too “deep” can introduce scoping

    issues in your CSS. Monday, April 22, 13
  61. /*.scss*/ $white: rgba(255,255,255,1); /*.less*/ @white: rgba(255,255,255,1); /*.styl*/ white = rgba(255,255,255)

    Variables Monday, April 22, 13
  62. /*.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
  63. Mixins ‣ SASS and Stylus both support basic programming like

    loops, if/ else, etc. in Mixins. ‣ LESS only offers “guarded mixins”. Monday, April 22, 13
  64. Sparkbox REM Mixin Monday, April 22, 13

  65. /*.scss*/ @include rem("padding", 0, 1, 0, 1); Sparkbox REM Mixin

    Monday, April 22, 13
  66. Compass & Bourbon Monday, April 22, 13

  67. 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
  68. 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
  69. this file will compile to base.css @import "compass"; @import "variables";

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

    selectors. ‣ DRY Principle applied to CSS Monday, April 22, 13
  71. .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
  72. .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
  73. Google Chrome Developer Tools & SASS Monday, April 22, 13

  74. 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
  75. Source Maps ‣ Source maps let Chrome know the source

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

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

    for SASS in the Dev Tools options Monday, April 22, 13
  78. Setup Chrome for SASS Source Maps Support ‣ Enable support

    for Source maps Monday, April 22, 13
  79. 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
  80. CSS PREPROCESSORS Resources Codekit http://incident57.com/codekit/ Monday, April 22, 13

  81. CSS PREPROCESSORS Resources Scout http://mhs.github.com/scout-app/ Monday, April 22, 13

  82. CSS PREPROCESSORS Resources Compass http://compass-style.org/ Monday, April 22, 13

  83. CSS PREPROCESSORS Resources SASS Primer http://thesassway.com/beginner/getting- started-with-sass-and-compass Monday, April 22,

    13
  84. 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
  85. _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
  86. 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
  87. SERVING RWD STYLES Major Approaches ‣ Single CSS File ‣

    Multiple CSS Files ‣ Breakpoint Based Partials ‣ Module Based Partials Monday, April 22, 13
  88. 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
  89. 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
  90. 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
  91. 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
  92. 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
  93. 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
  94. 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
  95. 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
  96. 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
  97. 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
  98. 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
  99. 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
  100. 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
  101. 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
  102. 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
  103. 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
  104. 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
  105. 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
  106. 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
  107. 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
  108. 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
  109. I recommend module based partials Monday, April 22, 13

  110. THERE IS NO BREAKPOINT Monday, April 22, 13

  111. 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
  112. 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
  113. 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
  114. There is no Breakpoint Media Query Bookmarklet (by @robtarr) Monday,

    April 22, 13
  115. There is no Breakpoint Monday, April 22, 13

  116. Relax. Monday, April 22, 13

  117. Think more modularly. Try something like SMACSS (from @snookca). Monday,

    April 22, 13
  118. Element Queries http://www.xanthir.com/b4PR0 Monday, April 22, 13

  119. http://seesparkbox.com/foundry/there_is_no_breakpoint There is no Breakpoint http://www.markboulton.co.uk/journal/theinbetween The In-Between http://www.jordanm.co.uk/post/43147197731/the-in-between The

    In-Between (2) Monday, April 22, 13
  120. THANKS! @bencallahan Monday, April 22, 13