3 ms·

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

by 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.

by jsgo 9y ago

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.