WET vs Bootstrap vs Tailwind

Supporting Resources

• CSS vs Bootstrap vs Tailwind article by Victoria
• WET site
• Bootstrap site
• Tailwind site

WET

Pros

• The standard amongst many departments
• Similar look and feel to all other sites
• Provides a full implementation of bootstrap within the government

Cons

• Integrates poorly with React. An excellent example can be seen with the library react-bootstrap designed to solve this problem.
• Customisation is difficult and would silo to specific projects
• Uses older technology and not always updated - for eg. bootstrap 3
• React is a SPA (Single Page Application) causing issues with default WET controls for routing.
• React jsx (JavaScript XML) doesn't support the following that I've found from implementing a single template. class, for, hreflang and maxlength. It opts for className, htmlFor, hrefLang and maxLenght instead leading to issues copying large code snippets and templates.

Bootstrap.

Pros

• Bootstrap is an open source front end framework used for Web application dev.
• Predefined classes that are used to construct the ui.
• Responsive classes use a 12 grid system for layout – adjusts the layout based on the screensize.
• Supports javascript components like tooltips, modal windows, alerts etc. Although requires popperjs to also be installed
• Fairly customizable
• Cross browser compatible.
• Good Documentation
• Mobile first styling
• Highly supported with many extensions
• React-bootstrap is a popular fully supported framework that easily integrates. Currently on bootstrap version 4 with version 5 in beta.
• WET is an implementation of bootstrap. However, it is also the standard over vanilla bootstrap

Notes from Sidra

So we have a design system! Bootstrap could be more reliable because of its pre-existing components mapping to the design elements we’re like going to be using (accordions, tabs, tables), not forcing us to make nth hour decisions about “vertical padding” and which class to tack on... Endless CSS classes in Tailwind create more issues with visual consistency. Adding utility classes can sometimes feel arbitrary; designers have clearer guidelines when we have existing UI components, not just utility classes. Designing form fields and fieldsets for Bootstrap is actually heavenly compared to doing it from scratch... and those table classes are top notch! This isn’t a good reason but Bootstrap is more accessible to designer-devs like me who don’t have bandwidth to write JS We designer-devs like the crispy clear output! Vanilla HTML is niiiice, and it’s good for front end and WCAG folks assessing code etc, or for external reviews. Compiled and minified is hard to assess - and I don’t wanna have to compile stuff anytime I wanna make a CSS change. WET WET WET! Also that Bootstrap documentation is a blessing. Classic 12 columns is easier to design for than flexbox (that being said, we CAN use flexbox within Bootstrap too). Our design system isn't too wild and fits so very neatly within these constraints! I prefer Bootstrap's simple breakpoints I am not entirely sure if we can use SCSS/SASS with Tailwind but it's a reallllly nice thing for Bootstrap!

Cons

• Can require lots of style overrides and might require you to compile your own version to eliminate bloat and this can create slower loading times for users. - no purge CSS

• Requires special classes that create the look so will require some learning

• The look is all the same unless customized (which could be a pro depending on how it's used)

• Somewhat complicated customization - Non customized look can take some work.

• Some components include embedded SVG's and can cause issues with some content security policies. Items included here are – accordion, close button, checkbox and radio, switches, navbar toggle buttons and more.

• Implementing vanilla Bootstrap as a design system is the same concept as WET and would lead to the same result as what WET5 is achieving

In a takeaway, bootstrap is great for getting a website up and going with premade classes and styles but requires more work to configure if customization is what you are looking for. It would be difficult to extract away from bootstrap because of the encompassing nature of the tag structure. There may be room for the two to work together so adding tailwind after the fact may work (although untested to date).

Tailwind.

Tailwind is a CSS utility framework. It is unlike other frameworks like bootstrap as tailwind doesn't provide any built in UI components. "Tailwind is written in PostCSS and configured in JavaScript, which means you have the full power of a real programming language at your fingertips."

Pros

• Use tailwind directly in your HTML. Style elements directly and quickly. No need to write the CSS yourself saving time.

• Predefined classes

• Very easily customized, All customization done in config file.

• Good documentation

• Responsive design

• Unused styles are purged making the file smaller (purge css)

• Headless UI plug in for adding components like bootstrap for menu, listbox, switch, radio and more.

• Mobile first styling

• Can also create components in separate style sheets if wanted.

• Implemented throughout DTS

• Vanilla Tailwind is fully supported by React

Cons

• Requires a bit of a learning curve to get used to how it works

• The classes can end up being quite long.

• There aren't components provided but there is a plug in that can be added called headless UI.

• Can lack consistency in similarly styled elements because of the high customizability

Tailwind is very easy and quick to learn and an produce excellent results in little time. Because of its flexibility and versatility it would be recommended. Many react components have already been created using tailwind and can easily be adopted and molded to other projects.