The New CSS Layout By Rachel Andrew
I like to think of myself as a fairly competent consumer of CSS (Cascading Style Sheets). But, the truth is, my mental modal for CSS is old. Very old. In fact, when I look at my blog, the last time I made a critical leap forward in CSS understanding was when I discovered pseudo-elements in 2013. And, before that, it was four-sided positioning in 2011. I've long-known that my developer's toolbelt lacks design features like SVG graphics and advanced animations. But, nothing has made my stunted education more clear than The New CSS Layout by Rachel Andrew. This book has truly opened my eyes to a new world of possibilities. And, I'm super excited to start playing catch-up!
| |
|
|
||
| |
 |
|
||
| |
|
|
The New CSS Layout is an awesome book; but, it was a bit overwhelming for me because it was, essentially, all new material. And, flexbox and grid, unlike so many other aspects of CSS, represent robust and multi-faceted semantics. With these specifications, you're not just learning one or two new property values - you're learning dozens of new properties that facilitate a completely new mindset and approach to page structure.
Grid gets the most attention, but it's not the whole story. Combining all of the options available to use in CSS creates amazing new possibilities - it changes everything. Grid, flexbox, multicolumn, flow, writing modes, shapes, object fit, alignment, sizing, viewport units - these are the tools that now make up our full toolkit. They will make it possible to launch designs unlike those that have come before. (Forward, Jen Simmons)
Of course, you don't need to learn the entire breadth of new semantics in order to become effective. In fact, as Andrew describes in the book, often times, adding little more than "display: grid" in enough to start seeing the magic happen. This is illustrated quite nicely in Andrew's "Grid By Example" project, where she walks you through increasingly complex grid layouts, many of which have just a handful of grid properties defined.
NOTE: You should definitely checkout Grid By Example. I just spent an hour clicking through the demoes and I've barely scratched the surface of what that site offers.
CSS-based table layouts and flexbox have been well supported for a while by the major browsers. But, the Grid specification is relatively new in terms of browser support. It seems, though, that something magical happened - just about all of the browser vendors released Grid implementations in March of this year (2017). Apparently Microsoft Edge is still using their original specification; but, generally speaking, Grid support is here and ready for use!
That said, since it's not 100% supported in all browser, some considerations have to be made. Thankfully, Andrew has an entire chapter in this book on how to implement fallbacks. Or rather, how to progressively enhance a page using simple overrides. Or, in more complex situations, using the @supports() CSS feature detection (I didn't even know that was a thing!) to redefine element widths on enhanced structures. It sounds scary; but, it seems like it's not actually all that complicated.
If you like CSS, but feel like you're stuck in a rut, definitely pick up a copy of Thew New CSS Layout by Rachel Andrew. There's a lot of stuff to learn. But, once you can build out your mental model, it's clear that these new CSS specifications are going to make life easier while, at the same time, making your page structures more flexible and responsive.
Reader Comments
I have been using Bootstrap for their responsive grid layout and other features. I have heard of Flexbox and in the past considered it for a more complicated layout (organization chart or sports playoff type of design). Have you used Bootstrap? I have not upgraded or used the newest version of Bootstrap, but know that it using flexbox instead of its previous floating div grid system. I'm wondering if I would benefit from learning flexbox or if I should stick to Bootstrap. I've been weighing the pros and cons recently and was excited to see your post. I think I'll check this book out, so I have a better understanding myself.
@Christie,
I haven't used Bootstrap in a while, so I am not sure what kind of improvements they've made. The version (of Bootstrap) that we have in production is probably 3-4 years old at this point, so likely very out of date. That said, I would definitely recommend learning Flexbox independently of Bootstrap. It's always good to have some understanding of the fundamentals even if you're using a larger framework - it is good for debugging and understanding behaviors.
Plus, Flexbox can be applied to very small UI widgets, which wouldn't necessarily call for something as large of Bootstrap.