Flex Grid menu
By Nan Copeland • Mar 29, 2018
I re-coded the menu for all Industry Dive products using a flex grid. This resulted in a more accessible menu with code that scales better for growth.
Going into this project, my two main goals were:
- Make the menu more accessible at a higher number of screen sizes
- Make the code more scalable for a growing number of variants in the menu
For inspiration, I looked at both Vox and GitHub’s menus to see how they structured their HTML and CSS because they had similar content (logo, regular menu and sub menu). Both publications use flex grids.
I started by researching all grid methods. Industry Dive currently uses a modified Foundation grid for all sites because it is responsive and well-supported. When I had brought up an alternate grid before, the main concern was support, specifically in Internet Explorer, so I needed to prove that whatever I chose would work within these constraints.
The Hacker Noon article mentions that “Flexbox is made for one dimensional layouts and Grid is made for two dimensional layouts.” Because I was only re-coding the menu (not the whole site), I decided to go with flex. As you can see below, flexbox has great support. From my research, CSS grids seem really cool but are still pretty new and not well-supported.
Reassessing the menu SCSS
First, I broke up the menu SCSS so it was easier to manage. This was pretty straightforward: the menu CSS was previously all in one SCSS partial so I broke it up into three partials:
Currently, the desktop and mobile menus run off almost completely separate code and the small amount of code shared is in
_base.scss. To implement the flex grid, I would mainly be editing the desktop and base menus so the split made the code more maintainable and easier to read.
Setting up flex grid
As previously mentioned, the menu was originally written using a Foundation (float) grid. Because this only controls the widths, floats and clearing for each column, all other elements needed to be manually styled. For example, each
<ul> list below’s
<li> items needed to be styled with
display: inline-block to make the menu horizontal.
With the new flex grid structure, neither the floats nor inline styling were necessary, because the flex grid does this for you. This is easier to manage and scale.
For the SCSS, most of it made sense after reading the flex grid documentation mentioned above.
The most confusing property related to the flex grid is flex. The two most frequently used styles are
flex: auto and
auto grows or shrinks according to the free space in the container while
initial only shrinks to fill the minimum size of the container. Both styles are used on
.menu-content-wrapper, which wraps both menus.
initial is used on mobile screens while
auto is used on medium and large screens.
Making the flex grid responsive
So far, the changes to the menu haven’t changed what it actually looks like. But, as previously stated, one of the goals of this project was to make the menu more accessible on smaller screen sizes. Making it work on mobile is a different project but what about tablets and small laptops? This was going to involve some slight visual changes.
The first thing to change was the sub menu CTAs (the menu on the right). To account for the thinner screen width, I removed the CTA for “search” because the magnifying glass is fairly universally known to represent “search”. I considered removing the CTA for the newsletter signup link as well but I don’t think the email icon makes much sense without “signup”.
The other element to address was the “Topics” menu. On desktop, the “Topics” menu is visible at the top of the page but changes to a dropdown on scroll (see screenshot above). It is also a horizontal menu. I knew on a medium-sized screen, all the items in the menu wouldn’t fit horizontally so it should be vertical.
To make the menu fully work, I had to reassess the JS associated with the menu and update the SCSS breakpoints so this actually worked across the 15 different menus running on this code (see all pubs here).
Although the JS and SCSS breakpoints brought about some complications, I plan to clean them up in the future. I also want to update the code so the menu is fully responsive from mobile to desktop (goodbye hamburger menu), not just across medium and desktop.