Bolt is a static site build tool, inspired by Google Web Starter Kit, Roots, and the HTML5 MBP. Focusing on best practices for page speed, mobile performance, and automated deployments. This Grunt based toolchain gets you on the fast track for rapid web app creation.

What's Included

Bolt comes with ready with Jade, Stylus, Bower, Axis, and all synced and served hot with BrowserSync. This ain't no huge gruntfile either, you'll be managing easy small chunks from a central config coffeescript file. Booyah.

These tools can help you build nearly anything for the web. So let me guide you through a few use cases and features, so you can get the most out of Bolt.

Features

Mobile First

You should be building this way already, but Bolt's got your back if you're new. Mobile first means you need to have your browser window in a small mobile sized viewport for the first version of the build. Bolt's CSS is oriented around this, below I'll breakdown where this is happening and show you where you can change it.

Need this?

YES:

styles/base/_vars.styl

This file manages all your CSS vars, so they can be easily shared to all your stylesheets. It houses some really convenient breakpoints, modify them if you like:

• phone (min-width: 480px)
• phablet (min-width: 768px)
• tablet (min-width: 1024px)
• laptop (min-width: 1440px)
• desktop (min-width: 1920px)
• portrait (orientation:portrait)
• landscape (orientation:landscape)

_jade/includes/mobile/*

These are all helper jade files for including the proper mobile meta data in a project, if you want to achieve the "mobile web app" status. This includes add to home screen, icons, brand colors, etc.

_jade/includes/head.jade

This is where all those helper jade files are being included.

NO:

Remove the includes from _jade/includes/head.jade, and delete the includes/mobile folder from the project.

Nib, Autoprefixer & Axis

Bolt leverages Nib and Axis for behind the scenes, easy CSS styling. Together, neither of them impact your stylesheet weight at all, until you use one of their mixins. Then, we have Autoprefixer, which will shrink your file down, and remove old browser syntax support (unless you want it).

Need this?

YES:

Nib -> Docs

Is a tool for simple prefixes, gradients, positioning, etc.

Axis -> Docs

A magical utility belt for Stylus, adding conveniences and solutions for common UI concepts.

Autoprefixer -> Docs

Will scrub the created styles, and add/remove whatever is needed to support the chosen browsers in app.coffee.

NO:

Axis is a plugin being used by the Stylus compiler, if you want to save Grunt memory, you're welcome to remove it from tasks/stylus.coffee plugin array. Autoprefixer is done the same way, as a plugin to the compilation step. Remove it from the array if you don't need/want that build step. Lastly, Nib can be removed by deleting it's import line from styles/master.styl.

Bower

Bolt uses Bower & Grunt to combo the management of your front end package dependencies. By utilizing what's already been setup, you'll get nice minified, concatenated, and turbo crunched files, served hot n ready. NPM is used to pull in Bower for automated builds, so you aren't required to install Bower globally.

By default, Bolt has included 2 libraries for you to see as examples: VelocityJS and Flexboxgrid. Velocity has 2 JS files we are interested in, and Flexboxgrid has 1 CSS and 1 JS file. Bolt bundles these up and served them with this demo page.

Need this?

YES:

app.coffee

At the bottom of the file, you'll find a 'vendor_files' object. When you add or remove Bower packages, you'll want to update the css or bower files with the location of the lib's file you need. Sometimes you'll be importing CSS and sometimes you need JS. Centrally manage all of it in app.coffee. I've tried automated Bower/Grunt tools, but I find them to not cover all my edge cases.

Automation

Bolt has been part of many automated build systems like Heroku, Jenkins and Codeship. That's why a local npm version of Bower is included in Bolt, so Bower doesn't need to be installed globally. If you don't want to integrate with an automated build system, simply remove the .gitignore line that prevents the build/ folder from being checked in to version control. Now you're checking in the static site.

NO:

Then let's remove all of it's traces.

• Delete bower.json and .bowerrc from the root of the project
• Delete the js/bower folder
• Remove the last 2 lines from styles/master.styl
• Remove the bower copy object from tasks/copy.coffee
• Remove line 6 from uglify.coffee
• Delete libs from tasks/watch.coffee

Polyfills

You know you want to use modern features, don't lie. Bolt automates some of the common problems:

• Fixes for Firefox
• js polyfill for Android
• Detect CSS sticky and add new CSS (progressive enhancement)
• Detect SVG, replace with png (graceful degradation)
• etc, Bolt's ready for any of it

Need this?

YES:

_jade/includes/polyfill.jade

Script import location, you shouldn't need to modify this at all.

js/bower/device-detect.js/device-detect.js

Browser sniffing module, simple boolean checks for features and browsers. Find it here https://github.com/argyleink/Mobile-Detection.

styles/browser/*

Each file in this folder get's turned into a css file in the build directory. On line 48 of app.coffee, you'll find these css files listed so they can be auto imported into the master stylesheet. If you add another browser that you want to create special css fixes for, create a new .styl file for it, then add the file to the app.coffee array, and you're good to go!

js/shiv.js

This is where you'll have the control to do the js polyfilling. Here you can utilize device-detect.js and determine whether or not your visiting client needs a polyfill or style adjustment. Be confident that the modifications will happen client side, but never be visible to the user. You'll also see that this is where the custom css for Android, iOS, Windows, etc styles are loaded.

tasks/uglify.coffee && app.coffee

For definitions on what to you want to polyfill.

NO:

See the above answer and script locations for "yes", and gut them out! Remove polyfill.jade from the project, and remove the import from page.jade. Remove device detect from bower.json, and also delete shiv.js. Then, modify uglify.coffee and remove polyfill.js creation scripts. And lastly, remove from app.coffee lines 30 and 34-37.

Typography

Bolt puts all the typography styles into one place. Simple, powerful. The below header titles are my own custom sizing, I don't tend to like the default sizing and weights of these titles in the browser. There's many other nice features in this stylus file, you should check it out.

Title h1

Title h2

Title h3

Title h4

Title h5

Title h6

Need this?

YES:

styles/base/typography.styl

Add, remove, whatever to this file. It's all yours. Note: Axis has some typography utilities also if you want/like theirs better.

NO:

Just remove typography.styl, and you're done.

SVG

Inline SVG is a fun new practice, that enables you to do things like mask, clip, etc. Very powerful fun stuff. Bolt let's you use jade svg in your markup, without littering it with the crazy xml style svg garbage.

Need this?

YES:

_jade/includes/svg

This is just a handy location for you to store your inline SVG's as jade includes. I found it handy as my inline SVG grew, this made it manageable.

tasks/svgmin

All the images, including SVG, are compressed during a production build. SVG goes through a sanitiziation, losing cruft code inside the file. Cool stuff.

NO:

Just remove delete _jade/includes/svg folder

Buttons

You're going to need buttons, Bolt utilizes Axis for really easy nice buttons.

.btn

.btn.dark

.btn.light

.btn.glossy

.btn.disabled

.btn.small

.btn.large

Need this?

YES:

styles/modules/buttons.styl

Pop this file open and all your questions will be answered =)

NO:

Just remove buttons.styl, and you're done

Templates

Personally, I haven't had a project in a long time that didn't need clientside templates. Bolt doesn't want you to learn a new templating language, just use Jade! It's all setup for you, just drop new templates into the template folder, and bam, you'll get a new shiny templates.js file, ready to render your content.

With client-side Jade, you're fully qualified and ready for shared inheritance, mixins, etc with this static build system. Below is a rendered template, as an example. See template-example.js and app.js for the code that did this.

Client Template Example

Rendering...

Need this?

YES:

_jade/client-templates

Anything jade dropped into here, will get turned into a javascript function. You can utilize shared mixins, includes, layouts and more, all with your server or static jade files.

js/templates.js

This file is generated by Bolt/ClientJade, whenever a file changes in the jade template directory. This process is similar to other template engines, that create a file for you to use from javascript. See ClientJade.

NO:

Let's get rid of the pieces then

• Remove the watch command
• Delete the _jade/templates folder
• Delete the shell command from tasks/shell.coffee
• Remove ClientJade from package.json
• Remove templates.js from app.coffee (line 27)
• Remove templates.js from scripts.jade

Cruft

Bolt also comes with a bunch of crap, aka, this documentation and instruction. You'll want to get rid of this, I assume.

Need this?

YES:

_jade/demo/*

Everything this demo needs is in the demo folder. Reference it if you want, it's yours now.

NO:

Cool, let's clean this project up so you can get started!

• Delete _jade/demo folder
• Open index.jade and delete all the references to demo includes
• Delete the bolt.styl file from styles/modules folder
• Follow any other instructions on this page to help you remove other types of cruft code =)