net

Side project

Tell us more about Ingrid

Ingrid allows users to visually develop complex

and flexible layouts. Similar to a spreadsheet program

where you can select and colour cells in a table, Ingrid

invites you to make a master grid and then populate it

with child elements by selecting individual cells.

When elements are added their grid coordinates are

‘recorded’ at the current browser width like

keyframes in an animation.

Why did you create Ingrid?

The idea came from past experiences in print design,

using such tools as QuarkXPress and Adobe InDesign

to create layouts for brochures. Each project

document would begin with a large and flexible grid,

which would help arrange the elements on the page.

As CSS Grid allows us to think beyond rows, I wanted

to make an interface to simulate those lovely grids

offered in the print publishing programs, only much,

much worse.

What were you hoping to achieve?

My aim was to build a tool that could generate a

starting point when tackling a flexible, grid-based

layout. CSS Grid allows complete freedom of

movement for all child elements and with those

elements requiring an adaptive grid for varying

screen sizes, there is scope for some incredibly

complex and dynamic layouts.

What technologies were used in building Ingrid?

I developed Ingrid entirely on CodePen before

exporting, minifying and uploading to ingrid.guide. I

used Sass out of habit but in all honesty there wasn’t

much CSS heavy lifting required. I also used Babel so

that I could work with the latest and greatest

JavaScript features; no additional JS libraries or

frameworks were used. I didn’t use Vue or React or

Angular or Backbone or Ember or Meteor or...

How has Ingrid been received?

The initial wave of recognition came from a share

from speckyboy.com who kindly spread the word on

Twitter and Facebook. But it’s early days for Ingrid as

it only went live at the beginning of February and

there are plenty of additions and tweaks I have

planned for the future.

What’s next for Ingrid?

When CSS Grid Module 2 (https://www.w3.org/TR/css-

grid-2/) lands I’m hoping to implement subgrid

support for proper nesting of elements.

If you use Ingrid to help build something, anything,

I would love to hear about it!

INGRID

Matthew Croud explains how he built a tool for

creating ľuid layouts across multiple breakpoints

SIDE PROJECT OF THE MONTH

MATTHEW

CROUD
job: Creative front-end
developer
w: ingrid.guide
t: @Octavector

INFO