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.

Kitt Hodsden

February 14, 2014
Tweet

More Decks by Kitt Hodsden

Other Decks in Technology

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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?

    View Slide

  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?

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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!

    View Slide

  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!

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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!

    View Slide

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

    View Slide

  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.

    View Slide

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

    View Slide

  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.

    View Slide

  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.

    View Slide

  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.

    View Slide

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

    View Slide

  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.

    View Slide

  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.

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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!

    View Slide

  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/

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    ...

    68
    Sass syntax, talking @extend

    View Slide

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

    ...

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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/

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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)

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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!

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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!

    View Slide

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

    View Slide

  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!

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    var ___socket___ = io.connect('http://10.1.9.52:3000');

    View Slide

  109. DrupalSouth 2014 • Kitt Hodsden • @kitt • http://ki.tt/dsnz 109
    drupal_add_html_head(
    array(
    '#type' => 'markup',
    '#markup' => "

    var ___socket___ =<br/>io.connect('http://<br/>10.1.9.52:3000');

    ",
    );

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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!

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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.

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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.

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

  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

    View Slide

  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/'
    }]
    }
    }

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

  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

    View Slide

  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/

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  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?

    View Slide

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

    View Slide

  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!

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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









    195

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide