Welcome to the Grid [#43]

There are a lot of new web technologies emerging at the moment which really feel like we’re entering a new era. Over the last decade, the likes of HTML5, ES6+, flex box etc. have brought the web, and the technologies on which it is built, very much into the modern day. Accessibility, responsiveness and flexibility have become standards, instead of the nice-to-have pipe dreams they were when I first built a website. Still, a lot of the new features and developments have been addressing limitations of what the web was back in the early noughties.

Right now, then, is a little different. There are still plenty of problems with how the web operates, limitations to its functionality and misuses of its resources, but with a little time and effort a website can become everything it was ever designed to be, and much more. The next round of technological implementation, then, is redesigning the way the web works. Do you need an active internet connection to be ‘online? Not any more. Want a website to do more than simply house and interlink static text? That’s getting pretty common.

Despite these huge leaps forward in terms of functionality, one element of those old, dark days has remained missing. Right when I started to learn HTML the standard approach was to mimic page setting from magazines by using <table> elements. That practice died a deserved death, but ever since the web has been slightly restricted in how it can display information in a dynamic, yet rigidly structured, manner. There have been improvements, such as display:table, flex box and semantically clearer HTML (section, article, aside etc.), but ultimately none have met the ease of application of a table layout.

Hopefully that’s about to change, thanks to CSS Grid. It’s a technology I’ve heard bits and bobs about for some time, but I’ll admit it hasn’t excited me like service workers or PWAs have. Thanks to (yet another) great article from A List Apart, I’m now firmly on board the Grid train and willing it to go faster, and faster, and faster. Honestly, I love the whole concept, but for me one of the most exciting aspects is the quick prototyping available through template-areas. For a full breakdown, read the article, but the “aha!” moment for me was seeing how this:

.cards {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 20px;
        grid-template-areas:
               “a a b”
               “. d d”
               “c e e”;
}

Is automatically translated into this:

Layout of 5 grid blocks and 1 empty cell, showing how CSS Grid can span columns and rows, auto-fill containers and be easily spaced.
The beauty of CSS Grid.

That’s not just replicating all the functionality of the table-based layouts of yesteryear, it’s taking the best part of it, the flexible rigidity, and removing all the irritating parts, leaving just the essence. It’s wonderfully simple yet extremely powerful and has clearly been thought through to an obscene degree. The fact that even blank cells are inherently catered for, rather than having to just set a blank <div> or similar, is just fantastic. Vendor/browser support will be the next big hurdle, but by the sounds of things that’s coming along extremely well. Give it a year and CSS Grid looks like it could well be the new standard approach.

Capital Numbers

A List Apart has long been a fantastic source of knowledge and inspiration in terms of both website design and writing, but on top of these accolades every now an then it manage to completely floor me. Sometimes it’s because an explanation finally hits home after years of misunderstanding, but other times it’s simply by providing a piece of information which is simultaneously brand new and yet perfectly obvious. The type of fact which leaves you a little wide-eyed, questioning your very purpose of existence. A mind-blower, if you will.

That’s what happened today whilst reading the (brilliant) article/excerpt on Web Typography: Numerals. The article is well worth a read just for the thoughts on how the web finally makes footnotes genuinely useful (and, in doing so, guilt trips me about how these same ideas have been sat unacted upon in my head for years). However, it was a simple comment near the start that struck me like lightning:

We have at our disposal ‘uppercase’ numbers 0123456789 called lining or titling numerals, and ‘lowercase’ numerals 0123456789 called old-style or text numerals.

Wait… what?! Numbers can have cases? I read the sentence once, thought “that’s strange”, then read it again and noticed the different cases. These different glyphs are subtle but still instantly recognisable, yet I have never realised they existed before. Such a simple little thing which makes complete sense. Much like the recent viral expose of Papyrus or the infamous Fight Club burn marks, I get the feeling that text numerals are now going to be one of those things I just can’t not notice. Which is equal parts infuriating and awesome.