5 ms·

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/

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 https://codepen.io/antibland/pen/VMzxqm

jsgo 9y ago
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.
- jsgo 9y ago
  So I found MDN's documentation on it (https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas 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.
- benjaminjackman 9y ago
  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 https://youtu.be/7kVeCqQCxlk?t=1039 Watch on for the 'crazy response design' part. I am still amazed.
  - jsgo 9y ago
    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.
dmix 9y ago
Woah, I didn't fully understand how that works given the OPs description, but after seeing it in action... that's amazing!
rhizome 9y ago
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.
- antibland 9y ago
  The class names don't matter. Each grid-template-areas value has to match the grid-area value (the actual grid item being placed).
  - rhizome 9y ago
    Right, but do you see how you've used the same terms for both?
    - antibland 9y ago
      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.
metafunctor 9y ago
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.
- Majora320 9y ago
  autoplay can be disabled in Firefox with a simple configuration tweak, and I'm sure it can be in Chrome as well.
johnhenry 9y ago
Thinking about how difficult this must have been to do with 1960s analog video technology makes this feature more impressive.

jsgo 9y ago

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.

jsgo 9y ago
So I found MDN's documentation on it (https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas 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.
benjaminjackman 9y ago
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 https://youtu.be/7kVeCqQCxlk?t=1039 Watch on for the 'crazy response design' part. I am still amazed.
- jsgo 9y ago
  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.

dmix 9y ago

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

rhizome 9y ago

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.

antibland 9y ago
The class names don't matter. Each grid-template-areas value has to match the grid-area value (the actual grid item being placed).
- rhizome 9y ago
  Right, but do you see how you've used the same terms for both?
  - antibland 9y ago
    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.

metafunctor 9y ago

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.

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

johnhenry 9y ago

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