Back in October, I once more attended CSS Dev Conf, held at Hotel Monteleone in New Orleans – under the shadow of hurricane Nate. Lucky for us, it shifted last minute towards Mississippi. National Guard members, who were all over downtown and ready to fight Nate (I guess), went home packing.

After spending four days there, my personal highlights were:

CSS Grid on everyone's lips

With CSS Grid Layout specs being shipped into browsers since last spring, it is pretty clear now that developers are starting to turn their back on floats and Flexbox to fuel their layout system.

Floats for instance have been used for the longest time to position elements horizontally within a container and in relation with its preceding siblings. The basic example for a 2-column layout would be:

Now let's do that with CSS Grid:


Neat, right?  A lot less boilerplate to mitigate floats impact on the outer element.  This example is just the tip of the iceberg of all the possibilities offered by Grid Layout. In a more concise way, its newly introduced properties give a more control over the child positioning -- both vertical and horizontal. In my opinion, this greatly reduces the need for a third-party framework when it comes page layout.

Lately I was tasked to redo the news page for our client Juno Beach Centre. The requirement for the index page was that certain posts needed more emphasis than others. So our designer Véronique came up with this layout where posts marked as important were doubled in size...width and height-wise. Here was my first opportunity to take what I've learned at the conference for a spin.


This was fun, but brief.

You can check out the final result here.