Making your Front-End Workflow AWESOME

Slide 1

Slide 1 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz Making Your Front-End Workﬂow AWESOME 1

Slide 2

Slide 2 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 2 Hi!

Slide 3

Slide 3 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz Who are you? 3

Slide 4

Slide 4 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz What have we here? 4

Slide 5

Slide 5 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz What have we here? 5 What are we talking about?

Slide 6

Slide 6 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz What have we here? 6 What are we talking about?

Slide 7

Slide 7 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz Making Your Front-End Workﬂow AWESOME 7

Slide 8

Slide 8 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 1. Embrace the DRY principle 2. Make changes easy 3. Make ﬁnding mistakes easy 8 Guiding principles of making our workﬂows AWESOME

Slide 9

Slide 9 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz Front End Developers 9

Slide 10

Slide 10 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz Implement a design or prototype 10 What magic do we do?

Slide 11

Slide 11 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz Implement a design or prototype Update the designs 11 What magic do we do?

Slide 12

Slide 12 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz Implement a design or prototype Update the designs Make sure it works in all browsers 12 What magic do we do?

Slide 13

Slide 13 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz Implement a design or prototype Update the designs Make sure it works in all browsers Make it faster 13 What magic do we do?

Slide 14

Slide 14 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz Front End Developers 14 (we’re MAGICAL)

Slide 15

Slide 15 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 15 How often do we have a blank slate, really?

Slide 16

Slide 16 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz Implement a design or prototype Update the designs Make sure it works in all browsers Make it faster 16 We’re going to start talking about the middle of our projects...

Slide 17

Slide 17 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 17 What magic do we do?

Slide 18

Slide 18 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz Change the font BLUE 18 Easiest change ever!

Slide 19

Slide 19 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz #6c869d 㱺 #212939 19 Easiest change ever!

Slide 20

Slide 20 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 20 Well, phooey. The ticket was reopened.

Slide 21

Slide 21 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 21 Soon, EVERYTHING is important!

Slide 22

Slide 22 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 22

Slide 23

Slide 23 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 23

Slide 24

Slide 24 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 1. Embrace the DRY principle 2. Make changes easy 3. Make ﬁnding mistakes easy 24 Guiding principles!

Slide 25

Slide 25 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 1. Embrace the DRY principle 2. Make changes easy 3. Make ﬁnding mistakes easy 25 Guiding principles!

Slide 26

Slide 26 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz Use a CSS preprocessor. 26 Saw that coming, didn’t you?

Slide 27

Slide 27 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz Sass / LESS / Stylus 27 Saw that coming, didn’t you?

Slide 28

Slide 28 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz Quick Check! 28

Slide 29

Slide 29 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz Are we passing GO? Are we collecting $200? 29

Slide 30

Slide 30 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz Sass ⟳ CSS 30

Slide 31

Slide 31 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz Mac OSX 31

Slide 32

Slide 32 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 32 HOMEBREW http://mxcl.github.com/homebrew/ Installation information - ruby on OSX

Slide 33

Slide 33 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz Installation information - ruby on OSX $ brew install ruby 33

Slide 34

Slide 34 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz RVM RUBY VERSION MANAGER 34 Installation information for ruby https://rvm.io/rvm/install

Slide 35

Slide 35 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz LINUX 35 Installation information - ruby

Slide 36

Slide 36 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz Installation information - ruby on linux # apt-get install ruby1.9.1 $ sudo apt-get install ruby1.9.1 36

Slide 37

Slide 37 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz Installation information - ruby on linux # yum install ruby1.9.1 $ sudo yum install ruby1.9.1 37

Slide 38

Slide 38 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz RVM RUBY VERSION MANAGER 38 Installation information for ruby https://rvm.io/rvm/install

Slide 39

Slide 39 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz WINDOWS 39 Installation information

Slide 40

Slide 40 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz RUBYINSTALLER = FRIEND 40 Installation information - ruby on windows http://rubyinstaller.org/downloads/

Slide 41

Slide 41 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz While you’re at it... 41 If you’re installing software...

Slide 42

Slide 42 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 42 ... install nodejs, too.

Slide 43

Slide 43 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz Getting started with Sass 43

Slide 44

Slide 44 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz Install it. 44

Slide 45

Slide 45 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 45 $ gem update --system $ gem install sass $ sudo gem update --system $ sudo gem install sass Yay! Sass installed!

Slide 46

Slide 46 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz COMPASS 46 Install Compass, too http://compass-style.org/install/

Slide 47

Slide 47 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 47 $ gem update --system $ gem install compass $ sudo gem update --system $ sudo gem install compass Setting up tools. In this case, Compass.

Slide 48

Slide 48 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz CSS 㱺 Sass 48

Slide 49

Slide 49 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz Let us count the (3) ways. 49 How we get started with Sass in an existing project.

Slide 50

Slide 50 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz Move and rename ﬁles. 50 How we get started with Sass in an existing project.

Slide 51

Slide 51 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 51 $ mkdir scss $ mv css/styles.css scss/styles.scss Setting up tools. In this case, Compass.

Slide 52

Slide 52 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz Use sass-convert 52 How we get started with Sass in an existing project.

Slide 53

Slide 53 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 53 $ sass-convert --help Usage: sass-convert [options] [INPUT] [OUTPUT] $ $ cd theme-dir $ sass-convert --recursive --from=css --to=scss css scss Setting up tools. In this case, Compass.

Slide 54

Slide 54 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz Use http://css2sass.heroku.com 54 How we get started with Sass in an existing project.

Slide 55

Slide 55 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 55

Slide 56

Slide 56 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz $variables 56 Quick! Sass in 5 slides!

Slide 57

Slide 57 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 57 $variable: value; Before variables...

Slide 58

Slide 58 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 58 dev[405]% grep background-color * style.css: background-color: #edf5fa; style.css: background-color: #ddecf5; style.css: background-color: #e6f1f7; style.css: background-color: #d4e7f3; style.css: background-color: #edf5fa; style.css: background-color: #fcfce8; style.css: background-color: #fcf9e5; style.css: background-color: #fbf5cf; style.css: background-color: #fefefe; style.css: background-color: #f5f5f5; style.css: background-color: #fdf5e6; style.css: background-color: #fdf2de; style.css: background-color: #fbe4e4; style.css: background-color: #fbdbdb; style.css: background-color: #ffcccc; style.css: background-color: #ffffdd; style.css: background-color: #ddffdd; Before variables...

Slide 59

Slide 59 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 59 $color-main: rgb(255,251,114); $color-second: rgb(70,87,204); $color-hilite: rgb(189,177,255); ... .button { background-color: $color-main; ... } See? Easy!

Slide 60

Slide 60 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 60 $font-times: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif; $font-garamond: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif; Uses of variables: fonts http://css-tricks.com/snippets/css/font-stacks/

Slide 61

Slide 61 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz Variable name best practice. 61

Slide 62

Slide 62 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 62 $ourBlue : #1f4363; $ourBlueLight : #355673; $ourBlueLighter : #6c869d; $ourBlueDark : #0e2c47; $ourBlueDarker : #212939; $ourBlueHover : #7e99b3; ... $color_border $ourBlue; $color_link: $ourBlue; $table_header: $ourBlueLighter; Use descriptive AND functional variable names http://sachagreif.com/sass-color-variables

Slide 63

Slide 63 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz Nested syntax 63 Quick! Sass in 5 slides!

Slide 64

Slide 64 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 64 .navigation { a { display: block; padding: .5em; color: $color-link; border: none; } b { font-size: .9em; } span { display: block; font-size: .8em; } } .navigation a { display: block; padding: .5em; color: #444040; border: none; } .navigation b { font-size: .9em; } .navigation span { display: block; font-size: .8em; } Sass syntax, talking nesting

Slide 65

Slide 65 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz @extend 65 Quick! Sass in 5 slides!

Slide 66

Slide 66 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 66 Sass syntax, talking @extend .box { padding: 2em; color: $color-text; background-color: $color-bg; } .box-warning { @extend .box; border: 2px dotted $color-yikes; } .box-success { @extend .box; border: 2px dotted $color-success; } .box-info { @extend .box; border: 2px dotted $color-info; }

Slide 67

Slide 67 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 67 Sass syntax, talking @extend .box, .box-warning, .box-success, .box-info { padding: 2em; color: #333333; background-color: white; } .box-warning { border: 2px dotted #cc0000; } .box-success{ border: 2px dotted #33cc00; } .box-info { border: 2px dotted #996633; }

Slide 68

Slide 68 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz

...

68 Sass syntax, talking @extend

Slide 69

Slide 69 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 69 Sass syntax, talking @extend

...

Slide 70

Slide 70 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz @mixin 70 (@include) Quick! Sass in 5 slides!

Slide 71

Slide 71 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 71 Sass syntax, @mixin @mixin module($parent-color) { color: darken($parent-color, 50%); } .main_module { @include module(#ccc); min-height: 3em; } .sidebar_module { @include module(#444); min-height: 2em; }

Slide 72

Slide 72 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz When you can, use a Compass mixin. 72

Slide 73

Slide 73 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 73 Sass syntax, @mixin @import "compass/css3/box-sizing"; * { @include box-sizing(border-box); } http://compass-style.org/reference/compass/css3/box_sizing/

Slide 74

Slide 74 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz @mixin vs @extend 74 Sass Overview

Slide 75

Slide 75 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz You’re awesome. 75

Slide 76

Slide 76 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz _partials.scss 76 Quick! Sass in 5 slides!

Slide 77

Slide 77 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 77 Quick! Sass in 5 slides! @if/@else @for @each @functions (return a single value)

Slide 78

Slide 78 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz Media Queries made EASY 78

Slide 79

Slide 79 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 79 @mixin bp($point) { $bp-mobile: "(max-width: 600px)"; $bp-notso: "(max-width: 1250px)"; $bp-fullon: "(max-width: 1600px)"; @if $point == mq-fullon { @media #{$bp-fullon} { @content; } } @else if $point == mq-notso { @media #{$bp-notso} { @content; } } @else if $point == mq-mobile { @media #{$bp-mobile} { @content; } } }

Slide 80

Slide 80 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 80 h1 { font-size: 20px; font-family: $font-main; @include bp(mq-notso) { font-size: 30px; } @include bp(mq-fullon) { font-size: 60px; } }

Slide 81

Slide 81 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 81 h1 { font-size: 20px; } @media (max-width: 1250px) { h1 { font-size: 30px; } } @media (max-width: 1600px) { h1 { font-size: 60px; } }

Slide 82

Slide 82 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 1. Embrace the DRY principle 2. Make changes easy 3. Make ﬁnding mistakes easy 82 Guiding principles!

Slide 83

Slide 83 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz More Information. 83 Sass for Designers Pragmatic Guide To Sass Sass and Compass in Action

Slide 84

Slide 84 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 84 sass --watch --line-numbers --style expanded scss:css

Slide 85

Slide 85 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz Compass has its conﬁg.rb 85

Slide 86

Slide 86 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 86

Slide 87

Slide 87 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 87 compass config config.rb --sass-dir=scss \ --css-dir=css --javascripts-dir=js \ --output-style=expanded How to create a compass coniﬁg.rb ﬁle

Slide 88

Slide 88 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 88 $ compass watch

Slide 89

Slide 89 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz If you like GUIs 89

Slide 90

Slide 90 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 90 https://incident57.com/codekit/

Slide 91

Slide 91 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 91 http://compass.kkbox.com/

Slide 92

Slide 92 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 92 http://koala-app.com/

Slide 93

Slide 93 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz Wait. 93

Slide 94

Slide 94 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 1. Embrace the DRY principle 2. Make changes easy 3. Make ﬁnding mistakes easy 94 Guiding principles!

Slide 95

Slide 95 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz Still. 95

Slide 96

Slide 96 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 1. Embrace the DRY principle 2. Make changes easy 3. Make ﬁnding mistakes easy 96 Guiding principles!

Slide 97

Slide 97 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz change. click. change. click. 97

Slide 98

Slide 98 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 98

Slide 99

Slide 99 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz LiveReload 99 http://livereload.com/

Slide 100

Slide 100 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 100 document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ': 35729/livereload.js? snipver=1"></' + 'script>')</ script> If you don’t use browser plugins, you need this JS for LiveReload

Slide 101

Slide 101 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 101 drupal_add_html_head( array( '#type' => 'markup', '#markup' => 'document.write(\'<script src="http://\' + (location.host || \'localhost\').split(\':\')[0] + \':35729/livereload.js? snipver=1"></\' + 'script>\')</ script>'), 'livereload' );

Slide 102

Slide 102 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz There’s a module for that. 102

Slide 103

Slide 103 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz http://drupal.org/project/livereload 103

Slide 104

Slide 104 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz IE options http://github.com/dvdotsenko/livereload_ie_extension http://reloadit.codeplex.com/ 104 LiveReload IE options

Slide 105

Slide 105 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz Or! 105

Slide 106

Slide 106 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz browser-sync 106 https://github.com/shakyShane/browser-sync/wiki/options

Slide 107

Slide 107 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 107 $ npm install -g browser-sync

Slide 108

Slide 108 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 108 var ___socket___ = io.connect('http://10.1.9.52:3000');

Slide 109

Slide 109 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 109 drupal_add_html_head( array( '#type' => 'markup', '#markup' => " var ___socket___ = io.connect('http:// 10.1.9.52:3000'); ", );

Slide 110

Slide 110 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz bs-conﬁg.js 110

Slide 111

Slide 111 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 111 module.exports = { files: "css/*.css", proxy: { host: "drupalsouth.localhost", port: 8082 }, ghostMode: { clicks: true, links: true, forms: true, scroll: true }, open: true, injectChanges: false, notify: true, };

Slide 112

Slide 112 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 112 $ browser-sync

Slide 113

Slide 113 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 113

Slide 114

Slide 114 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 1. Embrace the DRY principle 2. Make changes easy 3. Make ﬁnding mistakes easy 114 Guiding principles!

Slide 115

Slide 115 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 115

Slide 116

Slide 116 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz Alfred http://alfredapp.com/ Quicksilver http://qsapp.com/ Launchbar http://www.obdev.at/products/launchbar/ 116

Slide 117

Slide 117 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz Skylight http://www.candylabs.com/skylight Launchy http://www.launchy.net/ http://pylaunchy.sourceforge.net/docs/ 117

Slide 118

Slide 118 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz Gnome Launch Box https://live.gnome.org/ Gnome Do http://do.davebsd.com/ Launchy http://www.launchy.net/ http://pylaunchy.sourceforge.net/ 118

Slide 119

Slide 119 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 119

Slide 120

Slide 120 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 120

Slide 121

Slide 121 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 121

Slide 122

Slide 122 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 122

Slide 123

Slide 123 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 123 Alfred using Dash for PHP

Slide 124

Slide 124 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 124 Alfred looking up Drupal...

Slide 125

Slide 125 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 125 https://github.com/zenorocha/alfred-workflows/ https://github.com/aiyodk/Alfred-Extensions/tree/master/AlfredApp_2.x https://github.com/willfarrell/alfred-workflows Alfred Workflows

Slide 126

Slide 126 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz Can you feel the awesome? 126

Slide 127

Slide 127 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 127

Slide 128

Slide 128 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 128

Slide 129

Slide 129 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz YET! 129 No GUI for Grunt...

Slide 130

Slide 130 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 130 $ npm install -g grunt-cli Install the grunt package

Slide 131

Slide 131 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz YEOMAN http://yeoman.io/ 131 Yeoman will be the grunt initializer later.

Slide 132

Slide 132 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 132 $ npm install -g grunt-init This is one way to start using grunt in a project, use grunt-init

Slide 133

Slide 133 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 133 $ git clone https:// github.com/gruntjs/grunt- init-gruntfile.git ~/.grunt-init/gruntfile Download and save the grunt template ﬁles

Slide 134

Slide 134 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 134 $ grunt-init gruntfile Generate the ﬁles grunt needs

Slide 135

Slide 135 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 135 package.json Gruntfile.js The two ﬁles grunt uses

Slide 136

Slide 136 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 136 { "engines": { "node": ">= 0.10.0" }, "devDependencies": { "grunt": "~0.4.2", "grunt-contrib-jshint": "~0.7.2", "grunt-contrib-watch": "~0.5.3", } } This is what a package.json ﬁle looks like

Slide 137

Slide 137 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 1. Watch for Sass ﬁle changes 2. Compile the Sass to CSS 3. Refresh the browser on change 137 What we want grunt to do.

Slide 138

Slide 138 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 138 module.exports = function(grunt) { // Project configuration. grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), uglify: { options: { banner: '/*! <%= pkg.name %> <%="yyyy-mm-dd") %> */\n' }, build: { src: 'src/<%= pkg.name %>.js', dest: 'build/<%= pkg.name %>.min.js' } } }); // Load the plugin that provides the "uglify" task. grunt.loadNpmTasks('grunt-contrib-uglify'); // Default task(s). grunt.registerTask('default', ['uglify']); }; A basic Gruntﬁle.js ﬁle

Slide 139

Slide 139 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 139 $ npm install grunt-contrib-compass --save-dev Installing the compass compiling node package

Slide 140

Slide 140 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz http://npmjs.org 140 Where to ﬁnd node and grunt packages

Slide 141

Slide 141 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz “grunt compass” 141 What I searched for on npmjs.org

Slide 142

Slide 142 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz THIS IS OKAY. 142

Slide 143

Slide 143 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 143 Just like we have abandoned modules, node does, too.

Slide 144

Slide 144 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 144 $ npm install grunt-contrib-compass --save-dev Installing the compass compiling node package

Slide 145

Slide 145 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 145 $ ls Gemfile! ! README.txt fonts node_modules template.php Gemfile.lock bs-config.js images package.json templates Gruntfile.js config.rb js screenshot.png theme.info Guardfile! css logo.png scss widgets

Slide 146

Slide 146 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 146 "grunt-contrib-compass": "~0.7.2"

Slide 147

Slide 147 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 147 grunt.initConfig({ compass: { dist: { options: { config: 'config.rb' } } } });

Slide 148

Slide 148 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 148 grunt.initConfig({ watch: { css: { files: ['**/*.scss'], tasks: ['compass'] } }, compass: { dev: { options: { sassDir: 'scss', cssDir: 'css', outputStyle: 'expanded' } }, } });

Slide 149

Slide 149 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 149 grunt.initConfig({ watch: { css: { files: ['**/*.scss'], tasks: ['compass'] } }, compass: { dev: { options: { sassDir: 'scss', cssDir: 'css', outputStyle: 'expanded' } }, } });

Slide 150

Slide 150 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 150 grunt.initConfig({ watch: { css: { files: ['**/*.scss'], tasks: ['compass'] } }, compass: { dev: { options: { sassDir: 'scss', cssDir: 'css', outputStyle: 'expanded' } }, } });

Slide 151

Slide 151 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 151 grunt.loadNpmTasks('grunt-contrib-compass'); ... grunt.registerTask('default', ['compass']);

Slide 152

Slide 152 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 152 grunt.registerTask('gogogo', ['browser_sync', 'watch']);

Slide 153

Slide 153 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 153

Slide 154

Slide 154 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 1. Find module 2. Install with npm install --save-dev 3. Add the task to our Gruntfile.js file 4. Add the tasks to a command 5. Run the command ... 7. Profit! 154

Slide 155

Slide 155 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 1. Watch for Sass ﬁle changes 2. Compile the Sass to CSS 3. Refresh the browser on change 155 What we want grunt to do.

Slide 156

Slide 156 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 156 $ npm install grunt-browser-sync --save-dev

Slide 157

Slide 157 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 157 browser_sync: { bsFiles: { src: [ 'css/*.css', 'img/*', 'js/*.js' ] }, options: { watchTask: true, proxy: { host: "kitthod.localhost", port: 8082 }, server: false, } } https://www.npmjs.org/package/grunt-browser-sync

Slide 158

Slide 158 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 158

Slide 159

Slide 159 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz Implement a design or prototype Update the designs Make sure it works in all browsers Make it faster 159

Slide 160

Slide 160 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 1. Reduce ﬁle sizes 2. Reduce the number of ﬁles 3. Reduce content rendering time 160

Slide 161

Slide 161 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 1. Reduce ﬁle sizes 2. Reduce the number of ﬁles 3. Reduce content rendering time 161

Slide 162

Slide 162 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz Images 162

Slide 163

Slide 163 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz npm install grunt-contrib-imagemin --save-dev 163 Make pages load faster by reducing image sizes

Slide 164

Slide 164 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 164 imagemin: { prod: { files: [{ expand: true, cwd: 'imgs-src/', src: ['**/*.{png,jpg,gif}'], dest: 'imgs/' }] } }

Slide 165

Slide 165 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz npm install grunt-svgmin --save-dev 165 Reduce SVG sizes, too

Slide 166

Slide 166 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz npm install grunt-contrib-cssmin --save-dev 166 Minimize CSS ﬁles

Slide 167

Slide 167 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz npm install grunt-contrib-uglify --save-dev 167 Minimze javascript ﬁles

Slide 168

Slide 168 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz npm install grunt-contrib-jshint --save-dev 168 Use jshint when editing your Gruntﬁle.js https://github.com/gruntjs/grunt-contrib-jshint

Slide 169

Slide 169 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 169

Slide 170

Slide 170 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 1. Reduce ﬁle sizes 2. Reduce the number of ﬁles 3. Reduce content rendering time 170

Slide 171

Slide 171 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz Sprites! 171 Making things easier with sprites!

Slide 172

Slide 172 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz WHOO! 172

Slide 173

Slide 173 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz Creating them is EASY! 173

Slide 174

Slide 174 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 174 @import "compass/utilities/sprites"; ... $sprites-spacing: 20px; @import “../img/sprites/*png”; Creating sprite images with Compass

Slide 175

Slide 175 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 175 @import "compass/utilities/sprites"; ... $orange-spacing: 20px; @import “../img/orange/*png”; Sprite names are dependent on your directory name

Slide 176

Slide 176 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 176 @import "compass/utilities/sprites"; ... $awesome-spacing: 20px; @import “../img/awesome/*png”; Sprite names are dependent on your directory name

Slide 177

Slide 177 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 177 Using generated sprites .footer-follow-us{ .twitter { @include awesome-sprite(follow-us-twitter); } .facebook { @include awesome-sprite(follow-us-fb); } .google { @include awesome-sprite(follow-us-google); } .pinterest { @include awesome-sprite(follow-us-pins); } } .awesome-sprite, .footer-follow-us .twitter, .footer-follow-us .facebook, .footer-follow-us .google, .footer-follow-us .pinterest { background: url('../images/ awesome-s34fe0604ab.png') no-repeat; } .footer-follow-us .twitter { background-position: 0 -96px; } .footer-follow-us .facebook { background-position: 0 0; } .footer-follow-us .google { background-position: 0 -32px; } .footer-follow-us .pinterest { background-position: 0 -64px; }

Slide 178

Slide 178 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 1. Reduce ﬁle sizes 2. Reduce the number of ﬁles 3. Reduce content rendering time 178

Slide 179

Slide 179 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz Don’t nest more than 3 deep 179 http://css-tricks.com/sass-style-guide/

Slide 180

Slide 180 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz Avoid using tag selectors Use class selectors if you can. 180 https://developers.google.com/speed/docs/best-practices/rendering

Slide 181

Slide 181 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 1. Embrace the DRY principle 2. Make changes easy 3. Make ﬁnding mistakes easy 181 Guiding principles of making our workﬂows AWESOME

Slide 182

Slide 182 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz Regression testing 182

Slide 183

Slide 183 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz PhantomCSS 183

Slide 184

Slide 184 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz npm install grunt-phantomcss --save-dev install details at https://www.npmjs.org/package/grunt-phantomcss 184

Slide 185

Slide 185 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 185 phantomcss: { desktop: { options: { screenshots: 'test/visual/desktop/', results: 'results/visual/desktop', viewportSize: [1024, 768] }, src: [ 'test/visual/**.js' ] }, mobile: { options: { screenshots: 'test/visual/mobile/', results: 'results/visual/mobile', viewportSize: [320, 480] }, src: [ 'test/visual/**.js' ] } } phantomcss grunt task

Slide 186

Slide 186 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 186 casper.start('http://drupalsouth.localhost:8082/') .then(function() { phantomcss.screenshot('#region-branding', 'region-branding'); }). then( function now_check_the_screenshots(){ phantomCSS.compareAll(); }); phantomcss website ﬂow

Slide 187

Slide 187 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz Seeing failures 187 http://tldr.huddle.com/blog/css-testing/

Slide 188

Slide 188 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz Phew! 188

Slide 189

Slide 189 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz Implement a design or prototype Update the designs Make sure it works in all browsers Make it faster 189 What magic do we do?

Slide 190

Slide 190 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz From the beginning! 190

Slide 191

Slide 191 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz https://github.com/mattbanks/Drupal-7-Starter-Theme https://drupal.org/project/aurora https://drupal.org/project/omega 191 Projects already set up with all of this!

Slide 192

Slide 192 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz Faster HTML 192

Slide 193

Slide 193 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz http://docs.emmet.io/ 193

Slide 194

Slide 194 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz div#banner>div.logo+ul#navigation>li*4>a 194

Slide 195

Slide 195 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz

195

Slide 196

Slide 196 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz Yeoman 196

Slide 197

Slide 197 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz What about drush? 197

Slide 198

Slide 198 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz SURE! 198

Slide 199

Slide 199 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 199 npm install grunt-drush --save-dev https://github.com/nickpack/grunt-drush

Slide 200

Slide 200 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz Wow, that was fast. 200

Slide 201

Slide 201 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz I skipped over Source maps Where in your Sass ﬁles that CSS is from http://code.tutsplus.com/tutorials/developing-with-sass- and-chrome-devtools--net-32805 Bundler Managing what ruby gems you have installed http://bundler.io/ Creating your own Grunt tasks http://gruntjs.com/creating-tasks Yeoman Generating modules, themes, even template ﬁles. http://yeoman.io/ 201

Slide 202

Slide 202 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz Questions? 202

Slide 203

Slide 203 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz You’re awesome. 203

Slide 204

Slide 204 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz Thanks! 204

Slide 205

Slide 205 text

DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz Sign up for more at frontendfast.com 205