Making your Front-End Workflow AWESOME

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

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

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

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

have we here? 5 What are we talking about?

have we here? 6 What are we talking about?

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

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

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

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

a design or prototype Update the designs 11 What magic do we do?

a design or prototype Update the designs Make sure it works in all browsers 12 What magic do we do?

a design or prototype Update the designs Make sure it works in all browsers Make it faster 13 What magic do we do?

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

How often do we have a blank slate, really?

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

What magic do we do?

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

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

Well, phooey. The ticket was reopened.

Soon, EVERYTHING is important!

Embrace the DRY principle 2. Make changes easy 3. Make ﬁnding mistakes easy 24 Guiding principles!

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

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

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

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

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

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

HOMEBREW http://mxcl.github.com/homebrew/ Installation information - ruby on OSX

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

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

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

information - ruby on linux # apt-get install ruby1.9.1 $ sudo apt-get install ruby1.9.1 36

information - ruby on linux # yum install ruby1.9.1 $ sudo yum install ruby1.9.1 37

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

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

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

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

... install nodejs, too.

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

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

$ gem update --system $ gem install sass $ sudo gem update --system $ sudo gem install sass Yay! Sass installed!

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

$ gem update --system $ gem install compass $ sudo gem update --system $ sudo gem install compass Setting up tools. In this case, Compass.

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

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.

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

$ mkdir scss $ mv css/styles.css scss/styles.scss Setting up tools. In this case, Compass.

sass-convert 52 How we get started with Sass in an existing project.

$ 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.

http://css2sass.heroku.com 54 How we get started with Sass in an existing project.

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

$variable: value; Before variables...

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

$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!

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

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

$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

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

.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

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

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; }

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; }

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

Sass syntax, talking @extend <div class=”box-info”> ... </div>

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

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; }

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

Sass syntax, @mixin @import "compass/css3/box-sizing"; * { @include box-sizing(border-box); } http://compass-style.org/reference/compass/css3/box_sizing/

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

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

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

Quick! Sass in 5 slides! @if/@else @for @each @functions (return a single value)

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

@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; } } }

h1 { font-size: 20px; font-family: $font-main; @include bp(mq-notso) { font-size: 30px; } @include bp(mq-fullon) { font-size: 60px; } }

h1 { font-size: 20px; } @media (max-width: 1250px) { h1 { font-size: 30px; } } @media (max-width: 1600px) { h1 { font-size: 60px; } }

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

sass --watch --line-numbers --style expanded scss:css

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

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

$ compass watch

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

https://incident57.com/codekit/

http://compass.kkbox.com/

http://koala-app.com/

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

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

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

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

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' );

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

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

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

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

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

$ npm install -g browser-sync

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> ", );

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

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, };

$ browser-sync

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

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

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

Alfred using Dash for PHP

Alfred looking up Drupal...

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

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

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

$ npm install -g grunt-cli Install the grunt package

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

$ npm install -g grunt-init This is one way to start using grunt in a project, use grunt-init

$ git clone https:// github.com/gruntjs/grunt- init-gruntfile.git ~/.grunt-init/gruntfile Download and save the grunt template ﬁles

$ grunt-init gruntfile Generate the ﬁles grunt needs

package.json Gruntfile.js The two ﬁles grunt uses

{ "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

Watch for Sass ﬁle changes 2. Compile the Sass to CSS 3. Refresh the browser on change 137 What we want grunt to do.

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

$ npm install grunt-contrib-compass --save-dev Installing the compass compiling node package

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

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

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

Just like we have abandoned modules, node does, too.

$ npm install grunt-contrib-compass --save-dev Installing the compass compiling node package

$ 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

"grunt-contrib-compass": "~0.7.2"

grunt.initConfig({ compass: { dist: { options: { config: 'config.rb' } } } });

grunt.initConfig({ watch: { css: { files: ['**/*.scss'], tasks: ['compass'] } }, compass: { dev: { options: { sassDir: 'scss', cssDir: 'css', outputStyle: 'expanded' } }, } });

grunt.loadNpmTasks('grunt-contrib-compass'); ... grunt.registerTask('default', ['compass']);

grunt.registerTask('gogogo', ['browser_sync', 'watch']);

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

Watch for Sass ﬁle changes 2. Compile the Sass to CSS 3. Refresh the browser on change 155 What we want grunt to do.

$ npm install grunt-browser-sync --save-dev

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

a design or prototype Update the designs Make sure it works in all browsers Make it faster 159

Reduce ﬁle sizes 2. Reduce the number of ﬁles 3. Reduce content rendering time 160

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

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

imagemin: { prod: { files: [{ expand: true, cwd: 'imgs-src/', src: ['**/*.{png,jpg,gif}'], dest: 'imgs/' }] } }

install grunt-svgmin --save-dev 165 Reduce SVG sizes, too

install grunt-contrib-cssmin --save-dev 166 Minimize CSS ﬁles

install grunt-contrib-uglify --save-dev 167 Minimze javascript ﬁles

install grunt-contrib-jshint --save-dev 168 Use jshint when editing your Gruntﬁle.js https://github.com/gruntjs/grunt-contrib-jshint

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

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

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

@import "compass/utilities/sprites"; ... $sprites-spacing: 20px; @import “../img/sprites/*png”; Creating sprite images with Compass

@import "compass/utilities/sprites"; ... $orange-spacing: 20px; @import “../img/orange/*png”; Sprite names are dependent on your directory name

@import "compass/utilities/sprites"; ... $awesome-spacing: 20px; @import “../img/awesome/*png”; Sprite names are dependent on your directory name

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; }

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

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

Embrace the DRY principle 2. Make changes easy 3. Make ﬁnding mistakes easy 181 Guiding principles of making our workﬂows AWESOME

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

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

install grunt-phantomcss --save-dev install details at https://www.npmjs.org/package/grunt-phantomcss 184

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

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

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

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

a design or prototype Update the designs Make sure it works in all browsers Make it faster 189 What magic do we do?

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

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!

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

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

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

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

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

about drush? 197

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

npm install grunt-drush --save-dev https://github.com/nickpack/grunt-drush

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

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

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

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

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

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

Making your Front-End Workflow AWESOME

Making your Front-End Workflow AWESOME

More Decks by Kitt Hodsden

Other Decks in Technology

Featured

Transcript