Overview

Confluence has been created as a custom build of Bootstrap 4.3. City of Winnipeg approved and relevant documentation from Bootstrap has been pulled into this documentation.

Using components or styling from Bootstrap outside of this guide should be avoided. As more City of Winnipeg sites are developed this guide should continue to grow and adapt to changing needs. If you would like to make a request for additions or changes to the design system please contact designsystem@winnipeg.ca.

Using this guide

When using the components from this guide for another project be sure to read all documentation within this guide to ensure best practices are followed, branding guidelines and accessibility standards are met, and consistency between City of Winnipeg web properties is upheld. Making changes or additions to components or global styling outside of this guide should be avoided.

Bootstrap

Most components within this guide build off of Bootstrap components. The only custom built components include: global alerts, callouts, date picker and sidebar navigation. Headers, footers and search groups are custom built as well.

Having a solid understanding of Bootstrap 4.3 and what is available for use is recommended for anyone using this guide. Bootstrap utilities and content classes are included in this build and are recommended for use. Leveraging these classes ensures development and styling consistency, and helps to prevent CSS bloat.

Accessibility

City of Winnipeg websites must pass Level AA WCAG Requirements. When implementing components make sure all documentation is closely followed to ensure accessibility standards are met. Check out our accessibility section for more information on what it means to be accessible, accessibility guidelines, testing options, general tips, resources and more.

Setting up a new project

Custom set up

If your project requires customization or you would like to exclude certain components from your project you can download the source files from the repository.

Template set up

You can download a pre-built set of assets and files configured for the relative path of /designsystem in your application, ie the zip file will contain all the assets you need to drop into a new or existing projected with the CSS / JS / Fontawesome files located starting at /designsystem. Also included are some example pages of code for reference, you are free to delete as you see fit.

Quick set up

To quickly get set up with everything within the design system:

  • Include Google fonts and main CSS file:
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,600,600i,700" rel="stylesheet">
<link href="/designsystem/assets/css/main.css" rel="stylesheet" type="text/css">
<!-- Bootstraps js - https://getbootstrap.com/docs/4.3/getting-started/introduction/ -->
<script src="https://code.jquery.com/jquery-3.3.1.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<!-- Date picker https://github.com/eternicode/bootstrap-datepicker -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>

Version history

1.0.0

Project hand-off from Res.im.

Development guide

For information on how to update this guide see the project README.