Responsive Grid Generator: Gridpak and LESS

I’ve been using a variety of responsive grid frameworks to help me speed up front-end development; whilst these allowed me to develop easily for multiple devices, they did not offer extreme flexibility in column width, padding or gutter sizes. They usually just offered predetermined column percentage widths, generated by the framework’s default layout width. Enter Gridpak.

I found Gridpak which allowed me to set my own column, padding and gutter widths. Not only does it do that; but it also allows you to define multiple width sets / grids to target different resolutions / devices (i.e. mobile, tablets). This is done by using a clean interface; entering your sizes and adding breakpoints for each different resolution you wish to target on the Gridpak website.

Gridpak

When finished, you simply click the Download button and it creates a zip file for you containing the required files for development:

  • A PNG file for each grid layout to help with designing the layout
  • A CSS, LESS and SCSS file
  • A Javascript file which allows you to toggle the grid overlay by pressing the G key, when viewing the html file

Since I hadn’t experienced LESS before, but had read about it I decided to try it out, instead of just using the standard CSS. In short, LESS allows you to shorten your CSS code by a number of different ways – look on the official website for the full feature list.

The following example shows how you can define variables that can be reused across the stylesheet:

@color: #4D926F;
#header {
	color: @color;
}
h2 {
	color: @color;
}

I used SimpLESS to compile the LESS code into a CSS file. To use SimpLESS, you simply drag the LESS file or its containing folder into the program and the CSS file is generated, whenever the LESS file is updated.

Gridpak’s generated LESS file contains something similar to the following code for each grid.

@media screen and (min-width: 0px) and (max-width: 959px) {
	.col {
		margin-left:2%;
		padding:0 1.5%;
	}
	/* --- Gridpak variables ---*/ 
	@max_columns: 12;
	@padding: 0 1.5%;
	@gutter_px: 0;
	@gutter_pc: 2%;

This defines properties for the chosen grid. Each media query also has a number of classes called spans for each column; where .span_1 represents 1 column, .span_2 represents 2 and so on… If you wish to create your own column type, for example one for the sidebar. You simply add its class name to the corresponding .span like so:

.span_3,
.my_semantic_class_name {
	...
}

Due to Gridpak’s ease of use and grid customisation, I’ll probably continue to use it.