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.
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.
<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).
… </article> </main> <script src="https://get.gridsetapp.com/30730/overlay/"></script> </body> </html>
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.
<main id="main" class="d-showgrid t-showgrid m-showgrid">
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.
<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:
<article id="tutorial" class="d1-d2 t-all m-all">
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:
<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:
<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.
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
Hit Save and try resizing your content in the browser again. Keep repeating this process until you find a comfortable breakpoint for your content.
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
30em, we can make sure it never gets too thin for our readers.
This last iteration of the prototype has a
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.