My work.

Habanero CSS Framework

Problem

One of my team's responsibilities at Spiceworks is 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 they were designed in mockups. This process took a very long time to write from scratch and often did not work when pushed to production on the community website.

Solution

I helped cut development time for Spiceworks social media landing pages in half through a CSS framework I created called Habanero. It was developed to hide the complexity of making permanent styles when pushed to production and to provide flexibility to represent our client's brands appropriately. 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 10 classes; leading to faster and more efficient websites. Most importantly, our team is happier and more efficient when developing landing pages.