Just wanted to say that's an excellent tutorial. I almost never touch anything on the front end. My web dev skills are, at best, thoroughly out of date. But I could still follow and understand everything presented. If you're reading, thanks Josh. Great job.
Full-Bleed Layout Using CSS Grid
111–120 of 277 posts
Re: Full-Bleed Layout Using CSS Grid
#112> Have you ever tried to read Wikipedia on a very large screen? It looks like this: [image] Those paragraphs are so wide! Wikipedia doesn't constrain the container width at all. This leads to lines that are hundreds of characters in length. NOOOOO! Please, please, please, please stop second-guessing my choice of browser window width! I bought a nice 27" monitor, and maybe I just want to use the whole thing. Why is yo…
Two reasons. One, the designer of the site has a specific UX and UI in mind, and that is their decision. If you don't like it, you can hack it with local CSS or just use a different site. Two, (I know you don't care, but for others reading) there are studies that show that for the vast majority of people, width constraints make it easier to read. So there is good reason to enforce those constraints in the design from…
Re: Full-Bleed Layout Using CSS Grid
#113I like this idea, but how do you deal with pseudo bleed elements overlapping with sidebar content? For example many websites put navigation elements on the sidebar [1], or margin notes [2], [3]. I personally would love to see a css only solution for pseudo bleed with margin notes. The only solutions I've found so far use resize observer to absolutely position the margin notes using js or have hand coded positions and…
what the hell, its like someone vomited CSS on that page
Re: Full-Bleed Layout Using CSS Grid
#114Earlier quoted context omitted.
I think a _lot_ of this is standardised now in the vast majority of browsers people use.
Depending on what space you work in and what consumers you have “majority” is not acceptable. Safari and IE are the big bugbears in my experience.
I stand by my comment if you don't have to do IE < 11 though.
Re: Full-Bleed Layout Using CSS Grid
#115Earlier quoted context omitted.
I don't understand either. These days we have many websites with giant empty spaces on the left and/or right, all in the name of making the text lines short enough (much shorter than I like them, but that's another rant). Making the browser window smaller often makes the text even smaller, instead of the useless empty spaces. Make some room for my other windows, please! We're not in the 90's anymore where monitors we…
> These days we have many websites with giant empty spaces on the left and/or right, all in the name of making the text lines short enough (much shorter than I like them, but that's another rant). The other rant is here: [1]. Curious why do you hope people don't use their browsers full-screen? How does someone else's browsing preference affect you? Am I a lesser person if I want to use my browser full-screen on a 512…
That is the way your preferences affect me.
Re: Full-Bleed Layout Using CSS Grid
#116Re: Full-Bleed Layout Using CSS Grid
#117Earlier quoted context omitted.
I think a _lot_ of this is standardised now in the vast majority of browsers people use.
The environment for CSS isn't nearly as "standard" as you might think. Even though WebKit and Blink are the majority engines on mobile there's tons of combinations of versions, screen sizes, and aspect ratios. Trivial layouts are easy but more complicated layouts can be very difficult to get working right, let alone looking right, across browsers/platforms. The problems are often solvable but not necessarily easy. Th…
And you're right that screen sizes can mess stuff up, Firefox/chrome mobile view on devtools doesn't always tell the full story... Got something working there and it was broken on my actual phone.
Re: Full-Bleed Layout Using CSS Grid
#118The article starts out with the problem of wikipedia pages. Does anyone have a solution to wikipedia pages? I tried to adapt the articles approach to wikipedia. Create an account on wikipedia, or login. Then go to https://en.wikipedia.org/wiki/Special:Preferences#mw-prefsec... I chose MinervaNeue with Custom CSS. Here is what I set the CSS to: main { display: grid; grid-template-columns: 1fr min(65ch, 100%) 1fr; } ma…
Re: Full-Bleed Layout Using CSS Grid
#119I really hated this era before flexbox and co. CSS used to be the least intuitive thing on the planet yet a lot of people claimed otherwise. We had to resort to silly tricks (remember overflow hidden?) in order to make up for the mess that CSS used to be. Again what really pissed me off isn't CSS inherent issues but the fact that many people claimed there was absolutely nothing wrong with it, a pattern I often see wi…
I find it really frustrating when project runners refuse to acknowledge shortcomings. I'm not always expecting them to solve it, but I'd at least like an acknowledgement that the issue I'm facing is valid. Pretending it's just me or that the obviously worse alternative is okay gets annoying. One example is ReasonML's async story: Q: What's BuckleScript's async story? A: If you're not interfacing with any library that…
[1] http://jobjo.github.io/2019/04/24/ocaml-has-some-new-shiny-s...
Re: Full-Bleed Layout Using CSS Grid
#120Earlier quoted context omitted.
Depending on what space you work in and what consumers you have “majority” is not acceptable. Safari and IE are the big bugbears in my experience.
True - I'm lucky not to have to consider versions of IE prior to 11 on most projects I work on, and I can usually get things working there, although there's a flexbox thing that I always forget with IE11 that catches me out. I stand by my comment if you don't have to do IE < 11 though.