That's just, like, my opinion, man.
An image gallery with 2 columns of images.
The old way is to:
With CSS grid:
.gallery {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 30px;
}
by Caspar
Last week, on the coat tails of inspiration gathered from WordCamp Rochester, I ordered Eric Meyer’s mammoth new book – CSS, The Definitive Guide, 4th edition. It came on Wednesday afternoon and I managed to read the first chapter on Wednesday evening before the Thanksgiving festivities set in.
I’ve read enough of these kinds of books now that I’ve gained a sense of which ones are good and which are not so good. This one is starting off in the good column. The presentation flows. The examples are simple enough to grasp quickly without being artificial or contrived.
I’ve been doing CSS for a long time. I like to think that I’m pretty good at it. But even in the first chapter, I learned a few things. Aside from the several moments of “Aha! I already knew how to do that, but this is what’s really happening under the hood and why”, I learned about the @supports rule.
I’m not going to try to explain @supports here. You can google it (or get Meyer’s book) for the full story. But I’ve been wondering, for example, how to use CSS grid when I still have to support older browsers that don’t implement it. Enter @supports:
@supports ( display: grid ) { ... }
With this, browsers that use the grid will use it. Anything else will ignore it and just use the old gridless styles. Problem solved in 1 line of code. Mind blown.
I probably would have figured this out eventually. But becoming aware of it and having a clear explanation of it was worth the price of the book. And I’ve only read Chapter 1, so far.
Cudos to Eric. I’m looking forward to Chapter 2.
by Caspar
I spent last Saturday at WordCamp Rochester. Props to the volunteers and coordinators that made it happen. It was a good day:
I’ve been thinking about WordPress themes lately: cleaning up a legacy theme in my spare time, watching the new Beans theme framework develop, growing more dissatisfied with the WordPress “spaghetti and meatballs” in general. Matt’s presentation, a kind of 35,000 ft view of opportunities for implementing a more MVC pattern within WordPress made a lot of sense and pointed towards a few patterns to try in my future exploration.
Since Eric Meyers CSS Definitive Guide, 4th edition dropped last month, I’ve had my mind on the extent to which that technology has changed even in just the past year or so. Most notably, the new Grid specification has finally been fully implemented in the MS Edge browser — which makes it realistic to actually use it on new sites. But the Definitive Guide is a huge book, and I’d been on the fence about whether to actually dive in. I’d dabbled with Grid over the last couple months, but Tracy’s demo convinced me that now is the time to take the plunge.
OMG. You mean I can import whatever data I want however I want into a widget without coding the whole damn API myself! Holy crap! This changes everything. Big thanks to Lee for fleshing out what all the commotion is about.
I’ve realized that I, too, have a few things I’ve learned over the years that I need to be more proactive about sharing. So the last thing about the WC Rochester experience left me with is the itch to submit a talk or two of my own for a few upcoming WordCamps. Object Oriented WordPress Themes anyone?