The life of a frontend developer has changed a great deal over the past few years, with the introduction of new technologies for authoring CSS and automating tasks. We’re starting to see that trickle down into every new WordPress starter theme.
These days you’ve got to npm install allthiscrazystuff just to get started on a project. Once you’ve gone through the setup, you’re ready to work more efficiently with many of the more boring tasks automated for you.
Compass is a new WordPress starter theme that incorporates a host of modern web development technologies to help you create themes faster while staying in line with WordPress coding standards. The folks at Flagship, a soon-to-launch theme shop, released Compass for free earlier this month, claiming that it is “the most advanced WordPress starter theme in existence.”
Note: The Compass theme name keeps with the company’s nautical vibe, but it’s not to be confused with the open source Compass CSS framework built with Sass.
Out of the box, the theme is fairly plain but, thankfully, not hideous. Obviously, it’s a starter theme, so the point is to provide the basics for getting started on your own beautiful creation.
Sass, Bourbon, and Neat with Composer Support
Similar to the Some Like It Neat starter theme, Compass features support for Sass, Bourbon, and Neat. The theme uses Composer to manage dependencies for PHP, allowing you to declare the dependent libraries for your specific project to have them installed for you.
Grunt
The Flagship team has worked hard to create what they believe to be the most advanced and robust Grunt workflow available for WordPress theme development. You’ll need to install Node.js to run the Grunt task runner with the Compass theme, although many theme developers will likely already have it installed. Some of the tasks will also require external command-line applications, which you’ll need to install as global Node.js packages.
Once you’re ready to roll, you’ll be able to automate an amazing number of tasks associated with theme development, including things like auto-prefixing CSS properties, tidying up style.css to match the WordPress Coding Standards, generating the RTL style sheet, optimizing images, and much more. Here’s a short sampling:
grunt build:dependenciesgrunt build:cssgrunt build:fontgrunt build:imagesgrunt build:jsgrunt build:i18ngrunt checkgrunt package
Check out the documentation on GitHub for the comprehensive list of available tasks included in the Compass theme.
Hybrid Core
Compass is built on top of Justin Tadlock’s Hybrid Core, one of the oldest and most developer-friendly frameworks for building WordPress themes. The Compass release post explains why Flagship went with Hybrid Core:
There are so many things that are going to be necessary on nearly every project, and they’re regularly done poorly in many of the themes that we’ve used and tested. Justin has done an amazing job of doing things “the WordPress way” and has been building and iterating Hybrid Core for many years.
The framework handles functionality that most themes commonly require, such breadcrumbs, grabbing media, integrating microdata like schema.org, pagination, theme layouts, and translation.
Like many other new starter themes, Compass also offers support for the Theme Hook Alliance project in an effort to provide a common set of entry points for plugin and theme developers looking to extend the theme.
Although Flagship hasn’t yet officially launched, the site shows a preview of a few planned themes that were built using Compass as a starter theme.
The theme shop will soon launch with a unique pricing model that doesn’t involve bundle or theme club pricing. Each theme is priced at $199, with a $99 annual fee for support. The Compass starter theme that they use to build all of their products is open source and available to developers for free on GitHub. Check out the Getting Started guide for documentation, including video tutorials on installing the tools and working with Compass.
It’s nice to see companies starting to take build tools seriously in the commercial WordPress space. I’ve been working on a starter theme called Basis Framework which uses Sass, Grunt, and will have some neat “modules” for theme developers to bolt on additional functionality inside their themes.