Integrating the Foundation Zurb Grid With Jekyll

I was playing with the idea of using Bourbon Neat to create a semantic grid but when it comes down to it I’m familiar with Zurb and I like how it works.

I make a decent amount of sites for friends and non-profits and the benefits of Zurbs rapid prototyping are worth it for me.

That being said, I use very little of Zurb’s stuff so for now I’m just starting with the grid and visibility classes. Here’s how I did it.

With Compass

This is an update to my original post since I’ve started using Compass. If you don’t use Compass you can still follow the instructions in the ‘Without Compass’ section.

@import "foundation/components/grid";
@import "foundation/components/visibility";

Without Compass

Here’s the first way I did it, before I integrated compass into my Jekyll site.

@import "foundation/grid";
@import "foundation/visibility";

That’s it. Now you have access to Zurb’s grid without any of the JS or other crap that you don’t need. You can update at any time by replacing the contents of _sass/foundation with the newest files from the zurb bower-foundation repo.