CodePen embedding
+ + + + +Sometimes just pictures of the pattern you’re documenting aren’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’s ID.
Color palettes
+ + + + +There’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.
diff --git a/docs/patterns/coding/index.html b/docs/patterns/coding/index.html
index a7fce82..776276c 100644
--- a/docs/patterns/coding/index.html
+++ b/docs/patterns/coding/index.html
@@ -176,6 +176,13 @@
+
+
+
+ Tables of contents
+
+
+
diff --git a/docs/patterns/coding/tested/index.html b/docs/patterns/coding/tested/index.html
index 1043be3..902ae4c 100644
--- a/docs/patterns/coding/tested/index.html
+++ b/docs/patterns/coding/tested/index.html
@@ -176,6 +176,13 @@
+
+
+
+ Tables of contents
+
+
+
@@ -253,6 +260,11 @@
Tested using...
+
+
+
+
+
When you’re an inclusive designer, it’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’s you show which browsers and assistive technologies you’ve tried your design out in. Here’s an example. Note the commas and “+” signs.
diff --git a/docs/patterns/coding/writing-inline-demos/index.html b/docs/patterns/coding/writing-inline-demos/index.html
index 3935bb8..eea0bc9 100644
--- a/docs/patterns/coding/writing-inline-demos/index.html
+++ b/docs/patterns/coding/writing-inline-demos/index.html
@@ -176,6 +176,13 @@
+
+
+
+ Tables of contents
+
+
+
@@ -254,6 +261,11 @@
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’re trying to illustrate.
diff --git a/docs/patterns/index.html b/docs/patterns/index.html
index 3cdcc63..d2349e5 100644
--- a/docs/patterns/index.html
+++ b/docs/patterns/index.html
@@ -176,6 +176,13 @@
+
+
+
+ Tables of contents
+
+
+
diff --git a/docs/patterns/installation/index.html b/docs/patterns/installation/index.html
index 2067387..5b9ad11 100644
--- a/docs/patterns/installation/index.html
+++ b/docs/patterns/installation/index.html
@@ -176,6 +176,13 @@
+
+
+
+ Tables of contents
+
+
+
@@ -254,6 +261,36 @@
Installation
+
+
+
+
+
+
+
Infusion is built using the static site engine, Hugo, and NPM. The codebase is available to download on Github. Let’s get set up step-by-step.
diff --git a/docs/patterns/library-setup/index.html b/docs/patterns/library-setup/index.html
index 2d86580..58f1e3c 100644
--- a/docs/patterns/library-setup/index.html
+++ b/docs/patterns/library-setup/index.html
@@ -176,6 +176,13 @@
+
+
+
+ Tables of contents
+
+
+
@@ -254,6 +261,42 @@
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.
diff --git a/docs/patterns/media/including-images/index.html b/docs/patterns/media/including-images/index.html
index dcc1cf3..edf1ca9 100644
--- a/docs/patterns/media/including-images/index.html
+++ b/docs/patterns/media/including-images/index.html
@@ -176,6 +176,13 @@
+
+
+
+ Tables of contents
+
+
+
@@ -254,6 +261,11 @@
Including images
+
+
+
+
+
From time to time, you’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’ll be mostly working in.
diff --git a/docs/patterns/media/including-videos/index.html b/docs/patterns/media/including-videos/index.html
index 9fe936b..d743d7a 100644
--- a/docs/patterns/media/including-videos/index.html
+++ b/docs/patterns/media/including-videos/index.html
@@ -176,6 +176,13 @@
+
+
+
+ Tables of contents
+
+
+
@@ -253,6 +260,11 @@
Including videos
+
+
+
+
+
Infusion has a lot of its own shortcodes, but you can still use Hugo’s built in shortcodes. These include a simple shortcode for including YouTube videos in your content. The shortcode takes just one parameter — the video’s id.
diff --git a/docs/patterns/media/index.html b/docs/patterns/media/index.html
index 38f5aac..816117a 100644
--- a/docs/patterns/media/index.html
+++ b/docs/patterns/media/index.html
@@ -176,6 +176,13 @@
+
+
+
+ Tables of contents
+
+
+
diff --git a/docs/patterns/serving/index.html b/docs/patterns/serving/index.html
index ef5e0e5..54b1864 100644
--- a/docs/patterns/serving/index.html
+++ b/docs/patterns/serving/index.html
@@ -176,6 +176,13 @@
+
+
+
+ Tables of contents
+
+
+
@@ -254,6 +261,30 @@
Serving
+
+
+
+
+
+
+
Serving locally
diff --git a/docs/patterns/writing/expandable-sections/index.html b/docs/patterns/writing/expandable-sections/index.html
index 9c94d65..c383da3 100644
--- a/docs/patterns/writing/expandable-sections/index.html
+++ b/docs/patterns/writing/expandable-sections/index.html
@@ -176,6 +176,13 @@
+
+
+
+ Tables of contents
+
+
+
@@ -253,6 +260,11 @@
Expandable sections
+
+
+
+
+
In some cases, where there is a lot of content, it’s helpful to collapse certain sections. That way, readers get an overview of what’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:
diff --git a/docs/patterns/writing/index.html b/docs/patterns/writing/index.html
index 2b53b79..e317f54 100644
--- a/docs/patterns/writing/index.html
+++ b/docs/patterns/writing/index.html
@@ -176,6 +176,13 @@
+
+
+
+ Tables of contents
+
+
+
@@ -306,6 +313,16 @@
+
+
+
+
+ Tables of contents
+
+
+
+
+
diff --git a/docs/patterns/writing/index.xml b/docs/patterns/writing/index.xml
index da71deb..9e2e61b 100644
--- a/docs/patterns/writing/index.xml
+++ b/docs/patterns/writing/index.xml
@@ -61,5 +61,15 @@ Notes You may wish to pick out some content in your pattern’s document
I can reference the {{% 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.
+