.header {
grid-area: hd;
}
.footer {
grid-area: ft;
}
.content {
grid-area: main;
}
.sidebar {
grid-area: sd;
}
.wrapper {
display: grid;
grid-template-columns: repeat(9, 1fr);
grid-auto-rows: minmax(100px, auto);
grid-template-areas:
"hd hd hd hd hd hd hd hd hd"
"sd sd sd main main main main main main"
". . . ft ft ft ft ft ft";
}
For fitting it all in one page, you can make the containing grid 100vh and ensure content takes all the extra free space, see this pen (from Mozilla) for an example: https://codepen.io/miriamsuzanne/pen/JjPeQYP?editors=0100
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_La...
I understand why this is the case (mostly thanks to a patient HN commenter who explained it to me), but holy hell it annoys me how unintuitive it is. You have to set min-width to stop a flex child being too big? Get out of here with that nonsense.
The common wisdom seems to be that 1D layouts should use flex and 2D should use grid, but I don't think I agree with that. These days, I only ever use flex for layouts that should actually be flexible. Even if it's a single dimension, if it's fixed-widths it's straight to grid for me now, and my life is measurably better for it.
Thank you, you're my savior. This is exactly the problem I had on Friday and now I can finally solve it.
Some of the notable drawbacks:
- you can no longer select text on the page, anywhere
- right click doesn't work like you'd expect it to, either, since you're looking at a canvas
- currently the download sizes are absurdly large, since you need to pack a large amount of functionality in .js/.wasm (over 10 MB, actually)
- for simpler pages, the performance overhead will be very noticeable, just try zooming in or out in those pages (i got <2 fps while zooming on a decent desktop computer)
- essentially all of the former accessibility benefits of DOM are now gone and screen reader support needs to be developed anew, assuming that they'll even support your canvas based solution
- furthermore, learning about websites by inspecting source to see how they did it is no longer possible; and you can no longer crawl these sites in any sort of an automated manner, which may be a good/bad thing depending on how you look at it
Wow, that's really, really bad. Thanks for calling attention to that.
> currently the download sizes are absurdly large, since you need to pack a large amount of functionality in .js/.wasm (over 10 MB, actually)
Just wait till someone uses this to build their desktop-only Electron app.
That's a deal breaker for me.
I get where you're coming from, I really do. HTML5 and CSS are just bad tools for doing GUIs. But there is so much infrastructure built up around them that just overrules any advanage we would get hand rolling a GUI directly rendered to canvas.
Is there something better? With Qt Widgets, the poster child for cross-platform GUI toolkits, I also frequently have problems with getting the layout to behave the way I want.
Not cross-platform.
> iOS
Not cross-platform.
> Tk
Decreasing mind-share for 2 decades+, not something I'd start a new project with.
I agree, but when I need to develop some software for Windows and Linux, a great toolkit for Android or iOS is of no use to me. Similarly, I won't use a Linux-only or Windows-only toolkit, as awesome as it may be, because I'm not going to build two different GUI layers.
I’ll just stick with the easy paths.
In particular trying to get content of some flexbox to fill the space provided by the flexbox itself, especially in a single non-scrolling app like page where you're trying to constrain everything to fitting in the window. Like the rule that you have to set min-width to 0 or something to get the desired behavior.
https://makandracards.com/makandra/66994-css-flex-and-min-wi...
That's not the only gotcha
I suppose you could argue that's not fundamental but to me, basic layout that most standard native UI toolkits would provide is an essential feature and yet to achieve it in CSS requires knowing a few obscure tricks
I wish someone would write some other UI language that would translate into CSS so I could write
And it would generate the correct CSS to make it workTo put it another way, imagine you want to repo the Keynote UI or Numbers UI in a webpage. Those are basic app UIs and yet they just slightly less than straight forward in CSS. I'm not saying they are hard, only that most people will have to goole some non-intuitive tricks to get things to work which is a different experience than trying to do them in a native UI kit where it's more likely fairly clear how to achieve it.