Foundation 3 Rocks My Socks

So Ive been hearing a lot about these CSS frameworks like Less and Sass and Compass (I don’t know if these are all supposed to be acronyms or what, but they all sound a lot alike, and Im not entirely sure what the difference is). I do know that Sass uses Compass, it says so right on their website, but I dont entirely know what that means either. But theres one important thing I do know, and thats that Zurbs Foundation 3 uses Sass which uses Compass and Foundation 3 f***ing rules.

Whats so great about it?

Um, everything. So you start with whatever sort of grid you want, I usually use a 12 column grid. You can make it any size you want with any gutters (the site Im building now were working with a 978 grid with 30 px gutters. Nice and airy. Aside from some very powerful CSS, you can also grab html templates to get you started, and it comes with some great jQuery plugins built in if you want them. Its got a lot of stuff pre-styled and you can of course customize as needed.

All that said, the phrase of the day is Rapid Prototyping, and this is how its done. It used to be that moving things around, making new layouts, building pages, etc. was a pretty permanent decision process. It was easier to move things around in Fireworks / Illustrator / Photoshop than it was to do that one the web. Well, take my word for it, those days are over. Any developer worth their salt can build a site out as fast (if not faster) than the UXer can come up with the layout. The great thing is you can get a group of smart people together and brainstorm page by page while youre building, live. Want a slider? You got it. Want tabbed navigation? No problem. Want three boxes across the middle? Four? Eight? No big deal. Lets do it.

How does it work?

Well, I thought it would take me forever and a day to figure out how it works, mostly because I assumed it would take me that long to figure out any framework, but Ill be damned. I had a homepage up and running in under 3 hours. And that was the first time Id ever used it. Ever. The documentation is fantastic. They really get right into how you get started, and the HTML files you can download are a great help for beginners especially.

Go from this to a finished page in like a minute. No kidding.

So heres the general idea: You start with your grid, which is broken down into however many columns you decided. Im going to explain based on a 12 column grid because thats what I use, and thats probably what you should use too. The code is fundamentally broken down into rows and columns. When you create a new row, you can use the columns however you want. So for instance, if I want to create a layout with a slider at the top, 3 buckets in the middle, a nice callout and a footer. Pretty simple actually. Thats 4 rows. The first row is 12 columns, the second has three 4 column divs, the callout might be 8 columns on the left and 4 columns on the right (for a nice image), and the footer well break into four 3 column divs.

Your code ends up looking like this:

	<div class="row">
	  <div class="twelve columns">
	??   <div class="featured">
	?   <img src="image_01.jpg" />
	?   <img src="image_02.jpg" />
	?   <img src="image_03.jpg" />
	??   </div> <!-- /featured -->
	  </div> <!-- /columns -->
	</div> <!-- /row one -->

	<div class="row">
	  <div class="four columns">
	??   <p>Whatever you want.</p>
	  </div> <!-- /four columns -->

	  <div class="four columns">
	??   <p>Whatever you want.</p>
	  </div> <!-- /four columns -->

	  <div class="four columns">
	??   <p>Whatever you want.</p>
	  </div> <!-- /four columns -->
	</div> <!-- /row two -->

	<div class="row">
	  <div class="eight columns">
	??   <p>Whatever you want.</p>
	  </div> <!-- /eight columns -->

	  <div class="four columns">
	??   <img src="image_04.jpg" />
	  </div> <!-- /four columns -->
	</div> <!-- /row three -->

	<div class="row">
	  <div class="three columns">
	??   <p>Whatever you want.</p>
	  </div> <!-- /three columns -->

	  <div class="three columns">
	??   <p>Whatever you want.</p>
	  </div> <!-- /three columns -->

	  <div class="three columns">
	??   <p>Whatever you want.</p>
	  </div> <!-- /three columns -->

	  <div class="three columns">
	??   <p>Whatever you want.</p>
	  </div> <!-- /three columns -->
	</div> <!-- /row four -->

I should point out that that slider up there is already a slider, just because I gave it a class of featured. Brilliant. So simple, and so smart. Your homepage is pretty much built. And Im sure you can see that making changes to the page (maybe 4 callouts up top instead of 3, maybe an 8 column slider with some links to the right, none of it is a big deal. Just change a few classes and WHAM, youre done.

Did I mention its also responsive??!

Finish it up already

Well, Ive like barely scratched the surface of the awesomeness that is this framework, but if youve got a web build coming up and want to try something new and extraordinary, I hiiiiiighly recommend giving Foundation 3 a shot. It is a decision youre unlikely to regret, and you may never want to go back to building websites the boring way again.

If you do try it, come back and let me know what you think. Im REALLY excited about it, as Im sure you can tell. I give the folks at Zurb mad props (yes, I did just say that) not just for creating something so awesome, but for giving it away under the MIT license. This is why I love the web community. Weve always got each others backs and we dont hold great code hostage!