Quick prototypes across many screens

Building quick, responsive prototypes with Gridset

Using the Gridset CSS classes and overlay to gain fast consensus, while keeping an eye across all viewport sizes.

When it comes to getting your ideas out and in front of people, speed is key. Prototypes are a great tool to test assumptions and build consensus across stakeholders in a design process. Ideally, you start with content and a few sketches that closely resemble your current understanding of a project solution. In this tutorial, we’ll start with a sketch, and some basic content for an article. (This article, in fact.)

Quickly generate a responsive grid system

Before we jump into markup, let’s set up a quick set of grids in Gridset. As we go we will gradually adapt and improve each grid to better fit our content.

1. Create a new grid set

From the Your Grids screen, click New, and give your set a name.

2. Select a template

We’ll start with something simple that we can improve upon. Click the Minimal template to create three grids: one column for mobile, two columns for tablet, and three columns for desktop.

Layout your content out for many viewports, fast

So, adding our grid set to our HTML is very simple, but working content into your grids is where the real decisions happen. The Gridset CSS classes and overlay can help you make these decisions much faster, all while keeping the various viewport sizes in mind.

1. Linking your grids to your HTML

Once the Embedded CSS Link is set up, the grids on our page will update instantly when saved, making it perfect for rapidly trying different layout ideas. To add the Embedded CSS Link, go to your grid set and click Use at top left, then look for the link under Rapid Prototyping Tools. Copy this entire line, switch to your HTML, and paste the CSS link into the head of your page.

Example code

<meta charset="utf-8">
<title>Gridset Demo</title>
<link href="https://get.gridsetapp.com/30730/" rel="stylesheet" />

Note: The Embedded CSS Link is only intended for development, and it is limited to 500 views per hour.

With the Overlay in place, we can show and hide the grids on our site by hitting ⌘ + G (CTRL + G on Windows), or adding ?gridset=show to your URL. You can find the Overlay script on the same Use screen, next to the Embedded CSS Link. Copy the script, switch to your HTML again, and paste this just inside the end of your body tag (after all of your content).

Iterating towards done

Now that our prototype is complete, we have a living artifact on which to base our project conversations. As you receive feedback from clients, colleagues, or other stakeholders, you can quickly add content and lay it out for multiple screens. By giving you complete control and quick integration, Gridset allows you to spend less time thinking about how to build these prototypes, and more time focussing on the content should go in them.