The Responsive grid generator

Creating a Responsive grid system just became a total breeze…

What is it?

Gridpak is the starting point for your responsive projects, improving your workflow and saving time. Create your responsive grid system once using the simple interface and let Gridpak do the heavy lifting by generating PNGs, CSS and JavaScript.

Why should I use it?

We think it’s the best and most flexible way to devise a responsive layout. You control every aspect of the grid from column padding to where ‘break points’ occur. Our simple interface makes it quick and easy to visualise your responsive grid system and output it in the formats you need to make a lightning quick start to any project.

Compatibility

The CSS that Gridpak generates is compatible with IE 8+, however it makes use of some more experimental CSS properties such as the media query, box-sizing and background-clip properties so we suggest using it in conjunction with a library such as Modernizr to ensure backwards compatibility.

Feedback

As the title says, we are currently in open Beta and will be actively developing and improving Gridpak. If you have any feedback, feature requests or use Gridpak for a web project
we’d love to hear from you. For all the latest updates please follow @Gridpak on Twitter.

What’s included in the download?

Your Gridpak is a download file that contains:

PNGs

A PNG version of each grid you have created, ready and waiting for your graphics program of choice.

  • .PNGs

CSS
(Presentational)

You’ll have several options for ‘presentational’ CSS.

  • Gridpak.CSS &
  • Gridpak.LESS &
  • Gridpak.SCSS

Show more

Gridpak.css

A straightforward CSS which contains the appropriate media queries and pre-defined selectors based on the grids you have created. The system relies on .rows and .spans. You can either attach the classes to your HTML elements or re-purpose their properties to allow for more semantic markup (suggested).

How to use

First create a row.

<div class="row"></div>

Add the selector corresponding to the desired width of your element like so, where the number refers to the amount of columns you would like your element to span.

<div class="row">
    <div class="span_2"></div>
</div>

This would create an element two columns wide. The required presentational classes can also be added to existing classes:

<div class="article span_8"></div>

When using these files, if you are using more than one grid it’s probably a good idea to use the naming conventions as a reference only. If for example you use the class name 'span_6' on an item, but then a lower media query means you only have three columns: you’ll be in trouble.

Our suggestion would be to use semantic naming conventions in your markup then in your CSS file, you can add those class names right where you want them, so they always make sense in the grid and in the CSS.

<div class="row">
    <ul class="item_listing">
          <li class="item">
              <p>This is my item.</p>
           </li>
           <li class="item">
              <p>This is my item.</p>
           </li>
    </ul>
</div>
.span_1, .span_2, 
.span_3, .span_4, 
.item_listing .item {
                                    
...

@media screen and (min-width: 0px) and (max-width: 799px) {
    .row {
    ...
    }
    .span_1, .span_2, .span_3,
    .item_listing .item {
    ...
    }
}

Gridpak.less & Gridpak.scss

These options also include the appropriate media queries and allow you to use a combination of mixins and variables rather than selectors to style your elements. Like Gridpak.css this system relies on ‘rows’ however you can add the ‘row’ mixin to any element that has column children.

How to use

Parse the amount of columns you wish the object to span as a parameter in the mixin alongside any other properties.

.main_container {
    .row;	
}

article {
    .span(2);
    background: #FFF;	
} .less
.main_container {
    @include row;	
}

article {
    @ include span(2);
    background: #FFF;	
} .scss

These two examples would result in an element that is two columns wide.

JavaScript
(Overlay)

A JavaScript file which allows you to toggle your grid on and off in any browser using the ‘G’ key.

  • Gridpak.js

Please note:

The JavaScript file appends the grid directly after your body tag. It does this because it assumes that this is the main content container. If this is not the case and your main content container is called something like ‘#content_wrapper’ then please change variable append: 'body' in the JavaScript file.

Create your Gridpak

This site is licensed under a Creative Commons Attribution 3.0 License Created by Erskine, a Good Work Company.