hugopoi/cupper-hugo-theme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

styleable demo containers

Browse Source
This commit is contained in:
Heydon Pickering 2017-12-02 12:18:34 +00:00
parent 230eda9026
commit d36fbbeb67
7 changed files with 103 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
content/patterns/coding/writing-inline-demos.md
View File

@ -42,7 +42,7 @@ toggle.addEventListener('click', (e) => {
Note the `demo.querySelector` on line `21`. **Cupper** automatically provides `demo`, representing the root node of the demo. It's like the `document` keyword but for a demo's subtree.
Here's a live demo of… the demo:
Here's a live demo _of_ the demo:
{{<demo>}}
<button aria-pressed="false">Toggle Me</button>
@ -74,13 +74,27 @@ toggle.addEventListener('click', function () {
</script>
{{</demo>}}
## Launch in a separate window
## Styling the container
The "Launch in separate window" button takes the demo code and pushes it to a new browser window. This serves two purposes:
Sometimes your component will be expected to appear in a context where the parent element has a background color and possibly other styles. You can add style to your demo block's container element using the `style` attribute. It works just like standard inline styling.
{{<codeBlock lang="html">}}
&#x7b;{&lt;demo style="background-color: pink; padding: 1rem;">}}
&lt;!-- demo code here -->
&#x7b;{&lt;/demo>}}
{{</codeBlock>}}
## "Launch"
The "Launch" button takes the demo code and pushes it to a new browser tab. This serves two purposes:
* It provides a fallback for browsers that do not support Shadow DOM encapsulation (a warning message will replace the inline demo).
* It creates an isolated test case for the demo, allowing you to run browser extensions and bookmarklets on the the demo code and _just_ the demo code.
{{% note %}}
The "Launch" button is positioned over the styleable demo container. Bear this is mind when styling the container (see the previous section).
{{% /note %}}
## Captioned demos
It's possible to give your demo a caption using an accessible `<figure>` and `<figcaption>` structure. All _you_ need to do is supply a `caption` attribute. For example:
@ -92,13 +106,3 @@ It's possible to give your demo a caption using an accessible `<figure>` and `<f
{{</codeBlock>}}
Along with the standard `figure` shortcodes (described in {{% pattern "Including images" %}}), demo figures are numbered automatically according to their order in the page. You can use markdown syntax in the caption text value.
## Background colors
Sometimes your component will be expected to appear in a context where the parent element has a background color. You can add a backgroundColor for your demo block using the `backgroundColor` attribute. Any valid CSS color value is acceptable:
{{<codeBlock lang="html">}}
&#x7b;{&lt;demo backgroundColor="hsla(163, 100%, 50%, 0.43)">}}
&lt;!-- demo code here -->
&#x7b;{&lt;/demo>}}
{{</codeBlock>}}

14
docs/css/styles.css
View File

@ -186,13 +186,17 @@ button {
border: 0;
}
[data-launch] {
font-size: 0.75rem !important;
margin-top: 0.75rem !important;
font-size: 0.66rem !important;
padding: 0.5rem !important;
margin-top: 0 !important;
border-radius: 0 !important;
border-top-left-radius: 0.33rem !important;
box-shadow: none !important;
background: #111 !important;
color: #fefefe !important
color: #fefefe !important;
position: absolute !important;
right: 0 !important;
bottom: 0 !important;
}
/* Forms */
@ -737,8 +741,8 @@ h1 svg {
.demo-inner {
border-top: 1px solid;
border-bottom: 1px solid;
padding: 1.5rem 0 0;
text-align: right;
padding: 1.5rem 0;
position: relative;
}
[id^="js-demo-"] {

61
docs/patterns/coding/writing-inline-demos/index.html
View File

@ -397,8 +397,14 @@
<ol>
<li>
<a href="#launch-in-a-separate-window">
Launch in a separate window
<a href="#styling-the-container">
Styling the container
</a>
</li>
<li>
<a href="#launch">
“Launch”
</a>
</li>
@ -408,12 +414,6 @@
</a>
</li>
<li>
<a href="#background-colors">
Background colors
</a>
</li>
</ol>
</nav>
@ -461,14 +461,14 @@ toggle.addEventListener('click', (e) => {
<p>Note the <code>demo.querySelector</code> on line <code>21</code>. <strong>Cupper</strong> automatically provides <code>demo</code>, representing the root node of the demo. It&rsquo;s like the <code>document</code> keyword but for a demo&rsquo;s subtree.</p>
<p>Here&rsquo;s a live demo of&hellip; the demo:</p>
<p>Here&rsquo;s a live demo <em>of</em> the demo:</p>
<div class="demo-container">
<div class="demo-inner" >
<div class="demo" id="js-demo-285170a1c0812ad34ac4b853a052c8bd"></div>
<button data-launch="js-demo-285170a1c0812ad34ac4b853a052c8bd">Launch in separate window</button>
<button data-launch="js-demo-285170a1c0812ad34ac4b853a052c8bd">Launch <span aria-hidden="true">↗</span></button>
</div>
@ -550,39 +550,50 @@ toggle.addEventListener('click', function () {
</div>
<h2 id="launch-in-a-separate-window">Launch in a separate window</h2>
<h2 id="styling-the-container">Styling the container</h2>
<p>The &ldquo;Launch in separate window&rdquo; button takes the demo code and pushes it to a new browser window. This serves two purposes:</p>
<p>Sometimes your component will be expected to appear in a context where the parent element has a background color and possibly other styles. You can add style to your demo block&rsquo;s container element using the <code>style</code> attribute. It works just like standard inline styling.</p>
<p><pre class="language-html"><code class="language-html" data-codeblock-shortcode>
&#x7b;{&lt;demo style="background-color: pink; padding: 1rem;">}}
&lt;!-- demo code here -->
&#x7b;{&lt;/demo>}}
</code></pre>
</p>
<h2 id="launch">&ldquo;Launch&rdquo;</h2>
<p>The &ldquo;Launch&rdquo; button takes the demo code and pushes it to a new browser tab. This serves two purposes:</p>
<ul>
<li>It provides a fallback for browsers that do not support Shadow DOM encapsulation (a warning message will replace the inline demo).</li>
<li>It creates an isolated test case for the demo, allowing you to run browser extensions and bookmarklets on the the demo code and <em>just</em> the demo code.</li>
</ul>
<aside aria-label="note" class="note">
<div>
<svg class="sign" aria-hidden="true" viewBox="0 0 41.667306 41.66729" focusable="false">
<use xlink:href="#info"></use>
</svg>
<p>The &ldquo;Launch&rdquo; button is positioned over the styleable demo container. Bear this is mind when styling the container (see the previous section).</p>
</div>
</aside>
<h2 id="captioned-demos">Captioned demos</h2>
<p>It&rsquo;s possible to give your demo a caption using an accessible <code>&lt;figure&gt;</code> and <code>&lt;figcaption&gt;</code> structure. All <em>you</em> need to do is supply a <code>caption</code> attribute. For example:</p>
<p><pre class="language-html"><code class="language-html" data-codeblock-shortcode>
<pre class="language-html"><code class="language-html" data-codeblock-shortcode>
&#x7b;{&lt;demo caption="A basic button element">}}
&lt;!-- demo code here -->
&#x7b;{&lt;/demo>}}
</code></pre>
</p>
<p>Along with the standard <code>figure</code> shortcodes (described in <a class="pattern-link" href="https://thepaciellogroup.github.io/cupper/patterns/media/including-images/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Including images</a>), demo figures are numbered automatically according to their order in the page. You can use markdown syntax in the caption text value.</p>
<h2 id="background-colors">Background colors</h2>
<p>Sometimes your component will be expected to appear in a context where the parent element has a background color. You can add a backgroundColor for your demo block using the <code>backgroundColor</code> attribute. Any valid CSS color value is acceptable:</p>
<pre class="language-html"><code class="language-html" data-codeblock-shortcode>
&#x7b;{&lt;demo backgroundColor="hsla(163, 100%, 50%, 0.43)">}}
&lt;!-- demo code here -->
&#x7b;{&lt;/demo>}}
</code></pre>
</main>
<footer role="contentinfo">

45
docs/print-version/index.html
View File

@ -1959,14 +1959,14 @@ toggle.addEventListener('click', (e) => {
<p>Note the <code>demo.querySelector</code> on line <code>21</code>. <strong>Cupper</strong> automatically provides <code>demo</code>, representing the root node of the demo. It&rsquo;s like the <code>document</code> keyword but for a demo&rsquo;s subtree.</p>
<p>Here&rsquo;s a live demo of&hellip; the demo:</p>
<p>Here&rsquo;s a live demo <em>of</em> the demo:</p>
<div class="demo-container">
<div class="demo-inner" >
<div class="demo" id="js-demo-285170a1c0812ad34ac4b853a052c8bd"></div>
<button data-launch="js-demo-285170a1c0812ad34ac4b853a052c8bd">Launch in separate window</button>
<button data-launch="js-demo-285170a1c0812ad34ac4b853a052c8bd">Launch <span aria-hidden="true">↗</span></button>
</div>
@ -2048,39 +2048,50 @@ toggle.addEventListener('click', function () {
</div>
<h2 id="launch-in-a-separate-window">Launch in a separate window</h2>
<h2 id="styling-the-container">Styling the container</h2>
<p>The &ldquo;Launch in separate window&rdquo; button takes the demo code and pushes it to a new browser window. This serves two purposes:</p>
<p>Sometimes your component will be expected to appear in a context where the parent element has a background color and possibly other styles. You can add style to your demo block&rsquo;s container element using the <code>style</code> attribute. It works just like standard inline styling.</p>
<p><pre class="language-html"><code class="language-html" data-codeblock-shortcode>
&#x7b;{&lt;demo style="background-color: pink; padding: 1rem;">}}
&lt;!-- demo code here -->
&#x7b;{&lt;/demo>}}
</code></pre>
</p>
<h2 id="launch">&ldquo;Launch&rdquo;</h2>
<p>The &ldquo;Launch&rdquo; button takes the demo code and pushes it to a new browser tab. This serves two purposes:</p>
<ul>
<li>It provides a fallback for browsers that do not support Shadow DOM encapsulation (a warning message will replace the inline demo).</li>
<li>It creates an isolated test case for the demo, allowing you to run browser extensions and bookmarklets on the the demo code and <em>just</em> the demo code.</li>
</ul>
<aside aria-label="note" class="note">
<div>
<svg class="sign" aria-hidden="true" viewBox="0 0 41.667306 41.66729" focusable="false">
<use xlink:href="#info"></use>
</svg>
<p>The &ldquo;Launch&rdquo; button is positioned over the styleable demo container. Bear this is mind when styling the container (see the previous section).</p>
</div>
</aside>
<h2 id="captioned-demos">Captioned demos</h2>
<p>It&rsquo;s possible to give your demo a caption using an accessible <code>&lt;figure&gt;</code> and <code>&lt;figcaption&gt;</code> structure. All <em>you</em> need to do is supply a <code>caption</code> attribute. For example:</p>
<p><pre class="language-html"><code class="language-html" data-codeblock-shortcode>
<pre class="language-html"><code class="language-html" data-codeblock-shortcode>
&#x7b;{&lt;demo caption="A basic button element">}}
&lt;!-- demo code here -->
&#x7b;{&lt;/demo>}}
</code></pre>
</p>
<p>Along with the standard <code>figure</code> shortcodes (described in <a class="pattern-link" href="https://thepaciellogroup.github.io/cupper/patterns/media/including-images/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Including images</a>), demo figures are numbered automatically according to their order in the page. You can use markdown syntax in the caption text value.</p>
<h2 id="background-colors">Background colors</h2>
<p>Sometimes your component will be expected to appear in a context where the parent element has a background color. You can add a backgroundColor for your demo block using the <code>backgroundColor</code> attribute. Any valid CSS color value is acceptable:</p>
<pre class="language-html"><code class="language-html" data-codeblock-shortcode>
&#x7b;{&lt;demo backgroundColor="hsla(163, 100%, 50%, 0.43)">}}
&lt;!-- demo code here -->
&#x7b;{&lt;/demo>}}
</code></pre>
</div>
<div class="pattern-section">

2
docs/service-worker.js
View File

File diff suppressed because one or more lines are too long

6
themes/cupper/layouts/shortcodes/demo.html
View File

@ -3,9 +3,9 @@
{{ if .Get "caption" }}
<figure role="group" aria-labelledby="caption-{{ $uniq }}">
{{ end }}
<div class="demo-inner" {{ if .Get "backgroundColor" }}style="background-color: {{ .Get "backgroundColor" | safeCSS }}"{{ end }}>
<div class="demo-inner" {{ if .Get "style" }}style="{{ .Get "style" | safeCSS }}"{{ end }}>
<div class="demo" id="js-demo-{{ $uniq }}"></div>
<button data-launch="js-demo-{{ $uniq }}">Launch in separate window</button>
<button data-launch="js-demo-{{ $uniq }}">Launch <span aria-hidden="true">↗</span></button>
</div>
{{ if .Get "caption" }}
<figcaption id="caption-{{ $uniq }}">{{ .Get "caption" | markdownify }}</figcaption>
@ -26,7 +26,7 @@
demoDiv.innerHTML = template.innerHTML;
var standaloneScript = demoDiv.querySelector('script');
if (standaloneScript) {
standaloneScript.textContent = '(function() { document.getElementsByTagName(\'html\')[0].setAttribute(\'lang\', \'en\'); var demo = document; ' + standaloneScript.textContent + ' })();';
standaloneScript.textContent = '(function() { document.getElementsByTagName(\'html\')[0].setAttribute(\'lang\', \'en\'); var demo = document; {{ if .Get "style" }}document.body.setAttribute(\'style\', \'{{ .Get "style" | safeCSS }}\'){{ end }}' + standaloneScript.textContent + ' })();';
}
if (document.head.attachShadow) {

14
themes/cupper/static/css/styles.css
View File

@ -186,13 +186,17 @@ button {
border: 0;
}
[data-launch] {
font-size: 0.75rem !important;
margin-top: 0.75rem !important;
font-size: 0.66rem !important;
padding: 0.5rem !important;
margin-top: 0 !important;
border-radius: 0 !important;
border-top-left-radius: 0.33rem !important;
box-shadow: none !important;
background: #111 !important;
color: #fefefe !important
color: #fefefe !important;
position: absolute !important;
right: 0 !important;
bottom: 0 !important;
}
/* Forms */
@ -737,8 +741,8 @@ h1 svg {
.demo-inner {
border-top: 1px solid;
border-bottom: 1px solid;
padding: 1.5rem 0 0;
text-align: right;
padding: 1.5rem 0;
position: relative;
}
[id^="js-demo-"] {