In part 1 of “To Framework, or Not To Framework“, I wrote about why I don’t tend to use frameworks like Bootstrap or Foundation. If you haven’t read that, it gives a bit of context to the “why” part of this article.

The first thing people use in a framework (at least it feels that way) is the grid system. In Bootstrap you have classes like .col-md-1 to indicate one grid unit, in Foundation .large-1 accomplishes the same thing.

Both Bootstrap and Foundation are based on a 12 column grid. So those classes above are asking for 1/12 of the grid. Bootstrap implies we’re working with desktop styles. Foundation makes it a bit more obvious by adding “large” to the class.

If you want to assign a column to be 1/2 of the width of the screen on mobile, you would write:

Bootstrap: .col-xs-6 (xs = extra small)

Foundation: .small-6

When you want to make things responsive, you can mix and match those classes to get it right.


<div class=“col-xs-6 col-md-3”></div>


<div class=“small-6 large-3”></div>


Now there’s nothing wrong with those grid systems. But for me, I don’t use Bootstrap or Foundation because of all the overwriting of styles that I have to do to make something look unique. So, I don’t include Bootstrap or Foundation just for their grid system. For me, since I’m not bound to a framework, I get to choose the grid system that makes the most sense to me. Instead, I use Unsemantic on most of my projects.

Nathan Smith, who wrote Unsemantic, used percentages to build the grid system. So, if I want a div that sits at 50% width on mobile and 10% on desktop, that looks like this:

<div class=“mobile-grid-50 grid-10”></div>

By just using .grid-10, I get the desktop styles. Adding mobile- or tablet- to the class applies that style if the reader is on a mobile or tablet device.


Now, for a long time, I wrote my divs exactly as seen above so that other people could figure out what I was doing:

<div class=“sidebar mobile-grid-100 grid-25”></div>

Usually there’s another class in there anyway, in this case .sidebar. So instead of adding a series of classes in my HTML, I’m now making use of Unsemantic inside my SASS files as often as I can. So I write something like:

.sidebar {
    @extend .grid-25;
    @extend .mobile-grid-100;
    /* More styles go here */

By adding them in the SASS file they’re included in the CSS files when that’s all combined. As a result, my HTML is more minimal. My SASS files stay cleaner, too. By using @extend, I can do widths, margins, padding, and responsive styles all in one single line.

Impacts on Design

The biggest departure isn’t the grid-10 vs col-1 vs large-1, it’s in the design phase. If you design for Bootstrap or Foundation (or just prefer 12 columns), not having 12 columns as a basis can be a little jarring. But for me, if I look around at other designs, most of the basics exist in all three systems. 1/3 is still 1/3, regardless of whether it’s 4 columns or 25%, for example. But Unsemantic doesn’t break down into twelve parts you get ten instead.

If that bugs you for some reason, I’d recommend Gridset. You can get as granular or particular with your grids as you want. If a 5 column system appeals to you, hey, you can make that. What about a 7 of varying sizes? Yep.

I used Gridset for a long time, and I love it. But most of the time I don’t need that level of complexity with my work. Most often it’s a 66% content block and a 33% sidebar or something like that.

So whichever way you need to work, you have options. But you don’t have to feel as if the only way to build something is by using a full framework.

In the next article, I’ll cover Typography.