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 https://github.com/blachniet/middleman-foundation. 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 end

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(IO.read("#{root}/.bowerrc")) sprockets.append_path File.join "#{root}", @bower_config["directory"] end

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" %>

Serve