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

Making your Front-End Workflow AWESOME

Making your Front-End Workflow AWESOME

Using Sass + Grunt and other front end tools for Drupal Front-End workflow automation.

3f2f0c0fbc7be587727cdfff33c8be43?s=128

Kitt Hodsden

February 14, 2014
Tweet

Transcript

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

    Your Front-End Workflow AWESOME 1
  2. DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 2

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

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

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

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

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

    Your Front-End Workflow AWESOME 7
  8. DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 1.

    Embrace the DRY principle 2. Make changes easy 3. Make finding mistakes easy 8 Guiding principles of making our workflows AWESOME
  9. DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz Front

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

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

    a design or prototype Update the designs 11 What magic do we do?
  12. 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?
  13. 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?
  14. DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz Front

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

    How often do we have a blank slate, really?
  16. 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...
  17. DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 17

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    35 Installation information - ruby
  36. 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
  37. 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
  38. DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz RVM

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

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

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

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

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

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

    it. 44
  45. 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!
  46. DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz COMPASS

    46 Install Compass, too http://compass-style.org/install/
  47. 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.
  48. DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz CSS

    㱺 Sass 48
  49. 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.
  50. DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz Move

    and rename files. 50 How we get started with Sass in an existing project.
  51. 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.
  52. DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz Use

    sass-convert 52 How we get started with Sass in an existing project.
  53. 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.
  54. 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.
  55. DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 55

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

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

    $variable: value; Before variables...
  58. 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...
  59. 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!
  60. 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/
  61. DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz Variable

    name best practice. 61
  62. 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
  63. DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz Nested

    syntax 63 Quick! Sass in 5 slides!
  64. 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
  65. DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz @extend

    65 Quick! Sass in 5 slides!
  66. 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; }
  67. 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; }
  68. DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz <div

    class=”box box-info”> ... </div> 68 Sass syntax, talking @extend
  69. DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 69

    Sass syntax, talking @extend <div class=”box-info”> ... </div>
  70. DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz @mixin

    70 (@include) Quick! Sass in 5 slides!
  71. 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; }
  72. DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz When

    you can, use a Compass mixin. 72
  73. 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/
  74. DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz @mixin

    vs @extend 74 Sass Overview
  75. DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz You’re

    awesome. 75
  76. DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz _partials.scss

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

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

    Queries made EASY 78
  79. 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; } } }
  80. 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; } }
  81. 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; } }
  82. DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 1.

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

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

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

    has its config.rb 85
  86. DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 86

  87. 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 conifig.rb file
  88. DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 88

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

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

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

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

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

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

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

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

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

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

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

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

    <script>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
  101. DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 101

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

    a module for that. 102
  103. DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz http://drupal.org/project/livereload

    103
  104. 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
  105. DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz Or!

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

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

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

    <script src='//10.1.9.52:3000/socket.io/socket.io.js'></script> <script>var ___socket___ = io.connect('http://10.1.9.52:3000');</script> <script src='//10.1.9.52:3001/client/browser-sync-client.min.js'></script>
  109. DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 109

    drupal_add_html_head( array( '#type' => 'markup', '#markup' => " <script src='//10.1.9.52:3000/ socket.io/socket.io.js'></script> <script>var ___socket___ = io.connect('http:// 10.1.9.52:3000');</script> <script src='//10.1.9.52:3001/client/ browser-sync-client.min.js'></script> ", );
  110. DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz bs-config.js

    110
  111. 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, };
  112. DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 112

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

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

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

  116. 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
  117. 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
  118. 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
  119. DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 119

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

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

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

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

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

    Alfred looking up Drupal...
  125. 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
  126. DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz Can

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

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

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

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

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

    http://yeoman.io/ 131 Yeoman will be the grunt initializer later.
  132. 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
  133. 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 files
  134. DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 134

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

    package.json Gruntfile.js The two files grunt uses
  136. 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 file looks like
  137. DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 1.

    Watch for Sass file changes 2. Compile the Sass to CSS 3. Refresh the browser on change 137 What we want grunt to do.
  138. 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 Gruntfile.js file
  139. DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 139

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

    140 Where to find node and grunt packages
  141. DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz “grunt

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

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

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

    $ npm install grunt-contrib-compass --save-dev Installing the compass compiling node package
  145. 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
  146. DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 146

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

    grunt.initConfig({ compass: { dist: { options: { config: 'config.rb' } } } });
  148. 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' } }, } });
  149. 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' } }, } });
  150. 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' } }, } });
  151. DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 151

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

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

  154. 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
  155. DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 1.

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

    $ npm install grunt-browser-sync --save-dev
  157. 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
  158. DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 158

  159. 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
  160. DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 1.

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

    Reduce file sizes 2. Reduce the number of files 3. Reduce content rendering time 161
  162. DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz Images

    162
  163. 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
  164. DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 164

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

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

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

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

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

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

    Reduce file sizes 2. Reduce the number of files 3. Reduce content rendering time 170
  171. DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz Sprites!

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

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

    them is EASY! 173
  174. 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
  175. 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
  176. 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
  177. 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; }
  178. DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 1.

    Reduce file sizes 2. Reduce the number of files 3. Reduce content rendering time 178
  179. DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz Don’t

    nest more than 3 deep 179 http://css-tricks.com/sass-style-guide/
  180. 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
  181. DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 1.

    Embrace the DRY principle 2. Make changes easy 3. Make finding mistakes easy 181 Guiding principles of making our workflows AWESOME
  182. DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz Regression

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

    183
  184. 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
  185. 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
  186. 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 flow
  187. DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz Seeing

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

    188
  189. 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?
  190. DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz From

    the beginning! 190
  191. 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!
  192. DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz Faster

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

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

    194
  195. DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz <div

    id="banner"> <div class="logo"></div> <ul id="navigation"> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </div> 195
  196. DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz Yeoman

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

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

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

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

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

    skipped over Source maps Where in your Sass files 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 files. http://yeoman.io/ 201
  202. DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz Questions?

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

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

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

    up for more at frontendfast.com 205