Patterns Overview
The Patterns Library is a collection of HTML and CSS snippets that aim to make it easier for internal and external resources to build out web pages that conform to the Allianz application design standards. The patterns are organized in a linear manner based on where they would appear in an application web page. Patterns that appear at the start of the page (such as the Header) are presented first, and patterns that appear at the end of the page (such as the Footer) are presented last. The majority of the patterns you will use to build out your web page are in the Page Content grouping, with individual patterns within this grouping presented in alphabetical order.
Anatomy of a Pattern
Each pattern page begins with an example screenshot that displays a graphic representation of the pattern in use. Some patterns have multiple examples available, which can be cycled through using the Next and Previous example buttons, as depicted in the following screenshot:
Following the example screenshot, each pattern provides an overview of what the pattern is and when it is appropriate to use. Some patterns also include additional documentation on Fireman's Fund-specific best practices, or UCD best practices information from sources such as Microsoft's UX Guidelines. Each pattern concludes with an example HTML snippet, and the associated CSS classes required to accurately render the pattern. In cases where multiple examples are provided for a given pattern, cycling through the available patterns using the Next/Previous buttons causes varied HTML and CSS snippets to be displayed as appropriate for the current pattern. To use a pattern on your web page, copy the HTML snippet and paste it into one of the page samples or templates, or into a page you have created yourself that links to the required main.css file.
Note: In some cases, the CSS snippets will not exactly match the corresponding entry in the main.css file. This is done intentionaly, as many of the classes in the master css file are consolidated into groups of classes that share common properties. In the interest of keeping the CSS examples as short and to the point as possible, only the subset of classes required to build out the associated HTML snippet are presented, and any consolidation of multiple classes is removed from the examples CSS snippet. In actual practice you will never need to copy individual CSS snippets into your web pages as long as you link to the main.css file. The CSS snippets are provided as a reference to become better acquainted with the details of the Allianz design standards, but are not required in any way to work effectively with the Pattern Library.