Hacker News Reader

Comment by antibland | Hacker News Reader

Using this part of the CSS Grid syntax, I made a responsive Brady Bunch demo. Disclaimer: the theme song will autoplay on desktop. https://codepen.io/antibland/pen/VMzxqm

View on HN

I'm very sorry as I know "+1" type posts are bad, but that is my favorite disclaimer I've ever seen.

Any recommendations from either of you on material on grid-template-areas? It sounds like it would be great for getting away from the hack of having a mobile menu and a desktop menu on our existing site (with the one for that format rendering and the other hidden), which I've hated as it is a pretty clear indicator I couldn't find something more appropriate.

I came across them from this video, when I heard the "it's almost like ASCII" part (I had it on in the background) something clicked in my head and I had to drop everything to try it out.

https://youtu.be/7kVeCqQCxlk?t=1039

Watch on for the 'crazy response design' part.

I am still amazed.

Thanks for that. At work, they push site should look the same across all browsers very heavily (well, desktop = desktop, tablet = tablet, mobile = mobile). I’m going to try and share this video with one of the guys that dictates design a bit and see if I can convince to get away from all of the hacks built into it that end up breaking little edge cases which then requires browser specific hacks. It’s a longshot, but he likes bleeding edge so fingers crossed.

This is incredibly compelling stuff though. First thing in a while I’ve seen that has left me floored.

So I found MDN's documentation on it (https://developer.mozilla.org/en-US/docs/Web/CSS/grid-templa...), but wasn't 100% certain on how the implementation works. Namely, how footer and foot were related.

At first I was thinking it was inferring first HTML element seen (head) relates to first area element written (also head), second HTML element seen (nav) and second distinct area element written (also nav), and third HTML element (footer) with third distinct area element written (foot). Then I see the pretty obvious grid-area within the CSS handling that linking and I must say, that's beautiful stuff.

I'm a little confused because in your example, grid-template-areas lists words that are the same as the class names on the elements, but I'm not (yet) sure that grid-template-areas takes a list of class names rather than them being arbitrary identifiers for the areas being laid out.

The class names don't matter. Each grid-template-areas value has to match the grid-area value (the actual grid item being placed).

Right, but do you see how you've used the same terms for both?

I see. I only added the class names to provide a container for each child to point to where it should be placed. The fact that I named the class and the grid area indentically could seem a bit confusing. Something like "marsha-container" might have been clearer.

The song, thankfully, did not autoplay on my desktop. But then again, my daily browser nowadays is Safari on MacOS.

Looks like Chrome does autoplay, so does Firefox.

I'm kinda liking how Safari handles privacy, tracker blocking, and autoplay blocking.

autoplay can be disabled in Firefox with a simple configuration tweak, and I'm sure it can be in Chrome as well.

Thinking about how difficult this must have been to do with 1960s analog video technology makes this feature more impressive.

Woah, I didn't fully understand how that works given the OPs description, but after seeing it in action... that's amazing!

Reply on news.ycombinator.com