One year, one massive update

Posted on by Nathan

A couple of weeks ago we celebrated the one-year anniversary of launching Gridset. Well, we didn’t so much celebrate as quietly let it slip by as we were busy making major realignments to some of Gridset’s core features. You see, even 12 months ago when we launched publicly, we knew we hadn’t nailed the perfect responsive layout platform.

Gridset can represent a change in workflow for many of our users. It also needs to represent the forefront of responsive design and layout thinking. By keeping these two crucial aspects in line, we know we can provide the best responsive tool out there. So, after many months of feedback and learning from our own client experiences, we decided it was time to make some fundamental changes to how Gridset works.


If you’re enthralled by how fluidity, modularity, and device-agnostic design are reshaping layout on the web, we think you’ll be as excited about these changes as we are.

Disclaimer

Before we get into the details, know that these updates are an opt-in on any grid set. This will not affect existing sets. We hope that after a period of letting users access and test these exciting new features, the new interface and output will become the default, but only then on sets made after specified date. More on how to opt-in later.

Thinking in ranges and constraints

The most obvious changes are seen in the Gridset interface. When creating and editing your grids, you can now set the minimum and maximum screen widths – or what we are calling a “range” – that to which a grid applies. You can even set no minimum and/or no maximum. Grids can now apply to screen sizes from 0–990px, for example, or 1024px and above.

The grid preview can be resized between the ranges you set.

Or you can set a grid to apply at all sizes.

A grid can now apply at any screen size.

Individual columns can now be constrained to a min-width, max-width, or specific width as well. We have removed the pixel width option in favor of allowing you to decide how a column should be constrained.

Resizing the grid preview allows you to see how your grids will behave within their range.

You can view an example of the new output here.

New units

Another major point of improvement: you can use any valid CSS unit in your ranges and constraints, including ems! Due to the new shifts in how you control your grids and columns, it is now simple to build grids based on measurements other than just percentages and pixels.


Note: Ems in the interface are based on a 16px font-size. This can of course be overwritten in your own styles.

New Gridset units

Check out all of those options. Kudos to the first practical application of picas (pc).

We are very excited about the possibilities here.

What we have gained

Grids were originally conceived to divide a printed page. The thinking behind initial grid theory was sound: use grids to divide available space, enforcing order while bringing content and container into harmony. But the idea of “pages” can really hinder a fluid layout.

The changes we are introducing bring the Gridset interface much closer to what media queries and fluid web design can accomplish. Grids can be modular, nested within other grids, and can now provide consistent structure across many screen sizes. Through these simple new inputs and menus, you are given more detailed control over your layouts, and an expanded grasp on how those layouts respond at different sizes.

While they might be most apparent in the interface, these new improvements reach to every aspect of Gridset’s output as well. When you opt-in to the new features on a set, all current and future set assets (including PNGs, overlay scripts, CSS, Sass) will reflect these changes.

So what have we lost? We have only had to remove “relative” pixels for gutter widths, so you may need to convert to percentages for your gutters, or work out these margins (or paddings) in your own styles. Setting the gutter widths in pixels that were then converted to percentages in the CSS was confusing for some, and we felt it got in the way of thinking in a truly fluid space.

How to opt-in

You can start working with ranges and constraints right now in Gridset, but first please note: Converting your set to the new interface may cause changes to your grid’s measurements, and the process cannot be undone. This means any sites using the Embedded CSS Link will be immediately updated as well. You will want to create a copy of your set before trying the new interface.

Any set can be converted to the new interface by going to the Use section. At the bottom of the screen, under “Settings for [your set name]”, you will find a row for “Grid interface”. By default this will show “Version 1”, or the older interface. Click the link to “Switch to latest version” and your set (and only that set) will automatically be updated to the new interface (Version 2).

More improvements

While we were digging around in the interface to make these changes, we improved a few other aspects of the app. You might notice the Use section has been rearranged. We pushed the “How to use…” info into the Instructions section, and pulled the Rapid Prototyping Helpers and Settings to the first Use screen.

Also, Team Access is now available on all grid sets, at all times. No purchase is necessary now to share a set with another Gridset user, or transfer a set. Note that once you transfer a set, though, you will lose access to the set and the new owner will need to give you access again.

All of these improvements will gradually be added to the Documentation and FAQs as each feature is implemented fully in the app.

We want your thoughts

By allowing you to opt-in now, we are hoping to get as much feedback as possible before pushing these changes into the app as default. Feel free to respond in the comments on this post, or send a message to support with any feedback on the new Gridset interface. We look forward to hearing from you.