Tools¶

Yeoman¶

Yeoman bundles Grunt and Bower with the scaffolding tool Yo used to setup a new web application as follows:

yo webapp

Grunt¶

Grunt is a build tool for compiling static HTML, CSS, JS and the likes from source files such as SCSS. It can be used to automatically recompile, show and/or reload files in the browser by running:

grunt watch

Assemble¶

Assemble is a static site generator for use with Grunt. Starting an assemble project is easy with Yeoman:

npm install -g generator-assemble
mkdir project && cd project
yo assemble

Bower¶

Bower is used like a package manager for client-side JS, CSS and other packages. It automatically installs, updates and manages libraries such as Twitter’s Bootstrap. For example, installing Backbone is easy:

bower install backbone

This will also include Backbone dependencies such as Underscore.

Twitter’s Bootstrap¶

Bootstrap is a comprehensive front-end framework consisting of:

• A basic HTML templates and good examples.
• CSS with a grid systemm, sensible defaults for tags and styling for UI elements.
• Reusable components built to provide iconography, dropdowns, navigation, alerts, popovers, and much more.
• jQuery plugins for common interaction patterns.

The original version of bootstrap is built using Less CSS but a port using Compass is available as Sass Bootstrap.

Cross-browser testing¶

It is essential to test the design and functioning of a site across a range of different browsers and devices. To make this simpler, several services exist to create screenshots of webapps in different browser environments and/or to have live access to apps on different browsers and devices.

Polyfills¶

Tools allowing new HTML and CSS features to be used in browser that do not (yet) support them.