When Dan Mall of Superfriendly reached out to me to work on Invision’s Design Genome project with him and his superfriends, I couldn’t have been more excited. Based off some of the motion studies he shared with me, I knew it would challenge me from a development standpoint and lead me to creating one of the most complex sites I’ve done to date.
Seeing the designs one thing immediately jumped out to me... This is VERY grid oriented. I’ve been wanting to find a project that I could lean into using CSS Grid, this one had all the requirements. Some of the bigger challenges were going to be making it responsive and potentially changing the number of grids per row based off the width of the browser.
In creating the layout, we wanted a way to make each grid on the site have a way to show different information on the page, or show in random ways. One of the best examples of this is the menu to go to the different case studies:
We came up with the idea of a "curtain" div in each grid that could be specifically styled, with its own HTML elements in side of it. The power of CSS Grid and putting multiple grids inside each other (GRIDCEPTION) really allowed us to do some amazing layouts.
One of the bigger challenges to this design was being able to change some CSS styles a bit more drastically than you would usually do in most responsive site projects. Luckily the fine folks at Invision are already running most if not all of their projects on React.js, which allowed me to use styled components that could update their CSS dynamically giving us a bit more power in some of the more finessed parts of the app.
The last part of making this site work was the content. We used Wordpress as a headless CMS and pull all of the information for the entire site on the initial load. Using advanced custom fields and some proprietary plugins by Invision, we were able to get the CMS and the site talking with ease.
We were super excited for this release and even more proud when we found out we won 4 W3 awards for it.