Compass: A Free Starter Theme for WordPress Built with Hybrid Core, Bourbon, and Neat

photo credit: Theresa Thompson - cc
photo credit: Theresa Thompsoncc

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.

compass-starter-theme

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:dependencies
  • grunt build:css
  • grunt build:font
  • grunt build:images
  • grunt build:js
  • grunt build:i18n
  • grunt check
  • grunt 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.

flagship-themes

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.

4 Comments


  1. 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.

    Report


    1. Basis sounds interesting – it’s great that theme devs have so many options for starting points.

      Report


  2. It’s not just the fact that there’s a Grunt file with it, it’s the way that the Grunt tasks configurations are organised that makes it unique. One file per task, and project structure organised as variables means that much of the individual task modules are re-usable as they are, without further configuration, in forked themes and plugins.

    * Want to know what browser versions autoprefixing accounts for? Look in grunt/config/autoprefixer.js.
    * Want to know what Bower dependencies are copied into the assets directory? See grunt/config/bowercopy.js.
    * Want to configure PHP Mess Detector settings? Look in grunt/config/phpmd.js.

    All easy to find and get to grips with, and all potentially re-usable. The individual configs are loaded in as needed, and all tasks are loaded just-in-time.

    (Disclaimer, I wrote most of the Grunt config for Flagship).

    Rob Neu has done an amazing job with the Sass arrangement too, particularly with the variables. “Private” and “scoped” variables make it easy to take an existing version of Compass, and change the values / variable names to amend colours or typography and rebuild the Sass to have a theme that looks very visually different. I’m using most of his setup (with permission) as the basis of my own starter child theme for the Genesis Framework.

    Report


    1. Thanks for the further clarification, Gary! The files/tasks seem really well organized and makes it easy for those new to the theme to find what they’re looking for. Thanks for your great work on this. :)

      Report

Comments are closed.