The main focus of my Tech Cohort goals center around learning CSS3 Grids. I hadn't spent much time on it before due to lack of browser support but that is changing quickly, so its time to get up to speed.
The end goal is a 'real world' one-page example site using a CSS3 Grid, seeing how real world content is used with this new method, instead of simple blocks floating around a page like most of the examples out there.
I commented in our Design Team Slack channel that it feels reminiscent of the old table based layouts of the late 90's. I know its much more flexible and powerful, but mentally setting objects to span certain columns and rows brings back a flood of pre-CSS memories, not all good either.
I have to crawl before I can walk, so I am just learning the basics right now. How to build columns, how to build rows, and have elements span them. The easiest example would be a team page.
Using Bourbon + Neat this wouldn't have been difficult, but having multiple breakpoints requires some serious overrides/hacks. Using CSS3 Grids I simply defined the items to span 6 columns on mobile by default, and then one line per breakpoint simply adjusts how many columns they span, bumping down to
4 / 3 / 2 at medium, large, and extra-large screen-sizes respectively.
The last thing I started playing with this week is seeing how single items spanning more columns than the others impacts the layout. Ackbar #1 pushes the others around, but doesn't break. Now I need unique photos so I can tell which way things are moving.
Just looking at this my immediate thought was: This would be a cool way to show/hide personal bios. On click append an
open class which spans the div across a few more columns, revealing a short informational panel. Something to play with later.
More learning after my vacation next week, and more importantly, more code examples.