James Y Rauhut

CSS Gridish

Automatically build your grid design’s CSS Grid code, CSS Flexbox fallback code, Sketch artboards, and Chrome extension.

CSS Gridish takes design specs of your product’s grid and builds out several resources for your team to use:

  • A Sketch file with artboards and grid/layout settings for designers

  • CSS/SCSS code using CSS Grid with a CSS Flexbox fallback for developers

  • Google Chrome extension for anyone to check a webpage’s alignment

The Chrome extension made for CSS Gridish included the same shortcuts as Sketch. A user could quickly compare their work between design and development.

The goal was to help teams adapt CSS Grid sooner, and to enable more complex layouts. To show how versatile the tool was, here are some example grids from BootstrapCarbon Design System, and Material Design.

When creating the API for CSS Gridish, I specifically chose terms familiar to visual designers. This helped designers and developers learn each others' different models for grid.

The project was the largest SCSS tool I had built at the time. Designers appreciated that the Google Chrome extension had the same keyboard shortcuts as Sketch. Developers enjoyed the opportunity to upgrade to a new technology, CSS Grid, before their project’s browser support adjusted.

Lessons Learned

In retrospect, I believe the project accomplished too much and that made it difficult to maintain. Also, the code to pull off the CSS Flexbox fallback was based on a "trick" I regret implementing with viewport units. This project received a lot of attention due to its launch with IBM, but I also found it difficult to work on the project while at the company.

The most valuable aspect of CSS Gridish was the pixel-perfect fallback from CSS Grid to CSS Flexbox on older browsers. I later isolated that feature and made a better performing solution called Grid Wiz.

I ended up making a spiritual successor called Grid Wiz. The new project zoomed into making the best experience strictly for developers while also adding a visual configuration tool for non-developers.