4 ms·

This, so much this. I’ve been thinking about a box-first approach to design tooling. The overall layout workflow would consist only of adding boxes (block-leve

This, so much this. 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.

gffrd 1y ago
Huh?
skeeter2020 1y ago
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.
- cluckindan 1y ago
  Not a layout, but a design tool like Figma, leveraging the default flow of elements.
  - notpushkin 1y ago
    Something like Webflow then?
    - cluckindan 1y ago
      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.
chrisweekly 1y ago
See https://every-layout.dev 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.
- cluckindan 1y ago
  Now if it only was a design tool like Figma.
- gaws 1y ago
  > See https://every-layout.dev https://every-layout.dev for a mind-blowingly well-thought-out approach to CSS Is the book that good?
  - chrisweekly 1y ago
    Yes. But it's not just a book, it's a code generator, documentation, examples, and prod-ready implementation. Lots of it is free. This thread started about "boxes", I probably should've linked directly to this page: https://every-layout.dev/rudiments/boxes/ https://every-layout.dev/rudiments/boxes/
    - chrisweekly 1y ago
      PS This page on "axioms" is a must-read: https://every-layout.dev/rudiments/axioms/ https://every-layout.dev/rudiments/axioms/

gffrd 1y ago

Huh?

skeeter2020 1y ago

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.

cluckindan 1y ago
Not a layout, but a design tool like Figma, leveraging the default flow of elements.
- notpushkin 1y ago
  Something like Webflow then?
  - cluckindan 1y ago
    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.

chrisweekly 1y ago

See https://every-layout.dev 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.

cluckindan 1y ago
Now if it only was a design tool like Figma.
gaws 1y ago
> See https://every-layout.dev https://every-layout.dev for a mind-blowingly well-thought-out approach to CSS Is the book that good?
- chrisweekly 1y ago
  Yes. But it's not just a book, it's a code generator, documentation, examples, and prod-ready implementation. Lots of it is free. This thread started about "boxes", I probably should've linked directly to this page: https://every-layout.dev/rudiments/boxes/ https://every-layout.dev/rudiments/boxes/
  - chrisweekly 1y ago
    PS This page on "axioms" is a must-read: https://every-layout.dev/rudiments/axioms/ https://every-layout.dev/rudiments/axioms/