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

Full-Bleed Layout Using CSS Grid

joshwcomeau.com

Post reply on HN
Print view View original

81–90 of 277 posts

Re: Full-Bleed Layout Using CSS Grid

#81

Post by animationwill »

shaftway wrote: post #24
baxtr wrote: post #13

It’s beyond me why CSS has to be so hard to understand. I have made several attempts and got it right, but it feels like I have to start at zero every time. I believe, it’s because CSS is not a programming language, but we are trying to do programming with it. Like: if screen is mobile then render divs stacked. I don’t know

I think it's because of the combinatorics of it and it's compounded by the specificity system, the size of the vocabulary, and no built-in compiler. The combinatorics are tough for our lizard brains to reason out. If you don't have a strict set of rules for your CSS then you end up with a mixture of element rules, class rules, and id rules, and the combinations of these can get hard to hold in your head. Having compo…

> By comparison there are 53 reserved words in Java and only 33 in Javascript.

Where did you find these numbers? I'm trying to find them but I can only find the Ecmascript and the number appears way higher

Re: Full-Bleed Layout Using CSS Grid

#82

Post by MrBuddyCasino »

bigbubba wrote: post #58

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.

I stopped reading the article because of this. Highly offensive.

Re: Full-Bleed Layout Using CSS Grid

#83

Post by akersten »

vbernat wrote: post #77
akersten wrote: post #16

Earlier quoted context omitted.

Still not sure I get it. CSS makes it very easy to carve-out elements because of selector specificity. .content * { max-width: 65ch; margin: 0 auto; } .content img { max-width: 100%; width: 100%; } It's a neat demo of CSS Grid, for sure, but the above would be my much preferred way of doing this kind of layout. Maybe if there were a need for elements (quotes, callouts, etc.) in the side columns alongside the content,…

You would get a ragged left margin if you have elements less than 65ch wide.

I left out some assumptions for brevity, but my presumption was that everything inside of the container (like p tags) would be display: block, so it would try to fill the max-width of 65ch with blank space anyway.

Re: Full-Bleed Layout Using CSS Grid

#84

Post by giantrobot »

wilsonrocks wrote: post #32
giantrobot wrote: post #21

Earlier quoted context omitted.

The differences in how different engines/platforms behave definitely does not help when doing any non-trivial layout.

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. The difficulty is compounded by the heterogeneity of the Android space.

It's great the majority browser engines follow the CSS standards but a lot of problems aren't bounded by the accuracy of the implementation.

Re: Full-Bleed Layout Using CSS Grid

#86

Post by qvq »

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.

I like doing short challenges to learn and solutions to peak at in case I get stuck.

Andy Bell posted front-end challenges for a while, here's the archive: https://piccalil.li/category/front-end%20challenges%20club/

Codepen hosts challenges every week. They aren't always CSS focused but many of them are. https://codepen.io/challenges

Re: Full-Bleed Layout Using CSS Grid

#87

Post by LeoPanthera »

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…

I closed the page as soon as I saw that because I assumed it was an ad that had escaped the blocker.

Re: Full-Bleed Layout Using CSS Grid

#88

Post by dsego »

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…

In my experience, no matter how many improvements there have been, there are always things that you are trying to do that css doesn't support or make easy to do. Recently I've tried making tabs the same width but not justified horizontally, meaning all tabs should have the same width as the widest one. Something like this (1) but without hard coding the children count. In my mind, you would be able to set the widths to max-width of siblings. In general, I would love to have more signifiers that describe relations between elements.

(1)https://codepen.io/brettdonald/pen/oRpORG

Re: Full-Bleed Layout Using CSS Grid

#89

Post by Jach »

LocalPCGuy wrote: post #76
ryandrake wrote: post #41

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

Have you read the research? It doesn't really support the claims people make about it. A good starter thread (albeit it's hard to follow all the replies in the nested conversations): https://twitter.com/danluu/status/1115707741102727168

Re: Full-Bleed Layout Using CSS Grid

#90

Post by typon »

lukeramsden wrote: post #57
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.

I just loved that so much
Post reply on HN