This weekend I decided to try out the static site generator, Middleman. While I was working on converting an existing static site, I decided to take the opportunity to try out Zurb’s Foundation and SCSS too. Andrea Moretti created a Middleman template to get you started doing just this, but I hate just using templates without understanding what they are doing. So I decided to start with Middleman’s HTML5 Boilerplate template and add the Foundation Bower package to it. You can check out the final product over on GitHub at If you’re not interested in the inner workings, grab Andrea Morretti’s Middleman Foundation template.

Middleman Template and Bower Setup

Initialize the project with the HTML5 Boilerplate.

> middleman init middleman-foundation --template=html5
> cd middleman-foundation

Create a .bowerrc file to specify a the install location for bower components

// .bowerrc
    "directory" : "source/bower_components"

Initialize bower for the project.

> bower init

Install Foundation.

> bower install foundation --save

Add the Compass configuration to config.rb.

# config.rb
compass_config do |config|
  # Require any additional compass plugins here.
  config.add_import_path "bower_components/foundation/scss"

  config.output_style = :compact

Add the bower directory to the Sprockets asset path in the config.rb.

# config.rb
# Add bower's directory to sprockets asset path
after_configuration do
  @bower_config = JSON.parse("#{root}/.bowerrc"))
  sprockets.append_path File.join "#{root}", @bower_config["directory"]

Replace CSS with SCSS

Delete source/css/main.css and source/css/normalize.css. In their place add a new file, all.css.scss.

# all.css.scss
@import "normalize.scss";
@import "foundation.scss";

Replace the stylesheet references in the <head> of source/layouts/layout.erb with the all.css.scss.

<!-- source/layouts/layouts.erb -->
<%= stylesheet_link_tag "all" %>

Use Modernizr from Bower

Create a source/js/modernizr.js with the following content to include the modernizr source from the installed bower components.

// source/js/modernizr.js
//= require modernizr/modernizr

Then replace the modernizr reference in layouts.erb’s head with <%= javascript_include_tag "modernizr" %>.

Use Other Javascripts from Bower

Delete all files (except the new modernizr.js) in source/js/, and create all.js with the following contents to include necessary javascripts from the bower components.

// source/js/all.js
//= require jquery/dist/jquery
//= require foundation/js/foundation.min

Then, update layouts.erb to reference your new all.js and remove the old javascript references.

<!-- source/layouts/layout.erb -->
<%= javascript_include_tag  "all" %>


You’re all ready to go. Launch middleman server and start building!