Boilerplate

A front-end tool for generating static sites with Grunt, Assemble, Bower, Sass, Bourbon, Bourbon Neat and Bourbon Bitters.

This is my personal starting point for new projects... totally meant to be customized.

Requirements

• Ruby - Install with rbenv
  • Rake gem install rake
• Node

One-time Setup

$ rake init

• Installs Grunt CLI
• Installs Bower CLI

Install

$ rake

• Installs Ruby Gems to /vendor/ruby
• Installs Bower packages to /vendor/bower
• Installs npm modules to /node_modules

Grunt commands

Development

$ grunt dev

• Creates web server at http://localhost:8000
• Livereloads browser on save
• Static site generator via assemble

Production

$ grunt build

To view production build:

$ grunt p

If you get an error after running $ grunt dev that says EMFILE: too many open files,
add ulimit -n 9999 to your .bash_profile.

---

What's goin' on here?

Grunt: Automation

Development tasks

• Local server @ http://localhost:8000
• Watch task
• Livereload (without browser extension)
• Sass compiling
• JS concatenation
• JS hinting
• Assemble, for static site generation
• Clean and Copy commands
• Outputs to dist/ directory

Production tasks

• Image compression
• Concatenate and minify linked files
• Outputs to build/ directory

Bower: Package manager

Default packages

• jQuery
• mfglabs icon font
• Bourbon (Sass mixin library)
• Bourbon Neat (Sass grid framework)

Install new packages

$ bower install <git repo> --save

--save adds the package to bower.json so that when $ bower install is run, the package will be installed.

Assemble: Static site generator

/src/templates/
├── data
│   ├── components.json
│   └── site.yml
├── helpers
│   ├── condense.js
│   └── prettify.js
├── layouts
│   ├── base.hbs
│   ├── blank.hbs
│   └── default.hbs
├── pages
│   ├── index.hbs
│   └── test.hbs
└── partials
    ├── dev.hbs
    ├── footer.hbs
    ├── head.hbs
    ├── header.hbs
    ├── nav.hbs
    ├── page-header.hbs
    └── scripts.hbs

Sass: Boilerplate code

I incorporated http://bitters.bourbon.io

├── base
│   ├── _base.scss
│   ├── _flashes.scss
│   ├── _forms.scss
│   ├── _lists.scss
│   ├── _normalize.scss
│   ├── _tables.scss
│   └── _typography.scss
├── components
│   ├── _code.scss
│   └── _container.scss
├── helpers
│   ├── _dev.scss
│   ├── _grid-settings.scss
│   ├── _mixins.scss
│   └── _variables.scss
├── site
│   ├── _author.scss
│   ├── _footer.scss
│   └── _site-nav.scss
└── style.scss

Check out scss/helpers/_variables.scss for design helpers:

$show_media_queries : true;
$show_baseline_grid : true;

JS: Boilerplate code

/src/js/
├── components
│   └── mobile-menu.js
├── init.js
└── libs
    ├── modernizr-custom.js
    └── prism
        ├── prism.css
        └── prism.js