RWD tool Gridset launches

Gridset has launched, providing designers with a means for creating grids for design, prototyping and production. Mark Boulton, creative director of Mark Boulton Design, the company responsible for the tool, spoke to .net about Gridset, how it compares with other tools – and how it can benefit designers working on responsive web design.

.net: For the uninitiated, what is Gridset?
MB: Gridset is a tool that creates all kinds of grids for you to use on your projects. It creates regular columnar grids – the type you're used to seeing in all those CSS frameworks like 960.gs and Twitter's Bootstrap – but it also creates uneven column grids, ratio grids and compound grids (where grids are overlaid). Gridset allows you to create a library of your own grids, and we give you some presets too.

.net: How does it compare with other prototyping tools? Why should designers consider using it?
MB: Well, Gridset is not just a prototyping tool – it's a grid-making tool that gives you your grids in a number of different ways, to use for prototyping, but also for use in design and production.

One of the core principles of Gridset is it's your grid, however you want it. We all prototype in a number of tools: Photoshop, HTML and CSS, sketching … Gridset gives you your grid in these various forms: from PNGs to embed in a graphics editor to CSS for rapid prototyping, and also a comprehensive cheat sheet showing all of the computed values for embedding in your own stylesheets if you wish. We've tried to cover all the bases.

.net: What’s the code output like? Is it something you can build on or only useful as a guide?
MB: Currently, the CSS code output is designed primarily for rapid prototyping. It's specific to the grids in your grid set, however many you have. It works just like other frameworks, in that it gives you every possible column permutation of your grid. You then apply classes that correspond to these values in your HTML. You can create multiple grids – at different breakpoints – and Gridset will just create a set of CSS classes for you to add. So, if your grid is large and complex, the CSS will be large and complex because it's dealing with every possible outcome.

For production sites, a large CSS file might not be a good thing, so we provide cheat sheets that enable you to take those values and apply them to specific parts of your layout. That way, you don't have to change the HTML and it also keeps the file size down. But if your grid is a simple one, we also provide heavily compressed style sheets that work just fine in the browser.

.net: You mentioned breakpoints, so how well does Gridset work regarding modern web design concerns such as RWD?
MB: Well, that was one of the reasons we built Gridset. Responsive design is challenging and we wanted a tool that would do all the hard maths for us, but allow us to rapidly prototype, and also build different types of grids to the ones we've been seeing on the web for so long now. Not only that, Gridset enables you to create different types of grid at different breakpoints. You could have a compound grid for large screens, a regular columnar grid for tablet and then for small screens you could have a golden-ratio grid.

As I mentioned, one of our core principles of Gridset is that we're agnostic to the way the grid is delivered. It could be delivered to you in many ways: PDF, PNG, PSD, a sketchbook … With that in mind, one area of CSS we're seeing a lot of potential change in right now is layout. We have new CSS3 module support growing, and newer modules getting more traction with browser vendors. In time, Gridset could provide output of your grid to these ways of laying content out. We already have Sass and LESS in the works, too.

The core principles of designing grids don't change. What changes on the web is the way grids get rendered in a browser, and for that Gridset could provide your preference. That's where things get very exciting for me.

Gridset is available from Gridsetapp.com as an online service. Pricing is $18/month unlimited or $12 per grid set.