Using Zurb Foundation with Padrino and Compass

If you had to set up a new web site in the past decade you surely know Twitter Bootstrap – a CSS framework that helps you to set up responsive beautiful web sites quickly. But there is another lesser-known star called Zurb Foundation. If you are looking for a simple, (MIT-)free and customizable CSS framework with your Padrino web application then let me get you on track. Skip the ranting about Twitter Bootstrap if you want. 🙂

Bootstrapped frustration

So did I say that Twitter Bootstrap helps create web sites quickly? I don't know about your experience but I have spent a day just figuring out how to use items in the navbar correctly. Actually the documentation is nice and looks complete. But from the examples I find it very hard to derive how to actually get any non-trivial layout working. Don't believe me? Tell me how long you need to use glyphicons in the navbar in a radio-button fashion. Today I needed another simple layout for an adminsitration web interface and decided to use Twitter Bootstrap again. I wanted to use a nice logo at the top-left but it was slightly too large. It's just a framework, right? So making the navbar higher should be easy. After an hour of unsuccessful fiddling with additional CSS classes I searched the internet and literally found dozens of questions on from annoyed web developers on StackOverflow with even more mind-twisting suggestions and ugly CSS. Also Bootstrap was built using LESS and the SASS version appeared to be more a pet project so I wouldn't know how much or for long I could rely on it. Screw you Bootstrap. If the CSS framework makes work harder than just writing the CSS from scratch then something is wrong.

The Foundation of relief

I had already wasted a lot of time so why not waste even more and look for other frameworks. I came across Zurb's Foundation framework and decided to try it because the CSS-styled markup looked more readable. My Padrino-based web application already had Compass added as a component to help with SASS-pimped CSS stylesheets. So I followed Foundation's page on using Foundation with SASS. This again did not look what I wanted. They required NodeJS, NPM and a root-installation of Bower into /usr/local? Oh, come on. Why do I need all that Javascript stuff to get just the SASS files of a CSS framework? Fortunately after ranting on Twitter (yes, sometimes it even helps) James Stone from Zurb recommended to use a certain Github repository that contained the actual files I needed. It smells like "Bower" but that can safely be ignored. And suddenly all the pieces started falling into place.

Adding the Foundation files to your Padrino project

Are you still with me? Great. I assume that you want to use Compass to turn your SCSS files into plain CSS. If your project does not yet use Compass then run:

padrino gen component -c compass

To use Zurb Foundation with your Padrino project first clone the repository I mentioned:

git clone git@github.com:zurb/bower-foundation.git

The interesting files are in the scss/ and js/ directories. The css/ directory can be safely ignored. Copy everything in scss/* to your project's app/stylesheets/ directory. Also copy everything in js/* to your project's public/javascripts/ directory.

To load the SCSS files in the right order I recommend you create a file app/stylesheets/application.scss with this content:

// Load normalize.scss as recommended by Zurb Foundation
@import "normalize";

// Customize certain layout settings in foundation/_settings.scss
@import "foundation/settings";

// Use Zurb Foundation
@import "foundation";

"normalize" resets CSS styles to a common standard. "foundation/settings" allows you to change the default values of Foundation – like the background color or height of your navbar. There are actualy much more than 1000 settings documented in app/stylesheets/foundation/_settings.scss that you can alter. I love it. And finally "foundation" gets loaded from app/stylesheets/foundation/foundation.scss.

And finally you need to load the (S)CSS and Javascript files into your main layout. So edit app/views/layouts/application.slim (or .erb or .haml or whatever you use) and make the layout look like this:

doctype 5
html.no-js lang='en'
    meta name='viewport' content='width=device-width,initial-scale=1'
    meta charset='utf-8'
    title My application
    = stylesheet_link_tag :application
    = javascript_include_tag :modernizr

    =javascript_include_tag :jquery, :fastclick
    =javascript_include_tag 'foundation/foundation.js'

Now you should be able to use Foundation's components. Just follow its documentation. Good luck.

2 thoughts on “Using Zurb Foundation with Padrino and Compass

  • 2014-09-06 at 04:19

    You are right I was trying to use Sass foundation on a project and it needs me to install npm and bower? talk about a lean solution. I get it, with bower you can auto update everything but why not just give an option to throw the sass files in a folder and be done with it.

    • 2015-01-12 at 07:46

      Just a clarification, I am not officially affiliated with ZURB but glad the advice worked out. One thing you should consider, and I have used this a lot and seen it a lot on highly customized zurb / bower systems, is to create a new task in your grunt (or gulp) file, call copy or update that will copy all of your bower_components files into directories that work better and make more sense for your project / tech stack. I usually try and avoid linking directly to files in the bower_components unless I am using something like sprockets to abstract that process.

      Nice write up on the Padrino integration. I have not used it much (used Sinatra and Rails mostly) but it seems like you could be pretty productive if you created generators to more quickly scaffold your app out with foundation style classes and structures.


Leave a Reply

Your email address will not be published. Required fields are marked *