3 ms·

For me those rules are not the fundamentals. There's more you need to know to actually get CSS to work (and I still usually have to guess and google and try ran

For me those rules are not the fundamentals. There's more you need to know to actually get CSS to work (and I still usually have to guess and google and try random things to get it to work because my knowledge is lacking) 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-width 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 full window frame left side right side toolbar content And it would generate the correct CSS to make it work To 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.

oleh 5y ago
Have a look at autolayout.js! Here’s a link to a previous discussion on this site: https://news.ycombinator.com/item?id=21997622 https://news.ycombinator.com/item?id=21997622
dmz73 5y ago
I think there is a very easy fix to most HTML/CSS problems when building GUI on the web - use HTML5 canvas. HTML is not a good match for GUI and CSS is not a good match for...anything. HTML5 canvas brings you to where Windows/X was 25 years ago so instead of trying to build GUI using TUI, just use the damn GUI already. Sure, the whole lot of tooling is missing but some copy/paste/fix from either Windows or X should produce better result than S*T ton of HTML/CSS/JS that is currently there attempting (and failing) to emulate Windows/X GUI.
- KronisLV 5y ago
  That's not really a fix, though. Flutter is trying to use this approach and if you go to their demo sites you will notice things feeling slightly off: https://gallery.flutter.dev https://gallery.flutter.dev 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 I'd say that most GUIs should be simple enough to work well with DOM, instead of throwing away decades of progress while chasing niche goals. HTML and CSS are great for displaying all sorts of documents and personally i think that the web should not stray too far from that - utilitarian interfaces that are simple and easy to understand, rather than sci-fi ones like portrayed here: https://www.saji8k.com/kit-fui/movie/ https://www.saji8k.com/kit-fui/movie/
  - adwn 5y ago
    > Some of the notable drawbacks: [...] 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.
  - michaelcampbell 5y ago
    > - you can no longer select text on the page, anywhere That's a deal breaker for me.
- robin_reala 5y ago
  If you don’t use the DOM you need to reimplement your own accessibility tree and bind that into the access APIs. Or choose to be specifically illegal in a bunch of important markets, and potentially illegal in the US. I’ll just stick with the easy paths.
cuddlecake 5y ago
> Like the rule that you have to set min-width to 0 or something to get the desired behavior. Thank you, you're my savior. This is exactly the problem I had on Friday and now I can finally solve it.
worble 5y ago
It's not quite the same, but CSS grid does make creating those kind of high level layouts much, much easier with `grid-template-areas`: .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"; } Way more declarative, in my opinion. 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://codepen.io/miriamsuzanne/pen/JjPeQYP?editors=0100 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_La...
martyalain 5y ago
It's what I do with a small language I'm working on, for instance http://lambdaway.free.fr/lambdawalks/?view=splash2 http://lambdaway.free.fr/lambdawalks/?view=splash2
- martyalain 5y ago
  More can be seen on the lambdatalk language in http://lambdaway.free.fr/lambdawalks/?view=coding http://lambdaway.free.fr/lambdawalks/?view=coding
deergomoo 5y ago
> Like the rule that you have to set min-width to 0 or something to get the desired behavior 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.

oleh 5y ago

Have a look at autolayout.js! Here’s a link to a previous discussion on this site: https://news.ycombinator.com/item?id=21997622 https://news.ycombinator.com/item?id=21997622

dmz73 5y ago

I think there is a very easy fix to most HTML/CSS problems when building GUI on the web - use HTML5 canvas. HTML is not a good match for GUI and CSS is not a good match for...anything. HTML5 canvas brings you to where Windows/X was 25 years ago so instead of trying to build GUI using TUI, just use the damn GUI already. Sure, the whole lot of tooling is missing but some copy/paste/fix from either Windows or X should produce better result than S*T ton of HTML/CSS/JS that is currently there attempting (and failing) to emulate Windows/X GUI.

KronisLV 5y ago
That's not really a fix, though. Flutter is trying to use this approach and if you go to their demo sites you will notice things feeling slightly off: https://gallery.flutter.dev https://gallery.flutter.dev 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 I'd say that most GUIs should be simple enough to work well with DOM, instead of throwing away decades of progress while chasing niche goals. HTML and CSS are great for displaying all sorts of documents and personally i think that the web should not stray too far from that - utilitarian interfaces that are simple and easy to understand, rather than sci-fi ones like portrayed here: https://www.saji8k.com/kit-fui/movie/ https://www.saji8k.com/kit-fui/movie/
- adwn 5y ago
  > Some of the notable drawbacks: [...] 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.
- michaelcampbell 5y ago
  > - you can no longer select text on the page, anywhere That's a deal breaker for me.
robin_reala 5y ago
If you don’t use the DOM you need to reimplement your own accessibility tree and bind that into the access APIs. Or choose to be specifically illegal in a bunch of important markets, and potentially illegal in the US. I’ll just stick with the easy paths.

cuddlecake 5y ago

> Like the rule that you have to set min-width to 0 or something to get the desired behavior. Thank you, you're my savior. This is exactly the problem I had on Friday and now I can finally solve it.

worble 5y ago

It's not quite the same, but CSS grid does make creating those kind of high level layouts much, much easier with `grid-template-areas`: .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"; } Way more declarative, in my opinion. 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://codepen.io/miriamsuzanne/pen/JjPeQYP?editors=0100 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_La...

martyalain 5y ago

It's what I do with a small language I'm working on, for instance http://lambdaway.free.fr/lambdawalks/?view=splash2 http://lambdaway.free.fr/lambdawalks/?view=splash2

martyalain 5y ago
More can be seen on the lambdatalk language in http://lambdaway.free.fr/lambdawalks/?view=coding http://lambdaway.free.fr/lambdawalks/?view=coding

deergomoo 5y ago

> Like the rule that you have to set min-width to 0 or something to get the desired behavior 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.