snippet example inline

This commit is contained in:
Heydon Pickering 2017-09-13 10:39:46 +01:00
parent a6cb999be7
commit edc277c8ac
4 changed files with 57 additions and 3 deletions

View File

@ -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" %}}

View File

@ -403,6 +403,8 @@
<p>A lot of the time, your larger documentation patterns will share some common techniques and utilities. For this reason, <strong>Infusion</strong> lets you save snippets of markdown in a <strong>snippets</strong> folder, alongside the main content folder.</p>
<p>The example <code>visually-hidden.md</code> 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&rsquo;s nice to be able to just drop a snippet into your markdown content. The <code>snippet</code> shortcode lets you do exactly that:</p>
@ -423,6 +425,29 @@
</aside>
<h2 id="visually-hidden-snippet">Visually hidden snippet</h2>
<!-- snippet -->
<p>The <code>visually-hidden</code> 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:</p>
<pre><code class="language-CSS">.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;
}
</code></pre>
<p>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.
</main>
<footer role="contentinfo">

View File

@ -1505,6 +1505,8 @@ I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
</svg>
Snippets
</h1>
<p>A lot of the time, your larger documentation patterns will share some common techniques and utilities. For this reason, <strong>Infusion</strong> lets you save snippets of markdown in a <strong>snippets</strong> folder, alongside the main content folder.</p>
<p>The example <code>visually-hidden.md</code> 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&rsquo;s nice to be able to just drop a snippet into your markdown content. The <code>snippet</code> shortcode lets you do exactly that:</p>
@ -1525,6 +1527,29 @@ I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
</aside>
<h2 id="visually-hidden-snippet">Visually hidden snippet</h2>
<!-- snippet -->
<p>The <code>visually-hidden</code> 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:</p>
<pre><code class="language-CSS">.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;
}
</code></pre>
<p>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.
</div>
<div class="pattern-section">

File diff suppressed because one or more lines are too long