HN Explorer

Designing furniture using the CSS grid (2023) (alnvdl.github.io)

169 points by alnvdl ↗ HN
At one point during the construction of my house, we needed designs for the kitchen and bathroom cabinets and a bedroom wardrobe.

I wanted full control of the design process. Doing it in vector illustration software was too painful and it was taking too long. But I didn't have the time to learn any complex CAD tool either.

So I developed a small HTML/JS/CSS tool for designing MDF furniture by writing my own little language that transpiles into a CSS grid layout.

Take a look at the blog post for details: https://alnvdl.github.io/2023/01/07/designing-furniture-usin...

Or go directly to the tool (works best on desktop or tablet): https://alnvdl.github.io/squareplanner/

32 comments

[ 2.9 ms ] story [ 72.2 ms ] thread
[deleted]
(comment deleted)
[deleted]
(comment deleted)
[deleted]
(comment deleted)
lovegrenoble
> 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.

I also recommend using this cheat sheet to simplify the process of creating responsive layouts: https://flexboxcss.com

dang
It looks like you've been using HN to repeatedly promote your links:

https://hn.algolia.com/?dateRange=all&page=0&prefix=true&que...

https://hn.algolia.com/?dateRange=all&page=0&prefix=true&que...

https://hn.algolia.com/?dateRange=all&page=0&prefix=true&que...

That's excessive and starts to run afoul of this site guideline: "Please don't use HN primarily for promotion. It's ok to post your own stuff part of the time, but the primary use of the site should be for curiosity." So if you'd please stop doing this, we'd appreciate it.

HN users, btw, are a lot fiercer than the mods about this and will use unkind words like 'astroturf' and 'spam' when they notice such repeating patterns. It's not in your interest.

mauvehaus
Oh man, this is up there with the story I heard of the guy who used Excel to draw a floor plan. He just split and merged cells as needed and used different border lines to delineate the different wall types. Once again proving that Excel can be used for nearly anything whether you should or not.

Solid work on this, and I love that it takes advantage of the browser to rejigger things without having to redraw everything manually every time.

tomgp
When i was a kid i used to use Lotus 123 to make maps for DnD
detourdog
All it took was vision and a tool.
peteradio
I used to hide porn deep in the lotus folder cache. We are kindred spirits!
throwaway11460
When I was a kid I made airliner cockpit simulator in Excel. Nothing automated - I had to manually rewrite and set colors of cells as the plane progressed on its way. Hours of fun.
rchaud
Myst, once the biggest-selling PC game ever, began as a prototype built in Hypercard.
tazu
This is really cool, I especially like the syntax you came up with.
ReleaseCandidat
The measurements in the default(?) plan look off:

        cabinet 200cm x 92cm top 3cm bottom 15cm scale 5
        50cm     *        *        20cm
    *   drawer   door     door     drawer
    *   drawer   ^        ^        drawer
    *   ^        ^        >        drawer
    *   >        drawer   drawer   <
The program suggests 4 x 18.6cm = 74.4cm, but the actual remaining height is 74cm (92 - 15 - 3). Changing the scale from 5 to 4 or 6 yields the correct value of 18.5cm
alnvdl
The tool doesn't actually calculate the measurements. It just specifies the grid, and then extracts whatever the browser calculated as the width/height, rounding the numbers for displaying them nicely.

The scale is there just to make things look nice in the browser and/or in print format, and it can slightly corrupt the numbers as you noticed, especially when it's a small or odd scale (try setting it to 1 and watch it break horribly). I guess a few ways to get rid of the scale would be to introduce variable font sizes, make text not be counted for sizing the boxes, or automatically finding the "right" scale number with code. But like I said in the post:

> I guess making it more “serious” would have been possible, but in this case I just wanted to get my furniture designed fast, and keeping the code simple and small helped in that.

See: https://github.com/alnvdl/squareplanner/blob/01bdcb050ce58a4...

I also got these designs printed to follow during the construction, so I just picked scale numbers arbitrarily in a way that made them look good in the browser and fit in the paper size. So "portability" and pleasing visuals were more important than accuracy.

And of course, I could cheat like that because in my particular case any imprecisions got flagged by the real 3D CAD used by the furniture company to formalize the project :)

matsemann
I saw this in the "Printing music with CSS grid"-discussion and played a bit with it then. I really like the idea of using the constraint solver part of a layout engine for something else, very clever.
exmadscientist
For anyone wondering how a "professional" would do this, you might use a 3D CAD program like SolidWorks, Inventor, or FreeCAD. You'd make a single 2D sketch, draw some lines in box shapes, and put some constraints on those boxes. Free/unbound dimensions would read out the distances that you needed to know. The whole thing would take less than five minutes for someone with beginner-level skills (i.e., me), and maybe an hour or two to learn from scratch. It's not as cool as doing this with CSS's constraint solver, but it might add a new tool to your toolbox, and the value of that is difficult to overestimate.
mauvehaus
Having used AutoCAD, Draftsight, and PTC ProEngineer in the past, and FreeCAD (for actual CAD, generally 2D, as input to a Shopbot) and Sketchup (for design renderings for clients) regularly currently, I would suggest that the learning curve on constraint-based drafting is fairy steep for most folks.

I'd also submit that it's of limited value if you aren't using the same package as your shop. The browser-based method is at least all but guaranteed to be available to the people building the cabinets.

Since they'll have to do shop drawings anyways, you aren't gaining much even if you can interchange drawings with their CAD software.

exmadscientist
I mean, we're talking about making the napkin sketch that you hand to the real draftsman. The format really doesn't matter; they want a PDF (or whatever). They are not going to open your HTML/CSS/JS tool even if it would be trivial to them. They have better things to do with their lives. So what tool you choose is up to you and should be whatever is best for you. It doesn't matter what the shop is using.

Proper constraint-based drafting is indeed quite hard! But I think the whole "lay out this 2D grid-like structure with a few rectangles" problem is probably one of the first things anyone would learn to do with it, and I'd submit that it is indeed probably about a couple of hours' work, for someone already reasonably technical. The moment there's more than a single sketch involved, or complex geometry in that single sketch, I agree with you that it's asking too much.

The real benefit is that you are starting to learn something new. CSS is not going to help you (insane contortions aside? I really don't want to find out) when things like circles appear. And yet, if you know how to do 2D sketches, you can find yourself using them to solve other problems, just because you already know how to do it. And that's pretty cool! (For example, I've had living rooms that were just awful to lay out. It was a real nightmare to figure out how to get a TV into that place. So I sketched it up and messed around until I got something viable. My original plan was just to print out some pieces of paper to scale, then mess around with those, but it was soon clear I could do it all onscreen, so I did.)

bschwindHN
I would recommend SolveSpace for this - it has a wonderfully simple UI, good taste in key shortcuts, runs quickly with few resources, and is easy to quickly define the kind of 2D constraints you would to use in the types of drawings we're talking about.

It can export to SVG, DXF, PDF, GCODE, and more

alnvdl
Mid-way through development, once I still had to solve the problems of sharing and printing, I almost gave up on continuing the work because I thought: "it surely must be easier to just learn a CAD application".

But as another commenter highlighted: that meant a learning curve not only for me, but for my wife as well. And then there was the challenge of sharing it with everyone else via email, IM, etc. Having it open in the browser means it's easy to share, and fast and easy to load and show to people anywhere (which is handy during construction).

necovek
I've actually used FreeCAD Python scripts that simply define a lot of defaults for my usual cabinet style (eg. toe kick height, panel thickness, a couple of drawer styles [inset or not]...), and then simply declare cabinets I want to be building.

I get a 3D rendering, a cutting list exported as CSV that I can pass on to a shop, and it's trivial to adjust and play with dimensions.

Cannabat
Very cool! Did you explore using the gap properties to specify the thickness of your boards?

> I wanted full control of the design process. Doing it in vector illustration software was too painful and it was taking too long.

Aaaand then 5 evenings later… classic :)

alnvdl
I did not consider the thickness of the boards because I was designing for these "modern" cabinets that have no significant gaps between the parts when viewed from the outside. So board thickness is just an implementation detail :)

But yes, the real designers using the CAD needed to take board thickness into account when designing the internal structure. In other words, this tool is generating a list of my requirements (what I want it to look from the outside + the labels describing what I want each part to be), and then there's the separate work of designing the actual, reality-constrained furniture.

TheSisb2
I was surprised when this layout worked:

  cabinet 200cm x 92cm top 3cm bottom 15cm scale 5
       50cm     \*        \*        20cm
  \*   drawer   door     door     drawer
  \*   drawer   ^        ^        drawer
  \*   ^        ^        <        drawer
  \*   >        drawer   drawer   <
So I inspected the odd shaped element and noticed it would overflow. Probably fine for your purposes.

Super cool!

alnvdl
Yep, when I was developing this I played with some of these non-intended use cases, even though they wouldn't make sense in reality. Technically, what you did was overlay one module on top of another, with the illusion of there being an L-shaped door.

And it would look very weird, but I suspect it may be possible to assemble the cabinets with these odd shaped doors or drawers...

Izkata
Unfortunately the illusion breaks if you try to make the L go in the other direction:

  cabinet 200cm x 92cm top 3cm bottom 15cm scale 5
       50cm     *        *        20cm
  *   drawer   door     door     drawer
  *   drawer   ^        ^        drawer
  *   ^        >        ^        drawer
  *   >        drawer   drawer   <
(Also to GP: on here the indentation triggers code blocks where * won't italic, so no need to escape them)
nativeit
I feel like I somehow recovered a pre-existing desire for this to exist.
system2
I use photoshop for this. Just switch the ruler and measurements to Inches and create fixed size boxes as needed. Takes me 3-5 minutes to create a mockup.
btbuildem
A better title would be "designing the front-facing layout of rectangular-only cabinets", and that's generous.

I find this an odd exercise in using something ill suited for a purpose in an extra complicated way, just to solve an already solved problem.

Do you want to quickly throw together a kitchen design idea? IKEA has a full-featured tool just for that. Want something lower-level? Start with Tinkercad, Sketchup, all the way to Inventor or Solid Works.

spicybright
It's not always about solving the problem efficiently. There's a lot to be learned from doing things unconventionally.
cuttysnark
This is very cool. Discovered Ctrl+Option+F produces a florin 'ƒ' [on my machine] and the format function key-combo check is Ctrl+Option + regular ol' 'f'. Forked it and added the || 'f' and am now using this tool to organize lasercut jobs—on MDF, no less :) Thanks for sharing!