4 ms·

Designing furniture using the CSS grid (2023)

169 points by alnvdl 2y ago

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-using-the-css-grid.html 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/ https://alnvdl.github.io/squareplanner/

deleted 2y ago
[deleted]
deleted 2y ago
[deleted]
deleted 2y ago
[deleted]
lovegrenoble 2y ago
> 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 https://flexboxcss.com
- dang 2y ago
  It looks like you've been using HN to repeatedly promote your links: https://hn.algolia.com/?dateRange=all&page=0&prefix=true&query=https%3A%2F%2Fflexboxcss.com&sort=byDate&type=comment https://hn.algolia.com/?dateRange=all&page=0&prefix=true&que... https://hn.algolia.com/?dateRange=all&page=0&prefix=true&query=https%3A%2F%2Ftabletopy.com&sort=byDate&type=comment https://hn.algolia.com/?dateRange=all&page=0&prefix=true&que... https://hn.algolia.com/?dateRange=all&page=0&prefix=true&query=sharkle.com&sort=byDate&type=comment 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 2y ago
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 2y ago
  When i was a kid i used to use Lotus 123 to make maps for DnD
  - detourdog 2y ago
    All it took was vision and a tool.
  - peteradio 2y ago
    I used to hide porn deep in the lotus folder cache. We are kindred spirits!
  - throwaway11460 2y ago
    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 2y ago
  Myst, once the biggest-selling PC game ever, began as a prototype built in Hypercard.
tazu 2y ago
This is really cool, I especially like the syntax you came up with.
ReleaseCandidat 2y ago
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 2y ago
  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/01bdcb050ce58a4fd222f2d3a29bca4e2b9bd565/index.html#L480-L496 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 2y ago
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 2y ago
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 2y ago
  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 2y ago
    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.)
Cannabat 2y ago
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 2y ago
  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 2y ago
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 2y ago
  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 2y ago
    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 2y ago
I feel like I somehow recovered a pre-existing desire for this to exist.
system2 2y ago
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 2y ago
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 2y ago
  It's not always about solving the problem efficiently. There's a lot to be learned from doing things unconventionally.
cuttysnark 2y ago
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!
andrei-polukhin 2y ago
Allan da best

169 points by alnvdl 2y ago

deleted 2y ago

[deleted]

deleted 2y ago

[deleted]

deleted 2y ago

[deleted]

lovegrenoble 2y ago

> 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 https://flexboxcss.com

dang 2y ago
It looks like you've been using HN to repeatedly promote your links: https://hn.algolia.com/?dateRange=all&page=0&prefix=true&query=https%3A%2F%2Fflexboxcss.com&sort=byDate&type=comment https://hn.algolia.com/?dateRange=all&page=0&prefix=true&que... https://hn.algolia.com/?dateRange=all&page=0&prefix=true&query=https%3A%2F%2Ftabletopy.com&sort=byDate&type=comment https://hn.algolia.com/?dateRange=all&page=0&prefix=true&que... https://hn.algolia.com/?dateRange=all&page=0&prefix=true&query=sharkle.com&sort=byDate&type=comment 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 2y ago

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 2y ago
When i was a kid i used to use Lotus 123 to make maps for DnD
- detourdog 2y ago
  All it took was vision and a tool.
- peteradio 2y ago
  I used to hide porn deep in the lotus folder cache. We are kindred spirits!
- throwaway11460 2y ago
  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 2y ago
Myst, once the biggest-selling PC game ever, began as a prototype built in Hypercard.

tazu 2y ago

This is really cool, I especially like the syntax you came up with.

ReleaseCandidat 2y ago

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 2y ago
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/01bdcb050ce58a4fd222f2d3a29bca4e2b9bd565/index.html#L480-L496 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 2y ago

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 2y ago

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 2y ago
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 2y ago
  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.)

Cannabat 2y ago

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 2y ago
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 2y ago

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 2y ago
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 2y ago
  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 2y ago

I feel like I somehow recovered a pre-existing desire for this to exist.

system2 2y ago

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 2y ago

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 2y ago
It's not always about solving the problem efficiently. There's a lot to be learned from doing things unconventionally.

cuttysnark 2y ago

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!

andrei-polukhin 2y ago

Allan da best