Getting started

Quick start

By default Pintsize uses a 12 column grid with columns of 65px and gutters of 20px. You can get started using Pintsize straight away by including the pintsize.css or pintsize.min.css in your html page.

<link rel="stylesheet" href="css/pintsize.min.css" type="text/css">

Custom grids

1. Download Pintsize

You can download the latest release of Pintsize from Github

Download now

2. Installation

Run Node Package Manager

npm install

3. Configure

There are 3 main variables you need to set to create your grid.

$columns: 12;
$column-width: 65px;
$gutter-width: 20px;

4. Build

Run Gulp to generate the classes required to start building with your grid.


Old IE

Internet Explorer supports flexbox from release 10+. Various features of Pintsize are supported in IE8+ if the $old-ie variable in the config is set to true.

$old-ie: true;


This is an open source project. If you have any ideas on how to make this project better then you can open an issue here

Looking for the previous version?

Pintsize has changed since it’s first conception. In order to make Pintsize more modular, only the grid system remains from the verions 1.0 release. You can find the previous version here.