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

Automate All the Front-End Development Things!

Automate All the Front-End Development Things!

cfObjective 2014 talk slides on how to automate front-end workflows with Grunt, Sass, Browser-Sync, Yeoman, Alfred, application launchers, and the like.

Kitt Hodsden

May 15, 2014
Tweet

More Decks by Kitt Hodsden

Other Decks in Programming

Transcript

  1. Kitt Hodsden • @kitt • http://ki.tt/cfo You are invited to

    participate in group note taking at: http://ki.tt/cfo14notes 10 Community knowledge!
  2. Kitt Hodsden • @kitt • http://ki.tt/cfo node & ruby 12

    We need node and ruby to use the tools we’re going to talk about.
  3. Kitt Hodsden • @kitt • http://ki.tt/cfo 13 Setup node by

    downloading the installer and running it. http://nodejs.org
  4. Kitt Hodsden • @kitt • http://ki.tt/cfo 14 # mac /

    linux $ which ruby /usr/local/bin/ruby $ ruby --version ruby 2.0.0p195 # windows > where ruby C:\Ruby200\bin\ruby.exe > ruby --version ruby 2.0.0p451 Yay! Sass installed! See if you already have ruby installed
  5. Kitt Hodsden • @kitt • http://ki.tt/cfo 15 HOMEBREW http://mxcl.github.com/homebrew/ $

    brew install ruby RVM RUBY VERSION MANAGER https://rvm.io/rvm/install Install ruby in different ways on OSX OSX
  6. Kitt Hodsden • @kitt • http://ki.tt/cfo 16 HOMEBREW http://mxcl.github.com/homebrew/ $

    brew install ruby RVM RUBY VERSION MANAGER https://rvm.io/rvm/install Install ruby in different ways on OSX OSX
  7. Kitt Hodsden • @kitt • http://ki.tt/cfo 18 APT / YUM

    $ sudo apt-get install ruby1.9.1 $ sudo yum install ruby1.9.1 RVM RUBY VERSION MANAGER https://rvm.io/rvm/install Install ruby in different ways on Linux Linux
  8. Kitt Hodsden • @kitt • http://ki.tt/cfo 19 APT / YUM

    $ sudo apt-get install ruby1.9.1 $ sudo yum install ruby1.9.1 RVM RUBY VERSION MANAGER https://rvm.io/rvm/install Install ruby in different ways on Linux Linux
  9. Kitt Hodsden • @kitt • http://ki.tt/cfo 20 RUBYINSTALLER http://rubyinstaller.org/downloads/ PIK

    https://github.com/vertiginous/pik Install ruby in different ways on Windows Windows
  10. Kitt Hodsden • @kitt • http://ki.tt/cfo 21 RUBYINSTALLER http://rubyinstaller.org/downloads/ PIK

    https://github.com/vertiginous/pik Install ruby in different ways on Windows Windows CYGWIN http://cygwin.com
  11. Kitt Hodsden • @kitt • http://ki.tt/cfo 1. Embrace the DRY

    principle 26 Guiding principles of making our workflows AWESOME
  12. Kitt Hodsden • @kitt • http://ki.tt/cfo 1. Embrace the DRY

    principle 2. Make changes easy 27 Guiding principles of making our workflows AWESOME
  13. Kitt Hodsden • @kitt • http://ki.tt/cfo 1. Embrace the DRY

    principle 2. Make changes easy 3. Make finding mistakes easy 28 Guiding principles of making our workflows AWESOME
  14. Kitt Hodsden • @kitt • http://ki.tt/cfo Implement a design or

    prototype Update the designs 30 What magic do we do?
  15. Kitt Hodsden • @kitt • http://ki.tt/cfo Implement a design or

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

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

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

    prototype Update the designs Make sure it works in all browsers Make it faster 35
  19. Kitt Hodsden • @kitt • http://ki.tt/cfo Implement a design or

    prototype Update the designs Make sure it works in all browsers Make it faster 37
  20. Kitt Hodsden • @kitt • http://ki.tt/cfo Implement a design or

    prototype Update the designs Make sure it works in all browsers Make it faster 38
  21. Kitt Hodsden • @kitt • http://ki.tt/cfo change. click. change. click.

    40 change. click. change. click. change click. change. click. change. click. hange. click. hange. click. hange. click. change. click. change click. change click. change. click.
  22. Kitt Hodsden • @kitt • http://ki.tt/cfo 41 Guiding principles! 1.

    Embrace the DRY principle 2. Make changes easy 3. Make finding mistakes easy
  23. Kitt Hodsden • @kitt • http://ki.tt/cfo 48 <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
  24. Kitt Hodsden • @kitt • http://ki.tt/cfo 49 <cfoutput> <script>document.write('<script src="http://'

    + (location.host || 'localhost').split(':') [0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script> </cfoutput> If you don’t use browser plugins, you need this JS for LiveReload
  25. Kitt Hodsden • @kitt • http://ki.tt/cfo 53 Guiding principles! 1.

    Embrace the DRY principle 2. Make changes easy 3. Make finding mistakes easy
  26. Kitt Hodsden • @kitt • http://ki.tt/cfo 58 In OSX, drag

    and drop the folder into the terminal window for the path.
  27. Kitt Hodsden • @kitt • http://ki.tt/cfo 60 // save this

    into run-server.js var connect = require('connect'); connect.createServer( connect.static(__dirname) ).listen(8080); If you don’t have a local development environment, use this run-server.js
  28. Kitt Hodsden • @kitt • http://ki.tt/cfo 61 $ npm install

    connect ... $ node run-server.js # open http://localhost:8080/index.html # control-c to stop If you don’t have a local development environment, install the connect package
  29. Kitt Hodsden • @kitt • http://ki.tt/cfo 62 > npm install

    connect ... > node run-server.js # open http://127.0.0.1:8080/index.html # control-c to stop If you don’t have a local development environment on Windows, install the connect package
  30. Kitt Hodsden • @kitt • http://ki.tt/cfo 63 You can accept

    this local JS file running on node, turn it off later!
  31. Kitt Hodsden • @kitt • http://ki.tt/cfo 70 $ browser-sync init

    [BS] Config file created (bs-config.js) [BS] To use it, in the same directory run: browser-sync $
  32. Kitt Hodsden • @kitt • http://ki.tt/cfo 71 module.exports = {

    files: "css/*.css", proxy: { host: "localhost", port: 8080 }, ghostMode: { clicks: true, links: true, forms: true, scroll: true }, open: true, injectChanges: false, notify: true, }; https://github.com/shakyShane/browser-sync/wiki/options
  33. Kitt Hodsden • @kitt • http://ki.tt/cfo module.exports = { files:

    "css/*.css", proxy: { host: "localhost", port: 8080 }, ghostMode: { clicks: true, links: true, forms: true, scroll: true }, open: true, injectChanges: false, notify: true, }; 72 https://github.com/shakyShane/browser-sync/wiki/options
  34. Kitt Hodsden • @kitt • http://ki.tt/cfo 73 module.exports = {

    files: ["css/*.css", "**.*.html", "js/**/*.js"], proxy: { host: "localhost", port: 8080 }, ghostMode: { clicks: true, links: true, forms: true, scroll: true }, open: true, injectChanges: false, notify: true, }; https://github.com/shakyShane/browser-sync/wiki/options
  35. Kitt Hodsden • @kitt • http://ki.tt/cfo 76 $ browser-sync start

    [BS] Copy the following snippet into your website, just before the closing </ body> tag <script src='//192.168.5.6:3000/socket.io/socket.io.js'></script> <script>var ___socket___ = io.connect('http://192.168.5.6:3000');</script> <script src='//192.168.5.6:3001/client/browser-sync-client.0.7.0.js'></script> [BS] Watching files...
  36. Kitt Hodsden • @kitt • http://ki.tt/cfo Gnome Launch Box https://live.gnome.org/

    Gnome Do http://do.davebsd.com/ Launchy http://www.launchy.net/ http://pylaunchy.sourceforge.net/ 83
  37. Kitt Hodsden • @kitt • http://ki.tt/cfo Can you feel the

    awesome? 93 Awwwwwwwww yissssssssssssssssssss!
  38. Kitt Hodsden • @kitt • http://ki.tt/cfo Implement a design or

    prototype Update the designs Make sure it works in all browsers Make it faster 94
  39. Kitt Hodsden • @kitt • http://ki.tt/cfo 96 $ npm install

    -g grunt-cli Install the grunt package
  40. Kitt Hodsden • @kitt • http://ki.tt/cfo 98 $ npm install

    -g grunt-init $ git clone https://github.com/ gruntjs/grunt-init-gruntfile.git ~/.grunt-init/gruntfile $ grunt-init gruntfile Download the grunt template files and generate the grunt config files ...
  41. Kitt Hodsden • @kitt • http://ki.tt/cfo 101 { "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
  42. Kitt Hodsden • @kitt • http://ki.tt/cfo 102 $ npm install

    With a package.json file, you can install the needed packages easily.
  43. Kitt Hodsden • @kitt • http://ki.tt/cfo 1. Watch for file

    changes 2. Refresh the browser on change 103 What we want grunt to do.
  44. Kitt Hodsden • @kitt • http://ki.tt/cfo 104 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
  45. Kitt Hodsden • @kitt • http://ki.tt/cfo 105 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
  46. Kitt Hodsden • @kitt • http://ki.tt/cfo 106 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
  47. Kitt Hodsden • @kitt • http://ki.tt/cfo 107 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
  48. Kitt Hodsden • @kitt • http://ki.tt/cfo 1. Find grunt plugin*

    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! *write if you need to 109 How to add a task to grunt
  49. Kitt Hodsden • @kitt • http://ki.tt/cfo 114 $ npm install

    grunt-browser-sync --save-dev Installing the browser-sync grunt package
  50. Kitt Hodsden • @kitt • http://ki.tt/cfo 115 $ 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
  51. Kitt Hodsden • @kitt • http://ki.tt/cfo 117 browserSync: { bsFiles:

    { src: [ 'css/*.css', 'img/*', 'js/*.js', '*.html' ] }, options: { watchTask: true, proxy: { host: "localhost", port: 8082 }, server: false, } },
  52. Kitt Hodsden • @kitt • http://ki.tt/cfo 118 browserSync: { bsFiles:

    { src: [ 'css/*.css', 'img/*', 'js/*.js', '*.html' ] }, options: { watchTask: true, proxy: { host: "localhost", port: 8082 }, server: false, } },
  53. Kitt Hodsden • @kitt • http://ki.tt/cfo 119 browserSync: { bsFiles:

    { src: [ 'css/*.css', 'img/*', 'js/*.js', '*.html' ] }, options: { watchTask: true, proxy: { host: "localhost", port: 8082 }, server: false, } },
  54. Kitt Hodsden • @kitt • http://ki.tt/cfo 120 watch: { gruntfile:

    { files: '<%= jshint.gruntfile.src %>', tasks: ['jshint:gruntfile'] }, scss: { files: ['scss/*.scss'], tasks: ['sass:dev'] }, js: { // watch for js changes except for script.min.js files: ['js/*.js', '!js/script.min.js'], tasks: ['uglify:dev'] } }
  55. Kitt Hodsden • @kitt • http://ki.tt/cfo 123 $ grunt gogogo

    Running the newly defined “gogogo” command
  56. Kitt Hodsden • @kitt • http://ki.tt/cfo Implement a design or

    prototype Update the designs Make sure it works in all browsers Make it faster 127
  57. Kitt Hodsden • @kitt • http://ki.tt/cfo 129 1. Find grunt

    plugin* 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! *write if you need to
  58. Kitt Hodsden • @kitt • http://ki.tt/cfo 1. Embrace the DRY

    principle 2. Make changes easy 3. Make finding mistakes easy 130 Guiding principles of making our workflows AWESOME
  59. Kitt Hodsden • @kitt • http://ki.tt/cfo 131 $ npm install

    matchdep --save-dev Installing the browser-sync grunt package
  60. Kitt Hodsden • @kitt • http://ki.tt/cfo 132 ... // load

    all the grunt modules instead of one each line require("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks); grunt.registerTask('checkjs', ['jshint']); grunt.registerTask('watchjs', ['jshint', 'watch']); grunt.registerTask('gruntjs', ['jshint:gruntfile', 'watch']);
  61. Kitt Hodsden • @kitt • http://ki.tt/cfo 1. Embrace the DRY

    principle 2. Make changes easy 3. Make finding mistakes easy 133 Guiding principles of making our workflows AWESOME
  62. Kitt Hodsden • @kitt • http://ki.tt/cfo npm install grunt-contrib-jshint --save-dev

    135 Use jshint when editing your Gruntfile.js https://github.com/gruntjs/grunt-contrib-jshint
  63. Kitt Hodsden • @kitt • http://ki.tt/cfo 136 jshint: { options:

    { ... }, gruntfile: { src: ‘Gruntfile.js’ } } ... grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.registerTask('checkjs', ['jshint']); grunt.registerTask('watchjs', ['jshint', 'watch']); grunt.registerTask('gruntjs', ['jshint:gruntfile', 'watch']);
  64. Kitt Hodsden • @kitt • http://ki.tt/cfo npm install grunt-contrib-qunit --save-dev

    138 Javascript unit tests https://github.com/gruntjs/grunt-contrib-qunit
  65. Kitt Hodsden • @kitt • http://ki.tt/cfo npm install grunt-contrib-jasmine --save-dev

    139 Javascript unit tests https://github.com/gruntjs/grunt-contrib-jasmine
  66. Kitt Hodsden • @kitt • http://ki.tt/cfo npm install grunt-simple-mocha --save-dev

    140 Javascript unit tests https://github.com/yaymukund/grunt-simple-mocha
  67. Kitt Hodsden • @kitt • http://ki.tt/cfo Implement a design or

    prototype Update the designs Make sure it works in all browsers Make it faster 141
  68. Kitt Hodsden • @kitt • http://ki.tt/cfo Implement a design or

    prototype Update the designs Make sure it works in all browsers Make it faster 142
  69. Kitt Hodsden • @kitt • http://ki.tt/cfo 1. Reduce file sizes

    2. Reduce the number of files 3. Reduce content rendering time 143
  70. Kitt Hodsden • @kitt • http://ki.tt/cfo 144 1. Reduce file

    sizes 2. Reduce the number of files 3. Reduce content rendering time
  71. Kitt Hodsden • @kitt • http://ki.tt/cfo 147 imagemin: { prod:

    { files: [{ expand: true, cwd: 'imgs-src/', src: ['**/*.{png,jpg,gif}'], dest: 'imgs/' }] } }
  72. Kitt Hodsden • @kitt • http://ki.tt/cfo 149 grunt.initConfig({ svgmin: {

    // Task options: { // Configuration that will be passed directly to SVGO plugins: [ { removeViewBox: false }, { removeUselessStrokeAndFill: false } ] }, dist: { // Target files: [{ // Dictionary of files expand: true, // Enable dynamic expansion. cwd: 'img/src', // Src matches are relative to this path. src: ['**/*.svg'], // Actual pattern(s) to match. dest: 'img/', // Destination path prefix. ext: '.min.svg' // Dest filepaths will have this extension. // ie: optimise img/src/branding/logo.svg and store it in img/branding/logo.min.svg }] } }); grunt.loadNpmTasks('grunt-svgmin'); grunt.registerTask('default', ['svgmin']); Sample grunt-svgmin configuration
  73. Kitt Hodsden • @kitt • http://ki.tt/cfo npm install grunt-responsive-images --save-dev

    150 Responsive images by resizing https://github.com/andismith/grunt-responsive-images
  74. Kitt Hodsden • @kitt • http://ki.tt/cfo 151 grunt.initConfig({ responsive_images: {

    myTask: { options: { sizes: [{ width: 320, height: 240 },{ name: 'large', width: 640 },{ name: "large", width: 1024, suffix: "_x2", quality: 60 }] }, files: [{ expand: true, src: ['assets/**.{jpg,gif,png}'], cwd: 'test/', dest: 'resize/{%= width %}/' }] } }, }); Sample grunt-responsive-images configuration
  75. Kitt Hodsden • @kitt • http://ki.tt/cfo npm install grunt-grunticon --save-dev

    152 SVG with PNG fallbacks https://github.com/filamentgroup/grunticon
  76. Kitt Hodsden • @kitt • http://ki.tt/cfo 157 1. Reduce file

    sizes 2. Reduce the number of files 3. Reduce content rendering time
  77. Kitt Hodsden • @kitt • http://ki.tt/cfo 162 1. Reduce file

    sizes 2. Reduce the number of files 3. Reduce content rendering time
  78. Kitt Hodsden • @kitt • http://ki.tt/cfo 163 1. Reduce file

    sizes 2. Reduce the number of files 3. Reduce content rendering time
  79. Kitt Hodsden • @kitt • http://ki.tt/cfo 1. Embrace the DRY

    principle 2. Make changes easy 3. Make finding mistakes easy 164 Guiding principles of making our workflows AWESOME
  80. Kitt Hodsden • @kitt • http://ki.tt/cfo 171 Guiding principles! 1.

    Embrace the DRY principle 2. Make changes easy 3. Make finding mistakes easy
  81. Kitt Hodsden • @kitt • http://ki.tt/cfo 172 Guiding principles! 1.

    Embrace the DRY principle 2. Make changes easy 3. Make finding mistakes easy
  82. Kitt Hodsden • @kitt • http://ki.tt/cfo Sass / LESS /

    Stylus 174 Saw that coming, didn’t you?
  83. Kitt Hodsden • @kitt • http://ki.tt/cfo 180 $ gem update

    --system $ gem install sass $ sudo gem update --system $ sudo gem install sass Yay! Sass installed!
  84. Kitt Hodsden • @kitt • http://ki.tt/cfo 182 $ gem update

    --system $ gem install compass $ sudo gem update --system $ sudo gem install compass Setting up tools. In this case, Compass.
  85. Kitt Hodsden • @kitt • http://ki.tt/cfo Let us count the

    (3) ways. 184 How we get started with Sass in an existing project.
  86. Kitt Hodsden • @kitt • http://ki.tt/cfo Move and rename files.

    185 How we get started with Sass in an existing project.
  87. Kitt Hodsden • @kitt • http://ki.tt/cfo 186 $ mkdir scss

    $ mv css/styles.css scss/styles.scss Setting up tools. In this case, Compass.
  88. Kitt Hodsden • @kitt • http://ki.tt/cfo Use sass-convert 187 How

    we get started with Sass in an existing project.
  89. Kitt Hodsden • @kitt • http://ki.tt/cfo 188 $ 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.
  90. Kitt Hodsden • @kitt • http://ki.tt/cfo 193 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...
  91. Kitt Hodsden • @kitt • http://ki.tt/cfo 194 $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!
  92. Kitt Hodsden • @kitt • http://ki.tt/cfo 195 $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/
  93. Kitt Hodsden • @kitt • http://ki.tt/cfo 196 $color-main: #ff0000; $border-main:

    2px solid $color-main; .multivalue-example { border-top: $border-main; } # compiles to .multivalue-example { border-top: 2px solid red; } See? Easy!
  94. Kitt Hodsden • @kitt • http://ki.tt/cfo 198 $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
  95. Kitt Hodsden • @kitt • http://ki.tt/cfo 200 .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
  96. Kitt Hodsden • @kitt • http://ki.tt/cfo 201 .navigation { a

    { display: block; padding: .5em; &:hover { color: $color-link; border: none; } } &>.first { padding-left: 0; } } Sass syntax, talking nesting
  97. Kitt Hodsden • @kitt • http://ki.tt/cfo 203 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; }
  98. Kitt Hodsden • @kitt • http://ki.tt/cfo 204 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; }
  99. Kitt Hodsden • @kitt • http://ki.tt/cfo 206 Sass syntax, talking

    @extend <div class=”box-info”> ... </div>
  100. Kitt Hodsden • @kitt • http://ki.tt/cfo 208 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; }
  101. Kitt Hodsden • @kitt • http://ki.tt/cfo 210 Sass syntax, @mixin

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

    @import "vars"; @import "mixins"; @import "layouts/*";
  103. Kitt Hodsden • @kitt • http://ki.tt/cfo 215 Quick! Sass in

    5 slides! @if/@else @for @each @functions (return a single value)
  104. Kitt Hodsden • @kitt • http://ki.tt/cfo 217 @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; } } }
  105. Kitt Hodsden • @kitt • http://ki.tt/cfo 218 h1 { font-size:

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

    20px; } @media (max-width: 1250px) { h1 { font-size: 30px; } } @media (max-width: 1600px) { h1 { font-size: 60px; } }
  107. Kitt Hodsden • @kitt • http://ki.tt/cfo 220 Guiding principles! 1.

    Embrace the DRY principle 2. Make changes easy 3. Make finding mistakes easy
  108. Kitt Hodsden • @kitt • http://ki.tt/cfo More Information. 221 Sass

    for Designers Pragmatic Guide To Sass Sass and Compass in Action
  109. Kitt Hodsden • @kitt • http://ki.tt/cfo 225 compass config config.rb

    --sass-dir=scss \ --css-dir=css --javascripts-dir=js \ --output-style=expanded How to create a compass conifig.rb file
  110. Kitt Hodsden • @kitt • http://ki.tt/cfo 1. Watch for file

    changes 2. Compile our Sass to CSS 3. Refresh the browser on change 232 What we want grunt to do.
  111. Kitt Hodsden • @kitt • http://ki.tt/cfo 235 grunt.initConfig({ watch: {

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

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

    scss: { files: ['**/*.scss'], tasks: ['compass'] } }, compass: { dev: { options: { sassDir: 'scss', cssDir: 'css', outputStyle: 'expanded' } }, } });
  114. Kitt Hodsden • @kitt • http://ki.tt/cfo 238 compass: { dev:

    { options: { sassDir: 'scss', cssDir: 'css', outputStyle: 'expanded' } }, prod: { options: { sassDir: 'scss', cssDir: 'css', outputStyle: 'compressed' } }, }
  115. Kitt Hodsden • @kitt • http://ki.tt/cfo 241 1. Reduce file

    sizes 2. Reduce the number of files 3. Reduce content rendering time
  116. Kitt Hodsden • @kitt • http://ki.tt/cfo 242 @import "compass/utilities/sprites"; ...

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

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

    $awesome-spacing: 20px; @import “../img/awesome/*png”; Sprite names are dependent on your directory name
  119. Kitt Hodsden • @kitt • http://ki.tt/cfo 245 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; }
  120. Kitt Hodsden • @kitt • http://ki.tt/cfo 1. Embrace the DRY

    principle 2. Make changes easy 3. Make finding mistakes easy 247 Guiding principles of making our workflows AWESOME
  121. Kitt Hodsden • @kitt • http://ki.tt/cfo 253 compass: { dev:

    { options: { sassDir: 'scss', cssDir: 'css', outputStyle: 'expanded', sourcemap: true } }, prod: { options: { sassDir: 'scss', cssDir: 'css', outputStyle: 'compressed' } }, }
  122. Kitt Hodsden • @kitt • http://ki.tt/cfo 257 1. Reduce file

    sizes 2. Reduce the number of files 3. Reduce content rendering time
  123. Kitt Hodsden • @kitt • http://ki.tt/cfo Don’t nest more than

    3 deep 258 http://css-tricks.com/sass-style-guide/
  124. Kitt Hodsden • @kitt • http://ki.tt/cfo Avoid using tag selectors

    Use class selectors if you can. 259 https://developers.google.com/speed/docs/best-practices/rendering
  125. Kitt Hodsden • @kitt • http://ki.tt/cfo 1. Embrace the DRY

    principle 2. Make changes easy 3. Make finding mistakes easy 260 Guiding principles of making our workflows AWESOME
  126. Kitt Hodsden • @kitt • http://ki.tt/cfo npm install grunt-phantomcss --save-dev

    install details at https://www.npmjs.org/package/grunt-phantomcss 263
  127. Kitt Hodsden • @kitt • http://ki.tt/cfo 264 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
  128. Kitt Hodsden • @kitt • http://ki.tt/cfo 265 casper.start('http://cfobj.localhost:8082/') .then(function() {

    phantomcss.screenshot('#region-branding', 'region-branding'); }). then( function now_check_the_screenshots(){ phantomCSS.compareAll(); }); phantomcss website flow
  129. Kitt Hodsden • @kitt • http://ki.tt/cfo Say Goodbye to “It

    works on my machine” with Chef and Vagrant. Curt Gratz, 3pm this room 271
  130. Kitt Hodsden • @kitt • http://ki.tt/cfo 272 What magic do

    we do? Implement a design or prototype Update the designs Make sure it works in all browsers Make it faster
  131. Kitt Hodsden • @kitt • http://ki.tt/cfo <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> 277
  132. Kitt Hodsden • @kitt • http://ki.tt/cfo 283 # use a

    generator $ yo webapp # start the server $ grunt server # run tests $ grunt test # run default $ grunt
  133. Kitt Hodsden • @kitt • http://ki.tt/cfo 284 # download new

    generator $ npm install generator-gruntplugin # run the generator $ yo gruntplugin
  134. Kitt Hodsden • @kitt • http://ki.tt/cfo 285 # download new

    generator $ npm install generator-gruntfile # run the generator $ yo gruntfile
  135. Kitt Hodsden • @kitt • http://ki.tt/cfo 286 Lots of generators

    available http://yeoman.io/official-generators.html
  136. Kitt Hodsden • @kitt • http://ki.tt/cfo 287 # download new

    generator $ npm install generator-generator # create the directory $ mkdir generator-bigred && cd $_ # run the generator $ yo generator
  137. Kitt Hodsden • @kitt • http://ki.tt/cfo I skipped over Bundler

    Managing what ruby gems you have installed http://bundler.io/ Creating your own Grunt tasks http://gruntjs.com/creating-tasks Bower http://bower.io/ 290