I am currently in the process of building a wider browser engine / GUI toolkit on top of it (https://github.com/dioxuslabs/blitz). As part of that I am implementing a lot of the messier parts of CSS layout (floats, etc), and also grinding on fixing all the WPT tests which we track here: https://blitz.is/status/wpt/css/css-flexbox.
The vision is a complete standalone implementation of the web layout algorithms that can be easily embedded (with individual algorithms enabled/disabled on a pay what you use basis), and which can also be part of a modular ecosystem of browser engine components that make it easier for people to create new browser engines.
Beyond Blitz, some notable users are:
- Servo which uses it only for CSS Grid
- Zed which uses it via it's GPUI toolkit.
The results have been fantastic. Thank you for this awesome library. I love it.
One thing I would love to see is CSS gain new unit which represents "a proportion of free space" (after fixed-size things have been sized) similar to fr units from CSS Grid but usable for properties like width/height and that would disable the "automatic minimum/content based size" that causes so many of the performance pitfalls with CSS layout.
I think this could make CSS layout both faster and more intuitive for 90% of layouts. And you could retain the existing properties for advanced layouts and backwards compatibility.
Flutter's blog post "constraints go down, sizes go up" [0] is the classic that I would recommend to anyone trying to understand UI layout. It doesn't cover every possible approach, but it applies to most of them including CSS. If you combine with a rule of thumb for keeping layout fast: "content-based sizing XOR flexible sizing" then you're well on your way to making a good layout system.
[0]: https://medium.com/flutter-community/flutter-the-advanced-la...
I know the CSS people were painted into a box by legacy, but the design of both grid and flex honestly seem like the products of uniquely deranged minds. Unfathomable. Something like WPF’s grid is just as powerful as CSS grid but it doesn’t give you a mental disorder trying to understand it.
https://www.walesonline.co.uk/news/wales-news/theres-still-m...
Explore other layout ideas. E.g. https://stackoverflow.com/questions/53911631/gui-layout-algo...
Flexbox on its own is a simple and very capable algorithm that you can use anywhere. You can do a lot with flexbox alone (see Yoga: www.yogalayout.dev) so it's a great place to start. Taffy supports a few more layouts (block, grid) which have their own separate use cases but flexbox is enough for most things.
... opens the SO link
yeah there's no answer to it (even if someone does, it would likely be closed by 5 others)
EDIT: Was wrong, see reply to this comment, need my coffee...still not a good excuse
The real inspiration is https://github.com/react/yoga (as used by React Native). Stretch was originally a Rust port/rewrite of Yoga.
An associated project: https://github.com/DioxusLabs/anyrender does take a lot of inspiration from Clay's "drawing commands"
Open any actual complex software from Photoshop and Cubase and weep https://x.com/dmitriid/status/1424052288205856773
There's a reason all the CSS frameworks endlessly recreate the same dozen-or-so trivial components and never dare touch layouts.
An assignment that I had that they always seemed to enjoy was picking a stadium scoreboard (I initially forced Fenway park but loosened it up in later years) and recreating it responsively exclusively in html markup and hand coded CSS (JS only allowed to pass arrays). Had to go through all 3 major media queries.
That assignment was in week 4 out of 15. 95% of the kids came in with no CSS knowledge at that time.
If you learned CSS through the aforementioned frameworks that abstract it into a mishmash of barely recognizable selector abbreviations I totally understand why you would think that it was complex and unapproachable. But once you understand positioning and the box model selector by selector sky's the limit.
Blame bootstrap for the nature of today's HEADER ROW BLOCK BLOCK BLOCK ROW BLOCK BLOCK ROW state of web design. CSS has very little to do with that.
Edit: sorry for the run on sentences.
The one that has two big numbers and two team names? That big complex layout?
Photoshop is a strange pick too. The extension layer was CEP, which is literally Chromium, and UXP that replaced it ships flexbox. There's a browser version now as well.
No negativity, but I feel biased towards CSS ;)
There's also Cubase behind it ;)
> Photoshop is a strange pick too. The extension layer was CEP
As we all know, Photoshop is just the extension layer.
Edit. And when they started moving to more and more web tech, they couldn't even get the most trivial of the app's layouts correctly: https://unsung.aresluna.org/photoshops-challenges-with-focus...
The thread you linked kind of touches on that, too, by pointing out that sometimes you need to drop down to handling layout+rendering yourself. Doesn't matter if it's a desktop or web app. It is actually the best option to do sometimes because it can be less hacky and more performant.
And if you try to layout this many elements, the browser will just sit down and cry.
Nothing in that post complains about layout. It's all regressions in usability.
What you are referring to as "layouts" is not what everyone else is talking about. In the context of this entire thread "layout" is the algorithms which decide the size and position of UI elements.
You can literally see the screenshots in the post
> In the context of this entire thread "layout" is the algorithms which decide the size and position of UI elements.
And yet the apparently amazing layout algorithms in CsS haven't lead to people easily creating actual complex layouts, and all CSS frameworks re-implement the same dozen or so trivial components.
The few companies that manage to do something complex do that at gereat expense and over untold man-hours of engineering.