bcgov/bootstrap-theme

The new home for the new bootstrap v4 themed BC Gov. look-and-feel

Warning

This repository is Archived as of April 24, 2024. It has not been updated or maintained for several years. Anyone wishing to use Bootstrap for a B.C. govenerment application may wish to explore this alternative that is based on a newer version of Bootstrap. Teams may also wish to familiarize themselves with the B.C. Design System.

🚀 Government of British Columbia Bootstrap v4 Theme

Getting Started instructions

Full documentation and demonstrations of the theme

A Bootstrap version 4.3 BC Government look-and-feel featuring:

• The BC Sans typeface
• Compatibility with pure Bootstrap markup
• A few additions:
  • bcgold colour classes for the old-style gold buttons (btn-bcgold, bg-bcgold, etc)
  • card classes to replace the old panel styles (card-primary, card-success, etc)
• Increased contrast for accessibility
• No Javascript extensions. Bootstrap itself, jQuery and popper.js are optional dependencies
• Source SCSS files are included in the distribution, allowing local customizations
• Supports NPM, Yarn and Bower package manager integration
• Includes sample HTML pages and common components like headers and footers for quick setup

The project is a successor to the previous Gov-2.0-Bootstrap-Skeleton and mygovbc-bootstrap-theme. We combined the best of both projects and leverage the latest Bootstrap version.

Theme Developers

If you find yourself wanting to enhance or fix the theme you'll be interested reading this section on how to setup this source on your local device.

First, we do accept pull requests and will promptly merge fixes or enhancements if they make sense for the rest of the relying applications. Note, you should probably check out our issues and/or raise an issue before doing the pull request.

Tools Setup

You'll need the following tools installed on your device to begin working on the theme:

• The Git client and a GitHub account
• NodeJS 6 or greater with NPM 3 or greater to build
• Ruby or Docker to build the Jekyll docs

First Install

After your tools are in place, you should clone and install some packages:

git clone [email protected]:bcgov/bootstrap-theme.git
cd bootstrap-theme
npm install
gem install bundler
bundle install

Building Dist

To build the styles, Javascript and other assets, use:

npm run build

Or for continous building:

npm run watch

Building Docs

To build the docs (Jekyll), use:

npm run docs-compile

Or for continuous building and serving:

npm run docs-serve

Developer Workflow

In two different shells, run npm run watch and npm run docs-serve.

If you prefer to build inside a Docker container, run ./jekyll-docker.sh serve.

bootstrap-theme's Issues

Default body font size is 16px?

Bootstrap bumped up default font size from 14px in v3 to 16px in v4. And for good reasons:

For a more inclusive and accessible type scale, we assume the browser default root font-size (typically 16px) so visitors can customize their browser defaults as needed.

However, the B.C. Gov-look-feel 2.0 says 14px.

The good news is that's easy to change our minds if we want the bigger base font size.

@juhewitt what's your thoughts on this?

Migration to Bootstrap v5

Bootstrap v5 has been released. What is the plan/roadmap for BC Gov theme?

Add missing topics

TL;DR

Topics greatly improve the discoverability of repos; please add the short code from the table below to the topics of your repo so that ministries can use GitHub's search to find out what repos belong to them and other visitors can find useful content (and reuse it!).

Why Topic

In short order we'll add our 800th repo. This large number clearly demonstrates the success of using GitHub and our Open Source initiative. This huge success means its critical that we work to make our content as discoverable as possible; Through discoverability, we promote code reuse across a large decentralized organization like the Government of British Columbia as well as allow ministries to find the repos they own.

What to do

Below is a table of abbreviation a.k.a short codes for each ministry; they're the ones used in all @gov.bc.ca email addresses. Please add the short codes of the ministry or organization that "owns" this repo as a topic.

That's in, you're done!!!

How to use

Once topics are added, you can use them in GitHub's search. For example, enter something like org:bcgov topic:citz to find all the repos that belong to Citizens' Services. You can refine this search by adding key words specific to a subject you're interested in. To learn more about searching through repos check out GitHub's doc on searching.

Pro Tip 🤓

• If your org is not in the list below, or the table contains errors, please create an issue here.

• While you're doing this, add additional topics that would help someone searching for "something". These can be the language used javascript or R; something like opendata or data for data only repos; or any other key words that are useful.

• Add a meaningful description to your repo. This is hugely valuable to people looking through our repositories.

• If your application is live, add the production URL.

Ministry Short Codes

Short Code	Organization Name
AEST	Advanced Education, Skills & Training
AGRI	Agriculture
ALC	Agriculture Land Commission
AG	Attorney General
MCF	Children & Family Development
CITZ	Citizens' Services
DBC	Destination BC
EMBC	Emergency Management BC
EAO	Environmental Assessment Office
EDUC	Education
EMPR	Energy, Mines & Petroleum Resources
ENV	Environment & Climate Change Strategy
FIN	Finance
FLNR	Forests, Lands, Natural Resource Operations & Rural Development
HLTH	Health
FLNR	Indigenous Relations & Reconciliation
JEDC	Jobs, Economic Development & Competitiveness
LBR	Labour Policy & Legislation
LDB	BC Liquor Distribution Branch
MMHA	Mental Health & Addictions
MAH	Municipal Affairs & Housing
BCPC	Pension Corporation
PSA	Public Safety & Solicitor General & Emergency B.C.
SDPR	Social Development & Poverty Reduction
TCA	Tourism, Arts & Culture
TRAN	Transportation & Infrastructure

NOTE See an error or omission? Please create an issue here to get it remedied.

Provide simple and full reference to the theme for developers

Provide both a simple and everything examples of every style in theme. This is useful for theme developers as well as relying developers.

Provide "CDN" for the theme?

Not sure if people would want this, but we could easily stand up a "CDN" in OpenShift to deliver the stylesheets/js/etc.

It's Been a While Since This Repository has Been Updated

This issue is a kind reminder that your repository has been inactive for 180 days. Some repositories are maintained in accordance with business requirements that infrequently change thus appearing inactive, and some repositories are inactive because they are unmaintained.

To help differentiate products that are unmaintained from products that do not require frequent maintenance, repomountie will open an issue whenever a repository has not been updated in 180 days.

• If this product is being actively maintained, please close this issue.
• If this repository isn't being actively maintained anymore, please archive this repository. Also, for bonus points, please add a dormant or retired life cycle badge.

Thank you for your help ensuring effective governance of our open-source ecosystem!

Links in the footer

Hi,

Is there a reason the links in the footer use the human readable links and not the guids?

Thanks,
David

Theme with B.C. Gov-2.0 look-and-feel

Include any previous v3 discussions and/or changes made by the community.

How to integrate with Quarto Website pages?

I am trying to apply the BC Gov bootstrap theme to a Quarto Website (https://github.com/bcgov/FFEC-website), but am having trouble knowing how to do so.

Quarto documentation suggests that to use a custom theme one simply needs to pass the .scss file (see https://quarto.org/docs/output-formats/html-themes.html#custom-themes).
However, the .scss files available in bcgov/bootstrap-theme/dist/scss do not conform with the type of content expected by quarto:

ERROR: The file C:\Users\cbarros\GitHub\BCGov\FFEC-website\scss\bootstrap-theme.scss doesn't contain at least one layer boundary (/*-- scss:defaults --*/, /*-- scss:rules --*/, /*-- scss:mixins --*/, /*-- scss:functions --*/, or /*-- scss:uses --*/)

Error: The file C:\Users\cbarros\GitHub\BCGov\FFEC-website\scss\bootstrap-theme.scss doesn't contain at least one layer boundary (/*-- scss:defaults --*/, /*-- scss:rules --*/, /*-- scss:mixins --*/, /*-- scss:functions --*/, or /*-- scss:uses --*/)
    at sassLayerStr (file:///C:/Program%20Files/RStudio/resources/app/bin/quarto/bin/quarto.js:59999:15)
    at sassLayerFile (file:///C:/Program%20Files/RStudio/resources/app/bin/quarto/bin/quarto.js:59995:12)
    at sassLayer (file:///C:/Program%20Files/RStudio/resources/app/bin/quarto/bin/quarto.js:59982:16)
    at file:///C:/Program%20Files/RStudio/resources/app/bin/quarto/bin/quarto.js:122917:24
    at Array.flatMap (<anonymous>)
    at layerTheme (file:///C:/Program%20Files/RStudio/resources/app/bin/quarto/bin/quarto.js:122900:27)
    at resolveThemeLayer (file:///C:/Program%20Files/RStudio/resources/app/bin/quarto/bin/quarto.js:123042:31)
    at resolveBootstrapScss (file:///C:/Program%20Files/RStudio/resources/app/bin/quarto/bin/quarto.js:122892:55)
    at boostrapExtras (file:///C:/Program%20Files/RStudio/resources/app/bin/quarto/bin/quarto.js:124434:25)
    at themeFormatExtras (file:///C:/Program%20Files/RStudio/resources/app/bin/quarto/bin/quarto.js:125956:16)

Also, Quarto websites do not use (at least by default) with a package.json file, so I'm not sure how to follow the instructions to install this bootstrap theme either.

Any help is much appreciated!
Ceres

It's Been a While Since This Repository has Been Updated

This issue is a kind reminder that your repository has been inactive for 249 days. Some repositories are maintained in accordance with business requirements that infrequently change thus appearing inactive, and some repositories are inactive because they are unmaintained.

To help differentiate products that are unmaintained from products that do not require frequent maintenance, repomountie will open an issue whenever a repository has not been updated in 180 days.

• If this product is being actively maintained, please close this issue.
• If this repository isn't being actively maintained anymore, please archive this repository. Also, for bonus points, please add a dormant or retired life cycle badge.

Thank you for your help ensuring effective governance of our open-source ecosystem!

Add project lifecycle badge

No Project Lifecycle Badge found in your readme!

Hello! I scanned your readme and could not find a project lifecycle badge. A project lifecycle badge will provide contributors to your project as well as other stakeholders (platform services, executive) insight into the lifecycle of your repository.

What is a Project Lifecycle Badge?

It is a simple image that neatly describes your project's stage in its lifecycle. More information can be found in the project lifecycle badges documentation.

What do I need to do?

I suggest you make a PR into your README.md and add a project lifecycle badge near the top where it is easy for your users to pick it up :). Once it is merged feel free to close this issue. I will not open up a new one :)

Make HTML references pages in docs

Provide sample HTML pages that use the theme and includes accessibility compliance.

Could this be released as an npm package?

Using "@bcgov/bootstrap-theme": "https://github.com/bcgov/bootstrap-theme.git#v1.1.3" in our package.json dependencies has been causing us problems lately, having it as an npm package would save us a bunch of headaches. Thank you!

It's Been a While Since This Repository has Been Updated

This issue is a kind reminder that your repository has been inactive for 181 days. Some repositories are maintained in accordance with business requirements that infrequently change thus appearing inactive, and some repositories are inactive because they are unmaintained.

To help differentiate products that are unmaintained from products that do not require frequent maintenance, repomountie will open an issue whenever a repository has not been updated in 180 days.

• If this product is being actively maintained, please close this issue.
• If this repository isn't being actively maintained anymore, please archive this repository. Also, for bonus points, please add a dormant or retired life cycle badge.

Thank you for your help ensuring effective governance of our open-source ecosystem!

Provide docs and integration with popular package managers

Support Yarn, NPM, Bower, and manual downloads and provide the documentation on how to use. Do not duplicate stock bootstrap docs but could show how to integrate with angular-scaffold