# The Infusion Pattern Library Builder on Infusion

https://heydon.github.io/infusion/ Recent content in The Infusion Pattern Library Builder on Infusion Hugo -- gohugo.io en-us Mon, 26 Jun 2017 18:27:58 +0100

# Code blocks

https://heydon.github.io/infusion/patterns/coding/code-blocks/ Mon, 01 Jan 0001 00:00:00 +0000

https://heydon.github.io/infusion/patterns/coding/code-blocks/
Markdown already supports code samples both inline (using single backticks like `some code here`) and in blocks. Infusion will syntax highlight HTML, CSS, and JavaScript if you provide the correct language in the formulation of the block. So, this&hellip; ```html &lt;button aria-pressed="false"toggle me&lt;/button ``` &hellip; will result in this: &lt;button aria-pressed=&quot;false&quot;&gt;toggle me&lt;/button&gt; Note that the syntax highlighting uses a greyscale theme. Infusion is careful not to use color as part of its own design, because these colors may clash with those of the design being illustrated and discussed.

# Library structure

https://heydon.github.io/infusion/patterns/writing/library-structure/ Mon, 01 Jan 0001 00:00:00 +0000

https://heydon.github.io/infusion/patterns/writing/library-structure/
Before you can set about documenting patterns, you need to know where everything goes. The simplest folder structure looks like this: └── content ├── _index.md └── patterns ├── name-of-my-pattern.md └── name-of-my-other-pattern.md /content - This is where all of your content lives. You won&rsquo;t need to visit any other folders very frequently. _index.md — This is the content for your home page. /patterns — This is the folder where individual pattern files are kept.

# CodePen embedding

https://heydon.github.io/infusion/patterns/coding/codepen-embedding/ Mon, 01 Jan 0001 00:00:00 +0000

https://heydon.github.io/infusion/patterns/coding/codepen-embedding/
Sometimes just pictures of the pattern you&rsquo;re documenting aren&rsquo;t enough. Interactive patterns benefit from live demos, so that readers can test their functionality. Infusion offers a couple of ways to do this. The first is by embedding CodePen demos into the content. The codePen shortcode takes just one argument: the codePen&rsquo;s ID. &#x7b;{% codePen VpVNKW %}} This will embed the identified codePen into the content wherever you placed the shortcode, with the result view showing by default:

# Markdown & metadata

https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/ Mon, 01 Jan 0001 00:00:00 +0000

https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/
In Infusion, design patterns are documented using markdown. To create a new pattern file, just add a file with the .md extension to the /patterns folder. It&rsquo;s recommended you use &ldquo;kebab case&rdquo; to name the file ( words separated by hyphens). For example, a pattern with the title &ldquo;Menu button&rdquo; should probably have the filename menu-button. Then you get a nice clean URL: your-company.com/patterns/menu-button. If you&rsquo;re not familiar with writing markdown, there are a number of tutorials available.

# Writing inline demos

https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/ Mon, 01 Jan 0001 00:00:00 +0000

https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/
There are some issues with CodePen embedding, like them not working offline. They also come with CodePen branding, which will clash with the pattern you&rsquo;re trying to illustrate. Infusion offers another option: a special demo shortcode that allows you to write HTML, CSS, and JavaScript directly into the markdown file. The outputted demo is encapsulated using Shadow DOM, so you don&rsquo;t have to worry about broken styles and global JS.

# Expandable sections

https://heydon.github.io/infusion/patterns/writing/expandable-sections/ Mon, 01 Jan 0001 00:00:00 +0000

https://heydon.github.io/infusion/patterns/writing/expandable-sections/
In some cases, where there is a lot of content, it&rsquo;s helpful to collapse certain sections. That way, readers get an overview of what&rsquo;s in the content and can choose where to focus in. Infusion provides a shortcode method for creating expandable sections which generates accessible markup using aria-expanded. The expandable shortcode takes three parameters: label — This is the label for the the section heading. level — This is the heading level (e.

# Color palettes

https://heydon.github.io/infusion/patterns/coding/color-palettes/ Mon, 01 Jan 0001 00:00:00 +0000

https://heydon.github.io/infusion/patterns/coding/color-palettes/
There&rsquo;s no reason why your Infusion-powered pattern library has to be all about functionality. You can include style guide-like information such as color palettes too. The colors shortcode makes it easy to exhibit colors and their values together. Just supply a comma-separated list of CSS color values. &#x7b;{% colors "#111111, #cccccc, #ffffff" %}} The result is a one row strip showing each color supplied in order. The colors for Infusion are greyscale:

# Including images

https://heydon.github.io/infusion/patterns/media/including-images/ Mon, 01 Jan 0001 00:00:00 +0000

https://heydon.github.io/infusion/patterns/media/including-images/
From time to time, you&rsquo;ll be wanting to include images illustrating the documented pattern in hand. Images live in the static folder, which is a sibling of the /content folder you&rsquo;ll be mostly working in. ├── content └── static └── images ├── logo.png └── menu-button.gif When you first make a copy of Infusion, Infusion&rsquo;s own logo will be included. You should replace this with your own company or project logo.

# Including videos

https://heydon.github.io/infusion/patterns/media/including-videos/ Mon, 01 Jan 0001 00:00:00 +0000

https://heydon.github.io/infusion/patterns/media/including-videos/
Infusion has a lot of its own shortcodes, but you can still use Hugo&rsquo;s built in shortcodes. These include a simple shortcode for including YouTube videos in your content. The shortcode takes just one parameter — the video&rsquo;s id. &#x7b;{}}

# Installation

https://heydon.github.io/infusion/patterns/installation/ Mon, 01 Jan 0001 00:00:00 +0000

https://heydon.github.io/infusion/patterns/installation/
Infusion is built using the static site engine, Hugo, and NPM. The codebase is available to download on Github. Let&rsquo;s get set up step-by-step. 1. Install Hugo First we need to install Hugo globally. OSX users If you are a Mac user and have Homebrew on your system, installing Hugo is simple: brew install hugo Alternatively, you can manually install Hugo from a package. You can verify the installation was successful by typing:

# Library setup

https://heydon.github.io/infusion/patterns/library-setup/ Mon, 01 Jan 0001 00:00:00 +0000

https://heydon.github.io/infusion/patterns/library-setup/
By now, you should have followed the Installation instructions. You should have Hugo and Node installed, and a local copy of a forked version of Infusion. You should also have run npm install in the root of that codebase. &ldquo;Cleaning&rdquo; the content folder Before you can start documenting patterns, there are a few things still to do in order to get set up. At the moment, your version of Infusion is a facsimile of the original, containing all this documentation content.

# Notes & warnings

https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/ Mon, 01 Jan 0001 00:00:00 +0000

https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/
Infusion acknowledges that simple markdown is limiting when it comes to writing compelling documentation, so it provides a number of &ldquo;shortcodes&rdquo;. Shortcodes offer a simple syntax for including rich content. For example, Infusion provides shortcodes for including notes and warnings. Notes You may wish to pick out some content in your pattern&rsquo;s documentation as a note — an aside to the main thrust of the pattern&rsquo;s description. This is possible using the following syntax:

# References

https://heydon.github.io/infusion/patterns/writing/references/ Mon, 01 Jan 0001 00:00:00 +0000

https://heydon.github.io/infusion/patterns/writing/references/
Cross-references Infusion provides an easy mechanism to cross-reference patterns, by title, using the pattern shortcode. For example, I can reference the Notes &amp; warnings pattern. Here&rsquo;s what the markdown looks like, including the shortcode: I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here. This saves you having to worry about pathing and decorates the generated link with a bookmark icon, identifying the link as a pattern reference visually.

# Serving

https://heydon.github.io/infusion/patterns/serving/ Mon, 01 Jan 0001 00:00:00 +0000

https://heydon.github.io/infusion/patterns/serving/
Serving locally While you&rsquo;re creating content for your library, you&rsquo;ll probably want to see what the finished product looks like. Fortunately, Infusion is easy to serve locally using the serve command: npm run serve This will serve your working library from localhost:1313 (the exact URL will be determined by what&rsquo;s in your baseURL and will be revealed to you by your terminal). Whenever you make changes to your library&rsquo;s files, the site will automatically rebuild.

# Tested using...

https://heydon.github.io/infusion/patterns/coding/tested/ Mon, 01 Jan 0001 00:00:00 +0000

https://heydon.github.io/infusion/patterns/coding/tested/
When you&rsquo;re an inclusive designer, it&rsquo;s pertinent to do some testing. Following specs is one thing, but you need to verify that your component works okay for users. Infusion provided a tested shortcode that let&rsquo;s you show which browsers and assistive technologies you&rsquo;ve tried your design out in. Here&rsquo;s an example. Note the commas and &ldquo;+&rdquo; signs. &#x7b;{% tested using="Firefox Android + NVDA, Chrome, Safari iOS + Voiceover, Edge" %}} This outputs: