Forked from the original Pattern-Primer for PHP by Adactio (Jeremy Keith)

Inspired by Ruby (Sinatra) version

This is a design communication, testing, and process tool.

Create little snippets of markup and save them to the _patterns directory (a Jekyll collection). The pattern primer will generate a list of all the HTML patterns in that folder.

The patterns are rendered as HTML, with a reference source displayed in a <textarea> next to each. Attach or reference any CSS to test out styles against these markup patterns.

Why not? Jekyll is a useful way to build static sites, and it is well-suited for quick prototyping. This is intended as a version of Adactio’s Pattern Primer but without PHP dependencies. It can be built locally with a Jekyll/Ruby environment or uploaded as a static directory on a remote server – here is an example of a hosted version.

Make sure to install Jekyll first (Ruby required).

1. Clone this repo.
2. Create your own HTML patterns and link your CSS (instructions).
3. Run the command jekyll serve and open http://localhost:4000 in your browser.

1. Clone/fork this repo.
2. Rename repo to user.github.io (user = your GH username).
3. Create your own HTML patterns and link your CSS (instructions).
4. After pushing all of your changes to GitHub Master branch, create a new branch and call it gh-pages.
5. Visit your new site (may take up to 10 minutes to populate) at http://user.github.io/.

1. Clone/Fork this repo.
2. IMPORTANT: in the _config.yml file, change baseurl: '' to baseurl: '/projectname'
3. Create your own HTML patterns and link your CSS (instructions).
4. After pushing all of your changes to GitHub Master branch, create a new branch and call it gh-pages.
5. Visit your new site (may take up to 10 minutes to populate) at http://user.github.io/projectname.

Learn more about Jekyll on GitHub Pages.

Add them to the _patterns folder. Prepend the following YAML front matter to every file:

---
layout: pattern
title: blockquote.html
---

Anything that comes after the second --- will be rendered as HTML.

There are three methods:

1. Copy your CSS file to css/global.css (replacing the default CSS)
2. Copy your own CSS to the css directory and direct a link in the _includes/head.html file.
3. Create a link to your own CSS file in the _includes/head.html file.

One nice thing that Jekyll has built-in is a Markdown processor (kramdown by default). You can use Jekyll Pattern Primer to read Markdown snippets in the _patterns folder by setting the markdown-patterns option in _config.yml to true. This is turned off by default because markdownifying HTML with kramdown can change the intended output (typically by adding <p> tags).

Flipping the markdown-patterns switch could be useful for documenting HTML output processed with Markdown. Keep in mind that it will fundamentally alter the form of the default HTML snippets included in the project.

• PHP (original version)
• Node.js
• Ruby (Sinatra)

http://patternprimer.olivermak.es/ (using the default styles of the original)

The original Pattern Primer is by Adactio and should be used if you prefer PHP or aren’t already using Jekyll. Many thanks to Jeremy for this great tool!

• opattison
• esteinborn
• tombuckley