Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

Version 1 Current »

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

  • No labels