From edc277c8ac1189db34209fa33dcfad41a0a0337e Mon Sep 17 00:00:00 2001 From: Heydon Pickering Date: Wed, 13 Sep 2017 10:39:46 +0100 Subject: [PATCH] snippet example inline --- content/patterns/writing/snippets.md | 4 ++++ docs/patterns/writing/snippets/index.html | 27 ++++++++++++++++++++++- docs/print-version/index.html | 27 ++++++++++++++++++++++- docs/service-worker.js | 2 +- 4 files changed, 57 insertions(+), 3 deletions(-) diff --git a/content/patterns/writing/snippets.md b/content/patterns/writing/snippets.md index 38a212b..ae26379 100644 --- a/content/patterns/writing/snippets.md +++ b/content/patterns/writing/snippets.md @@ -13,3 +13,7 @@ The example `visually-hidden.md` snippet describes the CSS needed to create cont {{% note %}} To make your snippets truly reusable, try to write them in such a way that they make sense independent of surrounding text, a little bit like this note does. {{% /note %}} + +## Visually hidden snippet + +{{% snippet file="visually-hidden.md" %}} diff --git a/docs/patterns/writing/snippets/index.html b/docs/patterns/writing/snippets/index.html index 9e5ba1b..2a9a8d8 100644 --- a/docs/patterns/writing/snippets/index.html +++ b/docs/patterns/writing/snippets/index.html @@ -403,7 +403,9 @@ -

A lot of the time, your larger documentation patterns will share some common techniques and utilities. For this reason, Infusion lets you save snippets of markdown in a snippets folder, alongside the main content folder.

+ + +

A lot of the time, your larger documentation patterns will share some common techniques and utilities. For this reason, Infusion lets you save snippets of markdown in a snippets folder, alongside the main content folder.

The example visually-hidden.md snippet describes the CSS needed to create content that is visually hidden but still available to screen readers. Since this is a technique/utility you are likely to use often, it’s nice to be able to just drop a snippet into your markdown content. The snippet shortcode lets you do exactly that:

@@ -423,6 +425,29 @@ +

Visually hidden snippet

+ + + + + + +

The visually-hidden utility class uses a set of special properties to hide content visually without making it unavailable to screen readers and other non-visual user agents. The class is defined like this:

+ +
.visually-hidden {
+  position: absolute !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  padding:0 !important;
+  border:0 !important;
+  height: 1px !important;
+  width: 1px !important;
+  overflow: hidden !important;
+}
+
+ +

Use it sparingly since, in most cases, what is identified non-visually should also be presented visually. Bear in mind that not all screen reader users are blind users. + +