Design Patterns ​Catalogue

An evolving collection of design patterns. Maintained by IF.

How to contribute

You can contribute to the catalogue on GitHub by creating an issue or submitting a pull request. The catalogue website runs on Hugo.

Installation

Requirements

• Hugo v0.58.3 (on Mac OS, install using Homebrew)

Instructions

1. Save the repository on your machine using GitHub Desktop or via the terminal.

• How to save using GitHub Desktop
• How to save using the terminal (and some helpful terminal commands)

2. Open the terminal and install Hugo using Homebrew.

If you get brew: command not found, you can install Homebrew using instructions on their website.

Creating and editing patterns

Getting Started

1. Create a new branch to work on. You can do this in GitHub Desktop or via the terminal.

⚠️Changes should always be made on branch.⚠️ This is because any changes committed directly on master will automatically deploy live.

• How to create a new branch on GitHub Desktop
• How to create a new branch via the terminal.

2. In the terminal, cd into the website folder and run hugo server to start the development server.

Any changes you make will be automatically displayed at http://localhost:1313

3. Open the website folder in a text editor of your choice (like Atom or VSCode).

Adding or editing a pattern

Each pattern has a Markdown file in the content/patterns folder. To create a new pattern, use the Hugo archetype template, located in archetypes/patterns.md.

1. Name the new file with the slugified version of the pattern name. For example, This is a new pattern would be called this-is-a-new-pattern.md.

2. In the terminal, run hugo new patterns/[NEW-FILE-NAME].

For example, to create pattern called This is a new pattern, you would run hugo new patterns/this-is-a-new-pattern.md

3. Open your new pattern file and fill in the relevant front matter.

The front matter of the Markdown file (the bit at the top between the three dashes) can have the following YAML fields:

• title: [String] the new pattern title. (required)

• category: [String] name of the category this pattern belongs to. A list of categories can be found below (required)

• weight: [Integer] value between 1 and 4 that places the pattern card on the Categories view on homepage. 1 - 3 will place the pattern in the relevant spot on the Category preview. 4 will hide the pattern until the Category is expanded

• archived: [Boolean] setting this to true will add an Archive tag to the pattern

• archive_reason: [String] why this pattern is archived

• future_pattern: [Boolean] setting this to true will add an Future Pattern tag to the pattern

• future_pattern_reason: [String] why this is a future pattern

• images: [String] a list of images that illustrate this pattern. Eachimages contains a url ([String] path to pattern image)

• alt: [String] alternative text for the image

• advantages: [String] what's good about this patterns

• limitations: [String] where the pattern falls short

• examples: real-world uses of this design pattern. Each example can contain a title, description and url [All Strings].

date and lastmod are automatically generated and should not be changed.

4. Add pattern description to the body of the Markdown file.

The body of the Markdown file (the bit underneath the three dashes) is a short description of the design pattern.

Creating and editing categories

We've created several categories that patterns can belong to. Right now, these are:

• Signing in to a service
• Giving and removing consent
• Giving access to data
• Getting access to data
• Understanding and influencing decisions
• Doing security checks

Categories are defined in content/categories/_index.md. To create a new category or edit an existing one, simply edit this file.

Images

Please include examples of where you've seen this pattern in use. We'll use these as reference for creating an illustration for a new pattern.

Feedback

Get in touch with us on Twitter @projectsbyif or email hello@projectsbyif.com.

Licence

This website licenced under a Creative Commons Attribution-ShareAlike 4.0 International License.