The Gridset Logo Last Friday, Mark Boulton Design announced something we’ve been working on for the past six months or so: Gridset. A tool for creating advanced grid systems on the web.

For a long while now, we’ve been designing tools and frameworks to help us create grids from HTML and CSS. Some of these frameworks give us a lot of flexibility, and some of them tie us down quite closely with the type of HTML markup we have to use. Since about 2007, this has all been very helpful is giving us some code structure to help us understand, and then build, fairly simple grids.

But, then something happened.

Building responsive grids has forcefully jolted us from our 12-column comfort zone. Now, we’re having to think about appropriate grids for different device widths. This in turn is having the effect of making us readdress our needs for desktop. It’s certainly my experience over the past year or so, that this rather cookie cutter approach for designing grids needs re-evaluating, but we’re lacking good tools to help us with the sometimes painful maths and advanced CSS chops.

Gridset will help with this. And more.

I’ve had a few questions since Friday around some of the features we announced. I’d like to address some of those here:

Gridset is a tool, not a generator.

Nothing is prescribed… you build a bespoke grid system for your project.

Gridset is not a bunch of code you download from Github. It’s a browser-based tool to create grid systems.

Create advanced grid systems.

It can create asymmetric grids, golden ratio grids, or completely bespoke arrangements, not just a row of columns. It allows for fine-tuning of column widths.

For the past few years, the grid systems we’ve seem on the web have all been evenly spaced columns (usually either 12 or 16), and that thinking is now being applied to the latest crop of responsive grids. There is simply more to grids than 12 or 16 columns and Gridset is designed to allow the creation of many, many types of grid.

Generate smart CSS.

There is no need to add lots of classes for offsets and margins. It anticipates every possible configuration and styles accordingly, allowing you to focus on layout.

CSS grid frameworks are great if you’re flexible enough to not worry about an extra div here or there, or a particular class syntax in your CSS. If, however, you care about the semantic structure of your markup then this is a problem. We care. So Gridset has been designed to anticipate every column, margin and padding column configuration of your grid and give you the appropriate classes to use.

Designed for your workflow.

Tinker, save, return. Iterate and publish. Your grids are there whenever you need them.

I’m of the opinion that good grid system design can be abstracted from layout design. Layout gets built on a grid. Most good design systems work this way: the grid is designed, locked down and then layouts are used on top of it. Think of Gridset as your library of grids in one place. There for you to create, iterate and publish. To be used with simply the addition of a single line of CSS.

What next?

Gridset is currently in a pre-alpha stage: working with a few people in the industry that represent what we think our core audience will be. We’ll be quickly moving into a closed Alpha and then a semi-closed Beta selected from the people who sign up to the list on the site. We’re shooting for a summer launch.

In the coming weeks, we’ll be talking more and more about what we’re doing. Follow @Gridset on Twitter for more updates.