Adapt column by column, not pixel by pixel.

Dig responsive design? Hate fluid grids? Try a Frameless grid.

Building a Frameless grid

1. Make a regular fixed-width grid.

Pick a column width, a gutter width… you know, the usual stuff. Don’t worry about the amount of columns just yet, but otherwise use whatever criteria it is that you usually use to create fixed-width grids. I recommend using a relatively small column width for added flexibility.

2. Make it repeat infinitely.

Now, give your grid an infinite number of columns, so that no matter how wide you make your viewport, more and more columns come into view. Imagine you’re looking at an infinitely wide honeycomb filled with columns instead of hexagons.

3. Center it in the viewport.

Align your grid horizontally to the middle of your viewport. For a grid with an even number of columns (pictured), align the center point of your viewport in the middle of the gutter between your two centermost columns. For an odd-numbered grid, align it in the middle of your centermost column.

4. That’s it, really.

Start using the grid. Use media queries to adapt your design as more columns become available. Since you’ll be adapting column by column instead of pixel by pixel, you can choose exactly when your layout should and shouldn’t adapt. This site, for example, only adapts around 320, 480, 600, 900 and 1900 pixels. To see it in action, try resizing your browser window.

Downloads, on GitHub

LESS LESS template

Contains a small CSS reset, some consistency fixes, as well as some super-basic customizable variables and functions for starting off a Frameless grid. A good starting point for LESS users.

SASS SCSS template

The same as the LESS version above, but written in SCSS instead. Makes for a nice starting point for SASS users.

HTML HTML starting point

This is what I use as a blank canvas. Contains some basic HTML5, including Paul Irish’s conditional classes, the HTML5 Shim, and a proper meta viewport tag.

PS Photoshop template

A basic template for a Frameless grid with 48 px columns and 24 px gutters — same as the grid used on this site. Includes columns marked up with guides up to 2560px, and overlay masks for some common screen sizes.

JS Grid overlay script

(Coming soon.) Lets you overlay a customized Frameless grid on top of your site. Handy for designing in the browser.

Tips & FAQs

Is Frameless a framework?

Nope. It doesn’t include any code. It’s just an idea for a specific type of adaptive grid. You can use it as a good starting point for a new design, but you’ll still have to do all the hard work of designing and coding yourself.

Is Frameless responsive?

"Responsive web design“, as defined by its coiner, Ethan Marcotte, consists of three components: a fluid grid, fluid media, and media queries. The Frameless grid is fixed-width, not fluid.

Is Frameless related to Less Framework?

Frameless is the spiritual successor to Less Framework. It’s a much simpler idea, more flexible, and hopefully easier to integrate into your design workflow.

Don’t adapt unless it makes sense.

Only adapt your design when it makes sense for the content to adapt. You don’t have to fill up every column at every possible screen size.

Design Mobile First.

Start from the smallest possible size and work your way upwards. Adaptive designs tend to just work out better this way.

Leave IE6–8 behind.

Old IE won’t see any styles that are inside a media query, so just serve it your mobile layout and enhance it a little using IE-specific classes. It’ll make your life much easier. More about this in my blog post: Leaving Old Internet Explorer Behind.

Mobile Safari causing trouble?

Does your site zoom in too much when changing orientations on an iOS device? It’s because of this Mobile Safari bug.