Set up your grid within minutes.

Agile grid system for designers & developers
Easy setup, update on the fly

Ready-
Include files

Currently, Typegrid only runs on less.js. Include less.js (any version later than 1.4.0) and typegrid.less.

				// less.js
				<script src="js/less-1.4.0.min.js"></script>

				// typegrid.less
				<link rel="stylesheet/less" type="text/css" href="css/typegrid.less" />

Set-
Change options

There are only four less variables you need to change.

				// Desktop - Default
				@column-width: 40;
				@columns: 12;
				@gutter-width: 40;

				// Columns
				@column-width-widescreen: 60;

Go-
Start coding

You're ready to dive into coding. Don't forget to compile your less file before going live (note that less.js is not supported by some browsers). For advanced options and other questions, please refer to the documentation below.

Documentation

Overview

Benefits

Instead of generating different grid system every time designing a new website, Typegrid allows you to generate and modify responsive grid sets on-the-go, powered by less.js.

Github Repository

https:github.com/subwaymatch/typegrid

Frequently Asked Questions

How is this different from Twitter Bootstrap & Zurb Foundation?

Instead of using a fluid container width, Typegrid uses fixed width sets for each viewport. This allows designers to have a pixel-perfect control.

How do I use it?

It's extremely simple to use Typegrid, even if you don't know a single line of Javascript. Change the variables in "A. Grid Configuration".

What's Typegrid's unique benefits?

  1. Typegrid has one and only purpose - to provide a grid structure. No reset, no default stylings, no nothing. Just the structure. It's extremely lightweight yet agile and powerful.
  2. Typegrid handles grid generation in the smartest way possible. Everything after a few configurations are automated through less.js. Note that you also don't need to worry about adding breakpoints. Typegrid allows you to have 5 maximum viewports.
    • mobile portrait [320px wide]
    • mobile landscape [480px wide],
    • tablet portrait [768px wide],
    • desktop [varies],
    • widescreen [varies]
  3. Typegrid has little dependency. All you need is less.js (any version later than 1.4.0 beta). Even loops are handled by less.js, not by other languages.
  4. Best of all, you get to change the grid configuration during development (including the number of columns)!

About

For the designers,
by the designers

Typegrid is developed and maintained by Typebig, a team with a passion for creating minimal yet extremelely usable sites. Please visit our website for more information.