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 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.

Bootstrap

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

Foundation

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

Freedom

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 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.

Application

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