Grid Experiment: Patrick Mahomes
April 20, 2020
Recently I have enjoyed Dan Davies Print to CSS. It has stoked in me more of a desire to play around. My biggest obstacle to playing with some different layouts is just finding inspiration. We don’t subscribe to any magazines at the moment and I really have struggled to find inspiration on Pinterest, which is a source that Dan had suggested to me.
I decided to take inspiration from one of the sources that Dan used in his series. The original inspiration was a new identity for the Barcelona Design Museum by Atlas in 2014. Dan took that and created a tribute to Kobe Bryant.
My inspiration was Patrick Mahomes. I started working on this 3 weeks after he led to the Chiefs to a come-from-behind victory over the 49ers to win the Super Bowl. I grew up in Kansas City and spent many a Sunday at Arrowhead Stadium in the lean years of the 70’s and 80’s. I was excited that my hometown team finally won another championship so I decided to celebrate that win and celebrate Patrick with this project.
How I Built It
I started with the same 4 column grid for larger screens that Dan had been inspired by in the original work. I also used content placement from the original and Dan’s version. But then I started to make it my own. I chose to add some color to the photo of Patrick Mahomes using masking in Photoshop. I also decided to add the Chief’s logo.
One of the fun things about putting something like this together is the happy accidents that occur. For example, on the mobile view, I had forgotten to place the number explicitly on the grid. Grid’s default behavior is to auto-flow content to the first available space, which in this case was at the bottom of the layout. I liked how it looked and decided to keep the number there until a larger tablet width gave me enough real estate to place it higher on the page.
Final Piece of Fun
Finally, I decided to have some fun creating a 9:5 aspect ratio layout for larger screens using the aspect-ratio media query. This allowed me to take advantage of screens that could handle a landscape layout. I had used this media query in a project last year and decided to pull it out of my hat to create an additional layout for my tribute.