Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

My First CSS

engineering.kablamo.com.au

Post reply on HN
Print view View original

51–60 of 107 posts

Re: My First CSS

#51

Post by adwn »

KronisLV wrote: post #37
dmz73 wrote: post #30

Earlier quoted context omitted.

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 p…

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 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 ne…

> 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.

Re: My First CSS

#52

Post by cuddlecake »

greggman3 wrote: post #24

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 t…

> 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.

Re: My First CSS

#53

Post by ldd »

Learning flexbox is when CSS started clicking for me. I may abuse `display: flex` everyone once in a while, but it can truly be used for a lot of ideas.

Re: My First CSS

#54

Post by Trufa »

ldd wrote: post #53

Learning flexbox is when CSS started clicking for me. I may abuse `display: flex` everyone once in a while, but it can truly be used for a lot of ideas.

I love abusing flexbox.

Re: My First CSS

#55

Post by worble »

greggman3 wrote: post #24

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 t…

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://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_La...

Re: My First CSS

#56

Post by robin_reala »

themodelplumber wrote: post #9
brundolf wrote: post #5

These are good concrete concepts to use as a foundation. I would add a general principle that I think is really important: let the layout engine do as much work for you as possible. Which is to say, tell it as little as possible. If you want that to be narrower, you probably don't want to set it to a narrower `width`, you want to step back and understand where its current width is coming from, and determine how that…

A div? Narrower? Why? Oh because the text is cut off and scrolls sideways instead of running down the page, even though you can't see a horizontal scrollbar? Ah, well _that_ width is dictated by some image code at the bottom of the page text. The image was cropped incorrectly because the designer was on vacation and they had to use some random online crop tool during our cloud software outage. We fixed it with some a…

> You know you can scroll to the left and right really easily if you hold down shift?

On macOS, but not by default on Windows. On the other hand, Chrome has adopted this as default behaviour even on Windows, so I guess Edge has got it now too.

Re: My First CSS

#57

Post by robin_reala »

dmz73 wrote: post #30
greggman3 wrote: post #24

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 t…

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 p…

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.

Re: My First CSS

#59

Post by martyalain »

greggman3 wrote: post #24

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 t…

It's what I do with a small language I'm working on, for instance

http://lambdaway.free.fr/lambdawalks/?view=splash2

Re: My First CSS

#60

Post by Toutouxc »

ldd wrote: post #53

Learning flexbox is when CSS started clicking for me. I may abuse `display: flex` everyone once in a while, but it can truly be used for a lot of ideas.

I often use flexbox for tiny things like vertically aligning a checkbox and a label and I still don't know whether this is the correct "scope". Like, can I have tens or hundreds of flexbox containers on the page? Does flexbox even take significant time to process, compared to some other css constructs?
Post reply on HN