Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Monday, April 22, 13

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

CODE AND PROJECT STRUCTURE SERVING RWD STYLES Monday, April 22, 13

Slide 5

Slide 5 text

SERVING RWD STYLES Major Approaches ‣ Single CSS File ‣ Multiple CSS Files ‣ Breakpoint Based Partials ‣ Module Based Partials Monday, April 22, 13

Slide 6

Slide 6 text

Before any of this stuff will work, you need to do this: Monday, April 22, 13

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

SERVING RWD STYLES Major Approaches ‣ Single CSS File ‣ Multiple CSS Files ‣ Breakpoint Based Partials ‣ Module Based Partials Monday, April 22, 13

Slide 9

Slide 9 text

Single CSS File HTML CSS Start with styles applied to all Styles scoped to a media query Styles scoped to another media query Monday, April 22, 13

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

PAUSE: MEDIA QUERIES Monday, April 22, 13

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Single CSS File HTML CSS Start with styles applied to all Styles scoped to a media query Styles scoped to another media query Monday, April 22, 13

Slide 19

Slide 19 text

Small Viewport Width First HTML CSS Smallest styles Wider styles (mq) Even wider styles (mq) Super wide styles (mq) Monday, April 22, 13

Slide 20

Slide 20 text

Large Viewport Width First HTML CSS Widest styles Wide styles (mq) Narrow styles (mq) Very narrow styles (mq) Monday, April 22, 13

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

/* 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

Slide 23

Slide 23 text

/* 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

Slide 24

Slide 24 text

/* 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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

/* 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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

SERVING RWD STYLES Major Approaches ‣ Single CSS File ‣ Multiple CSS Files ‣ Breakpoint Based Partials ‣ Module Based Partials Monday, April 22, 13

Slide 29

Slide 29 text

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, April 22, 13

Slide 30

Slide 30 text

Multiple CSS Files index.html Monday, April 22, 13

Slide 31

Slide 31 text

Multiple CSS Files index.html Monday, April 22, 13

Slide 32

Slide 32 text

Multiple CSS Files index.html Monday, April 22, 13

Slide 33

Slide 33 text

Multiple CSS Files index.html Monday, April 22, 13

Slide 34

Slide 34 text

Multiple CSS Files index.html Monday, April 22, 13

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

SERVING RWD STYLES Major Approaches ‣ Single CSS File ‣ Multiple CSS Files ‣ Breakpoint Based Partials ‣ Module Based Partials Monday, April 22, 13

Slide 39

Slide 39 text

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, April 22, 13

Slide 40

Slide 40 text

Breakpoint Based Partials index.html Monday, April 22, 13

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

PAUSE: CSS PREPROCESSORS Monday, April 22, 13

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

Variables are specified with @ symbol @top-variable: 20px; ! #header-shadow { ! position: absolute; ! ! top: @top-variable; ! } LESS syntax Monday, April 22, 13

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

Notice the terse syntax. top-variable = 20px ! #header-shadow ! position absolute ! ! top top-variable Stylus Syntax Monday, April 22, 13

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

/*.scss*/ #main { color: blue; font-size: 0.3em; } /*.sass*/ #main color: blue font-size: 0.3em SASS Sytax Monday, April 22, 13

Slide 58

Slide 58 text

How do pre-processors make authoring CSS better? Monday, April 22, 13

Slide 59

Slide 59 text

/*.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

Slide 60

Slide 60 text

Nesting can be abused. Nesting too “deep” can introduce scoping issues in your CSS. Monday, April 22, 13

Slide 61

Slide 61 text

/*.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

Slide 62

Slide 62 text

/*.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

Slide 63

Slide 63 text

Mixins ‣ SASS and Stylus both support basic programming like loops, if/ else, etc. in Mixins. ‣ LESS only offers “guarded mixins”. Monday, April 22, 13

Slide 64

Slide 64 text

Sparkbox REM Mixin Monday, April 22, 13

Slide 65

Slide 65 text

/*.scss*/ @include rem("padding", 0, 1, 0, 1); Sparkbox REM Mixin Monday, April 22, 13

Slide 66

Slide 66 text

Compass & Bourbon Monday, April 22, 13

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

this file will compile to base.css @import "compass"; @import "variables"; @import "breakpoint"; @import "reset"; @import "mixins"; @import "styles"; Importing Monday, April 22, 13

Slide 70

Slide 70 text

Extends ‣ Extends allow you to reuse styles between various selectors. ‣ DRY Principle applied to CSS Monday, April 22, 13

Slide 71

Slide 71 text

.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

Slide 72

Slide 72 text

.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

Slide 73

Slide 73 text

Google Chrome Developer Tools & SASS Monday, April 22, 13

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

Source Maps ‣ Source maps let Chrome know the source of the generated CSS. Monday, April 22, 13

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

Setup Chrome for SASS Source Maps Support ‣ Enable support for Source maps Monday, April 22, 13

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

CSS PREPROCESSORS Resources Codekit http://incident57.com/codekit/ Monday, April 22, 13

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

_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

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

SERVING RWD STYLES Major Approaches ‣ Single CSS File ‣ Multiple CSS Files ‣ Breakpoint Based Partials ‣ Module Based Partials Monday, April 22, 13

Slide 88

Slide 88 text

Module Based Partials HTML If MQs not supported If MQs are supported 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

Slide 89

Slide 89 text

Module Based Partials index.html Monday, April 22, 13

Slide 90

Slide 90 text

Module Based Partials index.html Monday, April 22, 13

Slide 91

Slide 91 text

Module Based Partials index.html Monday, April 22, 13

Slide 92

Slide 92 text

Module Based Partials index.html Monday, April 22, 13

Slide 93

Slide 93 text

Module Based Partials index.html Monday, April 22, 13

Slide 94

Slide 94 text

Module Based Partials index.html Monday, April 22, 13

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

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

Slide 99

Slide 99 text

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

Slide 100

Slide 100 text

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

Slide 101

Slide 101 text

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

Slide 102

Slide 102 text

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

Slide 103

Slide 103 text

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

Slide 104

Slide 104 text

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

Slide 105

Slide 105 text

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

Slide 106

Slide 106 text

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

Slide 107

Slide 107 text

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

Slide 108

Slide 108 text

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

Slide 109

Slide 109 text

I recommend module based partials Monday, April 22, 13

Slide 110

Slide 110 text

THERE IS NO BREAKPOINT Monday, April 22, 13

Slide 111

Slide 111 text

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

Slide 112

Slide 112 text

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

Slide 113

Slide 113 text

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

Slide 114

Slide 114 text

There is no Breakpoint Media Query Bookmarklet (by @robtarr) Monday, April 22, 13

Slide 115

Slide 115 text

There is no Breakpoint Monday, April 22, 13

Slide 116

Slide 116 text

Relax. Monday, April 22, 13

Slide 117

Slide 117 text

Think more modularly. Try something like SMACSS (from @snookca). Monday, April 22, 13

Slide 118

Slide 118 text

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

Slide 119

Slide 119 text

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

Slide 120

Slide 120 text

THANKS! @bencallahan Monday, April 22, 13