LightShip - A Smaller-stack Drupal 8 Starter Theme

Since Drupal 8 was released, I’ve had my eye on base and starter themes that our front-end team could standardize on. Using starter theme code helps us get up and running quickly on a new custom front end, reduces costs of development and long-term support, and it gives everyone on the DevCollab team the same starting place so we can better support each other internally.

The starter code that we use needs to have accessible bones. I looked at many different options, and tried a few out. Some of them were excellent quality, but in all cases, there were many layers of complexity that, frankly, our team doesn’t want or need on most of our projects. These things included CSS frameworks, and complex grunt files with many tasks. These things can create fantastic efficiencies in the right environments, but they weren’t quite working for us.  

Our focus is on long-term sustainability of code, and in baking in semantic and accessible code wherever we can. Because front-end development tools and frameworks change so quickly, building a theme with many developer tool dependences can make it harder for other developers, or even future-us, to jump back into a front-end codebase down the road.

What seem like developer conveniences now can cause major headaches in a year, or three years, when someone needs to jump back into the front-end to adjust a few lines of CSS (I’m looking at you, Compass, Foundation, Bourbon/Neat, etc.). And as Jeremy Keith recently wrote, requiring excessively complex build tools is a form of gatekeeping.

So finally, I stopped complaining and, together with the DevCollab team, we made our own ready-to-customize sub-theme of Classy. Our Drupal 8 starter theme is called LightShip, and we shared it on Drupal.org.

LightShip does use Sass, but the development tools to support Sass are as light as we could make them, so if you prefer to write vanilla CSS, they should be fairly straightforward to remove. The theme has some Sass mixins and structured partials that you can modify, remove, or rearrange. It’s only got three gulp tasks: compile Sass, watch Sass, and delete compiled CSS, with sourcemaps for debugging. Other than that, it’s ready for you to write CSS. 

So, to recap, LightShip is on Drupal.org, and its main features include:

• It’s a fully customizable sub-theme of Drupal 8 core’s Classy theme, leveraging the good accessibility work that’s gone into core;
• It has a light Sass implementation;
• It has a README file to help you get started.

If you end up using LightShip on a project, we’d love to hear about it, as well as any feedback you have. Happy front-ending!