Fractal CSS

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

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