Blocks, and Columns, and Rows, Oh My!
CSS Grid is here, Gutenberg is coming, and everything is changing. 2018 looks to be a year that flips the table on web design in general and WordPress in particular. From web developers to bloggers, from Fortune 100 websites to personal websites, nothing will be the same by the end of the year.
These are not new trends or new concepts; both Gutenberg and CSS Grid fundamentally change everything about web design and using WordPress. Thankfully we have their brilliant work of people like Rachel Andrew and Morten Rand-Hendriksen to help sort it all out.
But what happens next is the stuff dreams, and nightmares, are made of.
CSS Grid Is Here
CSS Grid Layout, also known as CSS Grid, or just Grid, is here. In March 2017 CSS Grid jumped into the mainstream when most major browsers (Chrome, Firefox, Safari, Opera) shipped with built-in support for it. Microsoft Edge browsers are now on board. Currently, Can I Use This states that 88% of browsers support CSS Grid.
So what is CSS Grid? Glad you asked. First, some background…
Because CSS Is Garbage
CSS stands for Cascading Style Sheets. For the last 15 years, CSS has been the fundamental mechanism for adding style (e.g., fonts, colors, spacing) websites. If you have a WordPress site, inside of your theme is a Style Sheet, and this sheet of code controls just about all of the aesthetics of the website: what fonts to use, where, what colors, how much spacing between things, backgrounds, etc. Pretty much everything that affects the way a website looks is controlled by CSS.
And CSS kind of stinks. It does everything, and it does it poorly.
CSS is one-dimensional; that means the entire sheet would basically create a website in one long horizontal line if left alone. What happens in the CSS is that developers break up that line and force it to reorganize itself on the page into a layout. We used to use tables, and then floats, positioning… all of these solutions were band-aids developers used to make the website look the way designers and clients wanted it to look.
CSS Grid Is Everything
CSS Grid is two-dimensional; it allows you to manage both columns and rows, or to organize elements both vertically and horizontally. The code is both much smaller and much more powerful. Designers will be able to create layouts for websites without constraint. And since the browser will render the CSS Grid code, websites will load really fast. Grid squares can be used for anything and can collapse and reorganize to fit any screen.
CSS Grid makes web design logical, flexible, and powerful in ways developers and designers have been dreaming about for decades.
“Grid is the very first CSS module created specifically to solve the layout problems we’ve all been hacking our way around for as long as we’ve been making websites.”
— Chris House
They both reference Rachel Andrew, who wrote the book on CSS Grid, Get Ready For CSS Grid Layout. Rachel published a blog post in July of 2017 called IS IT REALLY SAFE TO START USING CSS GRID LAYOUT? making a case for switching to CSS Grid now. Rachel is a tech rock-star and my favorite voice on anything to do with websites. You will not find a more expert opinion on these issues. You can follow Rachel on Twitter as well, and I think you should!
CSS Grid will be a part of web design projects, including those built on WordPress, moving forward. It is the right way to create a website, and any developer worth their salt will be at least experimenting with it during the first half of this year. Many developers, include this one, will be launching live production websites using CSS Grid this spring.
It is happening. And that’s not all.
Gutenberg Is Coming
WordPress 5.0, code-named Gutenberg, is almost ready. It could arrive as early as Summer 2018. When it does, WordPress will become something wholly different from what you’ve experienced in the past.
Gutenberg focuses on how content is created and displayed on a WordPress website. No long will content be organized among posts and pages; with Gutenberg, everything will be “blocks.”
Imagine a basic page on a WordPress site: there are headers, and paragraphs of content, images, lists, maybe a block quote or two. Gutenberg will regard each of those elements as a separate block, and each block can be styled (color, font, background) and placed independently of the other blocks.
Instead of posts and pages, you will place blocks into “views.”
“Bottom line: The way we interact with content on the web is changing in a fundamental way and Gutenberg is what can bring WordPress into that future.”
— Morten Rand-Hendriksen
Gutenberg will change how you blog, how you add content to a page, and how your theme and plugins function — and more importantly if they continue to function at all.
From WordPress: “Gutenberg is more than an editor. While the editor is the focus right now, the project will ultimately impact the entire publishing experience including customization (the next focus area).”
Now is the time for everyone who uses WordPress to start to start to unpack what these changes will look like, and how they will affect your existing and future websites. WordPress has a plugin available right now, and if you are serious about using WordPress, you might want to download it onto a dev site and start playing around with it.
A great place to learn more about Gutenberg is Morten Rand-Hendriksen’s website; particularly this post WORDPRESS IS CHANGING. HERE ARE 3 THINGS YOU NEED TO KNOW ABOUT GUTENBERG. Morten is very active on Twitter, and I very much recommend following him for the latest on this and other bleeding edge internet issues.
My Name Is WordPress, And I’ll Be Your Driver
WordPress is huge. According to the March 2018 measurements on W3Tech, “WordPress is used by 60.3% of all the websites whose content management system we know. This is 30.2% of all websites.”
Gutenberg, for the first time in a while, puts WordPress back on the front line of innovation. Lots of small-time DIY website builders, like Wix or Weebly or Square, have popped up in the last few years with neat little bells and whistles, and for small-time website projects, they were OK. Comparatively, their interface made WordPress look old and outdated. Not anymore.
Gutenberg makes WordPress both the biggest dog on the block, as well as the one with the best grooming.
— That one is mine.
WordPress is big enough to force the marketplace to adapt, and now (once again) daring enough to push the horizon.
And they are also big enough to not care about what they leave in their wake.
Gutenberg will disrupt the scene, no doubt, and will be the subject of much debate and discussion. But it is coming, and nothing will stop that. And once it arrives, woe be to any theme or plugin that is not ready.
Gutenberg and CSS Grid Sound Big; What Happens Next?
At first, Gutenberg focuses on content management, but that can’t be the end-game. I expect Gutenberg to evolve into something that replaces, or at least drastically alters, the WordPress theme and plugin industry. Third-party shops who make themes and theme frameworks and plugins will find their business models affected, or obliterated, by Gutenberg. They need to be planning for this now, and that might not even be enough. Because WordPress is moving into that space, and they are not looking back.
Existing WordPress sites will be affected, either by shoe-horning into Gutenberg, or attempting to stay behind on an older version of WordPress that gets no development and little support.
As for new WordPress sites, Gutenberg will affect how websites are designed and how they are updated moving forward. Many things that many people relied on a developer to do will not be click-and-go easy.
Either way, by the end of 2018, WordPress will mean something different. To everyone.
CSS Grid won’t have as significant a mainstream impact as Gutenberg. You won’t need to switch to it, but you’ll probably want to, and you should. It will make your website better, stronger, faster.
You won’t necessarily need to rebuild an older site in CSS Grid, but if you are having a new website built, it should be in the discussion.
WordPress theme and theme framework developers, though, will again need to consider CSS Grid and what it does to their business. With CSS Grid, the style sheet in your WordPress theme can be completely different, and what effect will that have on the rest of the theme? As for theme frameworks, honestly, you probably don’t need them anymore. This is going to be very disruptive to a lot of people.
Our company only uses WordPress, and we’ve used the same workflow, with the same theme framework, for the last five years. The company (iThemes) that created the theme framework we use (Builder) just announced they are no longer going to develop it and will only support it “for the foreseeable future.” All of our previous website projects have used iTheme’s Builder, and none of our future ones will. This means we have to pivot, hard, and immediately.
We’ve been playing with CSS Grid for a while, and have already been experimenting with Gutenberg, and we felt like a need to pivot was there even before iThemes decided to walk away from Builder. But, if iThemes is willing to leave a successful product like Builder, with a huge active community of users, behind, it begs the question who is next? Divi? Genesis?
It Isn’t Your Fault, But It Is Your Problem
Change is inevitable. In Rachel Andrew’s blog post I linked above, Rachel shares a story that includes the lesson “It isn’t your fault, but it is your problem.” That is where we are now; maybe you didn’t ask for Gutenberg, and maybe you don’t want to learn CSS Grid, but they are a reality that threatens to change this space forever. As a user of WordPress, a web developer, or a web designer, this isn’t your fault, but like it or not, it is your problem.
So, what are you going to do about it?
Adrian Hoppel is the owner of Hoppel Design and is very excited about these changes, and very annoyed at all the extra work implementing them will bring.