Context

One of my team's responsibilities at Spiceworks was to design and develop marketing landing pages on the company's social media website for our clients. The largest bottleneck in the process was implementing the client-specific CSS to pages to look and behave the way we designed them. This process took a long time to write from scratch and often did not work when pushed to production on the community website.

My role

I conceptualized this solution and implemented it while continuously getting feedback from the team.

Solution

I cut development time for Spiceworks social media landing pages in half through a CSS framework I created called Habanero. I developed it to hide the complexity of making permanent styles when pushed to production and provide flexibility to appropriately represent our client’s brands. Habanero includes a fluid grid system, normalized header and paragraph styles, buttons, and navigation components. I used the popular CSS preprocessor Sass to make the development process more manageable and modular. After I completed Habanero, we not only cut development time in half, but the amount of CSS written for each landing page has decreased from an average of thirty to forty classes to about ten classes, leading to faster and more efficient websites. Most importantly, after implementation our team was happier and more efficient when developing landing pages.