Middleman Brunch

A Middleman template to get you started with Brunch quickly. Comes with SASS, clean CSS, Copycat, Javascript es2016, Uglify JS and jQuery.

Optionally allows you to install one of several CSS frameworks: Bootstrap, Foundation, Bourbon or PureCSS.

It also gives you the option to install Turbolinks and Font Awesome.

You can read more about how to use Brunch with Middleman on my article here

Installation

middleman init project_name -T acoustep/middleman-brunch

cd project_name; npm install

CSS Frameworks

The installation process lets you choose from a number of useful libraries

Bootstrap

In your SASS file add

@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

Foundation

In your SASS file add

@import "../../node_modules/foundation-sites/scss/foundation";

Bourbon

Optionally install Bourbon bitters with

gem install bitters
cd source/stylesheets
bitters install

In your SASS file add

@import "../../node_modules/bourbon/app/assets/stylesheets/bourbon";
@import "../../node_modules/bourbon-neat/app/assets/stylesheets/neat-helpers";
@import "../../node_modules/bourbon-neat/app/assets/stylesheets/neat";
@import "base/base"; # for bitters

Font Awesome

In your SASS file add

$icon-font-path: "/fonts/";
@import "../../node_modules/font-awesome/scss/font-awesome";

Turbolinks

In your javascript file add

import "turbolinks"

Known Issues

Brunch includePaths does not work for SASS. The relative path has to be used instead.

To Do

• Make sure PureCSS works
• Add instructions for Foundation and Bootstrap Javascript files