Functional CSS FTW: Using TailwindCSS to Create Our Own CSS Framework

For many years, the Marshall University website was built with semantic CSS (all written from scratch), then moving on to CSS frameworks. First using the Bootstrap and, most recently, the Foundation. It was a step in the right direction, but still there were some drawbacks to using frameworks like Bootstrap and Foundation. For instance, site administrators, most of whom have no web development or design knowledge or experience, were able to modify several aspects of the University theme, resulting in violations of best practices and of our own brand guidelines. In addition to those concerns, we also found that using semantic CSS led to numerous inconsistencies across various components of our website – even within our own CSS files. Finally, we often ended up designing for the CSS framework, a time consuming process of reverse engineering default framework styles to fit our required styles, instead of building to meet the needs of our network of sites.

When Marshall University recently adopted a new paradigm by moving responsibility for the website out of Information Technology and into University Communications, we started building a new foundation for our website using Adam Wathan’s Tailwind CSS. This format allows us to rapidly prototype components for webpages and then develop our own CSS framework, resulting in increased consistency across all of our 350+ sites on our network. Furthermore, our time can now – and in the future – be spent building when needed instead of reverse engineering components that do not fit our needs. In this presentation I will describe the processes, progression, and pain points associated with a complete “under the hood” redesign.

Slides