CSS for Multiple Brands

ConvergeSE 2017

Creating versatile and reusable CSS on any project can be an intense undertaking—the time and thought investment is huge. Comparatively, structuring CSS to control similar, yet visually-distinct branded websites is a monumental effort. At Sparkbox, we have taken on this arduous task of multi-branded CSS for several clients and have learned a lot. In addition, we have accumulated several processes, methods, and tools along the way.

This presentation will cover the Sass functions and mixins, PostCSS plugins, and other processes we at Sparkbox have adapted and developed. We’ll look at organizing the CSS used across all brand themes and walk through where it’s appropriate to make exceptions. We’ll also delve into collecting and utilizing the font and color systems for each brand in a way that simplifies writing CSS. As we explore some of these methods, you’ll be introduced to our homegrown tool, Splinter, which divides and delivers the final CSS files.

While this talk explores working on large-scale, multi-brand websites, these concepts are applicable to anyone looking for more efficient ways to manage CSS.