A journey from Foundation CSS to Tailwind CSS
All of our frontend websites start with this base repository (opens new window) which can be viewed at https://base.wayne.edu/styleguide/childpage (opens new window). It has evolved in many ways since its closed source version to the new public version 5. One thing has remained the same, the whole time is being dependent on the Foundation CSS (opens new window) framework.
We used Foundation when we first started exploring responsive design in 2012 for these reasons:
- The grid was easy to use and understand
- Fast scaffolding for wireframes
- Ongoing support of bug fixes and new major versions
- The framework didn't have an opinionated style like Bootstrap
# Why did we move away from Foundation?
# What did we move to?
Tailwind CSS (opens new window). The concept of using a utility-based framework is having a class name that does one CSS property and value. You can think of it as doing inline styles on each element, but what makes it different is you control all the values of colors, sizes, widths, and heights in a single settings file. This creates more consistency, better naming conventions, and a pattern to your CSS names.
# What it allowed us to change
Once we switched over to Tailwind CSS (opens new window) it allowed us to start looking at replacing other parts of Foundation that we relied on. Here is a list of changes:
- Tailwind (opens new window) replacing Foundation CSS (opens new window)
- Accordion (opens new window) replacing Foundation accordion (opens new window)
- Slideout (opens new window) replacing Foundation offcanvas (opens new window)
- Mediabox (opens new window) replacing Magnific popup (opens new window)
- Flickity carousel (opens new window) replacing Slick carousel (opens new window)
- jQuery (opens new window) depreciated since no packages rely on it.
- Font icons replaced with SVGs and unicode characters.
- Float grid replaced with flex box.
- Refined colors (opens new window) down to a green, yellow, and grey set
# What are the stats for the childpage template (opens new window)?
load time webpagetest.org (opens new window)
We managed to lower the overall size by a 38% reduction! The only file that slightly increased is the html which was to be expected since we introduced a lot of new classes.
We're excited for the future of our base site (opens new window) project knowing we can easily swap out any packages now or upgrade them without affecting the entire site.