Yesterday, the theme team launched our first collaborative theme, Radcliffe 2. This theme was a refresh of an existing theme by Anders Norén. Ola Bodera wrote a great summary of our typical theme refresh process.
(Though it may change down the road, right now this blog is using that theme!)
In Radcliffe 2, we introduced several new features geared towards WordPress.com’s small-business customers. These included the option to display contact information in the header or footer, and a customizable call-to-action. It also includes a logo resizer; typically themes have static sizes set for logos, which may not work with the wide range of logo styles out there. The resizer allows the person adding their logo to decide how large to display it, and what works best with their logo design.
My personal favourite feature, though, is Style Packs. With the theme, we bundled three different options that would change the look and feel of the design. Each uses a mix of different colours, styles, and design details to distinguish it from the original.
Creating a Style Pack is a bit of a fun brain teaser, because you’re limited to just CSS. It’s an exercise in figuring out how far you can push things, to achieve a different look and feel, while still keeping the flexibility needed in the design to allow for wildly different content.
During the theme development process, similarities to CSS Zen Garden came up a few times. The website was created by web designer Dave Shea in the early days of CSS-based layouts. At the time, table-based layouts were still popular, and browsers behaved inconsistently enough that cross-browser testing was a very intense process. The goal of the site was to showcase exactly all the amazing things that were possible with CSS, and how flexible it is as a layout tool, to encourage moving away from non-semantic markup and inline styles. Using the exact same markup, people submitted different CSS to create radically different-looking sites — there are over 200 variations in the archives. The site re-opened to submissions on its tenth anniversary in 2013, so the collection shows even how the same markup can lend itself to many different web design trends over the years.
When I was studying web design in 2003-04, Shea came and spoke to my class about CSS. At the time I was already very much drawn to the problem-solving aspect behind it: getting things to fit together and work the way you want. Having someone come speak passionately in person to our small class about how it was changing how we built websites cemented that for me. I still find one of my favourite parts of working with CSS is the thought process behind it, and being able to do the unexpected with it. Style Packs will give me plenty of opportunities to experiment with that in the future.
As a team, Style Packs let us offer different-looking styles, while managing a common code base. It’s also encouraging us to think differently about how we approach and build themes. WordPress theming hasn’t changed much in the last few years, but with Gutenberg on the horizon, that won’t last. Imagine creating strikingly different-looking sites from the default blocks through CSS alone, without touching a single line of PHP. Our abilities to see past just the markup into creative new designs will be a big help in this new world!
You can learn more about Radcliffe 2 and Style Packs by checking out the theme’s Showcase, or yesterday’s announcement post on the WordPress.com blog. We’re still waiting to see what the early adopters think of Style Packs, and I’m sure we’ll be iterating on the idea in future themes. I’m looking forward to seeing what we do with them!
Photo by kaboompics.
Automattic Design 
Comments
[…] keep the focus on Gutenberg itself and let us build on the recent work the team’s been doing with Style Packs. This turned out to be an ambitious restriction — a little more on that later — but it […]