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