June 26, 2017

Thank you Flexbox

As I already developed and maintained mobile app in the long run, I know how hard and time consuming it can be. Obviously, we couldn't handle the cost of a native app or even an hybrid one, and it might be a good thing because there is no doubt what is called now progressive web apps is the future. With that idea in mind, there was no other option than design our calendar layout as responsive as possible. Yes but how?

CSS for dummies

As all good backend developper, I always hated writing css. Subject is quite vast, but I now have a pretty good idea why is that for most of my peers. For decades CSS just lacked a decent layout system. We all ended using framework like bootstrap to avoid dealing with float's clearfix, but thorny issue like vertical align remained a nightmare or very complicated to say the least.

Flexbox to the rescue

It took some time, but what came was worth waiting. Flexbox can do a lot, it seems it can do everything. Here are some insight on how I built a responsive calendar really easily using this new tool for the very first time. Let's go!

First, I had to setup a grid, with seven box on each line. I simply needed to use display: flex; on the week's container div. As I want horizontal elements I didn't need to change the default value of flex-direction: row;. In order to control and limit the grid I used a max-width and a constant height.

week container

All the magic happens with the properties of my flex items, which I named "day". As I want them to act like a group and adjust the whole width, I simply need to use flex-grow: 1; flex-shrink: 1; flex-basis: 0; to set an equal behavior between the items. This way all my items gently shrink and grow, no matter how wide is the line width, aka the device screen. I just get a custom responsive calendar grid, with so little effort. Yeeha.

week reduced container

Day structure

As days items have to contain some sort of structure they become flex containers as well. The structure inside a day container consists only in three smaller containers. As those containers have more or less fixed width, we use another useful feature from flexbox: content justifying. So in addition to display: flex; flex-direction: row; we then add justify-content: space-around in order to get our three items perfectly justified inside the day container with equal space around them. Magic again!

day div

Finally, as the container is aimed to display multiple colored dots for each activity tracked, we need to take care of the vertical alignment of those dots. Again, flexbox, made it so easy. We only need to change the default direction of our flex container: flex-direction: column; and again simply ask the content to center: justify-content: center. What a relief, isn't it ?

container div

This is how we used the power and flexibility of flexbox to help us designing a minimal calendar which display as well on desktop screens as on mobile devices. Thanx for reading, and happy flexboxing y'all!