Cabinet cut list

[freebeard]

alnvdl.github.io: Designing furniture using the CSS grid

The story of why and how I developed a tool for designing MDF furniture by writing my own little language that transpiles into a CSS grid layout.
7 January 2023, by Allan Vidal

There is no server-side code, just static HTML, JavaScript and CSS, and it is hosted as a static page.

It’s not written using any frameworks, if you push it too hard it will draw weird things, it’s not unit- or integration-tested, and it does not follow a particularly academic or professional approach to the transpilation process .... At the time I designed this, I had dozens of other problems to solve in the construction. Looking at the end result, it’s amazing to to see all the complexity supported by modern browsers, which enable an application like this to be written in just ~550 non-minified LOC (or ~18KB).

In the end, the person designing the furniture in the 3D CAD had very few questions and was able to do their work. This design was also used by the company making the countertops, and we also used it throughout the construction process to help define where to place power outlets and pipes behind the cabinets (yes, we took the whole “design the house of your dreams” thing a bit too seriously).

And the end result was exactly as we wanted. I’m sharing this in the hope that it can be useful for someone else in the same situation as I was, or maybe help someone who is learning about the CSS grid layout.

Download link is provided.