My new favorite thing

So I get to try out new things all the time, but some new things have been a little bit scary, so I’ve kept away. I finally gave into one of my recent curiosities though, and my only regret is not doing it sooner.

Foundation 3 Rocks My Socks

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

What’s 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 I’m building now we’re 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. It’s 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 it’s 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 you’re building, live. Want a slider? You got it. Want tabbed navigation? No problem. Want three boxes across the middle? Four? Eight? No big deal. Let’s 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 I’ll be damned. I had a homepage up and running in under 3 hours. And that was the first time I’d 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 here’s the general idea: You start with your grid, which is broken down into however many columns you decided. I’m going to explain based on a 12 column grid because that’s what I use, and that’s 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. That’s 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 we’ll 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. F***ing brilliant. So simple, and so smart. Your homepage is pretty much built. And I’m 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, you’re done.

Did I mention it’s also responsive??!

Finish it up already

Well, I’ve like barely scratched the surface of the awesomeness that is this framework, but if you’ve 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 you’re 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. I’m REALLY excited about it, as I’m 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. We’ve always got each others’ backs and we don’t hold great code hostage!

Update: I just found out they’re releasing a new version of Foundation 3 (3.2) TOMORROW. Who’s excited? This girl!

2 Comments

  1. fouad

    thats the best explanation I have seen yet of how zurb foundation works. so simple so elegant and so to the point.