I’ve been thinking about a box-first approach to design tooling. The overall layout workflow would consist only of adding boxes (block-level elements) to a blank web page, or inside other boxes. Boxes could also contain other elements like inputs, buttons, images, etc.
Don't quite follow you, but if you're talking about a box-based layout for the web, that's a little overly simplistic as "the" layout, but is already possible. Keep in mind the historical underpinings; web documents were always more like scrolls than screens.
Not really, I’m not thinking to replace CMS builders like Wix or Squarespace either.
More like ”no-code design directly in HTML and CSS”, but with familiar Figma/Sketch-line controls for sizing, alignment, etc. Responsive by default, boxes full-width and vertically sized by content by default, manual pixel sizing of elements heavily discouraged in favor of block/inline-block/inline. Sane defaults for theme tokens, but easily customizable.
In other words, a hands-on design tool for web layouts, working directly on the DOM and stylesheet, preferring the flow for positioning and leveraging (normalized) HTML/CSS defaults.
My thinking is mostly born out of frustration with the performance of flexbox-inside-flexbox layouts and the total disparity of text layout between web and existing design tools.
See https://every-layout.dev for a mind-blowingly well-thought-out approach to CSS that builds from first principles and leverages sane primitives and a typographic scale to compose dynamic layouts... it's boxes, and it's beautiful.
I’ve been thinking about a box-first approach to design tooling. The overall layout workflow would consist only of adding boxes (block-level elements) to a blank web page, or inside other boxes. Boxes could also contain other elements like inputs, buttons, images, etc.