All of our frontend websites start with this base repository which can be viewed at https://base.wayne.edu/styleguide/childpage. 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 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. 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 it allowed us to start looking at replacing other parts of Foundation that we relied on. Here is a list of changes:
- Tailwind replacing Foundation CSS
- Accordion replacing Foundation accordion
- Slideout replacing Foundation offcanvas
- Mediabox replacing Magnific popup
- Flickity carousel replacing Slick carousel
- jQuery depreciated since no packages rely on it.
- Font icons replaced with SVGs and unicode characters.
- Float grid replaced with flex box.
- Refined colors down to a green, yellow, and grey set
What are the stats for the childpage template?
|File||Base 4||Base 5|
|load time webpagetest.org||1.481s||1.117s|
|css||18.1 KB||10.4 KB|
|html||6.4 KB||8.4 KB|
|total size||133 KB||82 KB|
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 project knowing we can easily swap out any packages now or upgrade them without affecting the entire site.