Welcome to week 8 of Flexbox Fridays!

Next week we will be publishing a final wrap up post to touch on what we learned and appreciated about this project. Hope you don't mind hanging out with us a bit longer :)

Most of our Flexbox Fridays experiments have been to explore different properties and flexbox scenarios or to scratch an itch. This week we wanted to build something we know we'd continue to use long after Flexbox Fridays ends. We've always been fans of SlickMap, a HTML/CSS sitemap. While it still holds up well in 2015, we wanted to take a shot at modernizing it (with some help from flexbox, of course)!

There are a few neat tricks here. First, flexbox handles the heavy lifting with layout. There is no need for floats or hard sizes, which means you can expand on this system without having to worry too much. In most cases flexbox does the right thing, with only orphan items being a problem. Even then, they're logically grouped. We could continue to use flexbox for 3rd level elements, too, but that's for another time.

The lines were hard to get here and as we wrap up for the day we're not incredibly happy with how they came out. There's definitely some refactoring and clean up to do. While we know a flexible layout means we won't have everything connected to a central line, there has to be a better way to connect orphans and all items when we have more horizontal space.

Lastly, just like SlickMap we're using content: attr(href); to pull HREF values into pseudo elements for each map item. This is an old trick that we fall in love with everytime we see it and wish it worked for other attributes. Why it's this way we'll never know.

Don't forget to tweet us your flexbox demos or add them to the comments here so we can all check them out!

Happy (flexible) Friday!


1,873 2 14