a blog on prototyping by pidoco°

A little while ago, we introduced our new grid feature. The grid feature was inspired by the wide use of grid systems in design and development and helps you

• quickly build complex layouts within a prototype,
• easily create multi-device layouts, and
• set up a clean structure throughout the entire prototype.

Basically, the grid consists of customizable columns that contain all your site’s content and help you align elements easily. A “snap-to-grid” function makes aligning even easier.

1. The grid system in Pidoco

Working with the grid is simple: Just open a page of your project and click the “Show Grid” link above the canvas. The grid icon next to the link opens the dialog that lets you adjust your grid settings: You can set the number of columns, the gutter width between columns (to give the columns some padding), as well as the margins on either side of the grid. Finally, the grid width serves to define the total space available to your design and acts as an overall container that is centered relative to the device screen (much like the container concept in common grid frameworks). A grid preview right underneath the settings helps you choose the right values. Smart defaults will get you started right away.

Activating the grid in the Page view

Since you may already be used to working with grid systems, here are some recommendations for settings corresponding to defaults in widely used grid systems you might want to use.

2. Working with the 960 Grid System

One of the most common grids is the 960gs. Optimized for “modern monitors” that “support at least 1024 × 768 pixel resolution”, this grid layout is still often used because its base number of 960 is highly flexible, being divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480. The “container”, which holds the actual content of the website, is split into either 12 or 16 columns.

The 12 column grid (Source: dev3wiki.dev3.develag.com under CC Attribution-Share Alike 3.0 Unported)

2.1 Using 12 columns

You can recreate the 12-column layout of the 960 Grid System exactly by using the following grid settings in Pidoco:

• Columns = 12,
• Grid width = 960px
• Margin = 10px
• Gutter = 20px.

This is what the 12-column grid looks like on a 1024 x 768 pixel screen.

Using the 12 column grid on a website project

2.2 Using 16 columns

To work with the 16 column variant, you can use the following settings:

• Columns = 16,
• Grid width = 960px,
• Margin = 10px,
• Gutter = 20px.

3. Working with the Bootstrap Grid System

Another commonly used system is the Bootstrap grid system. This grid system takes into consideration that modern devices come in many forms and shapes ranging from very small screens (like on smarphones) to large widescreens (like many current laptops) and allows developers to easily plan for responsive scenarios with a “mobile first” approach. Depending on the target device size, there are five grid tiers with increasing container width (the container width describes what portion of the screen is actually reserved for the content and essentially corresponds to the grid width in Pidoco):

1. extra small (XS): device width of less than 544px, no container width,
2. small (S): device width between 544 and 768px, a container width of 576px,
3. medium (M): device width between 768px and 992px, a container width of 720px,
4. large (L): device width between 992px and 1200px, a container width of 940px,
5. extra large (XL): device width of more than 1200px and a container width of 1140px.

The Bootstrap grid system assumes an additional margin of 15px on either side of the content, so the effective container width actually comes out to  be 30px wider than the specification lists, e.g. 1170px for the XL variant. If you work out the exact numbers for, say, a 12 column grid, you will find that this results in half-pixel dimensions (e.g. 97.5px in XL). Modern devices deal with this through their rendering engines, but since Pidoco only uses full pixels for projects, you need to approximate the default grid tiers. Here’s how…

To use the XL grid size (container width including margins of 1170px) in Pidoco projects, we recommend the following settings:

• Columns = 12,
• Grid width = 1164px (a little less than 1170px),
• Margin = 15px,
• Gutter = 30px.

This example shows a website project on a 1366 x 660 pixel screen. The result are 97px columns – 67px plus 15px margin on either side.

Using the Bootstrap XL grid tier on a website project

You certainly will have noticed that is does not exactly fit the default column width of 97.5 px as prescribed by the Bootstrap specification. That’s why we approximated the settings with a column width of 97px, resulting in a grid width of 1164px and thus a deviation of 6px compared with the Bootstrap container width of 1170px. (Note: We recommend erring on the side of less space when designing, but if you would rather have 6px more, just set the grid width to 1176 px.)

And this is what it looks like:

Voilà: An example using the bootstrap XL grid

That’s it! You have successfully applied a customized grid to your Pidoco project!

Do you need help? Then do not hesitate and drop us a line via support@pidoco.com or Facebook and Twitter.

Happy Prototyping!