Giter Club home page Giter Club logo

mygovbc-bootstrap-theme's Introduction

๐Ÿš€ mygovbc-bootstrap-theme

A B.C. Gov. Look-and-Feel for MyGovBC Service Providers using a bootstrap 3.x theme.

Demostration of all bootstrap styles implemented and enhancements using this theme

Installation

Pick you favourite package manager method:

NPM

npm install mygovbc-bootstrap-theme --save-dev

Yarn

yarn add mygovbc-bootstrap-theme

Manual

Download the contents of the dist folder and include in your project.

Usage in Web App

CSS Includes

Depending on your web build system, i.e., webpack, you may or may not have to explicitly add the CSS link.

This code snippet shows the net result of the build system or if you're doing it manually:

<link rel="stylesheet"
      href="assets/css/mygovbc-bootstrap-theme.min.css"
      media="screen">

Javascript Includes (Optional)

Bootstrap has nice interactive components, this requires Bootstrap's Javascript and a JQuery dependency.
However, if you're using an AngularJS v2+ app, we recommend using ngx-bootstrap

npm install ngx-bootstrap --save-dev

That way, you don't have to include JQuery directly and you get nice Typescript interfaces to work with.

ReactJS and other frameworks have similar libraries to work with.

For a vanilla application you must include the Bootstrap JS and JQuery, they've been repacked for linking to in your app:

dist/js/bootstrap.js       <--- for development
dist/js/bootstrap.min.js   <--- for production
dist/js/npm.js             <--- for linking to with a node based build system

Fonts and Other Assets

The MyGovBC Bootstrap imports within the CSS to the following assets:

dist/fonts/fontawesome-webfont.ttf    <--- the font awesome icon pack, more choices than glyphicons lib
dist/fonts/MyriadWebPro.tff           <--- the default font for the theme
dist/images/gov3_bc_logo.png          <--- B.C. Government logo that fits nicely in the header
dist/images/favicon.ico               <--- Favicon of the B.C. Government logo

Enhancements from Vanilla Bootstrap

This bootstrap uses 99% bootstrap, to use it read the Bootstrap docs.
There are some minor additions to help with the B.C. look-and-feel

  1. Myrid WebPro font included and is used by default
  2. Font Awesome replaces Glyphicons
  3. visuallyhidden class can be used to accessibility purposes
  4. Sticky headers and footers if you use a #wrap and #pad divs, see the demo page

mygovbc-bootstrap-theme's People

Contributors

eugene-p-dxc avatar gregturner avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

mygovbc-bootstrap-theme's Issues

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

This issue is a kind reminder that your repository has been inactive for 798 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!

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

This issue is a kind reminder that your repository has been inactive for 797 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!

0.4.0 .btn-primary hover effect is inconsistent with other buttons

Example

https://bcgov.github.io/mygovbc-bootstrap-theme/docs/index.html#buttons

Hover over the "Primary" button (or any of the Large/Default/Small/Mini buttons).

Description

I recently upgraded to 0.4.0. In the 0.4.0 changelog, it says the default and primary button colours were changed. However, it appears the background colour on hover for these buttons have not been changed. The current colour is #fdc94b, a bright yellow.

.btn-default has the same background colour, but on :hover the colour changes to #294266, a darker shade of the new colour.

** Expected Behaviour **

.btn-primary has a dark blue hover colour, similar to .btn-default


Lastly, just a quick question. Is there a reason why .btn-default and .btn-primary are effectively becoming identical while remaining in two classes? I know of at least two projects which make use of both .btn-default and .btn-primary and will likely continue to. Of course we can always re-implement .btn-default in the project styling, so it's not a big deal either way.

Personally I'd vote for keeping the two separate and distinct, but if they're going to be made to look identical then why not combine the classes and remove one? I'd imagine removing a CSS class is a breaking change, so it's completely understandable if you hold off for a bit.

Anyways, thanks for all the hard work! I greatly appreciate what you guys are doing here. Excluding the above the upgrade to 0.4.0 has gone without a snag.

Cheers!

Adam

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

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.

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

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

This issue is a kind reminder that your repository has been inactive for 799 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!

Update Theme #1 - Bootstrap Styles Background Updates

The background colours of the following elements in the theme are incorrect.

Navbar: change background colour to: #38598A, the hyperlink interaction should be reversed, text underline on hover, no text decoration default. The black Navbar example should be removed (unless I'm missing something). That's not in the BC Gov palette.

Buttons: change the background colour to #38598A for the default and primary, and text colour to white. The multiple size demonstrations should also be #38598A and text colour white.

Pills: change the background colour to #38598A

Progress bars: Basic and animated background colour should be #38598A

List groups & Primary Panels: the same with the primary background being #38598A, and text white.

There will be more as this continues to be flushed out. The Modals etc, should follow the same patterns for Primary panels for example.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.