airport-codes
airport-codes copied to clipboard
lynnandtonic
Updating CSS to benefit from grid and flex
I updated the main view of the codes to use CSS grid rather than floating everything. It's auto-filling and using minimal so the cards always fill the full width of the screen but don't get too small or too large. Best part is width's don't have to be defined for different media queries.
Also within this view, created a sub grid within each card. This let me tell the background and the a tag to use the same space and overlap with out needing to position absolutely or anything like that.
In the detail view, rather than position 50% top and left and then transforming to pull them back to center, the container is a flex container which lets you center position elements horizontally and vertically. Takes away some messy CSS for some clean and simple code.
I didn't go and run this through a battery of browser tests, but it should be pretty solid.
Let me know if there are questions or anything I need to clarify.
Also, my merge pull request was me being stupid and doing the wrong thing updating and merging your codebase into mine before making the updates. My apologies. I'm still kinda new with GitHub and what the different things mean.
Hi @setheryb! Thanks for submitting this pull request. I will need some time to review and I anticipate doing that this weekend, but I'll keep you updated if that changes. Thanks!
No worries. As I looked at this again, I thought "This is a great use case for grid and maybe flex as well" and took a shot at it. Let me know if you have any thoughts or questions I can help with.
Hey @setheryb! Love what you've started here. One issue is that we still have a lot of IE users visiting the site, so we'll probably want to leave the existing float-controlled layout as a fallback. We could put the grid/flexbox stuff under an @supports declaration or some other way. Would love your thoughts!
That makes total sense. Putting it inside a the @supports could do it. I'll give that a try this weekend. I feel like I ran into an issue with IE 'supporting' something but not doing it well, but that might have been before the pushed their most recent grid support update to Edge.