Automating Themes with Bootstrap and LESS

It's known that theming in Drupal is not the easiest thing in the world. There’s generally a lot of markup to deal with, hooks for every kind of preprocessing, and Javascript behaviors that can get a little confusing. Depending on the project, you are probably building a custom theme for that client, and it can take a lot of time. What are your options?

  • You can build your own theme from scratch.
  • Start with a base theme like Omega, Bootstrap, or Foundations.
  • Buy a theme, adjust the quirks, and hope for the best.

The best part is, once we get a nice foundation for a theme, we can make it reusable by simply changing the colors - that is how we automate our themes using Bootstrap and LESS. This gives us an easy way for us as the agency, or clients and the end users to change their own colors and generate themes on the fly. You may find this concept similar to using the Color module in Drupal core, and even in some purchased themes that come with a handful of color palettes, except instead of swapping out different CSS files & we're altering the variables Bootstrap uses to regenerate the entire theme.

In this session, I will walk you through the process of integrating the LESS module with a Bootstrap theme to make your theming life a whole lot easier.



Saturday Night Party