Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Designing furniture using the CSS grid (2023)

alnvdl.github.io

Post reply on HN
Print view View original

1–10 of 33 posts

Designing furniture using the CSS grid (2023)

#1

Post by alnvdl »

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/

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

Re: Designing furniture using the CSS grid (2023)

#5

Post by 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

Re: Designing furniture using the CSS grid (2023)

#6

Post by 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.

Re: Designing furniture using the CSS grid (2023)

#7

Post by dang »

lovegrenoble wrote: post #5

> 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

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.

Re: Designing furniture using the CSS grid (2023)

#9

Post by tomgp »

mauvehaus wrote: post #6

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 everythin…

When i was a kid i used to use Lotus 123 to make maps for DnD

Re: Designing furniture using the CSS grid (2023)

#10

Post by 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
Post reply on HN