Masuga Smile Doodle

Converting Foundation's Grid to Tailwind

David Musk Nov 1, 2021 Read time: 6 minute read
Converting Foundation's Grid to Tailwind

Here's how we converted our own site from Foundation to Tailwind, along with a cheat sheet to help you do the same.

For years, Foundation was our front-end framework of choice. It offered a wide range of useful components, including tabs, buttons, accordions, and breadcrumbs.

But there's one feature that stood out above the rest, and that's the grid.

Not only was this grid automatically responsive, but it also handled flow and gutters. This might seem like no big deal in the age of CSS Grid and flexbox. But does anyone remember float grids and clearfixes? It was a lifesaver in those days.

Despite Foundation's usefulness, we eventually shifted to Tailwind CSS as our main front-end tool. Tailwind took some getting used to, with several internal experiments before we were ready to use it on a client site. But now, it lets us work faster than ever, creating front-end code that's easy to customize and reuse across multiple templates.

Not to mention the JIT compiler which generates styles on demand, giving us the smallest CSS files we've seen in years. In the case of our company site, we went from 131kb down to 47kb when we converted it from Foundation to Tailwind. That's a 64% reduction in file size! And our latest client sites have been even better, with some CSS files clocking in below 30kb.

Converting Our Company Site

Naturally, it was hard to let go of Foundation's grid when we switched to Tailwind. And if you're like us, you've probably gotten used to thinking in a specific framework over the years, using classes like .row, .column and .cell rather than the underlying CSS properties.

We also weren't eager to reinvent the wheel. Instead, we asked ourselves, "What's the fastest way to convert these Foundation classes into Tailwind classes?"

Let's start by looking at an HTML example from Foundation's XY Grid:

<div class="grid-container">
    <div class="grid-x grid-padding-x"
        <div class="cell small-12 medium-3"></div>
        <div class="cell small-12 medium-6"></div>
        <div class="cell small-12 medium-3"></div>
    </div>
</div>

Like I mentioned above, this example uses Foundation's XY Grid. But if you're using a legacy version of Foundation, you can easily substitute .grid-x for .row, and .cell for .column. You can also swap these out with classes from other popular frameworks like Bootstrap's Grid System.

Regardless of your chosen framework, we can break down the pieces like so:

.grid-container adds a maximum width, and centers the content horizontally on the page.

.grid-x creates a flex container that holds the columns/cells and displays them horizontally.

.grid-padding-x applies horizontal padding to the child elements (the cells.)

.cell acts as the grid columns, receiving the padding style and size utility class.

.small-12determines the width of each column on small screens (and anything larger in the absence of .medium-[x] or .large-[x] classes.) Each number is a fraction of twelve, which makes this element 100% width on small screens.

.medium-3 and .medium-6 determine the width of each column on medium screens (and anything larger in the absence of .large-[x] classes.) Again, each number is a fraction of twelve, seting these to 25% and 50%, respectively.

With that in mind, we could write the CSS like this:

.grid-container {
    max-width: 75rem; // Adjust accordingly.
    margin-left: auto;
    margin-right: auto;
}

.grid-x {
    display: flex;
    flex-wrap: wrap;
}

.cell {
    padding-left: .5rem;
    padding-right: .5rem;
}

small-12 {
    width: 100%
}
 
@media screen and (min-width: 48rem) {
    .medium-6 {
        width: 50%;
    }

    .medium-3 {
        width: 25%;
    }
}

This is a simplification, of course. And it's far from an accurate representation of Foundation's CSS. Rather, this is an attempt to capture the spirit of what these popular grid frameworks do behind the scenes.

Once we had these basic CSS properties, the next step was finding the right utility classes in the Tailwind Docs.

Here's the Tailwind markup we came up with:

<div class="mx-auto max-w-6xl">
    <div class="flex flex-wrap"
        <div class="w-full md:w-1/4 px-4"></div>
        <div class="w-full md:w-1/2 px-4"></div>
        <div class="w-full md:w-1/4 px-4"></div>
    </div>
</div>

Don't worry, there's no need to take notes or reverse engineer this. We'll have a full class conversion cheat sheet at the bottom of this post!

But first, let's look at the differences.

The Grid Container

At first glance, mx-auto max-w-6xl looks far less intuitive than the grid containers we've seen in Foundation and Bootstrap. But look at that second class, .max-w-6xl. You can easily adjust the size of this container by swapping that out for another class from Tailwind's Max-Width Classes. This immediately makes Tailwind more flexible than the alternatives.

The Row

flex flex-wrap is straightforward enough. We're creating a flex container, and allowing the items inside to wrap. Depending on your needs, you could easily combine these classes into a single element with the "grid-container" classes above. You can also experiment with other flex utility classes from the Tailwind docs and center, reverse, or justify your columns as needed.

The Columns

Again, the sizing classes (w-full md:w-1/4) are straightforward enough if you've spent time in the Tailwind docs. The biggest difference here is the padding utility class, .px-4.

Foundation handles the padding behind the scenes, adding specific styles to each child element inside the grid. And while Tailwind's method uses more markup, it's also more customizable. Imagine you just received a client design with different gutter sizes throughout the page. In any other framework, that might mean overriding the default styles (either with your own custom CSS, or your own utility classes.) Here, it's as simple as changing a number!

The Cheat Sheet

Finally, as promised, here's our entire cheat sheet for converting a Foundation grid to Tailwind:

FoundationTailwind
grid-containermx-auto max-w-6xl
grid-xflex flex-wrap
grid-padding-xApply px-3.5 md:px-4 to each grid item rather than the container. Padding numbers can be adjusted according to your needs.
cellAdd the padding classes above, and a combination of the width classes below. w-full is the default class for a full column.
autoflex-1 w-auto
shrinkflex-shrink-0 w-auto
small-1w-1/12
small-2w-2/12 or w-1/6
small-3w-3/12 or w-1/4
small-5w-5/12
small-6w-6/12 or w-1/2
small-7w-7/12
small-8w-8/12 or w-2/3
small-9w-9/12 or w-3/4
small-10w-10/12
small-11w-11/12
small-12w-full
medium-[X]Prefix any of the above Tailwind classes with md: (e.g: md:w-1/4)
large-[X]Prefix any of the above Tailwind classes with lg: (e.g: lg:w-1/4)

As a final note, we aren't claiming this is the best way to build a grid with Tailwind. That will depend on your specific needs. But if you're used to thinking in a traditional framework like Foundation, this should give you a good starting point as you ease into Tailwind!

Gray Masuga Texture Gray Masuga Texture

You Might Also Like

How to Fix an Empty H1 Tag on Your Shopify Homepage

How to Fix an Empty H1 Tag on Your Shopify Homepage

Ryan Masuga Aug 15, 2022  ·  5 minute read

Shopify's Dawn theme homepage may get an SEO warning for an empty h1 header element. This is a missed opportunity to help search engines understand what your page is about. Small edits to the theme code can fix this technical SEO issue.

Subscribe to Our Newsletter

A few times a year we send out a newsletter with tips and info related to web design, SEO, and things you may find interesting.

No spam. Unsubscribe any time.

Decorative Masuga Border