Being Griddy With Foundation

For A Responsive Website

I spend a good part of my day working in a grid. A modern website often relies on a framework that allows it to adjust to any screen size. This is the essence of building a responsive site.

Bootstrap 3 and Foundation 6

Bootstrap 3 and Foundation 6 are the two most popular frameworks for building a website. I've written about Bootstrap in the past – it's a solid choice for a responsive site.

However, what I enjoy about Foundation 6 is that it takes a minimalist approach in providing a CSS (styling language of the web) baseline for developing a website. It literally is a foundation where a designer builds up from, meaning that there is probably less code rewriting than what is usually necessary when working in Bootstrap.

Both frameworks are based on a 12 column grid system.

Bootstrap 3 code sample:

<div class="row">
<div class="col-xs-6 col-md-4">

Foundation 6 code sample:

<div class="row">
<div class="small-6 medium-4 columns">

Each row is based on 12 columns for both frameworks which also allow nesting of rows within rows. The beauty is that we can design for mobile screens first and scale up to larger screen sizes as we place our content within the grid.

In my opinion, Foundation takes a lighter approach so that the out-of-the-box experience is a bit faster. Designers are able to tackle a new design quickly with Foundation rather than having to grapple first with undoing design components of Bootstrap.

The Foundation grid really resonates well with my style approach.

Now, if your website is based on WordPress (self-hosted, .org) you have a choice of themes based on one of these grid frameworks – though Bootstrap is the more prevalent one.

I recently moved a WordPress site from a Bootstrap 3 based theme to a Foundation 6 one ( JointsWP), in fact.

Even though my workflow for creating pages and posts is based on using the text editor, rather than the visual WYSIWYG editor of WordPress, and I also sprinkle my framework code throughout my content, I still spent less time converting lines of code from Bootstrap 3 to Foundation 6 than when I moved from Bootstrap 2 to Bootstrap 3.

It helped that I planned my layout well and that it was mostly just the column areas that I had to bulk change.

As time consuming as such an endeavor still is, the end result just feels easier to maintain as I move forward with new content development on the site. Content creation and new page layouts will just be faster under Foundation 6 for WordPress.

I'm so griddy that any framework works for me, but Foundation 6 is equivalent to that special end-of-day tea blend that takes the din out of any hard day.

If you need a WordPress site, ask for a Foundation 6 based theme and watch TeazMedia spin wonders. If you go with a Bootstrap based one, don't fret. Put us in a grid and we'll be happy.

Leave a Reply

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