Documentation for the Infusion pattern library builder. This documentation is constructed using the builder itself.
To get started, take a look at Installation.
Infusion also supports the ability to write inline demos directly in markdown files. See 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.
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’t have to worry about broken styles and global JS.
demo
Along with the standard figure shortcodes (described in Including images), demo figures are numbered automatically according to their order in the page. You can use markdown syntax in the caption text value.
figure
npm install
Now it’s time to consult the Library setup pattern.
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.
npm run clean
This will leave your content folder with just an _index.md file and a patterns folder containing a single demonstration pattern file. Find out more about these in Library structure.
content
_index.md
patterns
setup
In the images/static folder, you’ll find a logo.png file. Replace this file with your own company or project logo. Currently, only the PNG format is supported.
images/static
logo.png
Now that your logo’s in place, everything should be ready. Where next? You can learn about Library structure to help you get writing, or find out how to serve the library locally and on Github Pages in Serving.
[your user name].github.io/[your library repo name]
You’ll also need to add it to your config.toml file. See Library setup for more information.
config.toml
Now that you know where to put everything, it’s time to talk about how to actually write individual patterns. Don’t worry, it’s pretty straightforward. Turn to Markdown & metadata.
Infusion provides an easy mechanism to cross-reference patterns, by title, using the pattern shortcode. For example, I can reference the Notes & warnings pattern. Here’s what the markdown looks like, including the shortcode:
pattern
I can reference the {{% pattern "Notes & warnings" %}} pattern here. @@ -332,7 +343,7 @@ I can reference the {{% pattern "Notes & warnings" %}} pattern here. - + 2.1.1 Keyboard (level A) @@ -416,7 +427,7 @@ I can reference the {{% pattern "Notes & warnings" %}} pattern here. - + 4.1.2 Name, Role, Value (level A) @@ -501,7 +512,7 @@ I can reference the {{% pattern "Notes & warnings" %}} pattern here. - + 2.1.1 Keyboard (level A): @@ -588,7 +599,7 @@ I can reference the {{% pattern "Notes & warnings" %}} pattern here. - + 4.1.2 Name, Role, Value (level A): @@ -626,7 +637,7 @@ I can reference the {{% pattern "Notes & warnings" %}} pattern here. - + Be consistent : @@ -647,7 +658,7 @@ I can reference the {{% pattern "Notes & warnings" %}} pattern here. - + Add value : @@ -664,7 +675,7 @@ I can reference the {{% pattern "Notes & warnings" %}} pattern here. diff --git a/docs/service-worker.js b/docs/service-worker.js index 93c31a2..a1b855e 100644 --- a/docs/service-worker.js +++ b/docs/service-worker.js @@ -37,7 +37,7 @@ /* eslint-disable indent, no-unused-vars, no-multiple-empty-lines, max-nested-callbacks, space-before-function-paren, quotes, comma-spacing */ 'use strict'; -var precacheConfig = [["browserconfig.xml","67c3113b1574fecc6015d56d774e1d38"],["categories/index.xml","0ac1d02cfbcad2fcc8c13b2c54715338"],["css/fonts/miriamlibre-bold.woff","96496f6f06535d25b3bcba876917ca35"],["css/fonts/miriamlibre-bold.woff2","668defa44d9a74dd709ce0c826a5eb11"],["css/fonts/pt_sans-web-bold.woff","f83c22b548d2d684e24e315d81f7d22b"],["css/fonts/pt_sans-web-bold.woff2","84520c22e6ebf1b30b6f17251d65fff7"],["css/fonts/pt_sans-web-italic.woff","31f09f09a1d3fbe6c8de19644ef0e614"],["css/fonts/pt_sans-web-italic.woff2","df128e1d5a449fc0506fc1b48aac0184"],["css/fonts/pt_sans-web-regular.woff","32100f6ebf01af64d4a71416561c072d"],["css/fonts/pt_sans-web-regular.woff2","b6d4ede9a3a5dbe4d5ac242ae4b0ecc2"],["css/images/icon-tick.svg","35d4d4728ea80d254508b2bca4109d70"],["css/images/stripe.svg","fa3f32a026b6a1bb04ee98d963432e15"],["css/prism.css","004029c8c70ed2bbaa5d9debcf14f8c7"],["css/styles.css","36494dc390f7119da0cadcad11138bb4"],["images/android-icon-144x144.png","43e1f47f182b13d0dee15f510213e928"],["images/android-icon-192x192.png","4c07782e52e0ab714074e6d3d69dc3ec"],["images/android-icon-36x36.png","3b2cd8c925a66bf84c89b68bb30e5f62"],["images/android-icon-48x48.png","45dc386eea1d8a46216a8b6de9b156c6"],["images/android-icon-72x72.png","b04c64637efed2b04fa900ddfcbfe75d"],["images/android-icon-96x96.png","bd9c126a4d6baf7ce442122ce0e89e11"],["images/apple-icon-114x114.png","72e127d6f01dfcd2ba2340141babc536"],["images/apple-icon-120x120.png","bc7cd9e36869e66aaca78412207bf723"],["images/apple-icon-144x144.png","43e1f47f182b13d0dee15f510213e928"],["images/apple-icon-152x152.png","567c64205576865b5e5d06c849613ca2"],["images/apple-icon-180x180.png","6b8734c446bf02ab50be598b4c01ec9c"],["images/apple-icon-57x57.png","f8c586086752c78870820b6190d6b42b"],["images/apple-icon-60x60.png","6e88df111e506bcd5501bed4ff10542e"],["images/apple-icon-72x72.png","b04c64637efed2b04fa900ddfcbfe75d"],["images/apple-icon-76x76.png","d8666e0ac256f39f8c5c628486bd71fb"],["images/apple-icon-precomposed.png","725f6cec25256abb1db10385e0724400"],["images/apple-icon.png","725f6cec25256abb1db10385e0724400"],["images/browser-Chrome-Android.svg","3100b2a9c5f0e34982c717fc2aa46d73"],["images/browser-Chrome.svg","fa39b4be6727525330e928f582fbe80a"],["images/browser-Edge.svg","9e8265ab8f6a701587a4271dd3aa6a73"],["images/browser-Firefox-Android.svg","452df7b9e83c70a07e8e03b4e8dab9c4"],["images/browser-Firefox.svg","d3093eda664be3d0cc6d791e1386420f"],["images/browser-IE.svg","13e192cf2b3fe17e7049a49b7d085caa"],["images/browser-Opera.svg","95d65630c9f7deef6a3098af8f5baf9f"],["images/browser-Safari-iOS.svg","f729e629ec998ec40d313495d7257741"],["images/browser-Safari.svg","523ee9491f5a937b8975f4d23aa77f62"],["images/favicon-16x16.png","7a99c20d6c00babddd26d03607b8721d"],["images/favicon-32x32.png","129881474a1bf130027bff7a1e89febd"],["images/favicon-96x96.png","bd9c126a4d6baf7ce442122ce0e89e11"],["images/favicon.ico","81c46feedbfcc6c6dc9495e4fd5adfad"],["images/icon-info.svg","53a6c555ce41f818556c71ab0dfc533b"],["images/icon-tag.svg","f067bbbc072941b2a0335679300bfc6c"],["images/icon-warning.svg","2a4322abbee9aed694fadb50e98a1f61"],["images/logo.png","0134d77c2c6b01eabb425990bab7ce9a"],["images/ms-icon-144x144.png","43e1f47f182b13d0dee15f510213e928"],["images/ms-icon-150x150.png","e73370837ab9060772a18d62aaacd0f0"],["images/ms-icon-310x310.png","8a7143516b929702e3309bb537a99c5c"],["images/ms-icon-70x70.png","d7c6e7368733d53b5f979546d5aa4fe9"],["images/open_in_desktop.png","e899d6679b011aa7b0e783683d90d99b"],["images/serve_from_docs.png","15ae9eac3737a21593ebe00a9312bf9e"],["images/steve_faulkner.jpg","b90382f2b505ce6f6b1e08657637395e"],["index.html","3cc882447dea5380dcbe5175ee78574f"],["index.xml","e990e9cc581f3c68bdc878b5ce1a7ff0"],["js/dom-scripts.js","9956fb927a1097a05d07f48cdfbb9140"],["js/prism.js","0c1fb8d3a69ee7c91dbf0f361ded7763"],["js/service-worker-registration.js","d60f01dc1393cbaaf4f7435339074d5e"],["js/webcomponents.js","c5f6fe397db634cde89f66c2f1bc2f62"],["manifest.json","4e77b7f1253442852a2f185822f1b4d8"],["patterns/coding/code-blocks/index.html","6abe539eda7d2c398dc6c447ef819d13"],["patterns/coding/codepen-embedding/index.html","d79bcf58c2c16388ff83ab5a6592f69f"],["patterns/coding/color-palettes/index.html","5a3fac471e7f5d5a517338d88b711b34"],["patterns/coding/index.html","2cdbebb04b57502aafe30345565d47ee"],["patterns/coding/index.xml","e05792f5d471e69af658fcfe0d949e05"],["patterns/coding/tested/index.html","1d93fab885b8713296c270b64279a278"],["patterns/coding/writing-inline-demos/index.html","105e6cae1d2228fd8e4fc723b8e611ab"],["patterns/index.html","078ae6ae992ad822d26ee8172747a162"],["patterns/index.xml","b2fe2e8940440bfcc3f152e9c43f4a28"],["patterns/installation/index.html","e003cce0eb0c6bf6d6a7026fbc368cea"],["patterns/library-setup/index.html","de95b33e2daabbd8ab41b8e8b3d456a6"],["patterns/media/including-images/index.html","ae05de42d94592a72a3506211c0612d7"],["patterns/media/including-videos/index.html","b4b51ded9ee25cec606e954b345d0c0e"],["patterns/media/index.html","bd66db33e883f687840a0cda1220a10d"],["patterns/media/index.xml","4a9c518cde77c958c19472b4f6980fd6"],["patterns/serving/index.html","741b0e3beb362d7bea9c12a24f7e6ab2"],["patterns/writing/expandable-sections/index.html","eded76d7c5a8b29695fc44843cdf4e67"],["patterns/writing/index.html","bfaefd10faf2a87a9343b075c1a9aee5"],["patterns/writing/index.xml","c3e4613e56fb851bb7e4d4cc23c949a4"],["patterns/writing/library-structure/index.html","70db5c6f3d043c46828aacbb3f0e8fb7"],["patterns/writing/markdown-and-metadata/index.html","608e0584be09c0b6221ba57dc4d1f04e"],["patterns/writing/notes-and-warnings/index.html","96874d30b8cb60267fbc3c1932e0e632"],["patterns/writing/references/index.html","d94079b0925c8de0e887cfe74e344c22"],["sitemap.xml","60ea02f860041650f4aaf87640e9614f"],["tags/index.xml","c49e6e2b318d5ee86534194441e4dc1e"]]; +var precacheConfig = [["browserconfig.xml","67c3113b1574fecc6015d56d774e1d38"],["categories/index.xml","0ac1d02cfbcad2fcc8c13b2c54715338"],["css/fonts/miriamlibre-bold.woff","96496f6f06535d25b3bcba876917ca35"],["css/fonts/miriamlibre-bold.woff2","668defa44d9a74dd709ce0c826a5eb11"],["css/fonts/pt_sans-web-bold.woff","f83c22b548d2d684e24e315d81f7d22b"],["css/fonts/pt_sans-web-bold.woff2","84520c22e6ebf1b30b6f17251d65fff7"],["css/fonts/pt_sans-web-italic.woff","31f09f09a1d3fbe6c8de19644ef0e614"],["css/fonts/pt_sans-web-italic.woff2","df128e1d5a449fc0506fc1b48aac0184"],["css/fonts/pt_sans-web-regular.woff","32100f6ebf01af64d4a71416561c072d"],["css/fonts/pt_sans-web-regular.woff2","b6d4ede9a3a5dbe4d5ac242ae4b0ecc2"],["css/images/icon-tick.svg","35d4d4728ea80d254508b2bca4109d70"],["css/images/stripe.svg","fa3f32a026b6a1bb04ee98d963432e15"],["css/prism.css","004029c8c70ed2bbaa5d9debcf14f8c7"],["css/styles.css","7bfaec8b4d65ac289609404890d0f3a6"],["images/android-icon-144x144.png","43e1f47f182b13d0dee15f510213e928"],["images/android-icon-192x192.png","4c07782e52e0ab714074e6d3d69dc3ec"],["images/android-icon-36x36.png","3b2cd8c925a66bf84c89b68bb30e5f62"],["images/android-icon-48x48.png","45dc386eea1d8a46216a8b6de9b156c6"],["images/android-icon-72x72.png","b04c64637efed2b04fa900ddfcbfe75d"],["images/android-icon-96x96.png","bd9c126a4d6baf7ce442122ce0e89e11"],["images/apple-icon-114x114.png","72e127d6f01dfcd2ba2340141babc536"],["images/apple-icon-120x120.png","bc7cd9e36869e66aaca78412207bf723"],["images/apple-icon-144x144.png","43e1f47f182b13d0dee15f510213e928"],["images/apple-icon-152x152.png","567c64205576865b5e5d06c849613ca2"],["images/apple-icon-180x180.png","6b8734c446bf02ab50be598b4c01ec9c"],["images/apple-icon-57x57.png","f8c586086752c78870820b6190d6b42b"],["images/apple-icon-60x60.png","6e88df111e506bcd5501bed4ff10542e"],["images/apple-icon-72x72.png","b04c64637efed2b04fa900ddfcbfe75d"],["images/apple-icon-76x76.png","d8666e0ac256f39f8c5c628486bd71fb"],["images/apple-icon-precomposed.png","725f6cec25256abb1db10385e0724400"],["images/apple-icon.png","725f6cec25256abb1db10385e0724400"],["images/browser-Chrome-Android.svg","3100b2a9c5f0e34982c717fc2aa46d73"],["images/browser-Chrome.svg","fa39b4be6727525330e928f582fbe80a"],["images/browser-Edge.svg","9e8265ab8f6a701587a4271dd3aa6a73"],["images/browser-Firefox-Android.svg","452df7b9e83c70a07e8e03b4e8dab9c4"],["images/browser-Firefox.svg","d3093eda664be3d0cc6d791e1386420f"],["images/browser-IE.svg","13e192cf2b3fe17e7049a49b7d085caa"],["images/browser-Opera.svg","95d65630c9f7deef6a3098af8f5baf9f"],["images/browser-Safari-iOS.svg","f729e629ec998ec40d313495d7257741"],["images/browser-Safari.svg","523ee9491f5a937b8975f4d23aa77f62"],["images/favicon-16x16.png","7a99c20d6c00babddd26d03607b8721d"],["images/favicon-32x32.png","129881474a1bf130027bff7a1e89febd"],["images/favicon-96x96.png","bd9c126a4d6baf7ce442122ce0e89e11"],["images/favicon.ico","81c46feedbfcc6c6dc9495e4fd5adfad"],["images/icon-info.svg","53a6c555ce41f818556c71ab0dfc533b"],["images/icon-tag.svg","f067bbbc072941b2a0335679300bfc6c"],["images/icon-warning.svg","2a4322abbee9aed694fadb50e98a1f61"],["images/logo.png","0134d77c2c6b01eabb425990bab7ce9a"],["images/ms-icon-144x144.png","43e1f47f182b13d0dee15f510213e928"],["images/ms-icon-150x150.png","e73370837ab9060772a18d62aaacd0f0"],["images/ms-icon-310x310.png","8a7143516b929702e3309bb537a99c5c"],["images/ms-icon-70x70.png","d7c6e7368733d53b5f979546d5aa4fe9"],["images/open_in_desktop.png","e899d6679b011aa7b0e783683d90d99b"],["images/serve_from_docs.png","15ae9eac3737a21593ebe00a9312bf9e"],["images/steve_faulkner.jpg","b90382f2b505ce6f6b1e08657637395e"],["index.html","e48b343fd0a25d79dc918649608c73ba"],["index.xml","e990e9cc581f3c68bdc878b5ce1a7ff0"],["js/dom-scripts.js","9956fb927a1097a05d07f48cdfbb9140"],["js/prism.js","0c1fb8d3a69ee7c91dbf0f361ded7763"],["js/service-worker-registration.js","d60f01dc1393cbaaf4f7435339074d5e"],["js/webcomponents.js","c5f6fe397db634cde89f66c2f1bc2f62"],["manifest.json","4e77b7f1253442852a2f185822f1b4d8"],["patterns/coding/code-blocks/index.html","98597621c2c17c7206e59ba6c8d46876"],["patterns/coding/codepen-embedding/index.html","cd3369a8fbdd7916ebf1cfcee20a0670"],["patterns/coding/color-palettes/index.html","809a29fa437da4ee9630638d3e6f9cf3"],["patterns/coding/index.html","9b19814d62d2ee476087b96d277bd8be"],["patterns/coding/index.xml","e05792f5d471e69af658fcfe0d949e05"],["patterns/coding/tested/index.html","b03d833fe64b578077e24a9f0996279e"],["patterns/coding/writing-inline-demos/index.html","d9fddaabf1d43d8dc4de3d17b70adf29"],["patterns/index.html","fdf408a6f3450f77b38cda701d24c019"],["patterns/index.xml","b2fe2e8940440bfcc3f152e9c43f4a28"],["patterns/installation/index.html","6a4dfbc854ef497fe1d9d8068cc92f09"],["patterns/library-setup/index.html","9ffef0eb27ab223704640a25c78da237"],["patterns/media/including-images/index.html","64d32690c5cb8a7d9173dd0ad0197203"],["patterns/media/including-videos/index.html","6f7971056a6f27493213559f4fba6ec9"],["patterns/media/index.html","6e5b7e9c9a4786d6cfd223a99538d7ca"],["patterns/media/index.xml","4a9c518cde77c958c19472b4f6980fd6"],["patterns/serving/index.html","6f68c291a7a9744bfa5c78ccc67d7358"],["patterns/writing/expandable-sections/index.html","3b60342a05d07861f3444e3e31de6330"],["patterns/writing/index.html","8a9ea8f2dca093d2d731fc6176524b7e"],["patterns/writing/index.xml","c3e4613e56fb851bb7e4d4cc23c949a4"],["patterns/writing/library-structure/index.html","387ef894d8724e74fb8eca6bf2af6f46"],["patterns/writing/markdown-and-metadata/index.html","3833d043a64b076d071c5b458e0a34df"],["patterns/writing/notes-and-warnings/index.html","b48d79a5917b2abf59b1d3f1e45a455a"],["patterns/writing/references/index.html","fc940c4185a90eb7c45bfaf81d79e3ec"],["sitemap.xml","60ea02f860041650f4aaf87640e9614f"],["tags/index.xml","c49e6e2b318d5ee86534194441e4dc1e"]]; var cacheName = 'sw-precache-v3-sw-precache-' + (self.registration ? self.registration.scope : ''); diff --git a/themes/infusion/layouts/_default/baseof.html b/themes/infusion/layouts/_default/baseof.html index 92bd41b..f7189a0 100644 --- a/themes/infusion/layouts/_default/baseof.html +++ b/themes/infusion/layouts/_default/baseof.html @@ -46,14 +46,19 @@ {{ .Site.Params.Description | markdownify }} - Menu + + + + + Menu + {{ $current := . }} {{ range $.Site.Home.Sections }} {{ range .Pages.ByWeight }} - + {{ .Title }} @@ -65,7 +70,7 @@ {{ range .Pages.ByWeight }} - + {{ .Title }} @@ -83,7 +88,7 @@ {{ block "main" . }} {{ end }} diff --git a/themes/infusion/layouts/_default/li.html b/themes/infusion/layouts/_default/li.html index 13eb59a..f2c53cd 100644 --- a/themes/infusion/layouts/_default/li.html +++ b/themes/infusion/layouts/_default/li.html @@ -1,7 +1,7 @@ - + {{ .Title }} diff --git a/themes/infusion/layouts/partials/svg.html b/themes/infusion/layouts/partials/svg.html index 84e74b3..95b8f8e 100644 --- a/themes/infusion/layouts/partials/svg.html +++ b/themes/infusion/layouts/partials/svg.html @@ -12,7 +12,7 @@ - + @@ -41,13 +41,19 @@ - + - - - - - - - + + + + + + + + + + + + + diff --git a/themes/infusion/layouts/patterns/single.html b/themes/infusion/layouts/patterns/single.html index 957c294..54df06b 100644 --- a/themes/infusion/layouts/patterns/single.html +++ b/themes/infusion/layouts/patterns/single.html @@ -9,7 +9,7 @@ {{ if ne . "example tag"}} {{ if ne . "another tag"}} - + {{ . }} diff --git a/themes/infusion/layouts/shortcodes/expandable.html b/themes/infusion/layouts/shortcodes/expandable.html index 59c742c..5c68ba5 100644 --- a/themes/infusion/layouts/shortcodes/expandable.html +++ b/themes/infusion/layouts/shortcodes/expandable.html @@ -4,7 +4,7 @@ {{ end }} {{ .Get "label" | default "More info" }} - + diff --git a/themes/infusion/layouts/shortcodes/pattern.html b/themes/infusion/layouts/shortcodes/pattern.html index 41506e6..f740873 100644 --- a/themes/infusion/layouts/shortcodes/pattern.html +++ b/themes/infusion/layouts/shortcodes/pattern.html @@ -1 +1 @@ -{{ $title := .Get 0 }}{{ range .Site.Pages }}{{ if eq .Title $title }}{{ .Title }}{{ end }}{{ end -}} +{{ $title := .Get 0 }}{{ range .Site.Pages }}{{ if eq .Title $title }}{{ .Title }}{{ end }}{{ end -}} diff --git a/themes/infusion/layouts/shortcodes/principles.html b/themes/infusion/layouts/shortcodes/principles.html index 408de8e..061868c 100644 --- a/themes/infusion/layouts/shortcodes/principles.html +++ b/themes/infusion/layouts/shortcodes/principles.html @@ -8,7 +8,7 @@ - + {{ .title }} : diff --git a/themes/infusion/layouts/shortcodes/wcag.html b/themes/infusion/layouts/shortcodes/wcag.html index 09bd4b9..920a80a 100644 --- a/themes/infusion/layouts/shortcodes/wcag.html +++ b/themes/infusion/layouts/shortcodes/wcag.html @@ -7,7 +7,7 @@ {{ if in $included .ref_id }} - + {{ .ref_id }} {{ .title }} (level {{ .level }}){{ if $descriptions }}:{{ end }} {{ if $descriptions }} diff --git a/themes/infusion/layouts/taxonomy/tag.html b/themes/infusion/layouts/taxonomy/tag.html index 04f630b..15830e2 100644 --- a/themes/infusion/layouts/taxonomy/tag.html +++ b/themes/infusion/layouts/taxonomy/tag.html @@ -4,7 +4,7 @@ {{ define "main" }} - + Tagged “{{ .Title }}” diff --git a/themes/infusion/static/css/styles.css b/themes/infusion/static/css/styles.css index 0969885..d64920e 100644 --- a/themes/infusion/static/css/styles.css +++ b/themes/infusion/static/css/styles.css @@ -682,25 +682,12 @@ p:empty { /* SVG icons */ -a svg { +a svg, button svg { height: 0.75em; width: auto; margin-right: 0.125rem; } -a .bookmark-icon { - width: 0.75em; -} - -a .balloon-icon { - height: 1.125em; - width: 0.85em; -} - -a .wcag-icon { - width: 1.5em; -} - h1 svg { vertical-align: -0.5rem; }
{{ .Site.Params.Description | markdownify }}