Middleman + Foundation 4
In this Pro Tip I will show you how to setup a new Middleman project to use Foundation 4.
Assuming you already have Ruby and RVM setup on your machine (if not, follow these steps) we proceed to start a new project.
$ mkdir my-static-website && cd my-static-website
$ rvm use 2.0.0@my-static-website --create --ruby-version
$ gem install middleman
$ middleman init .I usually remove unwanted files and edit the source/layouts/layout.erb and source/index.html.erb files before I start work.
$ rm source/images/*.png source/javascripts/all.js source/stylesheets/*.css
$ touch source/images/.keep
$ touch source/javascripts/application.js
$ touch source/stylesheets/application.scssNow to edit source/layouts/layout.erb.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<title>My Static Website</title>
<%= stylesheet_link_tag 'application' %>
</head>
<body class="<%= page_classes %>">
<%= yield %>
<%= javascript_include_tag 'application' %>
</body>
</html>And edit source/index.html.erb.
<p>Hello, world!</p>Let's track what we've done so far (to setup version control follow this guide).
$ git init
$ git commit -m 'Initial commit'We have a good base and we can build up our project using any technologies we like. In our case, we'd add Foundation 4 to the mix.
To setup Foundation in our project we will use the Sass standalone option. Let's begin by downloading the files from the Sass standalone branch on GitHub. Click Download ZIP to get the files.
$ cd path/to/foundation-scss-standalone
$ unzip foundation-scss-standalone.zip
$ cd foundation-scss-standalone
$ cp -R js/* path/to/my-static-website/source/javascripts/
$ cp -R scss/* path/to/my-static-website/source/stylesheets/
$ cd path/to/my-static-website/source/stylesheets/
$ mv foundation.scss _foundation.scss
$ mv normalize.scss _normalize.scssEdit source/javascripts/application.js to contain:
//= require foundation
// Initialize Foundation
$(document).foundation();And, edit source/stylesheets/application.scss to contain:
@ import "normalize";
@ import "foundation";N.B.: There should not be a space between @ and import.
Finally, we need to update the layout file source/layouts/layout.erb.
<!-- 1. Doctype & Head: See the technique by Paul Irish at http://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!DOCTYPE html>
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- 2. Meta Viewport Tag: See http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/ -->
<meta name="viewport" content="width=device-width" />
<title>My Static Website</title>
<%= stylesheet_link_tag 'application' %>
<!-- 3. Custom Modernizr script provided by Foundation -->
<%= javascript_include_tag 'vendor/custom.modernizr' %>
</head>
<body class="<%= page_classes %>">
<%= yield %>
<!-- 4. Check for Zepto support, load jQuery if necessary -->
<script>
document.write('<script src=/javascripts/vendor/'
+ ('__proto__' in {} ? 'zepto' : 'jquery')
+ '.js><\/script>');
</script>
<%= javascript_include_tag 'application' %>
</body>
</html>Finally, let's commit our changes.
$ git add .
$ git commit -m 'Setup Zurb Foundation'And, that's it!
