An evolving collection of design patterns. Maintained by IF.
You can contribute to the catalogue on GitHub by creating an issue or submitting a pull request. The catalogue website runs on Hugo.
Requirements
Instructions
Save the repository on your machine using GitHub Desktop or via the terminal.
Open the terminal and install Hugo using Homebrew.
If you get brew: command not found, you can install Homebrew using instructions on their website.
Getting Started
⚠️Changes should always be made on branch.⚠️ This is because any changes committed directly on master will automatically deploy live.
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
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.
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.
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
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.
The body of the Markdown file (the bit underneath the three dashes) is a short description of the design pattern.
We've created several categories that patterns can belong to. Right now, these are:
Categories are defined in content/categories/_index.md. To create a new category or edit an existing one, simply edit this file.
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.
Get in touch with us on Twitter @projectsbyif or email hello@projectsbyif.com.
This website licenced under a Creative Commons Attribution-ShareAlike 4.0 International License.