diff --git a/content/patterns/coding/writing-inline-demos.md b/content/patterns/coding/writing-inline-demos.md
index 052b9e8..a271987 100644
--- a/content/patterns/coding/writing-inline-demos.md
+++ b/content/patterns/coding/writing-inline-demos.md
@@ -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:
{{}}
@@ -74,13 +74,27 @@ toggle.addEventListener('click', function () {
{{}}
-## 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.
+
+{{}}
+{{<demo style="background-color: pink; padding: 1rem;">}}
+<!-- demo code here -->
+{{</demo>}}
+{{}}
+
+## "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 `` and `` 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 `` and `}}
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:
-
-{{}}
-{{<demo backgroundColor="hsla(163, 100%, 50%, 0.43)">}}
-<!-- demo code here -->
-{{</demo>}}
-{{}}
diff --git a/docs/css/styles.css b/docs/css/styles.css
index 96b3565..f6d8c1d 100644
--- a/docs/css/styles.css
+++ b/docs/css/styles.css
@@ -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-"] {
diff --git a/docs/patterns/coding/writing-inline-demos/index.html b/docs/patterns/coding/writing-inline-demos/index.html
index eb7f4cb..0c9988b 100644
--- a/docs/patterns/coding/writing-inline-demos/index.html
+++ b/docs/patterns/coding/writing-inline-demos/index.html
@@ -397,8 +397,14 @@
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:
-
+
@@ -550,39 +550,50 @@ toggle.addEventListener('click', function () {
-
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.
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.
+
+
+
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:
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.
-
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: