Elastic Grid

Elastic Grid is a PHP tool I have built for a Web project requiring many custom layouts of adaptable size.

Quick start

  • start by defining a grid and a size for the layout
  • a simple graphical tool creates different regions of connected rectangles that fit the grid
  • a CSS generator creates a file with the layout
  • change the width and/or height of the layout at will
  • create custom margins between the different regions

Instructions

Motivation

I had to build some custom menus for a fancy e-learning project and instead of building them by hand I went looking for a tool that could do the following:
  1. generate a CSS file based on a rectangle filled grid;
  2. group some of the rectangles to form new shapes that act as one, using JavaScript;
  3. deal with the margins between the formed shapes;
  4. get a new CSS file for any changes to grid cell dimensions.
The first two items are common in most popular CSS editors, but the last two features are not usually found. In fact, as of 2011, I couldn’t find anything to help me and, as programmers do, I turned to code. The surprisingly non trivial feature to deal with was number 3: there are some situations where ones needs to add new rectangles to the grid in order to fill some gaps between adjacent elements of the same group (more on that later).