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
A Google Chrome extension for anyone to check a webpage’s alignment
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 Bootstrap, Carbon Design System, and Material Design.
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.
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.
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.