CSS Framework Strategy - Deprecated

There are several css libraries available that you can pair with a javascript framework to create reactive and visually pleasing components.

For us in the BC Public Service, we must be conscious of the fact we need to have a consistent look and feel with other sites on the gov.bc.ca domain. There is an existing design system (GitHub), which the current version of the site uses, and there is a candidate for a new design on alpha.gov.bc.ca (GitHub - is currently private), which will run parallel to the existing site for a period of time.

The existing design system is incomplete, in that it does not contain stylings for many components that may be considered common. We are still determining what the collection of stylings for alpha looks like - waiting to hear back from someone on their team.

Given that we need to conform, any work we do around styling should be considered an extension of the design system. Likewise, we should look to design stylings such that they can be re-integrated into the design system, so that we can contribute back. We should note this requirement as a limiting factor in any design and styling framework selections.

With this limiting factor in mind, we can come up with a set of criterion to help us with decision making around our styling.

 

Bootstrap

Tailwind

styled-components

 

Bootstrap

Tailwind

styled-components

Responsive Design

 

 

 

Style native HTML elements without classes

 

 

 

Easy to override defaults

 

 

 

Accessibility

 

 

 

Framework is modular (import only what we need)

 

 

 

LESS support

 

 

 

Development time

 

 

 

Maintenance time

 

 

 

Framework stability

 

 

 

Community

 

 

 

Documentation

 

 

 

Future Support

 

 

 

Popularity

 

 

Â