tags: foundation-sites, middleman
Zurb Foundation is great. I mean really great. It is a Ruby Gem, it plays well with Rails and the Asset Pipeline. It even has its own generator to save you time. It also works well standalone with Compass and Sass from the command line but what happens when you try and use it with something else? Well, I will just come out and say it. Zurb Foundation doesn't always play well with others. In this Foundation Quicktip I will show how to get Zurb Foundation to play well with the excellent MiddleMan Ruby based static website and blog generator.
MiddleMan is a fantastic static website generator that runs under Ruby. It is what I use to run this site and is one of the most flexible and least opinionated options on the market. OctoPress is much more popular, but just try and edit some of the basic themes. There is way more complexity in the templating system when compared to MiddleMan.
First lets add the zurb-foundation gem to our Gemfile:
gem "zurb-foundation", :require => false
:require => false is needed here so it doesn't load up all of the dependencies of the zurb-foundation gem.
MiddleMan can use Compass and Sass to compile your files but it will not work with out some extra configuration. Lets take a look at the modifications I made to the config.rb file.
A blog post by Roman Ernst got me part way there. All that was needed was to add the :sass_assets_paths and everything works great.
Now lets take a look at my layout.erb file.
Now lets move on to our app.js file.
This is a manifest file that'll be compiled into application.js, which will include all the files listed below.
It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the the compiled file.
WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD GO AFTER THE REQUIRES BELOW.
Here is the message in the comments of this file generated by MiddleMan that I have removed, for your reference.
//= require vendor/jquery //= require foundation/foundation //= require foundation/foundation.clearing //= require foundation/foundation.abide //= require foundation/foundation.forms //= require foundation/foundation.section //= require vendor/highlight //= require vendor/processing //= require_directory . $(document).foundation(); // other code I want to load every page, such as my code highlighting library hljs.initHighlightingOnLoad();
Now, we are almost set to go but there is one more thing. Sassy CSS or SCSS. To get this working I have copied over the ../scss/normalize.scss and ../scss/foundation/variables.scss files from the gem file and renamed them with a prefixed underscore.
Here is the contents of my app.scss file:
// Global Foundation Settings @import "settings"; // Comment out this import if you don't want to use normalize @import "normalize"; // Import specific parts of Foundation by commenting the import "foundation" // and uncommenting what you want below. You must uncomment the following if customizing @import "foundation/components/global"; // *always required @import "foundation/components/grid"; // Use this grid if you want to start using the new Foundation 5 grid early. // It will change breakpoints to min-width: 640px and 1024px. // @import "foundation/components/grid-5"; @import "foundation/components/visibility"; // @import "foundation/components/block-grid"; @import "foundation/components/type"; @import "foundation/components/buttons"; @import "foundation/components/forms"; // *requires components/buttons @import "foundation/components/custom-forms"; // *requires components/buttons, components/forms @import "foundation/components/button-groups"; // *requires components/buttons // @import "foundation/components/dropdown-buttons"; // *requires components/buttons // @import "foundation/components/split-buttons"; // *requires components/buttons @import "foundation/components/flex-video"; @import "foundation/components/section"; // @import "foundation/components/top-bar"; // *requires components/grid // @import "foundation/components/orbit"; // @import "foundation/components/reveal"; // @import "foundation/components/joyride"; @import "foundation/components/clearing"; // @import "foundation/components/alert-boxes"; // @import "foundation/components/breadcrumbs"; // @import "foundation/components/keystrokes"; // @import "foundation/components/labels"; @import "foundation/components/inline-lists"; @import "foundation/components/pagination"; @import "foundation/components/panels"; // @import "foundation/components/pricing-tables"; // @import "foundation/components/progress-bars"; @import "foundation/components/side-nav"; // @import "foundation/components/sub-nav"; // @import "foundation/components/switch"; // @import "foundation/components/magellan"; // @import "foundation/components/tables"; @import "foundation/components/thumbs"; // @import "foundation/components/tooltips"; // @import "foundation/components/dropdown"; @import "highlight-styles/solarized_dark";
Here I have left all of my commented out @import statements because when Sprokets renders the CSS it removes all // style comments and only preserves /* */ style comments. After all of my Foundation @imports I place all of my site specific Sass and CSS.
I host everything on AWS S3 / CloudFront and use the middleman-s3_sync gem to keep everything up to date.
If you have been using MiddleMan with Foundation or have any questions please feel free to get in touch through the comments below. Is there something strange you are trying to get Foundation Sass to work with? Let me know in the comments and I might featured it in a future post.
 jQuery only: If you want to have the default behavior of Foundation choosing Zepto or jQuery automatically, you can approach it as I did with the custom.modernizr.js file.