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.
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.
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.
NO:Remove the includes from _jade/includes/head.jade, and delete the includes/mobile folder from the project.
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).
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.coffeeplugin 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.
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.
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
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
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.
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.
NO:Just remove typography.styl, and you're done.
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.
NO:Just remove delete _jade/includes/svg folder
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
NO:Just remove buttons.styl, and you're done
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 ExampleRendering...
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
Bolt also comes with a bunch of crap, aka, this documentation and instruction. You'll want to get rid of this, I assume.
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 =)