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)

Release log and feedback

Feedback

Please leave any Pattern Library feedback or template requests with Dorothy.Laskowska@calgary.ca, Jian.Zhang@calgary.ca and Dani.Perry@calgary.ca.

Release log

2.0 - December 2020

1.9 - October 2019

  • New patterns and elements
  • Updated patterns and elements
    • No base font-size is declared on the <html>, but 16px is assumed (the browser default).
    • Background images - custom ratio sets added. The custom aspect ratio has fixed height on tablet and desktop. On mobile the background image ratio will always be 16x9.
    • Menu - Updated the Arrowed list style and merged the Catalogue group into it
    • Header - Fixed accessibility bug in Firefox
    • Tabs
      • Fixed accessibility tabbing bug.
      • Added script to link directly to tab.
    • Table - Increased the table caption font size to make it more prominent.
    • Hero Banner
      • Update the "Hero banner with CTA" name to "Hero banner - standard"
      • Adjusted white space and font sizes on standard option
    • Other navigation
      • Arrowed list style heading class updated. The title with link added.
      • Accessiblilty - Update the 'aria-label' to 'aria-labelledby'.
    • Accordions
      • Added an option for a Expand/Collapse All button on the accordions.
      • Javascript file updated - Prevent the init code from being called on the same accordion twice
      • Accordions can now be expanded by default by placing a "default-expanded" class on the div.
    • Grid system - Updated the breakpoints to better match the Bootstrap grid system.
    • Block banner
      • Renamed the grid banner to block banner.
      • Updated the white box colour style for better visiblity.
      • Added background image positions to the demo and code.
    • Buttons - Updated the Primary button with right arrow icon design.
    • Footer and CPS footer
      • Demo code updated.
      • Removed the feedback and google translate sections.
    • Icon class name updated:
      • cicon-ctrain-stn change to cicon-train
      • cicon-bus-stop change to cicon-bus

1.8 - June 2019

  • New patterns and elements
    • Marketing components category has been created - The patterns under this category are designed for campaign/marketing events to be more effective on the web page.
    • Text on image - marketing
  • Updated patterns and elements
    • Updated the UI element name on the left side menu:
      • The Responsive table updated to Table
      • The Responsive image updated to Image
    • Tables - The background colour for the dark header variant for tables has been lightened.
    • Grid banner - Another layout option has been added for larger screens.
    • Cards - Tiles have been deprecated and all of their variants have been rebuilt to work with cards. Cards now support more options including icons, svg images, contained images, and data labels and values. The card page has been revamped to show all of the variants and layout options available.
    • Forms - Updated the HTML tags for grouped form components to use <fieldset>s and <legend>s for better accessibility.
    • Menus
      • Refactored coc.nav.js and updated the initialization method names for both the Mega and Secondary navigation menus for consistency with the other JavaScript files.
      • Mega menu
        • When the mega menu is opened on smaller screens (mobile or tablet), the logo remains visible.
        • Added a simplified dropdown variant.
      • Secondary navigation menu - Simplified the button HTML. There used to be two buttons to handle toggling the menu open and closed. Now only one button is necessary.
    • Modal - Added fullscreen variant.
    • Sub-search - Fixed styling errors and simplified HTML.
    • Accessibility - Updated focus outline styles. All <button>s now have a standard focus outline style.
    • Print styles - Updated print styles for accordions, modals, and pagination.
    • Content block - Usage information added
    • CTA-block - Consolidate information widges
      • Information wigets have been deprecated. It has been renamed to CTA-block and the pattern class has been updated to <cui cta-block bg-medium border-medium>.
      • The CTA block page has different layout options available such as Text with/without decorative icon and CTA link(s)
      • The text alignment is be able to update from default left to right.
    • Image viewer js updated
    • Inline alert banner html updated
    • Code sections of library have been updated to have a button to easily copy the code in the section
    • Image Viewer - coc.imageviewer.js updated so the Image Viewer will wait for the image to load before getting its size.

1.7 - February 2019

  • New patterns and elements
  • Updated patterns and elements
    The CSS and HTML for these patterns have been refactored and simplified. The HTML has been modified since 1.6 and older HTML will need to be updated.
    • Lists
      • Added unstyled list variant.
      • Added ability to visually split lists into columns. A few options have been created for common usage; contact us if you have a need for additional variants.
    • Breadcrumbs and navigation links
      • Moved the navigation links pattern to the same page as the breadcrumbs as they are very similar patterns with minor variations.
      • JavaScript file has been added to handle the responsive interactions. Previously, the JavaScript code was provided standalone in the code snippet.
    • Cards (video container only)
    • Catalogue group
    • Form <legend> tag font-weight styles have been updated to match <label> tags.
    • Grid banner
    • Tiles
      • Updated data tiles to support an optional decorative icon.
    • Label with icon
    • Label with description
      • The name has been updated from label widget to label with description.
    • Secondary navigation menu
      • Now requires the cui class for consistency with other patterns. Nothing else has changed.
    • Mega navigation menu
    • The application components were previously separated under its own Application component section. They have now been merged into the main Components section in order to keep related patterns together.
      • Moved the application header to the main Header page.
      • Moved the application footer to the main Footer page.
      • Moved the Page title block to a new page.
  • JavaScript updates and additions. Several JavaScript files have been updated for consistency. Patterns requiring JavaScript initializations now have the ability to be initialized dynamically via other scripts (e.g. if the pattern HTML is inserted into the DOM via JavaScript after the page is loaded, functions can be called to initialize those patterns). Writeup to come.
    • coc.breadcrumb.js - See Breadcrumbs.
    • coc.forms.js - See Forms. Up to 1.6, the forms were initialized with the COCPL_Form namespace. As of 1.7, the namespace has been changed to COC.Form. Method names remain the same. Updated form validation methods to extract the form label easier for usage in the error alert banner. Updated form validaion methods to only display the error alert banner once the form has been submitted. Updated jquery.validate.js to version 1.19.0.
    • coc.table.js - See Tables. New JavaScript added to handle the normal responsive table as well as the stacked responsive tables.
    • coc.tooltip.js - See Tooltips.
    • coc-accordion-tab.js - See Accordions and Tabs. Initialization will automatically take place when the script is loaded. It is no longer necessary to call the initialization functions manually, as was done in 1.6.
    • coc-imageviewer.js - See Image viewer. Replaced deprecated jQuery function.
    • coc-nav.js - See Menus. Stripped unnecessary JS related to older projects implemented on calgary.ca. Additional cleanups for this file will be coming in a future release.
  • Icons
    • Updated cicon-youtube, cicon-youtube-square, and cicon-youtube-circle icons.
  • SCSS / CSS
    • Updated print CSS for all patterns.
    • Removed the remaining external image references in the CSS used for the video player icon on cards and the grid banner and the dropdown icon used in the footer. The images are now embedded into the CSS. There are no longer any image dependencies when using Pattern Library CSS.
  • 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.
  • Pattern Library 1.6 can be referenced in the archive section.
  • Pattern Library website
    • Removed the Pattern status labels for simplification. All patterns released will always be production ready. Any updates will be communicated via this release log.
    • Updated the site navigation to always be open automatically on desktop-sized screens. In-page anchor links are available on many pages to allow you to quickly navigate to the specific sections. These in-page links are only shown when you are on the specific page.
    • Asset downloads for the logo / visual identifier, icon fonts, SVG illustrations, and Web Application template now require approval from the Customer Service & Communications Advertising division manager. For more information, contact your communications representative.

1.6 - September 2018

  • New patterns and elements
  • The coc-pl wrapper class is no longer required to display patterns.
  • Home page
    • All downloadable assets have been updated.
    • An image package is now available for download. This package contains the images referenced in the CSS files.
  • Buttons
    • Style updates for the primary and secondary buttons.
    • Text buttons are now referred to as secondary buttons.
  • Icons
    • Updated the sizes: now only 2 sizing classes are supported: default (16px × 16px) and lg (32px × 32px).
    • Added cannabis, newspaper, person pie chart, and Canadian flag icons.
    • Outline icons will no longer be added to the icon sets. They will be kept in the icon font for legacy support. As the outline icons were originally designed to be decorative images, it is now recommended to insert the SVG image versions. See the SVG images page for more information.
  • Accordions
    • Refactored and simplified the CSS.
  • Alert banners
    • Refactored and simplified the CSS and HTML
    • HTML has been modified since 1.5 and older HTML will need to be updated.
  • Cards
    • Refactored and simplified the CSS and HTML
    • Added variant for article cards.
    • HTML has been modified since 1.5 and older HTML will need to be updated.
  • Content block
    • Content blocks have been completely overhauled since 1.5. The content block is now a two-column block containing an image and content.
    • HTML has been modified since 1.5 and older HTML will need to be updated.
  • Form validation
    • The form validation JavaScript has been updated with bug fixes.
  • Header
    • Refactored and simplified the CSS and HTML.
    • HTML has been modified since 1.5 and older HTML will need to be updated.
  • Hero banner
    • Refactored the CSS. It is now flexbox-based.
  • Mega menu
    • Minor refactor and simplification of CSS and HTML.
  • Modal
    • Refactored the CSS and HTML. The structure is now based off of Bootstrap 4 modals, with additional built-in features.
    • The JavaScript has been changed to use Bootstrap 4’s plugin.
    • HTML has been modified since 1.5 and older HTML will need to be updated.
  • Search
    • Updated the HTML for the mobile search modal to reflect the modal updates.
  • Tabs
    • Refactored and simplified the CSS.
  • Tiles
    • Refactored and simplified the CSS and HTML.
    • HTML has been modified since 1.5 and older HTML will need to be updated.
  • SCSS / CSS
    • Many of the scss component files have been cleaned up and simplified.
    • Spacing and sizing units are now typically set in rems, rather than px.
    • Many of the images previously referenced in the CSS files have been removed and replaced with font icons. Images that are still referenced in the CSS are available for download on the home page.
  • Pattern Library 1.5 can be referenced in the archive section.

1.5 - April 2018

  • Home page - updated downloadable files
  • Forms
    • Added form component styles
    • Added form layout examples and accessibility
    • Added form validation JavaScript
    • Added enhanced form controls JavaScript
    • Added example forms
  • Headings
    • Tightened whitespace surrounding subtitle block
    • Added the Blockquote - large
  • Text
    • Updated text label class name
  • Buttons
    • Updated active states
    • Updated documentation
    • Brought back the text button demos
  • Icons
    • Added extra large icon size
    • Added snowflake icon
    • Colour classes may now be applied to icons
    • Updated documentation pages
  • Cards
    • Added equal-height variant
  • Footer
    • Updated HTML and class names
    • Minor style fixes
  • Header
    • Minor style fixes
    • Updated code blocks
  • Menu
    • Renamed “local navigation” to “secondary navigation”
    • Simplified the secondary navigation HTML structure
  • Modal
    • HTML and CSS structure updated
    • Added optional modal title and CTA button
    • Refinements to the modal close button
  • Search
    • Updated HTML structure for the mobile search modal
  • Tiles
    • Added equal-height variant
  • Widgets
    • Updated the text label class name under the text label widget
  • Application template and application components
    • Updated the Web Application Wrapper template
    • Added header with title
    • Added application footer variant
    • Added application page title block
  • Print styles
    • Breadcrumbs
    • Cards
    • Hero banner
    • Navigation links
    • Tabs
    • Tiles
  • SCSS
    • General cleanups
    • Fixed max-width media query values
    • Began cleanup to convert spacing units to rems, rather than px. Further cleanup to come.
  • Pattern Library website
    • Simplified the menu structure and added an indicator for the current page
    • Components are now sorted in alphabetical order in the menu
    • The files within the Source Files section on each component page are now sorted under the global or component headings.

1.4 - February 2018

  • Home page - updated files to download
  • Grid System
  • Heading - subtitle-block font size updated
  • Images - responsive image classes added
  • Buttons usage
    • Primary buttons
    • Secondary action buttons - utility buttons
    • Mega buttons
  • Icons
    • Responsive Icons - new responsive icons added
    • COC Icons - new icons added
  • Components
    • Global navigation menu
    • Local navigation
    • Header
    • Hero banner - hero banner HTML and CSS updated for mobile optimization and alignment variations added
    • Alert banner - notification banner success colour updated
    • Tile button - new border styles and text-align variations added
    • Card with list of CTA
    • Search - simplified HTML and CSS, sub-search added
    • Modal window - simplified HTML and CSS
    • List widget - identifying the related links
  • Web Application Wrapper Template

1.3 - May 2017

  • Home page - updated files to download
  • Typography updates: This update would be combined with the line-height changes coming from Jason Geib’s new mockups on our typography spacing. New line-height adjustments are being made to improve legibility of content and meets suggested guidelines from W3C.
    • Paragraph
    • Headings
    • Lists
  • Colour Systems updated
    • The safety colour palette
  • Icons - updates
    • Icon usage added
      • Accessibility icons
    • Responsive icons added

1.2 - April 12, 2017

  • Home page - updated files to download
    • Icon Files (SVG and PNG) for designers
    • Icon Fonts for developers
    • Download Web Application Wrapper Template (zip)
  • Home page - new files to download
  • Visual Identifier - New page added
    • The Calgary Police Service Graphic Standards Guide
    • CPS Visual identifier
  • Colour Systems updated
    • CPS color palette added
    • The Core CPS Brand Colour Palette added
  • UI Elements - updates
    • Subtitle block added
    • Block-CTA added
    • Paragraph style updated
    • Lists style update
    • Buttons usage added
  • Icons - updates
    • Accessibility section added
    • Icon usage added
      • Icon with label
      • Icon with text label
      • Icon with text link
      • Map icons
      • Social media brand
    • Responsive icons added
    • Icon library updated
    • Icon package download updated
  • New patterns/existing patterns added/updated
    • Global navigation menu
    • Topic navigation menu
    • Headers
    • Header-CPS version
    • Footer
    • CPS footer
    • Breadcrumb
    • Navigation links
    • Hero banner light version
    • Hero banner - CTA banner light version
    • Hero banner - Text and label
    • Alert notification banners
      • Global alert notification banners
      • Global alert inline notification banners
      • Alert inline notification banners
    • Single accordion
    • Card - html markup/style updated
    • Search
    • Modal window
    • Category group
      • Category group - List of links
      • Category group - Title with description
    • Widgets
      • Information widget - CTA with text description
      • List widget
      • Label widget
    • Content blocks
  • Templates updates
    • Web application wrapper template
  • Demo page bug fix

1.1 - July, 2016

  • Visual identity
  • Visual Identifier Usage
  • Colour palette
  • Core Brand Colour palette, Shades of Grey Colour palette and Secondary colour palette - Text and background colour
  • Safety and metallic palette
  • Safety colour palette - Text and background colour
  • h1-h6 font size update based on different grid breakpoints
  • Icon set update - Font Awesone and cicon set are separated into two folders. User will be able to download the icon font set and icon image (png and svg)
  • New patterns added - be able to download each pattern's package
    • Grid banner
    • Accordions
    • Tab
    • Tiles
    • Cards
  • New files to download
    • Logo files
    • Photoshop master file
    • Axure file
    • CSS core style update 1.1
  • Demo page update
    • Demo fluid page (fluid container)
    • Demo max-width page (max-width on container)
    • Demo content blocks
  • UI Wrapper Templates update
  • Accessibility

1.0 - December 1, 2015

  • UI Wrapper/Templates introduction
  • UI Wrapper Templates
  • Brand Guide
  • Logo
  • NVI on Current Site
  • Scroll down this page or click
  • colours
  • Buttons
  • Hero Banner
  • Headings
  • Typography
  • Logo specs
  • Paragraph
  • Blockquote
  • Inline Element
  • Lists
  • Images
  • Time
  • Preformatted Text
  • Horizontal Rule