Skip to content


Subversion checkout URL

You can clone with
Download ZIP
A Textmate/Sublime Text 2 bundle for Zurb's Foundation framework.
Latest commit 6df6796 @liamr Update README.markdown
Failed to load latest commit information.
Snippets updated for zurb 4 support
README.markdown Update README.markdown
info.plist Added any column snippet


Textmate bundle for Zurb Foundation 4

A set of snippets for Zurb's awesome responsive HTML framework. Going to add more, but there are a few snippets at the moment to make your day a little better.


cd ~/Library/Application\ Support/TextMate/Bundles/
git clone git:// Zurb\ Foundation.tmbundle



All snippets now have 'zf' prepended to avoid conflict with other installed Bundles. Updated documentation to reflect.


Updated to work with Foundation 4 - thanks to Kramsee

Layout & Grid

zfpage Creates a new Foundation HTML page

zfc Creates a Container

<div class="container" id="name">

zfr Creates a Row

<div class="row" id="name">

zfcr Creates a Container & Row

<div class="container" id="name">
    <div class="row" id="name">

zfc1 - zfc12 Creates columns based on the number ie:

zfc6 creates

<div class="six columns" id="name">

zfcc Creates a basic column layout and lets you specify the number you want ie:

<div class="[one - twelve] column[s]" id="name">

zf2col,zf3col, zf4col create a 2, 3 or 4 column layout surrounded by a row and container:

<div class="container" id="#">
    <div class="row" id="#">

        <div class="six columns" id="#">

        </div> <!-- End # -->

        <div class="six columns" id="#">

        </div> <!-- End # -->


zfbtn Creates a basic button and lets you specify the options

<a href="#" class="[small, medium, large] [white, blue, red, black] button">(Cursor)</a>

zfnbtn Creates a nice button and lets you specify the options

<a href="#" class="nice radius [small, medium, large] [white, blue, red, black] button">(Cursor)</a>

Block Grids

zfblock2, zfblock3, zfblock4, zfblock5 create
    block grids that are 2, 3, 4 or 5 up:

<ul class="block-grid five-up">

More coming soon

I want to add more as soon as possible, and also work this into a Sublime Text 2 bundle! If you have suggestions let me know!


Cheers to Fred Oliveira - - based mine off his

Something went wrong with that request. Please try again.