The way I see people using flexbox makes me cringe a little, too.
I think most people just don't understand how to get the most out of it in terms of creating user interfaces, and use "table" oriented thinking like percentage widths and media size queries to control overall layout.
I think you should use it the way that something like QT's BoxLayout and GridLayout containers work. Strictly using flex-grow and min-width, max-width and justify-content to control layout. I can design just about any interface with just these CSS classes, with very occasional use of the three properties above:
.VBox { display: flex; flex-flow: column nowrap; }
.HBox { display: flex; flex-flow: row nowrap; }
.VGrid { display: flex; flex-flow: column wrap; align-items: flex-start; }
.HGrid { display: flex; flex-flow: row wrap; align-items: flex-start; }
.Grow { flex-grow: 2; }I know the author pitched this as an idea to w3c a while back, but I don't know why it was rejected in favor of flexbox.
Working off your last link, the final "holy grail" example, with less style but the same exact layout: https://jsfiddle.net/Lpedja35/
You don't have to have a matrix with an artificial rank to represent this. I only need to specify the 1 and 4 rows once. I don't have to make a square and then decide how to divide it, which, is the "table thinking" I mentioned earlier. I just observe which elements need Grow and then design from the inside out.
Because 12 years after their idea was pitched Custom Elements still suck?
Just a tiny list of problems with them, with big consequences: https://twitter.com/Rich_Harris/status/1198332398561353728
> and template literals with tag functions like Lit
The whole field of programming has taught us not to use string-based programming and not to rely on regexps for parsing said string based programming to arrive at results.
Also. Why are you against JSX and React, but at the same time happy with such "standard" things from Lit like magical reactive properties and bullshit like ".value=" and "?hidden=" and "@click=" none of which are standard browser techniques.
> for choices like JSX that were made in the past when these standards weren't available yet
What standards? Very few frameworks want to touch custom components with a ten-foot stick. Yes, most can target them, but very few have the as the underlying abstraction because they are just horrendously bad.
view: uhtml or lit-html (don't use lit-element)
action: DOM event delegation for intercepting anything happens on view
model: a global store passed to when custom element is defined.
update: list of [selector, f({model, view}] pairs passed to when custom element is defined.
---
Congratulation we now have a self-contained Elm architecture.