Information This site is moving

The Pattern Library is moving to its new home on the Summit design system site.

Go to the Summit site
Pattern Library (ver. 2)

City of Calgary Pattern Library

This resource follows industry-standard web accessibility guidelines and reuses the best practices of existing style libraries and modern web design. It provides a guide for creating beautiful and easy-to-use online experiences that align with The City of Calgary’s brand and visual identity.

How to use the Pattern Library

Developers

Developers may use the Pattern Library to develop prototype websites or use them as a starting point for implementing UI components on other platforms.

Tips

Code snippets
  • In the pattern code snippets, there will be sections of code wrapped in {{ }} curly brackets to indicate that the section needs to be modified when implementing the pattern. Replace the {{ }} sections with the appropriate information as indicated inside. All other code not wrapped in {{ }} should not need to be modified.
  • Curly brackets with values separated with | like {{ a | b | c }} indicate that only one of the values: a or b or c should be used.
  • Curly brackets with values separated with / like {{ a / b / c }} indicate that any combination of the values may be used.
CSS

There are two ways to use Pattern Library CSS.

  1. Download and use the full Pattern Library 2 CSS for your site. This includes the basic styles for typography, buttons, colours, tables, forms, icons, utility classes, along with all of the component styles.
  2. If only the basic styles or only a few patterns are needed, download and use the Pattern Library Basic Styles 2 CSS.
    For each pattern that you wish to use, download and use the individual pattern CSS file available at the top of each pattern page. If using multiple individual pattern CSS files, it may be best to combine them all into one file to reduce HTTP requests on your site. Or consider using the full CSS file instead, as noted in the bullet above.

Downloads

The visual identifier, icon fonts, svg illustrations, and Web Application Wrapper template files are available for download upon request and requires approval from the Customer Service & Communications Advertising division manager. For more information, contact your communications representative.

Building blocks

1. Structure

Pattern Library structure

2. UI elements

Pattern Library UI elements

3. Components

Pattern Library components

4. Templates

Pattern Library templates

Why build a pattern library?

Many elements (design/branding/coding) can be reused in multiple projects. The Pattern Library provides a centralized location where developers and designers can easily find and use existing designs to expedite their initial design, meet accessibility requirements and ensure a consistent look and feel across projects.