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
• Included many Javascript packages out of the box that we found useful (accordion, offcanvas, sticky header)
• 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?

The biggest drive for us to switch to a different framework was how hard it was for us to upgrade from even minor versions of the framework. It's not a knock on Foundation as we consider it a wonderful framework. The custom CSS/JS we wrote on top of everything played a large role in making the upgrade a difficult task. The slightest changes to their default CSS or javascript components made it extremely time-consuming for us to realign base to accommodate for those changes. A related issue is the cascading part of CSS. While it's extremely useful, it's also a large hindrance to the maintenance of a project long term. Adam Wathan wrote a really good blog post explaining this very issue (opens new window).

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)?

File

Base 4

Base 5

requests

14

9

load time webpagetest.org (opens new window)

1.481s

1.117s

css

18.1 KB

10.4 KB

javascript

27.9 KB

21.2 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 (opens new window) project knowing we can easily swap out any packages now or upgrade them without affecting the entire site.