Quick prototypes across many screens

Building quick, responsive prototypes with Gridset

Using the Gridset CSS classes and overlay to gain approval quickly, 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.)

Quick content sketch
A quick layout sketch for our content (at desktop sizes).

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.

Creating a grid set and selecting a template.

With Gridset, you can completely customize your grids, but for now, we’ll start with this simple setup and test it with our content.

Work with your favorite framework or boilerplate

Frameworks and templates can be crucial for building a quick prototype. Gridset can work with any of these helpful tools with minimal to no extra effort. For example, if you prefer HTML5 Boilerplate to help you get started, just add the Gridset CSS and overlay script directly in the HTML (as described in step 1) and you’re ready to go.

If you use more robust frameworks like Foundation or Bootstrap, just make sure to remove any grid or layout CSS before adding the Gridset CSS and overlay script. You’ll now have much finer control over your prototype’s content, helping you make smarter, faster decisions about your design.

Laying your content out for many viewports, fast

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 the top left of the screen, 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

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

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

With the Overlay, you 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).

Example Code

    …
    </article>		
  </main>
				
<script src="https://get.gridsetapp.com/30730/overlay/"></script>
</body>
</html>
Adding the Embedded CSS Link and Overlay to your site

Resizing the viewport should show you how the grids apply at different sizes. You can find more in-depth info about adding the Gridset CSS and overlay in our documentation.

2. Laying content out on your grids

By simply adding classes to elements in your HTML, you can decide exactly where your content should be laid out for any size viewport. You can read more about Gridset classes here.

First, to align our grids with our main content area, we can add *-showgrid classes to the #main element to dictate where the overlays will show.

Example code

<main id="main" class="d-showgrid t-showgrid m-showgrid">
Adding the *-showgrid classes

Using our sketch as a guide, we can see that first we want a large image that spans the entire page at all viewport sizes. To do this, we use the *-all class (where * is the prefix of each grid we are using) for all prefixes.

Example code

<figure id="leadin-img" class="d-all t-all m-all">
  <img src="../img/quick-prototype-leadin.jpg" alt="Quick prototypes across many screens" />
</figure>

To create a nice text block for our text, we can set our article to span column one and two for desktop, and all columns for tablet and mobile sizes:

Example code

<article id="tutorial" class="d1-d2 t-all m-all">

For our aside (“What you will learn”), we can set this to span column two at desktop and tablet, and span the full width at mobile. To wrap our text around it we can use the *-floatright class for desktop and tablet:

Example code

<aside id="quick-links" class="d2 d-floatright t2 t-floatright">

And we can easily align our code example on the left, matching our sketch:

Example code

<div class="example d1 d-floatleft t1 t-floatleft">

Now we can take a look at our result at different sizes to see how our grids are performing.

Testing the layout in the browser

Fitting your layout to your content

When resizing, we can see that when the viewport is around 1000px wide, the article becomes too thin, making the text difficult to read. To fix this we can adjust the breakpoint for switching to the wider, tablet layout. We will want this breakpoint to happen at a larger size, to relieve the cramped content. In Gridset, change the max-width for your tablet grid to 1299px, and set the desktop grid to a min-width of 1300px.

Hit Save and try resizing your content in the browser again. Keep repeating this process until you find a comfortable breakpoint for your content.

Setting a new breakpoint between desktop and tablet grids

You may now notice that while the article feels comfortable, the code example is still being squished. By selecting the first column in Gridset, and setting its constraint to a min-width of 30em, we can make sure it never gets too thin for our readers.

Setting a constraint on column one

This last iteration of the prototype has a max-width of 1400px set on #main in our demo CSS (not in Gridset) to make sure the content does not get too wide for comfortable reading.

Iterating towards done

Now that our prototype is off to a good start, 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 that should go in them.