Full-Bleed Layout Using CSS Grid • Hacker News Board

Re: Full-Bleed Layout Using CSS Grid

#51

Post by [deleted] » Mon, Oct 05, 2020, 6:15 PM UTC

commandlinefan wrote: post #44

akersten wrote: post #29

Earlier quoted context omitted.

I think CSS is "difficult to understand" because most people who do front-end don't want to spend a day learning it. Ask some people who make the claim it's difficult: what is the box model, and what is selector specificity. I can almost guarantee they won't be able to answer those questions, because they haven't bothered to actually try to learn CSS. Their knowledge of CSS is built from a set of "how do I do X in CS…

> most people who do front-end don't want to spend a day learning it. Can you link to some good resources? I've read "CSS The Definitive Guide" by Eric Meyer, "Eric Meyer on CSS" (also by Eric Meyer) and "CSS Zen Garden" and I still can't get CSS to do anything useful and always resort to table-based layouts because they work.

[deleted]

Re: Full-Bleed Layout Using CSS Grid

#52

Post by pier25 » Mon, Oct 05, 2020, 6:18 PM UTC

onion2k wrote: post #43

pier25 wrote: post #40

Why even use grid when you can solve this much easier without it?

Grid enables you to do this ( and a lot more ) in a way that works across all modern browsers without much code in a robust and consistent manner. If you still need to support IE or older Android it's useful to understand other approaches but if you want to deploy something today that works grid is an excellent approach. I've been building front end stuff for about 25 years and grid is much more straightforward than…

I don't disagree but it seems like you're avoiding my question.

Re: Full-Bleed Layout Using CSS Grid

#53

Post by jszymborski » Mon, Oct 05, 2020, 6:19 PM UTC

Slightly OT, but this page has the BEST alternative for a modal newsletter pop-up I’ve ever seen. I have a personal rule that I close the tab as soon as a modal asking for my email pops up. When the cute little figure on the left _asked_ for my consent to pop-up a modal, I had to click on it because it was so cute and respectful.

This is great design that I’m sure converts as well without cheapening your brand and accosting your users.

Re: Full-Bleed Layout Using CSS Grid

#54

Post by sntran » Mon, Oct 05, 2020, 6:19 PM UTC

A quick note is that by using CSS grid, margins are not collapsed. For the example in the article, the heading and the paragraph are rows, so if they have top and bottom margins, they will be further apart than normally. This can break design sometimes

Re: Full-Bleed Layout Using CSS Grid

#55

Post by hardwaregeek » Mon, Oct 05, 2020, 6:23 PM UTC

throw_m239339 wrote: post #30

I 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 uses promises, you can simply use callbacks. Everyone gets them and they're performant. If you need to bind to a JS library that uses promises, or communicate with such library, you can use BS's Js.Promise.

IMO that's a less than ideal response. I'd prefer a more honest response like:

A: Unfortunately, we do not offer an async/await equivalent currently. BuckleScript has a Js.Promise type for using Promises. We understand that this is not ideal, and are working on other options.

Look—it's okay that they don't have the feature. Nobody's perfect. But they shouldn't pretend that callbacks are an acceptable replacement because they're "performant".

Re: Full-Bleed Layout Using CSS Grid

#56

Post by glitcher » Mon, Oct 05, 2020, 6:24 PM UTC

dunnevens wrote: post #38

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.

I especially appreciate how the end solution was presented fairly early in the tutorial after the stage had been set. I find it helpful to see the code representing "where we're going" instead of holding out until the very end to arrive there.

Re: Full-Bleed Layout Using CSS Grid

#57

Post by lukeramsden » Mon, Oct 05, 2020, 6:27 PM UTC

jszymborski wrote: post #53

Slightly OT, but this page has the BEST alternative for a modal newsletter pop-up I’ve ever seen. I have a personal rule that I close the tab as soon as a modal asking for my email pops up. When the cute little figure on the left _asked_ for my consent to pop-up a modal, I had to click on it because it was so cute and respectful. This is great design that I’m sure converts as well without cheapening your brand and ac…

And the little heart on the right smiles more the further you scroll.

Re: Full-Bleed Layout Using CSS Grid

#58

Post by bigbubba » Mon, Oct 05, 2020, 6:28 PM UTC

The translucent gradient overlay this site has is truly obnoxious. What possesses people to do things like this? Headers that follow you when you scroll down the page are bad enough, but this is truly abominable. Don't fade out text I'm trying to read dammit!

Delete StandardLayout__GradientWrapper, it served no useful purpose, it only pisses people off.

Re: Full-Bleed Layout Using CSS Grid

#59

Post by remram » Mon, Oct 05, 2020, 6:29 PM UTC

If your screen is too wide to read websites comfortably, why don't you resize your browser?

What is the point of buying a bigger monitor if you're still going to full-screen your browser to the point you can't read anymore? Isn't the point of bigger monitors to show more things at once?

Re: Full-Bleed Layout Using CSS Grid

#60

Post by andy_ppp » Mon, Oct 05, 2020, 6:30 PM UTC

CSS Grid is horrendous to debug once it gets complex and you can’t rely on document flow any more, things can be placed anywhere which might seem big and clever but a few nested grids + the cascade and you’re quite frankly screwed. If you really must use CSS grid I say use it for the main layout and nothing else, then at least future you has a chance.

Also this is more complex than using negative margins ever was.