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

201–210 of 277 posts

Re: Full-Bleed Layout Using CSS Grid

#201

Post by enjeyw »

dsego wrote: post #88
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…

Yeah I have the same feeling. I was struggling for hours the other week to make two columns the same height, but the need for an overflow on one kept on killing everything.

Coming from a mechanical engineering background, I'm very used to being able to define spatial properties with respect to other elements in CAD, and it just seems lacking in CSS.

Re: Full-Bleed Layout Using CSS Grid

#202

Post by galaxyLogic »

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

One reason it is hard is that the effect of CSS rules depends on their order. Imagine if in your JavaScript you write 5 functions, and depending on the order you write them in causes them to have a different effect.

https://medium.com/@panuviljamaa/why-css-is-difficult-a2cdf0...

Re: Full-Bleed Layout Using CSS Grid

#203

Post by blurbleblurble »

agumonkey wrote: post #116

I found css grid to be both practical, efficient and fun. I don't know what flaws it has but it's one of the lowest friction css layout bit I've ever toyed with.

Yeah, I don't get why it bugs some people so much but I find it to be really intuitive.

Re: Full-Bleed Layout Using CSS Grid

#204

Post by djur »

ducaale wrote: post #119
hardwaregeek wrote: post #55

Earlier quoted context omitted.

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…

OCaml has monadic let syntax[1] which is similar to F#'s computation expressions. I am not sure why it is not yet supported in Reasonml/Bucklescript. [1] http://jobjo.github.io/2019/04/24/ocaml-has-some-new-shiny-s...

Because Bucklescript/ReScript is based on a modified fork of OCaml 4.06, before monadic let was added.

https://github.com/rescript-lang/ocaml "This branch is 387 commits ahead, 5444 commits behind ocaml:trunk"

Re: Full-Bleed Layout Using CSS Grid

#205

Post by kumarharsh »

exogen wrote: post #154
preommr wrote: post #129

I hate that people use CSS Grid like this. For some reason, I see so many people reach for CSS Grid like it's the de facto solution for responsive design. This is a bad design because you're tying the child elements to the grid layout of the parent. If you added an extra column in the grid, you'd have to go and adjust it for the full bleed elements. IMO a better solution would've been to just use a column layout with…

This alternative falls apart as soon as you want to put a border or box-shadow around the content column while still having full-bleed elements. Now you're limited to having it individually around each group of elements before/after any full-bleed content, instead of the entire set of content.

Not necessarily. I'm on mobile, so can't link to code right now, but here's how it would happen:

You can have another .background element which spans all the rows (using grid-row-start and grid-row-end) and positioned in the centre column. Apply the shadows on it, and keep it before the content div in DOM order. That should do it.

Re: Full-Bleed Layout Using CSS Grid

#206

Post by kumarharsh »

artificial wrote: post #184
chrisweekly wrote: post #158

Earlier quoted context omitted.

You're not alone! I strongly prefer flexbox too. Besides the points you mention, excessive use of grids leads to "designing to the grid" instead of letting the content and context dictate flow. Tangent: I also remember doing ridiculous things with nested tables during the original browser wars (circa 2001?) and consider it a "first-world problem" to be choosing among standards-based styling mechanisms.

The tables haven’t died for email layouts. Email presentation is horrific. Outlook with its special IE is oh so much fun.

Outlook doesn't even have IE btw... It has a custom MS Word compliant HTML parser/renderer (Facepalm emoji)

Re: Full-Bleed Layout Using CSS Grid

#207

Post by wraptile »

> Research has shown that the ideal line length is about 65 characters. Anywhere between 45 and 85 is generally seen as acceptable, in the context of a roman alphabet.

This should be literally nailed into everyones head. It's really tiring to hack and patch website styles to make them readable; Desktop HN is guilty of this too. Sometimes I feel I'm reading an ancient papyrus scroll around here.

Brilliant blog and I'm excited to implement full-bleed in my blog. I feel that code snippets, data tables and even some screenshots can really take advantage of this!

Re: Full-Bleed Layout Using CSS Grid

#210

Post by no_wizard »

robertoandred wrote: post #165
stjohnswarts wrote: post #78

Earlier quoted context omitted.

You sound a lot like me. I'll use CSS for colors/fonts/theming/separation and then do layout with tables :) . None of the stuff I work on is really all that complicated, so "tables are slow" just doesn't come up because the pages aren't large at all so 5ms vs 50ms doesn't matter.

Using tables for things that aren't tables is terrible for accessibility.

This really deserves to be echoed. Accessibility just isn’t taken seriously by web developers in general and it makes me so sad. If it’s mentioned at all most of the time it’s an afterthought and they try to shoehorn it in on existing code as an afterthought which just makes things worse.

I want to implore everyone on HN to not be one of those people

Post reply on HN