Rocket Assisted Development?

Takeoff is a tool, introduction and jumpstart for Grunt to get up and running quickly. Once you've taken flight with build tools you'll wonder why you've waited so long.

Takeoff is perfect for those who don't have time for or feel overwhelmed with the idea of build tools. A bit more on the target audience.

Quick Launch

  1. Download the starter template or use this demo
  2. Open up a terminal window and cd into the project directory
    • Make sure the Grunt command line tools are installed globally, if not run npm install grunt-cli -g
    • npm install to install Takeoff (Grunt and Grunt plugins)
  3. It's recommended to have grunt watch running while coding. To end the `grunt watch` process, press CTRL-C in the terminal window
  4. Build the project referencing the Grunt Tasks
  5. Make sure to update the paths in the last two lines of code in the
  6. Update the file paths of the last two lines in the for icons.fallback.css and lte-ie7.js

Preflight Checklist

In order to takeoff make sure Node.js and PhantomJS are installed locally, or optionally comment out the Grunticon configuration and task in gruntfile.js.

Step by Step Process

  1. Download the starter template or use this demo
  2. Open up a terminal window and cd into the project directory
    • Make sure the Grunt command line tools are installed globally, if not run npm install grunt-cli -g
    • npm install to install Takeoff (Grunt and Grunt plugins)
  3. Remove any Javascript defaults not needed: /js/libs/
  4. Remove any Sass not needed: /css/sass/_mixins/, /css/sass/_vendor/
  5. Get started by reading through index.html
  6. It's recommended to have grunt watch running while coding. To end the `grunt watch` process, press CTRL-C in the terminal window
  7. Build the project referencing the Grunt Tasks

Grunt Tasks

  • Run grunt to manually publish
  • Run grunt watch to automate optimization while building
  • Run grunt cleanup to remove all processed Sass CSS files, run after adding or changing .scss files. Run occasionally and before deploying.
  • Run grunt icons to build SVG images with PNG fallbacks
  • Run grunt minify to use Yahoo!'s SmushIt service to minify images

Grunt Setup

Takeoff utilizes Grunt to automate repetitive task and make your life easier with the following plugins:

  • watch to initiate tasks after saving files
  • clean to delete the css/processed directory before preprocessing
  • concat to concatenate CSS and JS
  • csslint to lint CSS
  • cssmin to minify CSS
  • jshint to lint JS with JSHint
  • uglify to minify JS with UglifyJS
  • smushit to minify images
  • grunticon for SVG support with PNG fallback
  • svgo for optimizing SVGs
  • compass for Sass+Compass support
  • sass for optional Sass only support without Compass

Target Audience

Takeoff is for those who have yet to use build tools, recently started or have not used Grunt. For those with more experience it's a starter project ready for personalization, rip it apart and rebuild.

Familiarize yourself with multiple front-end technologies to improve workflow while saving time.

A Few Notes

The command line is used to run Grunt tasks, but development can occur in your favorite code/text editor.

If you would rather not have Sass or Compass integration and SVG icon support/fallback with a simpler setup then checkout GruntStart.

Created by Tim Svensen

Flying High

This demo/project page (and parts of the starter template) include responsive tools and techniques, most of which are outline below.

Javascript

CSS