City of Calgary Pattern Library

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.