+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/layouts/application/_script.js b/vanilla/templates/docs/examples/layouts/application/_script.js
new file mode 100644
index 0000000..e661708
--- /dev/null
+++ b/vanilla/templates/docs/examples/layouts/application/_script.js
@@ -0,0 +1,83 @@
+/*
+ Set up event handlers for application layout examples.
+ This is for demo purposes only. Real applications should implement it within their application code.
+*/
+function setupAppLayoutExamples() {
+ var aside = document.querySelector('.l-aside');
+ var navigation = document.querySelector('.l-navigation');
+
+ var menuToggle = document.querySelector('.js-menu-toggle');
+ var menuClose = document.querySelector('.js-menu-close');
+ var menuPin = document.querySelector('.js-menu-pin');
+ var asideOpen = document.querySelector('.js-aside-open');
+ var asideClose = document.querySelector('.js-aside-close');
+ var asideResize = document.querySelectorAll('.js-aside-resize');
+ var asidePin = document.querySelector('.js-aside-pin');
+
+ if (menuToggle) {
+ menuToggle.addEventListener('click', function () {
+ navigation.classList.toggle('is-collapsed');
+ });
+ }
+
+ if (menuClose) {
+ menuClose.addEventListener('click', function (e) {
+ navigation.classList.add('is-collapsed');
+ document.activeElement.blur();
+ });
+ }
+
+ if (asideOpen) {
+ asideOpen.addEventListener('click', function () {
+ aside.classList.remove('is-collapsed');
+ });
+ }
+
+ if (asideClose) {
+ asideClose.addEventListener('click', function () {
+ aside.classList.add('is-collapsed');
+ });
+ }
+
+ [].slice.call(asideResize).forEach(function (button) {
+ button.addEventListener('click', function () {
+ button.dataset.resizeClass;
+ var panel = document.getElementById(button.getAttribute('aria-controls'));
+ if (panel) {
+ panel.classList.remove('is-narrow');
+ panel.classList.remove('is-medium');
+ panel.classList.remove('is-wide');
+ if (button.dataset.resizeClass) {
+ panel.classList.add(button.dataset.resizeClass);
+ }
+ }
+ });
+ });
+
+ if (menuPin) {
+ menuPin.addEventListener('click', function () {
+ navigation.classList.toggle('is-pinned');
+ if (navigation.classList.contains('is-pinned')) {
+ menuPin.querySelector('i').classList.add('p-icon--close');
+ menuPin.querySelector('i').classList.remove('p-icon--pin');
+ } else {
+ menuPin.querySelector('i').classList.add('p-icon--pin');
+ menuPin.querySelector('i').classList.remove('p-icon--close');
+ }
+ document.activeElement.blur();
+ });
+ }
+
+ if (asidePin) {
+ asidePin.addEventListener('click', function () {
+ aside.classList.toggle('is-pinned');
+ if (aside.classList.contains('is-pinned')) {
+ asidePin.innerText = 'Unpin';
+ } else {
+ asidePin.innerText = 'Pin';
+ }
+ });
+ }
+}
+
+setupAppLayoutExamples();
diff --git a/vanilla/templates/docs/examples/layouts/application/_styles.css b/vanilla/templates/docs/examples/layouts/application/_styles.css
new file mode 100644
index 0000000..b0d272a
--- /dev/null
+++ b/vanilla/templates/docs/examples/layouts/application/_styles.css
@@ -0,0 +1,84 @@
+body {
+ margin: 0 !important; /* override codepen embedded examples styles */
+}
+
+/* application layout demo styles */
+.l-application .u-fixed-width {
+ /* temporary, as I don't want to change the global setting */
+ max-width: 95rem;
+}
+
+.demo-status {
+ background-color: #f7f7f7; /* $colors--light-theme--background-alt; */
+ padding-bottom: 0.75rem; /* $spv--medium; */
+ padding-top: 0.75rem;
+}
+
+/* demo JAAS CSS */
+.u-flex {
+ display: flex;
+}
+
+.u-flex--block {
+ flex: 1 1 auto;
+}
+
+.has-icon [class*='p-icon']:first-child {
+ margin-right: 0.25rem;
+ margin-top: 0.25rem;
+}
+
+.status-icon {
+ display: inline-block;
+ padding-left: 1.5rem;
+ position: relative;
+}
+
+.status-icon::before {
+ content: '\00B7';
+ font-size: 5rem;
+ left: 0;
+ position: absolute;
+ top: -6px;
+}
+
+.status-icon.is-blocked::before,
+.status-icon.is-down::before,
+.status-icon.is-error::before,
+.status-icon.is-provisioning::before {
+ color: #c7162b;
+}
+
+.status-icon.is-alert::before,
+.status-icon.is-attention::before,
+.status-icon.is-maintenance::before,
+.status-icon.is-pending::before,
+.status-icon.is-stopped::before,
+.status-icon.is-waiting::before {
+ color: #f99b11;
+}
+
+.status-icon.is-active::before,
+.status-icon.is-running::before,
+.status-icon.is-started::before {
+ color: #cdcdcd;
+}
+
+.status-icon.is-unknown::before {
+ border: 1px solid #cdcdcd;
+ border-radius: 50%;
+ content: '';
+ height: 0.6rem;
+ left: 0.35rem;
+ top: 0.5rem;
+ width: 0.6rem;
+}
+
+table thead::after {
+ content: none;
+}
+
+td,
+th {
+ min-width: 150px;
+}
diff --git a/vanilla/templates/docs/examples/layouts/application/default.html b/vanilla/templates/docs/examples/layouts/application/default.html
new file mode 100644
index 0000000..d14eafc
--- /dev/null
+++ b/vanilla/templates/docs/examples/layouts/application/default.html
@@ -0,0 +1,317 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Application / Default{% endblock %}
+
+{% block style %}
+
+
+
+
+
+
+
+
+ {% set is_dark = True %}
+ {% include "docs/examples/patterns/side-navigation/_layout-application.html" %}
+
+
+
+
+
+
+
+
+
+
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/layouts/application/split.html b/vanilla/templates/docs/examples/layouts/application/split.html
new file mode 100644
index 0000000..15e62a1
--- /dev/null
+++ b/vanilla/templates/docs/examples/layouts/application/split.html
@@ -0,0 +1,556 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Application / Split view{% endblock %}
+
+{% block style %}
+
+
+{% endblock %}
+
+{% block content %}
+
+
+
+
+
+
+
+
+ {% set is_dark = True %}
+ {% include "docs/examples/patterns/side-navigation/_layout-application.html" %}
+
+
+
+
+
+
+
+
+
+
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/layouts/application/structure.html b/vanilla/templates/docs/examples/layouts/application/structure.html
new file mode 100644
index 0000000..f9e3903
--- /dev/null
+++ b/vanilla/templates/docs/examples/layouts/application/structure.html
@@ -0,0 +1,91 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Application / Structure{% endblock %}
+
+{% block style %}
+
+{% endblock %}
+
+{% block content %}
+
+
+
+
+
+
+
+
+
+
+
l-navigation >
+
+
+
+ l-main
+
+ Open aside panel
+
+
+
+
+
+ Demo content
+ Demo content
+
+
+
+
+ Demo content
+ Demo content
+ Demo content
+
+
+ Demo content
+ Demo content
+ Demo content
+
+
+
+
+ Demo content
+ Demo content
+ Demo content
+
+
+
+
+
+
+
+
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/layouts/docs.html b/vanilla/templates/docs/examples/layouts/docs.html
new file mode 100644
index 0000000..f5dcfed
--- /dev/null
+++ b/vanilla/templates/docs/examples/layouts/docs.html
@@ -0,0 +1,345 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Documentation / Full width{% endblock %}
+
+{% block style %}
+
+{% endblock %}
+
+{% set is_paper = True %}
+{% block content %}
+
+
+
+
+
+
+
+
+
+
+
+
Main documentation content
+
+
+
+
+
+
+
+
+
+
+
Main documentation content block is contained in grid col-9. Any standard base elements or Vanilla components can be used in the documentation pages.
+
+
Examples
+
+
Below you can find examples of components commonly used in documentation
+
+
Code blocks
+
// Import Vanilla framework
+ @import 'vanilla-framework';
+
+ // Include base Vanilla styles
+ @include vf-base;
+
+ // Include the components you want
+ @include vf-p-buttons;
+ @include vf-p-forms;
+ @include vf-p-links;
+
+
+
Lists
+
+
+
+
Tables
+
+
+
+ Interface name
+ Description
+ Auto-connect
+
+
+
+
+ account-control add/remove user accounts or change passwords
+ no
+
+
+ accounts-service allows communication with the accounts service
+ no
+
+
+ adb-support allows operating as Android Debug Bridge service
+ no
+
+
+ alsa play or record sound
+ no
+
+
+ appstream-metadata allows access to AppStream metadata
+ no
+
+
+
+
+
Notifications
+
+
+
+ In versions prior to v.2.6.1 the add-cloud command only operates locally (there is no --local option).
+
+
+
+
+
+ Multi-cloud functionality via add-cloud (not add-k8s) is available as “early access” and requires the use of a feature flag. Once the controller
+ is created, you can enable it with: juju controller-config features="[multi-cloud]"
+
+
+
+
+
+
Grid
+
+
Main documentation content block is contained in grid col-9.
+
+
For two columns split use two col-4 columns.
+
+
+
For three columns split use three col-3 columns.
+
+
+
+
+
+
+
+
+
+
+
+
+
+{% endblock %}
\ No newline at end of file
diff --git a/vanilla/templates/docs/examples/layouts/documentation.html b/vanilla/templates/docs/examples/layouts/documentation.html
new file mode 100644
index 0000000..d5d24d4
--- /dev/null
+++ b/vanilla/templates/docs/examples/layouts/documentation.html
@@ -0,0 +1,283 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Documentation / Brochure{% endblock %}
+
+{% block style %}
+
+{% endblock %}
+
+{% block content %}
+{# this include is a mockup of global nav for testing, based on global-nav@2.4.1 #}
+{% include "docs/examples/layouts/_global-nav.html" %}
+
+
+
+
+
+
+
+
+
+
+ Main documentation content
+ Main documentation content block is contained in grid col-9. Any standard base elements or Vanilla components can be used in the documentation pages.
+
+ Examples
+
+ Below you can find examples of components commonly used in documentation
+
+ Code blocks
+ // Import Vanilla framework
+@import 'vanilla-framework';
+
+// Include base Vanilla styles
+@include vf-base;
+
+// Include the components you want
+@include vf-p-buttons;
+@include vf-p-forms;
+@include vf-p-links;
+Lists
+
+
+
+ Tables
+
+
+
+ Interface name
+ Description
+ Auto-connect
+
+
+
+
+ account-control add/remove user accounts or change passwords
+ no
+
+
+ accounts-service allows communication with the accounts service
+ no
+
+
+ adb-support allows operating as Android Debug Bridge service
+ no
+
+
+ alsa play or record sound
+ no
+
+
+ appstream-metadata allows access to AppStream metadata
+ no
+
+
+
+
+ Notifications
+
+
+
+ In versions prior to v.2.6.1 the add-cloud command only operates locally (there is no --local option).
+
+
+
+ Multi-cloud functionality via add-cloud (not add-k8s) is available as “early access” and requires the use of a feature flag. Once the controller
+ is created, you can enable it with: juju controller-config features="[multi-cloud]"
+
+
Grid
+
+ Main documentation content block is contained in grid col-9.
+
+ For two columns split use two col-4 columns.
+
+
+ For three columns split use three col-3 columns.
+
+
+
+
+
+
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/layouts/fluid-breakout/_aside.html b/vanilla/templates/docs/examples/layouts/fluid-breakout/_aside.html
new file mode 100644
index 0000000..a111617
--- /dev/null
+++ b/vanilla/templates/docs/examples/layouts/fluid-breakout/_aside.html
@@ -0,0 +1,64 @@
+
\ No newline at end of file
diff --git a/vanilla/templates/docs/examples/layouts/fluid-breakout/_cve-table.html b/vanilla/templates/docs/examples/layouts/fluid-breakout/_cve-table.html
new file mode 100644
index 0000000..1f86d28
--- /dev/null
+++ b/vanilla/templates/docs/examples/layouts/fluid-breakout/_cve-table.html
@@ -0,0 +1,323 @@
+
+
+
+ ID
+ Priority
+ Package
+
+ 14.04 ESM
+
+
+ 16.04 LTS
+
+
+ 18.04 LTS
+
+
+ 20.04 LTS
+
+
+ 20.10
+
+
+ 21.04
+
+
+
+
+
+
+ CVE-2020-15180
+
+
+
+
+
+
+ medium
+
+
+
+
+ mariadb-10.0
+
+ Does not exist
+
+
+ Needs triage
+
+
+ Does not exist
+
+
+ Does not exist
+
+
+ Does not exist
+
+
+ Does not exist
+
+
+
+ mariadb-10.1
+
+ Does not exist
+
+
+ Does not exist
+
+
+ Released
+
+
+ Does not exist
+
+
+ Does not exist
+
+
+ Does not exist
+
+
+
+ mariadb-10.3
+
+ Does not exist
+
+
+ Does not exist
+
+
+ Does not exist
+
+
+ Released
+
+
+ Needs triage
+
+
+ Does not exist
+
+
+
+
+ CVE-2020-28488
+
+
+
+
+
+
+ medium
+
+
+
+
+ jqueryui
+
+ Needs triage
+
+
+ Needs triage
+
+
+ Needs triage
+
+
+ Needs triage
+
+
+ Needs triage
+
+
+ Needs triage
+
+
+
+
+ CVE-2021-3114
+
+
+
+
+
+
+ medium
+
+
+
+
+ golang
+
+ Does not exist
+
+
+ Does not exist
+
+
+ Does not exist
+
+
+ Does not exist
+
+
+ Does not exist
+
+
+ Does not exist
+
+
+
+ golang-1.10
+
+ Needs triage
+
+
+ Needs triage
+
+
+ Needs triage
+
+
+ Does not exist
+
+
+ Does not exist
+
+
+ Does not exist
+
+
+
+ golang-1.13
+
+ Does not exist
+
+
+ Does not exist
+
+
+ Does not exist
+
+
+ Needs triage
+
+
+ Needs triage
+
+
+ Needs triage
+
+
+
+ golang-1.14
+
+ Does not exist
+
+
+ Does not exist
+
+
+ Does not exist
+
+
+ Needs triage
+
+
+ Needs triage
+
+
+ Needs triage
+
+
+
+ golang-1.15
+
+ Does not exist
+
+
+ Does not exist
+
+
+ Does not exist
+
+
+ Does not exist
+
+
+ Needs triage
+
+
+ Needs triage
+
+
+
+ golang-1.6
+
+ Does not exist
+
+
+ Needs triage
+
+
+ Does not exist
+
+
+ Does not exist
+
+
+ Does not exist
+
+
+ Does not exist
+
+
+
+ golang-1.8
+
+ Does not exist
+
+
+ Does not exist
+
+
+ Needs triage
+
+
+ Does not exist
+
+
+ Does not exist
+
+
+ Does not exist
+
+
+
+ golang-1.9
+
+ Does not exist
+
+
+ Does not exist
+
+
+ Needs triage
+
+
+ Does not exist
+
+
+ Does not exist
+
+
+ Does not exist
+
+
+
+
\ No newline at end of file
diff --git a/vanilla/templates/docs/examples/layouts/fluid-breakout/_toolbar.html b/vanilla/templates/docs/examples/layouts/fluid-breakout/_toolbar.html
new file mode 100644
index 0000000..3f51a0f
--- /dev/null
+++ b/vanilla/templates/docs/examples/layouts/fluid-breakout/_toolbar.html
@@ -0,0 +1,18 @@
+
+ 43 Items
+
+
diff --git a/vanilla/templates/docs/examples/layouts/fluid-breakout/fluid-breakout-cards-with-aside-and-toolbar.html b/vanilla/templates/docs/examples/layouts/fluid-breakout/fluid-breakout-cards-with-aside-and-toolbar.html
new file mode 100644
index 0000000..bc050a6
--- /dev/null
+++ b/vanilla/templates/docs/examples/layouts/fluid-breakout/fluid-breakout-cards-with-aside-and-toolbar.html
@@ -0,0 +1,44 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Fluid breakout - cards with aside and toolbar{% endblock %}
+
+{% block standalone_css %}layouts_fluid-breakout{% endblock %}
+
+{% block style %}
+
+{% endblock %}
+
+{% block content %}
+
+
+ {% for i in range(12) %}
+ {% with index = i + 1 %}
+
+ 1 col
+
+ {% endwith %}
+ {% endfor %}
+
+
+
+
+
+
+ {% include "docs/examples/layouts/fluid-breakout/_aside.html" %}
+
+
+ {% for i in range(14) %}
+ {% with index = i + 1 %}
+
+ {% include "docs/examples/patterns/card/_header-and-footer.html" %}
+
+ {% endwith %}
+ {% endfor %}
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/layouts/fluid-breakout/fluid-breakout-full--cve-table.html b/vanilla/templates/docs/examples/layouts/fluid-breakout/fluid-breakout-full--cve-table.html
new file mode 100644
index 0000000..793d57f
--- /dev/null
+++ b/vanilla/templates/docs/examples/layouts/fluid-breakout/fluid-breakout-full--cve-table.html
@@ -0,0 +1,36 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Fluid breakout - CVE table{% endblock %}
+
+{% block standalone_css %}layouts_fluid-breakout{% endblock %}
+
+{% block style %}
+
+
+{% endblock %}
+
+{% block content %}
+
+
+ {% for i in range(12) %}
+ {% with index = i + 1 %}
+
+ 1 col
+
+ {% endwith %}
+ {% endfor %}
+
+
+
+
+
+
+
+ {% include "docs/examples/layouts/fluid-breakout/_cve-table.html" %}
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/layouts/fluid-breakout/fluid-breakout-full.html b/vanilla/templates/docs/examples/layouts/fluid-breakout/fluid-breakout-full.html
new file mode 100644
index 0000000..331a124
--- /dev/null
+++ b/vanilla/templates/docs/examples/layouts/fluid-breakout/fluid-breakout-full.html
@@ -0,0 +1,22 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Fluid breakout - main spanning 3 columns{% endblock %}
+
+{% block standalone_css %}layouts_fluid-breakout{% endblock %}
+
+{% block style %}
+
+{% endblock %}
+
+{% block content %}
+
+
+ {% for i in range(14) %}
+ {% with index = i + 1 %}
+
item #{{index}}
+ {% endwith %}
+ {% endfor %}
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/layouts/fluid-breakout/fluid-breakout-left-aside-and-toolbar.html b/vanilla/templates/docs/examples/layouts/fluid-breakout/fluid-breakout-left-aside-and-toolbar.html
new file mode 100644
index 0000000..87bf9aa
--- /dev/null
+++ b/vanilla/templates/docs/examples/layouts/fluid-breakout/fluid-breakout-left-aside-and-toolbar.html
@@ -0,0 +1,76 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Fluid breakout - aside on the left and toolbar{% endblock %}
+
+{% block standalone_css %}layouts_fluid-breakout{% endblock %}
+
+{% block style %}
+
+{% endblock %}
+
+{% block content %}
+
+
+
+ .col-1
+
+
+ .col-1
+
+
+ .col-1
+
+
+ .col-1
+
+
+ .col-1
+
+
+ .col-1
+
+
+ .col-1
+
+
+ .col-1
+
+
+ .col-1
+
+
+ .col-1
+
+
+ .col-1
+
+
+ .col-1
+
+
+
+
+
+
+
+
+ {% for i in range(14) %}
+ {% with index = i + 1 %}
+
item #{{index}}
+ {% endwith %}
+ {% endfor %}
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/layouts/fluid-breakout/fluid-breakout-left-aside.html b/vanilla/templates/docs/examples/layouts/fluid-breakout/fluid-breakout-left-aside.html
new file mode 100644
index 0000000..aac11e5
--- /dev/null
+++ b/vanilla/templates/docs/examples/layouts/fluid-breakout/fluid-breakout-left-aside.html
@@ -0,0 +1,66 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Fluid breakout - aside on the left{% endblock %}
+
+{% block standalone_css %}layouts_fluid-breakout{% endblock %}
+
+{% block style %}
+
+{% endblock %}
+
+{% block content %}
+
+
+
+ .col-1
+
+
+ .col-1
+
+
+ .col-1
+
+
+ .col-1
+
+
+ .col-1
+
+
+ .col-1
+
+
+ .col-1
+
+
+ .col-1
+
+
+ .col-1
+
+
+ .col-1
+
+
+ .col-1
+
+
+ .col-1
+
+
+
+
+
+
+
+ {% for i in range(14) %}
+ {% with index = i + 1 %}
+
item #{{index}}
+ {% endwith %}
+ {% endfor %}
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/layouts/fluid-breakout/fluid-breakout-no-aside.html b/vanilla/templates/docs/examples/layouts/fluid-breakout/fluid-breakout-no-aside.html
new file mode 100644
index 0000000..32b0114
--- /dev/null
+++ b/vanilla/templates/docs/examples/layouts/fluid-breakout/fluid-breakout-no-aside.html
@@ -0,0 +1,23 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Fluid breakout - no aside{% endblock %}
+
+{% block standalone_css %}layouts_fluid-breakout{% endblock %}
+
+{% block style %}
+
+{% endblock %}
+
+{% block content %}
+
+
+
+ {% for i in range(14) %}
+ {% with index = i + 1 %}
+
item #{{index}}
+ {% endwith %}
+ {% endfor %}
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/layouts/fluid-breakout/fluid-breakout-right-aside.html b/vanilla/templates/docs/examples/layouts/fluid-breakout/fluid-breakout-right-aside.html
new file mode 100644
index 0000000..1addade
--- /dev/null
+++ b/vanilla/templates/docs/examples/layouts/fluid-breakout/fluid-breakout-right-aside.html
@@ -0,0 +1,27 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Fluid breakout - aside on the right{% endblock %}
+
+{% block standalone_css %}layouts_fluid-breakout{% endblock %}
+{% block style %}
+
+{% endblock %}
+
+{% block content %}
+
+
+
+ {% for i in range(14) %}
+ {% with index = i + 1 %}
+
item #{{index}}
+ {% endwith %}
+ {% endfor %}
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/layouts/fluid-breakout/visualize-grid.css b/vanilla/templates/docs/examples/layouts/fluid-breakout/visualize-grid.css
new file mode 100644
index 0000000..9f30a7a
--- /dev/null
+++ b/vanilla/templates/docs/examples/layouts/fluid-breakout/visualize-grid.css
@@ -0,0 +1,5 @@
+.viz-grid-item,
+.viz-aside {
+ background-color: rgba(199, 22, 43, 0.1);
+ margin-bottom: 1rem;
+}
diff --git a/vanilla/templates/docs/examples/layouts/full-width/default.html b/vanilla/templates/docs/examples/layouts/full-width/default.html
new file mode 100644
index 0000000..3e42806
--- /dev/null
+++ b/vanilla/templates/docs/examples/layouts/full-width/default.html
@@ -0,0 +1,226 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Full width (deprecated){% endblock %}
+
+{% block style %}
+
+{% endblock %}
+
+{% block content %}
+
Jump to main content
+
+
+
+
+
+
+
+
+
+
+
+
+
Install
+
+
You can use Vanilla in your projects in a few different ways. See Building with Vanilla and Customising Vanilla for more in-depth setup instructions.
+
+
The recommended way to get Vanilla is with yarn :
+
yarn add vanilla-framework
+
Or npm :
+
npm install vanilla-framework
+
This will pull down the latest version into your local node_modules folder and save it into your project's dependencies in package.json.
+
+
You can now reference Vanilla from your main Sass file - note that the path to node_modules might be different for your project:
+
// Import the framework
+ @import 'node_modules/vanilla-framework';
+
+ // Include all of Vanilla Framework
+ @include vanilla;
+
+
For information on overriding settings and importing only parts of Vanilla, see Customising Vanilla .
+
+
+
+
+
+
+
+
+
+
+
+
Hotlink
+
+
You can add Vanilla directly to your markup:
+
<link rel="stylesheet" href="https://assets.ubuntu.com/v1/vanilla-framework-version-3.8.1.min.css" />
+
+
+
+
+
+
+
+
+
+
+
Local development
+
+
To make improvements to Vanilla itself, please follow the instructions on the project’s README.md .
+
+
+
+
+
+
+
+{% endblock %}
+
diff --git a/vanilla/templates/docs/examples/layouts/full-width/no-sidebar.html b/vanilla/templates/docs/examples/layouts/full-width/no-sidebar.html
new file mode 100644
index 0000000..2e0a308
--- /dev/null
+++ b/vanilla/templates/docs/examples/layouts/full-width/no-sidebar.html
@@ -0,0 +1,165 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Full width / No sidebar (deprecated){% endblock %}
+
+{% block style %}
+
+{% endblock %}
+
+{% block content %}
+
Jump to main content
+
+
+
+
+
+
+
+
+
+
+
+
Install
+
+
You can use Vanilla in your projects in a few different ways. See Building with Vanilla and Customising Vanilla for more in-depth setup instructions.
+
+
The recommended way to get Vanilla is with yarn :
+
yarn add vanilla-framework
+
Or npm :
+
npm install vanilla-framework
+
This will pull down the latest version into your local node_modules folder and save it into your project's dependencies in package.json.
+
+
You can now reference Vanilla from your main Sass file - note that the path to node_modules might be different for your project:
+
// Import the framework
+ @import 'node_modules/vanilla-framework';
+
+ // Include all of Vanilla Framework
+ @include vanilla;
+
+
For information on overriding settings and importing only parts of Vanilla, see Customising Vanilla .
+
+
+
+
+
+
+
+
+
+
+
+
Hotlink
+
+
You can add Vanilla directly to your markup:
+
<link rel="stylesheet" href="https://assets.ubuntu.com/v1/vanilla-framework-version-3.8.1.min.css" />
+
+
+
+
+
+
+
+
+
+
+
Local development
+
+
To make improvements to Vanilla itself, please follow the instructions on the project’s README.md .
+
+
+
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/layouts/full-width/structure.html b/vanilla/templates/docs/examples/layouts/full-width/structure.html
new file mode 100644
index 0000000..fcb0682
--- /dev/null
+++ b/vanilla/templates/docs/examples/layouts/full-width/structure.html
@@ -0,0 +1,31 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Full width / Default{% endblock %}
+
+{% block style %}
+
+{% endblock %}
+
+{% block content %}
+
+
+
+
+{% endblock %}
+
diff --git a/vanilla/templates/docs/examples/layouts/global-nav.css b/vanilla/templates/docs/examples/layouts/global-nav.css
new file mode 100644
index 0000000..8bab898
--- /dev/null
+++ b/vanilla/templates/docs/examples/layouts/global-nav.css
@@ -0,0 +1,865 @@
+/*
+FOR DEMO PURPOSES ONLY:
+this is a mockup of global nav for testing,
+based on global-nav@2.4.1
+*/
+
+.global-nav {
+ color: #f7f7f7;
+ display: -webkit-box;
+ display: flex;
+ flex-shrink: 0;
+ font-family:
+ Ubuntu,
+ -apple-system,
+ Segoe UI,
+ Roboto,
+ Oxygen,
+ Cantarell,
+ Fira Sans,
+ Droid Sans,
+ Helvetica Neue,
+ sans-serif;
+ font-size: 0.875rem;
+ font-weight: 300;
+ line-height: 1.5rem;
+ z-index: 100;
+}
+.global-nav h1 {
+ max-width: 40em;
+ font-style: normal;
+ font-weight: 100;
+ margin-top: 0;
+}
+@media (max-width: 772px) {
+ .global-nav h1 {
+ font-size: 2.2281872349rem;
+ line-height: 3rem;
+ margin-bottom: 0.835rem;
+ padding-top: 0.166rem;
+ }
+}
+@media (min-width: 772px) {
+ .global-nav h1 {
+ font-size: 2.910285368rem;
+ line-height: 3.5rem;
+ margin-bottom: 0.8rem;
+ padding-top: 0.201rem;
+ }
+}
+@media (min-width: 1681px) {
+ .global-nav h1 {
+ margin-bottom: 0.85rem;
+ padding-top: 0.151rem;
+ }
+}
+.global-nav h2 {
+ max-width: 40em;
+ font-style: normal;
+ font-weight: 100;
+ margin-top: 0;
+}
+@media (max-width: 772px) {
+ .global-nav h2 {
+ font-size: 1.83274rem;
+ line-height: 2.5rem;
+ margin-bottom: 0.9rem;
+ padding-top: 0.101rem;
+ }
+}
+@media (min-width: 772px) {
+ .global-nav h2 {
+ font-size: 2.2281872349rem;
+ line-height: 3rem;
+ margin-bottom: 0.8rem;
+ padding-top: 0.201rem;
+ }
+}
+.global-nav h3 {
+ max-width: 40em;
+ font-style: normal;
+ font-weight: 300;
+ margin-top: 0;
+}
+@media (max-width: 772px) {
+ .global-nav h3 {
+ font-size: 1.4927113703rem;
+ line-height: 2rem;
+ margin-bottom: 0.5rem;
+ padding-top: 0.5rem;
+ }
+}
+@media (min-width: 772px) {
+ .global-nav h3 {
+ font-size: 1.7059558517rem;
+ line-height: 2.5rem;
+ margin-bottom: 0.9rem;
+ padding-top: 0.101rem;
+ }
+}
+.global-nav .global-nav__matrix-title,
+.global-nav h4 {
+ max-width: 40em;
+ font-style: normal;
+ font-weight: 300;
+ margin-top: 0;
+}
+@media (max-width: 772px) {
+ .global-nav .global-nav__matrix-title,
+ .global-nav h4 {
+ font-size: 1.22176rem;
+ line-height: 1.5rem;
+ margin-bottom: 0.7rem;
+ padding-top: 0.301rem;
+ }
+}
+@media (min-width: 772px) {
+ .global-nav .global-nav__matrix-title,
+ .global-nav h4 {
+ font-size: 1.306122449rem;
+ line-height: 2rem;
+ margin-bottom: 0.95rem;
+ padding-top: 0.051rem;
+ }
+}
+@media (min-width: 1681px) {
+ .global-nav .global-nav__matrix-title,
+ .global-nav h4 {
+ margin-bottom: 1rem;
+ padding-top: 0.001rem;
+ }
+}
+.global-nav .global-nav__flex-container .global-nav__matrix-title,
+.global-nav h5 {
+ max-width: 40em;
+ font-size: 1rem;
+ font-style: normal;
+ font-weight: 500;
+ line-height: 1.5rem;
+ margin-bottom: 1.1rem;
+ margin-top: 0;
+ padding-top: 0.401rem;
+}
+.global-nav h6 {
+ max-width: 40em;
+ font-size: 1rem;
+ font-style: italic;
+ font-weight: 300;
+ line-height: 1.5rem;
+ margin-bottom: 1.1rem;
+ margin-top: 0;
+ padding-top: 0.338rem;
+}
+@media (min-width: 1681px) {
+ .global-nav h6 {
+ padding-top: 0.345rem;
+ }
+}
+.global-nav .p-text--default,
+.global-nav cite,
+.global-nav p {
+ line-height: 1.5rem;
+ margin-top: 0;
+ padding-top: 0.4005rem;
+}
+.global-nav .p-text--default,
+.global-nav cite {
+ margin-bottom: 0.1rem;
+}
+.global-nav p {
+ margin-bottom: 1.1rem;
+}
+p:not([class*='p-heading--']):not([class*='p-muted-heading']) + .global-nav p:not([class*='p-heading--']):not([class*='p-muted-heading']) + .global-nav p {
+ margin-top: -0.5rem;
+}
+.global-nav .global-nav__muted-heading,
+.global-nav .p-text--small,
+.global-nav small {
+ font-size: 0.875rem;
+ line-height: 1rem;
+ margin-bottom: 0.8rem;
+ padding-top: 0.2005rem;
+}
+@media (min-width: 1681px) {
+ .global-nav .global-nav__muted-heading,
+ .global-nav .p-text--small,
+ .global-nav small {
+ padding-top: 0.2006rem;
+ }
+}
+.global-nav .p-text--x-small {
+ font-size: 0.765625rem;
+ line-height: 1rem;
+ margin-bottom: 0.8rem;
+ padding-top: 0.2505rem;
+}
+@media (min-width: 1681px) {
+ .global-nav .p-text--x-small {
+ padding-top: 0.2006rem;
+ }
+}
+.global-nav .global-nav__muted-heading {
+ color: #666;
+ margin-bottom: 0.8rem;
+ margin-top: 0;
+ padding-top: 0.2rem;
+ text-transform: uppercase;
+}
+.global-nav strong {
+ font-weight: 400;
+}
+.global-nav p:not([class*='p-heading--']):not([class*='p-muted-heading']) + .p-heading--1,
+.global-nav p:not([class*='p-heading--']):not([class*='p-muted-heading']) + .p-heading--one,
+.global-nav p:not([class*='p-heading--']):not([class*='p-muted-heading']) + h1 {
+ padding-top: 1.7rem;
+}
+@media (max-width: 772px) {
+ .global-nav p:not([class*='p-heading--']):not([class*='p-muted-heading']) + .p-heading--1,
+ .global-nav p:not([class*='p-heading--']):not([class*='p-muted-heading']) + .p-heading--one,
+ .global-nav p:not([class*='p-heading--']):not([class*='p-muted-heading']) + h1 {
+ padding-top: 1.665rem;
+ }
+}
+.global-nav p:not([class*='p-heading--']):not([class*='p-muted-heading']) + .p-heading--2,
+.global-nav p:not([class*='p-heading--']):not([class*='p-muted-heading']) + .p-heading--two,
+.global-nav p:not([class*='p-heading--']):not([class*='p-muted-heading']) + h2 {
+ padding-top: 1.7rem;
+}
+@media (max-width: 772px) {
+ .global-nav p:not([class*='p-heading--']):not([class*='p-muted-heading']) + .p-heading--2,
+ .global-nav p:not([class*='p-heading--']):not([class*='p-muted-heading']) + .p-heading--two,
+ .global-nav p:not([class*='p-heading--']):not([class*='p-muted-heading']) + h2 {
+ padding-top: 1.6rem;
+ }
+}
+@media (max-width: 772px) {
+ .global-nav p:not([class*='p-heading--']):not([class*='p-muted-heading']) + .p-heading--3,
+ .global-nav p:not([class*='p-heading--']):not([class*='p-muted-heading']) + .p-heading--three,
+ .global-nav p:not([class*='p-heading--']):not([class*='p-muted-heading']) + h3 {
+ padding-top: 2rem;
+ }
+}
+@media (min-width: 772px) {
+ .global-nav p:not([class*='p-heading--']):not([class*='p-muted-heading']) + .p-heading--3,
+ .global-nav p:not([class*='p-heading--']):not([class*='p-muted-heading']) + .p-heading--three,
+ .global-nav p:not([class*='p-heading--']):not([class*='p-muted-heading']) + h3 {
+ padding-top: 1.6rem;
+ }
+}
+@media (max-width: 772px) {
+ .global-nav p:not([class*='p-heading--']):not([class*='p-muted-heading']) + .p-heading--4,
+ .global-nav p:not([class*='p-heading--']):not([class*='p-muted-heading']) + .p-heading--four,
+ .global-nav p:not([class*='p-heading--']):not([class*='p-muted-heading']) + h4 {
+ padding-top: 1.8rem;
+ }
+}
+@media (min-width: 772px) {
+ .global-nav p:not([class*='p-heading--']):not([class*='p-muted-heading']) + .p-heading--4,
+ .global-nav p:not([class*='p-heading--']):not([class*='p-muted-heading']) + .p-heading--four,
+ .global-nav p:not([class*='p-heading--']):not([class*='p-muted-heading']) + h4 {
+ padding-top: 1.55rem;
+ }
+}
+.global-nav p:not([class*='p-heading--']):not([class*='p-muted-heading']) + .p-heading--5,
+.global-nav p:not([class*='p-heading--']):not([class*='p-muted-heading']) + .p-heading--6,
+.global-nav p:not([class*='p-heading--']):not([class*='p-muted-heading']) + .p-heading--five,
+.global-nav p:not([class*='p-heading--']):not([class*='p-muted-heading']) + .p-heading--six,
+.global-nav p:not([class*='p-heading--']):not([class*='p-muted-heading']) + h5,
+.global-nav p:not([class*='p-heading--']):not([class*='p-muted-heading']) + h6 {
+ padding-top: 1.9rem;
+}
+.global-nav p:not([class*='p-heading--']):not([class*='p-muted-heading']) + .p-muted-heading {
+ padding-top: 1.7rem;
+}
+.global-nav .u-hide-text {
+ overflow: hidden;
+ text-indent: calc(100% + 10rem);
+ white-space: nowrap;
+}
+.global-nav .u-no-margin--bottom:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(p):not(small):not([class*='p-heading']) {
+ margin-bottom: 0 !important;
+}
+@media (max-width: 772px) {
+ .global-nav h1.u-no-margin--bottom {
+ margin-bottom: -0.165rem !important;
+ }
+}
+@media (min-width: 772px) {
+ .global-nav h1.u-no-margin--bottom {
+ margin-bottom: -0.2rem !important;
+ }
+}
+@media (min-width: 1681px) {
+ .global-nav h1.u-no-margin--bottom {
+ margin-bottom: -0.15rem !important;
+ }
+}
+@media (max-width: 772px) {
+ .global-nav h2.u-no-margin--bottom {
+ margin-bottom: -0.1rem !important;
+ }
+}
+@media (min-width: 772px) {
+ .global-nav h2.u-no-margin--bottom {
+ margin-bottom: -0.2rem !important;
+ }
+}
+@media (max-width: 772px) {
+ .global-nav h3.u-no-margin--bottom {
+ margin-bottom: 0 !important;
+ }
+}
+@media (min-width: 772px) {
+ .global-nav h3.u-no-margin--bottom {
+ margin-bottom: -0.1rem !important;
+ }
+}
+@media (max-width: 772px) {
+ .global-nav .u-no-margin--bottom.global-nav__matrix-title,
+ .global-nav h4.u-no-margin--bottom {
+ margin-bottom: 0.2rem !important;
+ }
+}
+@media (min-width: 772px) {
+ .global-nav .u-no-margin--bottom.global-nav__matrix-title,
+ .global-nav h4.u-no-margin--bottom {
+ margin-bottom: -0.05rem !important;
+ }
+}
+@media (min-width: 1681px) {
+ .global-nav .u-no-margin--bottom.global-nav__matrix-title,
+ .global-nav h4.u-no-margin--bottom {
+ margin-bottom: 0 !important;
+ }
+}
+.global-nav .global-nav__flex-container .u-no-margin--bottom.global-nav__matrix-title,
+.global-nav h5.u-no-margin--bottom,
+.global-nav h6.u-no-margin--bottom,
+.global-nav p.u-no-margin--bottom {
+ margin-bottom: 0.1rem !important;
+}
+.global-nav .u-no-margin--bottom.global-nav__muted-heading,
+.global-nav .u-no-margin--bottom.p-text--small,
+.global-nav .u-no-margin--bottom.p-text--x-small,
+.global-nav small.u-no-margin--bottom {
+ margin-bottom: -0.2rem !important;
+}
+@font-face {
+ .global-nav {
+ font-display: auto;
+ font-family: Ubuntu;
+ font-style: normal;
+ font-weight: 300;
+ src:
+ url(https://assets.ubuntu.com/v1/e8c07df6-Ubuntu-L_W.woff2) format('woff2'),
+ url(https://assets.ubuntu.com/v1/8619add2-Ubuntu-L_W.woff) format('woff');
+ font-weight: 400;
+ src:
+ url(https://assets.ubuntu.com/v1/fff37993-Ubuntu-R_W.woff2) format('woff2'),
+ url(https://assets.ubuntu.com/v1/7af50859-Ubuntu-R_W.woff) format('woff');
+ font-style: italic;
+ src:
+ url(https://assets.ubuntu.com/v1/f8097dea-Ubuntu-LI_W.woff2) format('woff2'),
+ url(https://assets.ubuntu.com/v1/8be89d02-Ubuntu-LI_W.woff) format('woff');
+ src:
+ url(https://assets.ubuntu.com/v1/fca66073-ubuntu-ri-webfont.woff2) format('woff2'),
+ url(https://assets.ubuntu.com/v1/f0898c72-ubuntu-ri-webfont.woff) format('woff');
+ font-weight: 100;
+ src:
+ url(https://assets.ubuntu.com/v1/7f100985-Ubuntu-Th_W.woff2) format('woff2'),
+ url(https://assets.ubuntu.com/v1/502cc3a1-Ubuntu-Th_W.woff) format('woff');
+ font-family: Ubuntu Mono;
+ src:
+ url(https://assets.ubuntu.com/v1/fdd692b9-UbuntuMono-R_W.woff2) format('woff2'),
+ url(https://assets.ubuntu.com/v1/85edb898-UbuntuMono-R_W.woff) format('woff');
+ }
+}
+.global-nav .measure--p {
+ max-width: 40em;
+}
+.global-nav html {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ color: #111;
+ font-family:
+ Ubuntu,
+ -apple-system,
+ Segoe UI,
+ Roboto,
+ Oxygen,
+ Cantarell,
+ Fira Sans,
+ Droid Sans,
+ Helvetica Neue,
+ sans-serif;
+ font-smoothing: subpixel-antialiased;
+ font-weight: 300;
+ line-height: 1.5rem;
+}
+@media screen and (max-width: 1681px) {
+ .global-nav html {
+ font-size: 1rem;
+ }
+}
+@media screen and (min-width: 1681px) {
+ .global-nav html {
+ font-size: 1.125rem;
+ line-height: 1.6875rem;
+ }
+}
+.global-nav p {
+ max-width: 40em;
+}
+.global-nav .p-text--small.dense,
+.global-nav small.dense {
+ margin-bottom: 1.3rem;
+}
+.global-nav p:not([class*='p-heading--']):not([class*='p-muted-heading']):empty {
+ line-height: 0;
+ margin: 0;
+ padding: 0;
+}
+.global-nav sub,
+.global-nav sup {
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
+.global-nav abbr[title] {
+ border-bottom: 0.1em dotted;
+ cursor: help;
+ text-decoration: none;
+}
+.global-nav .u-hide {
+ display: none !important;
+}
+@media screen and (max-width: 772px) {
+ .global-nav .u-hide--small {
+ display: none !important;
+ }
+}
+@media (min-width: 772px) and (max-width: 1036px) {
+ .global-nav .u-hide--medium {
+ display: none !important;
+ }
+}
+@media screen and (min-width: 1036px) {
+ .global-nav .u-hide--large {
+ display: none !important;
+ }
+}
+.global-nav .u-no-margin {
+ margin: 0 !important;
+}
+.global-nav .u-no-margin--top {
+ margin-top: 0 !important;
+}
+.global-nav .u-no-margin--right {
+ margin-right: 0 !important;
+}
+.global-nav .u-no-margin--left {
+ margin-left: 0 !important;
+}
+.global-nav .u-table-cell-padding-overlap {
+ margin-bottom: -0.5rem !important;
+ margin-top: calc(-0.5rem - 1px) !important;
+}
+.global-nav .u-no-padding {
+ padding: 0 !important;
+}
+.global-nav .u-no-padding--top {
+ padding-top: 0 !important;
+}
+.global-nav .u-no-padding--right {
+ padding-right: 0 !important;
+}
+.global-nav .u-no-padding--bottom {
+ padding-bottom: 0 !important;
+}
+.global-nav .u-no-padding--left {
+ padding-left: 0 !important;
+}
+.global-nav * {
+ box-sizing: border-box;
+}
+.global-nav .global-nav__header {
+ background-color: #262626;
+ width: 100%;
+ z-index: 99;
+}
+.global-nav .global-nav__header-row {
+ display: -webkit-box;
+ display: flex;
+ width: 100%;
+}
+.global-nav .global-nav__header-logo {
+ margin: 0;
+}
+.global-nav .global-nav__header-logo-anchor {
+ display: inline-block;
+ line-height: 0;
+ padding: 0.6875rem 1rem 0.6875rem 0;
+}
+@media (max-width: 875px) {
+ .global-nav .global-nav__header-logo-anchor {
+ display: block;
+ padding-left: 0;
+ padding-right: 1.5rem;
+ }
+}
+.global-nav .global-nav__header-list {
+ list-style: none;
+ margin: 0 0 0 auto;
+ padding: 0;
+}
+.global-nav .global-nav__header-link {
+ display: inline-block;
+ margin: 0;
+ padding: 0;
+ position: relative;
+}
+.global-nav .global-nav__header-link.is-selected > .global-nav__header-link-anchor:after {
+ -webkit-transform: rotate(180deg);
+ transform: rotate(180deg);
+}
+.global-nav .global-nav__header-link-anchor {
+ color: #f7f7f7;
+ display: inline-block;
+ line-height: 1.25rem;
+ margin-bottom: 0;
+ padding: 0.375rem 0.5rem;
+ text-decoration: none;
+}
+@media (max-width: 875px) {
+ .global-nav .global-nav__header-link-anchor {
+ padding-left: 0;
+ }
+}
+.global-nav .has-dropdown .global-nav__header-link-anchor {
+ padding: 0.375rem 1.625rem 0.375rem 0.5rem;
+}
+.global-nav .has-dropdown .global-nav__header-link-anchor:after {
+ -webkit-transition-duration: 0.1s;
+ transition-duration: 0.1s;
+ -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+ transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23f7f7f7' d='M1.86 5l6.157 3.84L14.139 5 15 6.357l-6.983 5.03L1 6.358z' fill-rule='evenodd'/%3E%3C/svg%3E");
+ background-size: 100%;
+ content: '';
+ height: 0.5rem;
+ right: 0.5rem;
+ top: 0.75rem;
+ width: 0.625rem;
+}
+.global-nav .global-nav__dropdown,
+.global-nav .has-dropdown .global-nav__header-link-anchor:after {
+ -webkit-transition-property: -webkit-transform;
+ transition-property: -webkit-transform;
+ transition-property: transform;
+ transition-property:
+ transform,
+ -webkit-transform;
+ position: absolute;
+}
+.global-nav .global-nav__dropdown {
+ -webkit-transition-duration: 0.333s;
+ transition-duration: 0.333s;
+ -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+ transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+ background-color: #262626;
+ margin: 0;
+ overflow: hidden;
+ top: 2rem;
+ -webkit-transform: translateY(-100%);
+ transform: translateY(-100%);
+ width: 100%;
+ z-index: 98;
+}
+.global-nav .global-nav__dropdown.show-content {
+ height: auto;
+ -webkit-transform: translateY(0);
+ transform: translateY(0);
+}
+.global-nav .global-nav__dropdown-content {
+ margin: 0 auto;
+ padding-top: 0;
+}
+@media (max-width: 875px) {
+ .global-nav .global-nav__dropdown-content {
+ padding: 0.5rem 0;
+ }
+}
+.global-nav .global-nav__row {
+ margin: 0 auto;
+ padding: 0 1.5rem;
+}
+@media (max-width: 875px) {
+ .global-nav .global-nav__row {
+ padding: 0 1rem;
+ }
+}
+.global-nav .global-nav__row.is-bordered:after {
+ background-color: #666;
+ content: '';
+ display: block;
+ height: 1px;
+ margin-top: 2rem;
+ width: 100%;
+}
+.global-nav .global-nav__strip {
+ margin: 0;
+ padding: 2rem 0 0;
+}
+@media (max-width: 875px) {
+ .global-nav .global-nav__strip {
+ padding-top: 1rem;
+ }
+}
+.global-nav .global-nav__mobile-strip {
+ display: none;
+}
+@media (max-width: 875px) {
+ .global-nav .global-nav__mobile-strip {
+ display: inherit;
+ }
+}
+.global-nav .global-nav__mobile-strip .global-nav__split-list {
+ display: none;
+}
+.global-nav .global-nav__flex-container {
+ display: -webkit-box;
+ display: flex;
+}
+.global-nav .global-nav__flex-container .global-nav__matrix-item {
+ border: 0;
+ padding: 0 0 2rem;
+}
+.global-nav .global-nav__flex-container .global-nav__matrix-title {
+ font-weight: 400;
+}
+.global-nav .global-nav__others-col {
+ margin-top: 0;
+ width: 74.17808%;
+}
+.global-nav .global-nav__resources-col {
+ margin-left: 3.2877%;
+ margin-top: 0;
+ width: 22.53423%;
+}
+.global-nav .global-nav__expanding-row {
+ border-top: 1px solid #666;
+ cursor: pointer;
+ font-size: 0.8175rem;
+ line-height: 1.5;
+ margin: 0;
+ max-width: inherit;
+ padding: 1rem 0;
+ position: relative;
+}
+.global-nav .global-nav__expanding-row:after {
+ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23f7f7f7' d='M1.86 5l6.157 3.84L14.139 5 15 6.357l-6.983 5.03L1 6.358z' fill-rule='evenodd'/%3E%3C/svg%3E");
+ background-repeat: no-repeat;
+ background-size: 0.8175rem;
+ content: '';
+ height: 0.8rem;
+ position: absolute;
+ right: 0.5rem;
+ top: 1.2rem;
+ width: 0.8175rem;
+}
+.global-nav .global-nav__expanding-row.is-active:after {
+ -webkit-transform: rotate(180deg);
+ transform: rotate(180deg);
+}
+.global-nav .global-nav__expanding-row.is-active + .global-nav__split-list {
+ display: block;
+}
+.global-nav .global-nav__matrix {
+ display: -webkit-box;
+ display: flex;
+ flex-wrap: wrap;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+@media (max-width: 875px) {
+ .global-nav .global-nav__matrix {
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ flex-direction: column;
+ }
+}
+.global-nav .global-nav__matrix-item {
+ border-top: 1px solid #666;
+ -webkit-box-flex: 1;
+ flex: 1 1 auto;
+ flex-wrap: wrap;
+ margin: 0;
+ padding: 1rem;
+ width: 33.33%;
+}
+.global-nav .global-nav__matrix-item:nth-child(3n + 1) {
+ padding-left: 0;
+}
+.global-nav .global-nav__matrix-item:nth-child(3n + 3) {
+ border-right: 0;
+ padding-right: 0;
+}
+@media (min-width: 875px) {
+ .global-nav .global-nav__matrix-item:first-child,
+ .global-nav .global-nav__matrix-item:nth-child(2),
+ .global-nav .global-nav__matrix-item:nth-child(3) {
+ border-top: 0;
+ }
+}
+@media (max-width: 875px) {
+ .global-nav .global-nav__matrix-item {
+ padding: 1rem 0;
+ width: 100%;
+ }
+}
+.global-nav .global-nav__matrix-image {
+ display: inline-block;
+ height: auto;
+ margin-bottom: 1rem;
+ margin-right: 0.75rem;
+ max-height: 2rem;
+ max-width: 2rem;
+ position: relative;
+ top: 0.1rem;
+}
+@media (max-width: 875px) {
+ .global-nav .global-nav__matrix-image {
+ display: none;
+ }
+}
+.global-nav .global-nav__matrix-content {
+ display: -webkit-box;
+ display: flex;
+ -webkit-box-flex: 1;
+ flex: 1 1 auto;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ flex-direction: column;
+ margin: 0;
+ padding-right: 1rem;
+ width: 100%;
+}
+.global-nav .global-nav__matrix-title {
+ line-height: 2rem;
+}
+@media (max-width: 875px) {
+ .global-nav .global-nav__matrix-title {
+ margin-bottom: 0;
+ }
+}
+.global-nav .global-nav__matrix-desc {
+ margin: -1rem 0 0.1rem 2.75rem;
+}
+@media (max-width: 875px) {
+ .global-nav .global-nav__matrix-desc {
+ display: none;
+ }
+}
+.global-nav .global-nav__link {
+ color: #f7f7f7;
+ display: -webkit-inline-box;
+ display: inline-flex;
+ text-decoration: none;
+}
+.global-nav .global-nav__link:hover {
+ text-decoration: underline;
+}
+.global-nav .global-nav__split-list {
+ -webkit-column-gap: 2rem;
+ -moz-column-gap: 2rem;
+ column-gap: 2rem;
+ -webkit-columns: 2;
+ -moz-columns: 2;
+ column-count: 2;
+ list-style: none;
+ margin: 0 0 1.5rem;
+ padding: 0;
+}
+.global-nav .global-nav__split-list .global-nav__list-item {
+ display: inline-block;
+ margin: 0;
+ padding: 0.25rem 0;
+ width: 100%;
+}
+.global-nav .global-nav__inline-list {
+ margin: 0.5rem 0 0;
+ padding: 0 0 1rem 2.75rem;
+}
+@media (max-width: 875px) {
+ .global-nav .global-nav__inline-list {
+ margin-top: 0;
+ padding: 0;
+ }
+}
+.global-nav .global-nav__inline-list .global-nav__list-item {
+ display: inline;
+ font-weight: 400;
+ list-style: none;
+ margin-right: 1.25rem;
+}
+.global-nav .global-nav__muted-heading {
+ color: #f7f7f7;
+ font-weight: 400;
+}
+@media (max-width: 875px) {
+ .global-nav .global-nav__muted-heading {
+ font-size: 0.8175rem;
+ }
+}
+.global-nav .global-nav__overlay {
+ -webkit-transition-duration: 0.5s;
+ transition-duration: 0.5s;
+ -webkit-transition-property: opacity;
+ transition-property: opacity;
+ -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+ transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+ background-color: rgba(17, 17, 17, 0.4);
+ height: 100%;
+ left: 0;
+ margin: 0;
+ opacity: 0;
+ pointer-events: none;
+ position: fixed;
+ width: 100%;
+ z-index: 97;
+}
+@media (max-width: 875px) {
+ .global-nav .global-nav__overlay {
+ display: none;
+ }
+}
+.global-nav .global-nav__overlay.show-overlay {
+ opacity: 1;
+ pointer-events: all;
+}
+@media (max-width: 875px) {
+ body {
+ padding-bottom: 3rem;
+ position: relative;
+ }
+ .u-hide--mobile {
+ display: none;
+ }
+}
+.skip-content a {
+ color: #007aa6;
+ display: block;
+ left: -999px;
+ position: absolute;
+ top: -999px;
+}
+.skip-content a:focus {
+ background: #fff;
+ border: 1px solid #007aa6;
+ left: 0;
+ padding: 3px;
+ position: relative;
+ top: 0;
+ z-index: 999999;
+}
diff --git a/vanilla/templates/docs/examples/layouts/sticky-footer.html b/vanilla/templates/docs/examples/layouts/sticky-footer.html
new file mode 100644
index 0000000..fa8ac02
--- /dev/null
+++ b/vanilla/templates/docs/examples/layouts/sticky-footer.html
@@ -0,0 +1,45 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Sticky footer{% endblock %}
+
+{% block style %}
+
+{% endblock %}
+
+{% block content %}
+
+
+
+
+
Some short page content.
+
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/accordion/_script.js b/vanilla/templates/docs/examples/patterns/accordion/_script.js
new file mode 100644
index 0000000..595ab84
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/accordion/_script.js
@@ -0,0 +1,54 @@
+/**
+ Toggles the necessary aria- attributes' values on the accordion panels
+ and handles to show or hide them.
+ @param {HTMLElement} element The tab that acts as the handles.
+ @param {Boolean} show Whether to show or hide the accordion panel.
+*/
+function toggleExpanded(element, show) {
+ var target = document.getElementById(element.getAttribute('aria-controls'));
+
+ if (target) {
+ element.setAttribute('aria-expanded', show);
+ target.setAttribute('aria-hidden', !show);
+ }
+}
+
+/**
+ Attaches event listeners for the accordion open and close click events.
+ @param {HTMLElement} accordionContainer The accordion container element.
+*/
+function setupAccordion(accordionContainer) {
+ // Finds any open panels within the container and closes them.
+ function closeAllPanels() {
+ var openPanels = accordionContainer.querySelectorAll('[aria-expanded=true]');
+
+ for (var i = 0, l = openPanels.length; i < l; i++) {
+ toggleExpanded(openPanels[i], false);
+ }
+ }
+
+ // Set up an event listener on the container so that panels can be added
+ // and removed and events do not need to be managed separately.
+ accordionContainer.addEventListener('click', function (event) {
+ var target = event.target;
+
+ if (target.closest) {
+ target = target.closest('[class*="p-accordion__tab"]');
+ }
+
+ if (target) {
+ var isTargetOpen = target.getAttribute('aria-expanded') === 'true';
+ closeAllPanels();
+
+ // Toggle visibility of the target panel.
+ toggleExpanded(target, !isTargetOpen);
+ }
+ });
+}
+
+// Setup all accordions on the page.
+var accordions = document.querySelectorAll('.p-accordion');
+
+for (var i = 0, l = accordions.length; i < l; i++) {
+ setupAccordion(accordions[i]);
+}
diff --git a/vanilla/templates/docs/examples/patterns/accordion/default.html b/vanilla/templates/docs/examples/patterns/accordion/default.html
new file mode 100644
index 0000000..db196c1
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/accordion/default.html
@@ -0,0 +1,39 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Accordion{% endblock %}
+
+{% block standalone_css %}patterns_accordion{% endblock %}
+
+{% block content %}
+
+
+
+
+ What is MAAS?
+
+
+ MAAS expands to “Metal As A Service” – it converts bare-metal servers into cloud instances of virtual machines. There is no need to manage individual units. You can quickly provision or destroy machines, as if they were instances hosted in a public cloud like Amazon AWS, Google GCE, or Microsoft Azure.
+
+
+
+
+ What MAAS offers
+
+
+ MAAS can manage a large number of physical machines by merging them into user-defined resource pools. MAAS automatically provisions participating machines and makes them available for use. You can return unused machines to the assigned pool at any time.
+
+
+
+
+ How MAAS works
+
+
+ When you add a new machine to MAAS, or elect to add a machine that MAAS has enlisted, MAAS commissions it for service and adds it to the pool. At that point, the machine is ready for use. MAAS keeps things simple, marking machines as “New,” “Commissioning,” “Ready,” and so on.
+
+
+
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/accordion/headings.html b/vanilla/templates/docs/examples/patterns/accordion/headings.html
new file mode 100644
index 0000000..e4ebbb5
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/accordion/headings.html
@@ -0,0 +1,47 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Accordion / Headings{% endblock %}
+
+{% block standalone_css %}patterns_accordion{% endblock %}
+
+{% block content %}
+
+
+
+
+ What is MAAS?
+
+
+ MAAS expands to “Metal As A Service” – it converts bare-metal servers into cloud instances of virtual machines. There is no need to manage individual units. You can quickly provision or destroy machines, as if they were instances hosted in a public cloud like Amazon AWS, Google GCE, or Microsoft Azure.
+
+
+
+
+ What MAAS offers
+
+
+ MAAS can manage a large number of physical machines by merging them into user-defined resource pools. MAAS automatically provisions participating machines and makes them available for use. You can return unused machines to the assigned pool at any time.
+
+
+
+
+ How MAAS works
+
+
+ When you add a new machine to MAAS, or elect to add a machine that MAAS has enlisted, MAAS commissions it for service and adds it to the pool. At that point, the machine is ready for use. MAAS keeps things simple, marking machines as “New,” “Commissioning,” “Ready,” and so on.
+
+
+
+
+ Colocation of key components
+
+
+ MAAS relies on two key components: the region controller and the rack controller. The region controller handles operator requests; the rack controller provides high-bandwidth services to multiple racks.
+
+
+
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/accordion/tick-elements.html b/vanilla/templates/docs/examples/patterns/accordion/tick-elements.html
new file mode 100644
index 0000000..425bb3e
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/accordion/tick-elements.html
@@ -0,0 +1,53 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Accordion / Tick elements{% endblock %}
+
+{% block standalone_css %}patterns_accordion{% endblock %}
+
+{% block content %}
+
+
+
+
+ Networking
+
+
+
+
+
+ Miscellaneous
+
+
+
+
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/article-pagination.html b/vanilla/templates/docs/examples/patterns/article-pagination.html
new file mode 100644
index 0000000..c66aafc
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/article-pagination.html
@@ -0,0 +1,18 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Article pagination{% endblock %}
+
+{% block standalone_css %}patterns_article-pagination{% endblock %}
+
+{% set is_not_themed = True %}
+{% block content %}
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/badge/chips.html b/vanilla/templates/docs/examples/patterns/badge/chips.html
new file mode 100644
index 0000000..c61c210
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/badge/chips.html
@@ -0,0 +1,31 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Badge / Chips{% endblock %}
+
+{% block standalone_css %}patterns_badge{% endblock %}
+
+{% block content %}
+
+ Users
+ 9
+
+
+
+ Users
+ 999+
+
+
+
+ Users
+ 1M
+
+
+
+ Users
+ 2.5B
+
+
+
+ Users
+ 25k
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/badge/colors.html b/vanilla/templates/docs/examples/patterns/badge/colors.html
new file mode 100644
index 0000000..1f8b920
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/badge/colors.html
@@ -0,0 +1,21 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Badge / Colors{% endblock %}
+
+{% block standalone_css %}patterns_badge{% endblock %}
+
+{% block content %}
+
+
9
+
999+
+
1M
+
2.5B
+
25k
+
+
+
+
9
+
999+
+
1M
+
2.5B
+
25k
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/badge/default.html b/vanilla/templates/docs/examples/patterns/badge/default.html
new file mode 100644
index 0000000..3ca9e82
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/badge/default.html
@@ -0,0 +1,14 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Badge / Default{% endblock %}
+
+{% block standalone_css %}patterns_badge{% endblock %}
+
+{% block content %}
+
+
9
+
999+
+
1M
+
2.5B
+
25k
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/badge/side-navigation.html b/vanilla/templates/docs/examples/patterns/badge/side-navigation.html
new file mode 100644
index 0000000..01f283f
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/badge/side-navigation.html
@@ -0,0 +1,38 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Badge / Side Navigation{% endblock %}
+
+{% block standalone_css %}patterns_badge{% endblock %}
+
+{% block content %}
+
+
+
+{% endblock %}
\ No newline at end of file
diff --git a/vanilla/templates/docs/examples/patterns/badge/tabs.html b/vanilla/templates/docs/examples/patterns/badge/tabs.html
new file mode 100644
index 0000000..cb80c3d
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/badge/tabs.html
@@ -0,0 +1,32 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Badges / Tabs{% endblock %}
+
+{% block standalone_css %}patterns_badge{% endblock %}
+
+{% block content %}
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/breadcrumbs.html b/vanilla/templates/docs/examples/patterns/breadcrumbs.html
new file mode 100644
index 0000000..c2643d5
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/breadcrumbs.html
@@ -0,0 +1,18 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Breadcrumbs{% endblock %}
+
+{% block standalone_css %}patterns_breadcrumbs{% endblock %}
+
+{% block content %}
+
+
+ Overview Features Managed Install Partners Docs
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/buttons/_script.js b/vanilla/templates/docs/examples/patterns/buttons/_script.js
new file mode 100644
index 0000000..ab81040
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/buttons/_script.js
@@ -0,0 +1,37 @@
+/**
+ * This is an example implementation of how to keep the button width
+ * while loading spinner icon is shown.
+ *
+ * This code is not meant for production use. In real cases you will need
+ * to provide your proper click handlers and events to start/stop loading
+ * animation.
+ */
+(function () {
+ const button = document.querySelector('.js-processing-button');
+ const hideClass = 'u-hide';
+ const processingClass = 'is-processing';
+ const spinner = button.querySelector('.p-icon--spinner');
+ const buttonLabel = button.querySelector('#button-label');
+ const buttonRect = button.getBoundingClientRect();
+
+ button.addEventListener('click', function () {
+ button.style.width = buttonRect.width + 'px';
+ button.style.height = buttonRect.height + 'px';
+ button.disabled = true;
+
+ button.classList.add(processingClass);
+ spinner.classList.remove(hideClass);
+ buttonLabel.classList.add(hideClass);
+
+ // timeout to remove the spinner from the button
+ setTimeout(function () {
+ button.style.width = null;
+ button.style.height = null;
+ button.disabled = false;
+
+ button.classList.remove(processingClass);
+ spinner.classList.add(hideClass);
+ buttonLabel.classList.remove(hideClass);
+ }, 3000);
+ });
+})();
diff --git a/vanilla/templates/docs/examples/patterns/buttons/alignment.html b/vanilla/templates/docs/examples/patterns/buttons/alignment.html
new file mode 100644
index 0000000..579413d
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/buttons/alignment.html
@@ -0,0 +1,31 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Buttons / Alignment{% endblock %}
+
+{% block standalone_css %}patterns_buttons{% endblock %}
+
+{% block content %}
+
+ Classless button
+ Classless button
+
+
+
+ Default button
+ Positive button
+ Negative button
+
+
+
+ Default link
+ Positive link
+ Negative link
+
+
+
+ Classless button
+ Positive button
+ Default link
+ Hidden button
+ Negative button
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/buttons/base.html b/vanilla/templates/docs/examples/patterns/buttons/base.html
new file mode 100644
index 0000000..70c6691
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/buttons/base.html
@@ -0,0 +1,9 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Buttons / Base{% endblock %}
+
+{% block standalone_css %}patterns_buttons{% endblock %}
+
+{% block content %}
+
Base
+
Base disabled
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/buttons/brand.html b/vanilla/templates/docs/examples/patterns/buttons/brand.html
new file mode 100644
index 0000000..1afa5e4
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/buttons/brand.html
@@ -0,0 +1,9 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Buttons / Brand{% endblock %}
+
+{% block standalone_css %}patterns_buttons{% endblock %}
+
+{% block content %}
+
Brand button
+
Brand button disabled
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/buttons/dark.html b/vanilla/templates/docs/examples/patterns/buttons/dark.html
new file mode 100644
index 0000000..80e200f
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/buttons/dark.html
@@ -0,0 +1,12 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Buttons / Dark{% endblock %}
+
+{% block standalone_css %}patterns_buttons{% endblock %}
+
+{% set is_dark = True %}
+{% block content %}
+
Default button
+
Base button
+
Positive button
+
Negative button
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/buttons/default.html b/vanilla/templates/docs/examples/patterns/buttons/default.html
new file mode 100644
index 0000000..a38bd27
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/buttons/default.html
@@ -0,0 +1,9 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Buttons / Default{% endblock %}
+
+{% block standalone_css %}patterns_buttons{% endblock %}
+
+{% block content %}
+
Default button
+
Default button disabled
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/buttons/dense.html b/vanilla/templates/docs/examples/patterns/buttons/dense.html
new file mode 100644
index 0000000..9d8106c
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/buttons/dense.html
@@ -0,0 +1,9 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Buttons / Dense{% endblock %}
+
+{% block standalone_css %}patterns_buttons{% endblock %}
+
+{% block content %}
+
Everything you need to get started with Vanilla.
+
Dense button
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/buttons/icon.html b/vanilla/templates/docs/examples/patterns/buttons/icon.html
new file mode 100644
index 0000000..be1c2f3
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/buttons/icon.html
@@ -0,0 +1,10 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Buttons / Icon{% endblock %}
+
+{% block standalone_css %}patterns_buttons{% endblock %}
+
+{% block content %}
+
+
Icon before text
+
Icon after text
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/buttons/inline.html b/vanilla/templates/docs/examples/patterns/buttons/inline.html
new file mode 100644
index 0000000..b67f9f0
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/buttons/inline.html
@@ -0,0 +1,9 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Buttons / Inline{% endblock %}
+
+{% block standalone_css %}patterns_buttons{% endblock %}
+
+{% block content %}
+
Everything you need to get started with Vanilla.
+
Inline button
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/buttons/link.html b/vanilla/templates/docs/examples/patterns/buttons/link.html
new file mode 100644
index 0000000..c4844e4
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/buttons/link.html
@@ -0,0 +1,8 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Buttons / Link{% endblock %}
+
+{% block standalone_css %}patterns_buttons{% endblock %}
+
+{% block content %}
+
Button as link
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/buttons/negative.html b/vanilla/templates/docs/examples/patterns/buttons/negative.html
new file mode 100644
index 0000000..ca28827
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/buttons/negative.html
@@ -0,0 +1,9 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Buttons / Negative{% endblock %}
+
+{% block standalone_css %}patterns_buttons{% endblock %}
+
+{% block content %}
+
Negative button
+
Negative button disabled
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/buttons/positive.html b/vanilla/templates/docs/examples/patterns/buttons/positive.html
new file mode 100644
index 0000000..2f5d34d
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/buttons/positive.html
@@ -0,0 +1,9 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Buttons / Positive{% endblock %}
+
+{% block standalone_css %}patterns_buttons{% endblock %}
+
+{% block content %}
+
Positive button
+
Positive button disabled
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/buttons/pressed.html b/vanilla/templates/docs/examples/patterns/buttons/pressed.html
new file mode 100644
index 0000000..004e258
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/buttons/pressed.html
@@ -0,0 +1,26 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Buttons / Pressed{% endblock %}
+
+{% block standalone_css %}patterns_buttons{% endblock %}
+
+{% block content %}
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/buttons/processing.html b/vanilla/templates/docs/examples/patterns/buttons/processing.html
new file mode 100644
index 0000000..a3e72a7
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/buttons/processing.html
@@ -0,0 +1,21 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Buttons / Processing{% endblock %}
+
+{% block standalone_css %}patterns_buttons{% endblock %}
+
+{% block content %}
+
+
+
+
+ Click me!
+
+
+
+
+{% endblock %}
+
diff --git a/vanilla/templates/docs/examples/patterns/buttons/small.html b/vanilla/templates/docs/examples/patterns/buttons/small.html
new file mode 100644
index 0000000..16b299d
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/buttons/small.html
@@ -0,0 +1,8 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Buttons / Small{% endblock %}
+
+{% block standalone_css %}patterns_buttons{% endblock %}
+
+{% block content %}
+
This is small text This is a small button This is a small, dense button
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/card/_header-and-footer.html b/vanilla/templates/docs/examples/patterns/card/_header-and-footer.html
new file mode 100644
index 0000000..e881679
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/card/_header-and-footer.html
@@ -0,0 +1,9 @@
+
+
+
Landscape Server
+
landscape-charmers
+
Charm for installing and using Landscape Dedicated Server.
+
+
+
diff --git a/vanilla/templates/docs/examples/patterns/card/content-bleed.html b/vanilla/templates/docs/examples/patterns/card/content-bleed.html
new file mode 100644
index 0000000..10d1737
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/card/content-bleed.html
@@ -0,0 +1,22 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Card / Content Bleed{% endblock %}
+
+{% block standalone_css %}patterns_card{% endblock %}
+
+{% block content %}
+
+
+
+
+
+
The State of Robotics - August 2021
+
From robots learning to encourage social participation to detect serious environmental problems, it was a learning month.
+
+
+
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/card/default.html b/vanilla/templates/docs/examples/patterns/card/default.html
new file mode 100644
index 0000000..f89e82b
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/card/default.html
@@ -0,0 +1,11 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Card / Default{% endblock %}
+
+{% block standalone_css %}patterns_card{% endblock %}
+
+{% block content %}
+
+
We'd love to have you join us as a partner.
+
If you are an independent software vendor or bundle author, it's easy to apply. You can find out more below.
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/card/header.html b/vanilla/templates/docs/examples/patterns/card/header.html
new file mode 100644
index 0000000..2b7e096
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/card/header.html
@@ -0,0 +1,13 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Card / Header{% endblock %}
+
+{% block standalone_css %}patterns_card{% endblock %}
+
+{% block content %}
+
+
+
+
Raspberry Pi2 and Pi3
+
For fun, for education and for profit, the RPi makes device development personal and entertaining. With support for both the Pi2 and the new Pi3, Ubuntu Core supports the world’s most beloved board.
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/card/highlighted.html b/vanilla/templates/docs/examples/patterns/card/highlighted.html
new file mode 100644
index 0000000..0ff2609
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/card/highlighted.html
@@ -0,0 +1,11 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Card / Highlighted{% endblock %}
+
+{% block standalone_css %}patterns_card{% endblock %}
+
+{% block content %}
+
+
We'd love to have you join us as a partner.
+
If you are an independent software vendor or bundle author, it's easy to apply. You can find out more below.
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/card/image.html b/vanilla/templates/docs/examples/patterns/card/image.html
new file mode 100644
index 0000000..8e38da0
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/card/image.html
@@ -0,0 +1,23 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Card / Image{% endblock %}
+
+{% block standalone_css %}patterns_card{% endblock %}
+
+{% block content %}
+
+
+
+
+
+
+
Open Source Robotics Challenges is a series of blogs...
+
+
+
+
+
+{% endblock %}
+
+
diff --git a/vanilla/templates/docs/examples/patterns/card/overlay.html b/vanilla/templates/docs/examples/patterns/card/overlay.html
new file mode 100644
index 0000000..59b57eb
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/card/overlay.html
@@ -0,0 +1,18 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Card / Overlay (deprecated){% endblock %}
+
+{% block standalone_css %}patterns_card{% endblock %}
+
+{% set is_not_themed = True %}
+{% block content %}
+
+
+
+
+
Web browsing
+
Renowned for speed and security, Ubuntu and Firefox make browsing the web a pleasure again. Ubuntu also includes Chrome, Opera and other browsers that can be installed from the Ubuntu Software Centre.
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/chip/colors.html b/vanilla/templates/docs/examples/patterns/chip/colors.html
new file mode 100644
index 0000000..20ff89c
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/chip/colors.html
@@ -0,0 +1,27 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Chip / Colors{% endblock %}
+
+{% block standalone_css %}patterns_chip{% endblock %}
+
+{% block content %}
+
+ Type
+ Default
+
+
+ Type
+ Positive
+
+
+ Type
+ Caution
+
+
+ Type
+ Negative
+
+
+ Type
+ Information
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/chip/dark.html b/vanilla/templates/docs/examples/patterns/chip/dark.html
new file mode 100644
index 0000000..7b2f88c
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/chip/dark.html
@@ -0,0 +1,31 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Chip / Dark{% endblock %}
+
+{% block standalone_css %}patterns_chip{% endblock %}
+
+{% set is_dark = true %}
+{% block content %}
+
+
+ Type
+ Default
+
+
+ Type
+ Positive
+
+
+ Type
+ Caution
+
+
+ Type
+ Negative
+
+
+ Type
+ Information
+ Dismiss
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/chip/default.html b/vanilla/templates/docs/examples/patterns/chip/default.html
new file mode 100644
index 0000000..e1cf76f
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/chip/default.html
@@ -0,0 +1,20 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Chip / Default{% endblock %}
+
+{% block standalone_css %}patterns_chip{% endblock %}
+
+{% block content %}
+
+ Owner
+ Bob
+
+
+
+ 21.10
+
+
+
+ Selected
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/chip/dense.html b/vanilla/templates/docs/examples/patterns/chip/dense.html
new file mode 100644
index 0000000..3e7fa76
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/chip/dense.html
@@ -0,0 +1,11 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Chip / Dense{% endblock %}
+
+{% block standalone_css %}patterns_chip{% endblock %}
+
+{% block content %}
+
+ Owner
+ Bob
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/chip/inline.html b/vanilla/templates/docs/examples/patterns/chip/inline.html
new file mode 100644
index 0000000..cdcf13c
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/chip/inline.html
@@ -0,0 +1,11 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Chip / Inline{% endblock %}
+
+{% block standalone_css %}patterns_chip{% endblock %}
+
+{% block content %}
+
+ Owner
+ Bob
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/chip/long-values.html b/vanilla/templates/docs/examples/patterns/chip/long-values.html
new file mode 100644
index 0000000..b215c12
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/chip/long-values.html
@@ -0,0 +1,55 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Chip / Long values{% endblock %}
+
+{% block standalone_css %}patterns_chip{% endblock %}
+
+{% block content %}
+
+ Short lead
+ Short value
+
+ Dismiss
+
+
+
+
+ Short value only
+
+
+
+
+ Short value + dismiss button
+
+
+ Dismiss
+
+
+
+
+ A very long value, no lead A very long value, no lead A very long value, no lead A very long value, no lead A very long value, no lead A very long value, no lead A very long value, no lead A very long value, no lead A very long value, no lead A very long value, no lead A very long value, no lead A very long value, no lead A very long value, no lead A very long value, no lead
+
+
+
+
+ Very long lead, short value Very long lead, short value Very long lead, short value Very long lead, short value Very long lead, short value Very long lead, short valueVery long lead, short value Very long lead, short value Very long lead, short value Very long lead, short value Very long lead, short value Very long lead, short value
+
+
+ Short value
+
+
+ Dismiss
+
+
+
+
+ A very long lead A very long lead A very long lead A very long lead A very long lead
+
+
+ An even longer value An even longer value An even longer value An even longer value An even longer value An even longer value An even longer value An even longer value
+
+
+ Dismiss
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/chip/variants.html b/vanilla/templates/docs/examples/patterns/chip/variants.html
new file mode 100644
index 0000000..b39a94a
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/chip/variants.html
@@ -0,0 +1,731 @@
+{% extends"_layouts/examples.html" %}
+{% block title %}Chip / Variants{% endblock %}
+
+{% block standalone_css %}patterns_chip{% endblock %}
+
+{% block content %}
+
+ 21.10
+
+
+
+ 21.10
+
+ Dismiss
+
+
+
+
+ Owner
+ Bob
+
+
+
+ Owner
+ Bob
+
+ Dismiss
+
+
+
+
+
+
+ 21.10
+
+
+
+ 21.10
+
+ Dismiss
+
+
+
+
+ Owner
+ Bob
+
+
+
+ Owner
+ Bob
+
+ Dismiss
+
+
+
+
+
+
+ 21.10
+
+
+
+ 21.10
+
+ Dismiss
+
+
+
+
+ Owner
+ Bob
+
+
+
+ Owner
+ Bob
+
+ Dismiss
+
+
+
+
+
+
+ 21.10
+
+
+
+ 21.10
+
+ Dismiss
+
+
+
+
+ Owner
+ Bob
+
+
+
+ Owner
+ Bob
+
+ Dismiss
+
+
+
+
+
+
+ 21.10
+
+
+
+ 21.10
+
+ Dismiss
+
+
+
+
+ Owner
+ Bob
+
+
+
+ Owner
+ Bob
+
+ Dismiss
+
+
+
+
+
+
+ 21.10
+
+
+
+ 21.10
+
+ Dismiss
+
+
+
+
+ Owner
+ Bob
+
+
+
+ Owner
+ Bob
+
+ Dismiss
+
+
+
+
+
+
+ 21.10
+
+
+
+ 21.10
+
+ Dismiss
+
+
+
+
+ Owner
+ Bob
+
+
+
+ Owner
+ Bob
+
+ Dismiss
+
+
+
+
+
+
+ 21.10
+
+
+
+ 21.10
+
+ Dismiss
+
+
+
+
+ Owner
+ Bob
+
+
+
+ Owner
+ Bob
+
+ Dismiss
+
+
+
+
+
+
+ 21.10
+
+
+
+ 21.10
+
+ Dismiss
+
+
+
+
+ Owner
+ Bob
+
+
+
+ Owner
+ Bob
+
+ Dismiss
+
+
+
+
+
+
+ 21.10
+
+
+
+ 21.10
+
+ Dismiss
+
+
+
+
+ Owner
+ Bob
+
+
+
+ Owner
+ Bob
+
+ Dismiss
+
+
+
+
+
+
+ 21.10
+
+
+
+ 21.10
+
+
+
+ 21.10
+
+ Dismiss
+
+
+
+
+ 21.10
+
+ Dismiss
+
+
+
+
+ Owner
+ Bob
+
+
+
+ Owner
+ Bob
+
+
+
+ Owner
+ Bob
+
+ Dismiss
+
+
+
+
+ Owner
+ Bob
+
+ Dismiss
+
+
+
+
+
+
Inline
+
+ 21.10
+ 21.10
+
+ Dismiss
+
+
+
+
+ Owner
+ Bob
+
+
+
+ Owner
+ Bob
+
+ Dismiss
+
+
+
+
+
+
Inline
+
+ 21.10
+ 21.10
+
+ Dismiss
+
+
+
+
+ Owner
+ Bob
+
+
+
+ Owner
+ Bob
+
+ Dismiss
+
+
+
+
+
+
+
+
+ 21.10
+
+
+
+ 21.10
+
+ Dismiss
+
+
+
+
+ Owner
+ Bob
+
+
+
+ Owner
+ Bob
+
+ Dismiss
+
+
+
+
+
+
+ 21.10
+
+
+
+ 21.10
+
+ Dismiss
+
+
+
+
+ Owner
+ Bob
+
+
+
+ Owner
+ Bob
+
+ Dismiss
+
+
+
+
+
+
+ 21.10
+
+
+
+ 21.10
+
+ Dismiss
+
+
+
+
+ Owner
+ Bob
+
+
+
+ Owner
+ Bob
+
+ Dismiss
+
+
+
+
+
+
+ 21.10
+
+
+
+ 21.10
+
+ Dismiss
+
+
+
+
+ Owner
+ Bob
+
+
+
+ Owner
+ Bob
+
+ Dismiss
+
+
+
+
+
+
+ 21.10
+
+
+
+ 21.10
+
+ Dismiss
+
+
+
+
+ Owner
+ Bob
+
+
+
+ Owner
+ Bob
+
+ Dismiss
+
+
+
+
+
+
+ 21.10
+
+
+
+ 21.10
+
+ Dismiss
+
+
+
+
+ Owner
+ Bob
+
+
+
+ Owner
+ Bob
+
+ Dismiss
+
+
+
+
+
+
+ 21.10
+
+
+
+ 21.10
+
+ Dismiss
+
+
+
+
+ Owner
+ Bob
+
+
+
+ Owner
+ Bob
+
+ Dismiss
+
+
+
+
+
+
+ 21.10
+
+
+
+ 21.10
+
+ Dismiss
+
+
+
+
+ Owner
+ Bob
+
+
+
+ Owner
+ Bob
+
+ Dismiss
+
+
+
+
+
+
+ 21.10
+
+
+
+ 21.10
+
+ Dismiss
+
+
+
+
+ Owner
+ Bob
+
+
+
+ Owner
+ Bob
+
+ Dismiss
+
+
+
+
+
+
+ 21.10
+
+
+
+ 21.10
+
+ Dismiss
+
+
+
+
+ Owner
+ Bob
+
+
+
+ Owner
+ Bob
+
+ Dismiss
+
+
+
+
+
+
+ 21.10
+
+
+
+ 21.10
+
+
+
+ 21.10
+
+ Dismiss
+
+
+
+
+ 21.10
+
+ Dismiss
+
+
+
+
+ Owner
+ Bob
+
+
+
+ Owner
+ Bob
+
+
+
+ Owner
+ Bob
+
+ Dismiss
+
+
+
+
+ Owner
+ Bob
+
+ Dismiss
+
+
+
+
+
+
Inline
+
+ 21.10
+ 21.10
+
+ Dismiss
+
+
+
+
+ Owner
+ Bob
+
+
+
+ Owner
+ Bob
+
+ Dismiss
+
+
+
+
+
Inline
+
+ 21.10
+ 21.10
+
+ Dismiss
+
+
+
+
+ Owner
+ Bob
+
+
+
+ Owner
+ Bob
+
+ Dismiss
+
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/chip/with-dismiss.html b/vanilla/templates/docs/examples/patterns/chip/with-dismiss.html
new file mode 100644
index 0000000..0339d1b
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/chip/with-dismiss.html
@@ -0,0 +1,12 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Chip / Dismiss{% endblock %}
+
+{% block standalone_css %}patterns_chip{% endblock %}
+
+{% block content %}
+
+ Owner
+ Bob
+ Dismiss
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/code-snippet/_default.html b/vanilla/templates/docs/examples/patterns/code-snippet/_default.html
new file mode 100644
index 0000000..37834ba
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/code-snippet/_default.html
@@ -0,0 +1,17 @@
+
+
+
+
snap --version
+
+
+
+
snap 2.39.3
+snapd 2.39.3
+series 16
+ubuntu 18.04
+kernel 5.0.0-36-generic
+
\ No newline at end of file
diff --git a/vanilla/templates/docs/examples/patterns/code-snippet/_dropdown-multiple.html b/vanilla/templates/docs/examples/patterns/code-snippet/_dropdown-multiple.html
new file mode 100644
index 0000000..7ab5a4b
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/code-snippet/_dropdown-multiple.html
@@ -0,0 +1,76 @@
+
+
+
+
sudo snap install thunderbird
+
+
sudo snap install thunderbird --beta
+
+
sudo snap install thunderbird --edge
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
sudo snap install thunderbird
+
+
sudo snap install thunderbird --beta
+
+
sudo snap install thunderbird --edge
+
+
+
diff --git a/vanilla/templates/docs/examples/patterns/code-snippet/_icon.html b/vanilla/templates/docs/examples/patterns/code-snippet/_icon.html
new file mode 100644
index 0000000..0e71a07
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/code-snippet/_icon.html
@@ -0,0 +1,11 @@
+
+
+
+
+
+
https://www.ubuntu.com
+
\ No newline at end of file
diff --git a/vanilla/templates/docs/examples/patterns/code-snippet/_script.js b/vanilla/templates/docs/examples/patterns/code-snippet/_script.js
new file mode 100644
index 0000000..4eaf090
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/code-snippet/_script.js
@@ -0,0 +1,45 @@
+/**
+ Attaches change event listener to a given select.
+ @param {HTMLElement} dropdown Select element belonging to a code snippet.
+*/
+function attachDropdownEvents(dropdown) {
+ dropdown.addEventListener('change', function (e) {
+ var targetElement = document.getElementById(e.target.value);
+
+ if (targetElement) {
+ toggleElement(targetElement, dropdown.options);
+ }
+ });
+}
+
+/**
+ Shows a given code snippet panel, and hides the rest.
+ @param {HTMLElement} targetElement the element to show.
+ @param {HTMLOptionsCollection} options collection of options
+ whose values reference elements to be hidden.
+*/
+function toggleElement(targetElement, options) {
+ for (var i = 0; i < options.length; i++) {
+ var element = document.getElementById(options[i].value);
+ element.classList.add('u-hide');
+ element.setAttribute('aria-hidden', true);
+ }
+
+ targetElement.classList.remove('u-hide');
+ targetElement.setAttribute('aria-hidden', false);
+}
+
+/**
+ Attaches events to selects with a given classname.
+ @param {String} codeSnippetDropdownSelector class name of the select elements
+ we want to attach events to.
+*/
+function setupCodeSnippetDropdowns(codeSnippetDropdownSelector) {
+ var dropdowns = [].slice.call(document.querySelectorAll(codeSnippetDropdownSelector));
+
+ dropdowns.forEach(function (dropdown) {
+ attachDropdownEvents(dropdown);
+ });
+}
+
+setupCodeSnippetDropdowns('.p-code-snippet__dropdown');
diff --git a/vanilla/templates/docs/examples/patterns/code-snippet/default-dark.html b/vanilla/templates/docs/examples/patterns/code-snippet/default-dark.html
new file mode 100644
index 0000000..95d54fe
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/code-snippet/default-dark.html
@@ -0,0 +1,9 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Code snippet / Dark{% endblock %}
+
+{% block standalone_css %}patterns_code-snippet{% endblock %}
+
+{% set is_dark = true %}
+{% block content %}
+{% include "/docs/examples/patterns/code-snippet/_default.html" %}
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/code-snippet/default.html b/vanilla/templates/docs/examples/patterns/code-snippet/default.html
new file mode 100644
index 0000000..4ed2be2
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/code-snippet/default.html
@@ -0,0 +1,8 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Code snippet / Default{% endblock %}
+
+{% block standalone_css %}patterns_code-snippet{% endblock %}
+
+{% block content %}
+{% include "/docs/examples/patterns/code-snippet/_default.html" %}
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/code-snippet/dropdown-multiple-dark.html b/vanilla/templates/docs/examples/patterns/code-snippet/dropdown-multiple-dark.html
new file mode 100644
index 0000000..1106263
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/code-snippet/dropdown-multiple-dark.html
@@ -0,0 +1,9 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Code snippet / Multiple dropdowns Dark{% endblock %}
+
+{% block standalone_css %}patterns_code-snippet{% endblock %}
+
+{% set is_dark = true %}
+{% block content %}
+{% include "/docs/examples/patterns/code-snippet/_dropdown-multiple.html" %}
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/code-snippet/dropdown-multiple.html b/vanilla/templates/docs/examples/patterns/code-snippet/dropdown-multiple.html
new file mode 100644
index 0000000..e94af91
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/code-snippet/dropdown-multiple.html
@@ -0,0 +1,8 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Code snippet / Multiple dropdowns{% endblock %}
+
+{% block standalone_css %}patterns_code-snippet{% endblock %}
+
+{% block content %}
+{% include "/docs/examples/patterns/code-snippet/_dropdown-multiple.html" %}
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/code-snippet/dropdown.html b/vanilla/templates/docs/examples/patterns/code-snippet/dropdown.html
new file mode 100644
index 0000000..f793213
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/code-snippet/dropdown.html
@@ -0,0 +1,38 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Code snippet / Dropdown{% endblock %}
+
+{% block standalone_css %}patterns_code-snippet{% endblock %}
+
+{% block content %}
+
+
+
+
<h1 class="p-heading--2">How to use code snippets</h1>
+
+
.p-heading--2 {
+color: red;
+}
+
+
console.log("Example 1");
+
+
+
+
Example 1
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/code-snippet/icon-dark.html b/vanilla/templates/docs/examples/patterns/code-snippet/icon-dark.html
new file mode 100644
index 0000000..19c4c86
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/code-snippet/icon-dark.html
@@ -0,0 +1,9 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Code Snippet / Icon Dark{% endblock %}
+
+{% block standalone_css %}patterns_code-snippet{% endblock %}
+
+{% set is_dark = true %}
+{% block content %}
+{% include "/docs/examples/patterns/code-snippet/_icon.html" %}
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/code-snippet/icon.html b/vanilla/templates/docs/examples/patterns/code-snippet/icon.html
new file mode 100644
index 0000000..7313cbb
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/code-snippet/icon.html
@@ -0,0 +1,8 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Code Snippet / Icon {% endblock %}
+
+{% block standalone_css %}patterns_code-snippet{% endblock %}
+
+{% block content %}
+{% include "/docs/examples/patterns/code-snippet/_icon.html" %}
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/code-snippet/is-bordered.html b/vanilla/templates/docs/examples/patterns/code-snippet/is-bordered.html
new file mode 100644
index 0000000..7535628
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/code-snippet/is-bordered.html
@@ -0,0 +1,16 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Code snippet / Bordered{% endblock %}
+
+{% block standalone_css %}patterns_code-snippet{% endblock %}
+
+{% block content %}
+
+
+
+
<button>Button</button>
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/code-snippet/numbered.html b/vanilla/templates/docs/examples/patterns/code-snippet/numbered.html
new file mode 100644
index 0000000..b18aecc
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/code-snippet/numbered.html
@@ -0,0 +1,19 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Code snippet / Numbered{% endblock %}
+
+{% block standalone_css %}patterns_code-snippet{% endblock %}
+
+{% block content %}
+
+
#!/bin/bash
+set -eu
+. $CONJURE_UP_SPELLSDIR/sdk/common.sh
+if [[ "$JUJU_PROVIDERTYPE" == "lxd" ]]; then
+ debug "Running pre-deploy for $CONJURE_UP_SPELL"
+ sed "s/##MODEL##/$JUJU_MODEL/" $(scriptPath)/lxd-profile.yaml | lxc profile edit "juju-$JUJU_MODEL" || exposeResult "Failed to set profile" $? "false"
+fi
+exposeResult "Successful pre-deploy." 0 "true"
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/code-snippet/prism.html b/vanilla/templates/docs/examples/patterns/code-snippet/prism.html
new file mode 100644
index 0000000..ef24bbc
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/code-snippet/prism.html
@@ -0,0 +1,69 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Code Snippet / Syntax highlight{% endblock %}
+
+{% block standalone_css %}patterns_code-snippet{% endblock %}
+
+{% block content %}
+
+
+
class DiscourseAPI:
+ """
+ Retrieve information from a Discourse installation
+ through its API
+ """
+
+ def __init__(self, base_url, session, api_key=None, api_username=None):
+ """
+ @param base_url: The Discourse URL (e.g. https://discourse.example.com)
+ """
+
+ self.base_url = base_url.rstrip("/")
+ self.session = session
+
+ if api_key and api_username:
+ self.session.headers = {
+ "Api-Key": api_key,
+ "Api-Username": api_username,
+ }
+
+
+
+
+
+
name: super-cool-app
+version: "1.0"
+summary: Super Cool App
+description: |
+ Super Cool App that does everything! […]
+confinement: strict
+base: core18
+parts:
+ super-cool-app:
+ plugin: flutter
+ source: https://github.com/kenvandine/super-cool-app.git
+ flutter-target: lib/main.dart
+apps:
+ super-cool-app:
+ command: super_cool_app
+ extensions: [flutter-dev]
+
+
+
+
+
npm install --save-dev vanilla-framework
+export SASS_PATH=`pwd`/node_modules:${SASS_PATH}
+
+
+@import 'vanilla-framework'
+
+
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/code-snippet/wrapping.html b/vanilla/templates/docs/examples/patterns/code-snippet/wrapping.html
new file mode 100644
index 0000000..f3a60b8
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/code-snippet/wrapping.html
@@ -0,0 +1,22 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Code Snippet / Wrapping {% endblock %}
+
+{% block standalone_css %}patterns_code-snippet{% endblock %}
+
+{% block content %}
+
+
+
+
git commit -a -m "This is an example git commit message to demonstrate the wrapping of pre elements in the code snippet"
+
+
+
+
+
+
git commit -a -m "This is an example git commit message to demonstrate the wrapping of pre elements in the code snippet"
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/contextual-menu/_script.js b/vanilla/templates/docs/examples/patterns/contextual-menu/_script.js
new file mode 100644
index 0000000..378bf71
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/contextual-menu/_script.js
@@ -0,0 +1,87 @@
+/**
+ Toggles the necessary aria- attributes' values on the menus
+ and handles to show or hide them.
+ @param {HTMLElement} element The menu link or button.
+ @param {Boolean} show Whether to show or hide the menu.
+ @param {Number} top Top offset in pixels where to show the menu.
+*/
+function toggleMenu(element, show, top) {
+ var target = document.getElementById(element.getAttribute('aria-controls'));
+
+ if (target) {
+ element.setAttribute('aria-expanded', show);
+ target.setAttribute('aria-hidden', !show);
+
+ if (typeof top !== 'undefined') {
+ target.style.top = top + 'px';
+ }
+
+ if (show) {
+ target.focus();
+ }
+ }
+}
+
+/**
+ Attaches event listeners for the menu toggle open and close click events.
+ @param {HTMLElement} menu The menu container element.
+*/
+
+function setupContextualMenu(menu) {
+ const toggle = menu.querySelector('.p-contextual-menu__toggle');
+ const dropdown = menu.querySelector('.p-contextual-menu__dropdown');
+
+ toggle.addEventListener('click', function (event) {
+ event.preventDefault();
+ var menuAlreadyOpen = toggle.getAttribute('aria-expanded') === 'true';
+
+ var top = toggle.offsetHeight;
+ // for inline elements leave some space between text and menu
+ if (window.getComputedStyle(toggle).display === 'inline') {
+ top += 5;
+ }
+
+ toggleMenu(toggle, !menuAlreadyOpen, top);
+ });
+
+ // Add handler for clicking outside the menu.
+ document.addEventListener('click', function (event) {
+ var contextualMenu = document.getElementById(toggle.getAttribute('aria-controls'));
+ var clickOutside = !(toggle.contains(event.target) || contextualMenu.contains(event.target));
+
+ if (clickOutside) {
+ toggleMenu(toggle, false);
+ }
+ });
+
+ //Add event listener to close menu when tab focus leaves
+ dropdown.addEventListener('focusout', function (e) {
+ // Check if where you have tabbed to is in the dropdown
+ if (dropdown.contains(e.relatedTarget)) return;
+
+ toggleMenu(toggle, false);
+ });
+
+ // Add handler for closing menus using ESC key.
+ document.addEventListener('keydown', function (e) {
+ e = e || window.event;
+
+ if (e.keyCode === 27) {
+ toggleMenu(toggle, false);
+ }
+ });
+}
+
+/**
+ @param {String} contextualMenuSelector The CSS selector matching menu toggle elements.
+*/
+function setupAllContextualMenus(contextualMenuSelector) {
+ // Setup all contextual menus on the page.
+ var menus = document.querySelectorAll(contextualMenuSelector);
+
+ for (var i = 0, l = menus.length; i < l; i++) {
+ setupContextualMenu(menus[i]);
+ }
+}
+
+setupAllContextualMenus('.p-contextual-menu, [class*="p-contextual-menu--"]');
diff --git a/vanilla/templates/docs/examples/patterns/contextual-menu/dark.html b/vanilla/templates/docs/examples/patterns/contextual-menu/dark.html
new file mode 100644
index 0000000..6d5229f
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/contextual-menu/dark.html
@@ -0,0 +1,71 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Contextual menu / Dark{% endblock %}
+
+{% block standalone_css %}patterns_contextual-menu{% endblock %}
+
+{% set is_dark = True %}
+{% block content %}
+
+
+
Lorem ipsum dolor sit amet consectetur adipiscing elit nunc dolor. Arcu molestie non arcu porttitor volutpat rutrum ipsum nunc lacus ligula ornare et diam vel eu.
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/contextual-menu/default.html b/vanilla/templates/docs/examples/patterns/contextual-menu/default.html
new file mode 100644
index 0000000..ab54d41
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/contextual-menu/default.html
@@ -0,0 +1,70 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Contextual menu / Default{% endblock %}
+
+{% block standalone_css %}patterns_contextual-menu{% endblock %}
+
+{% block content %}
+
+
+
Lorem ipsum dolor sit amet consectetur adipiscing elit nunc dolor. Arcu molestie non arcu porttitor volutpat rutrum ipsum nunc lacus ligula ornare et diam vel eu.
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/contextual-menu/with-indicator.html b/vanilla/templates/docs/examples/patterns/contextual-menu/with-indicator.html
new file mode 100644
index 0000000..99e9fe6
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/contextual-menu/with-indicator.html
@@ -0,0 +1,26 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Contextual menu / With indicator{% endblock %}
+
+{% block standalone_css %}patterns_contextual-menu{% endblock %}
+
+{% block content %}
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/divider/dark.html b/vanilla/templates/docs/examples/patterns/divider/dark.html
new file mode 100644
index 0000000..757e70c
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/divider/dark.html
@@ -0,0 +1,25 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Divider / Dark{% endblock %}
+
+{% block standalone_css %}patterns_divider{% endblock %}
+
+{% set is_dark = True %}
+{% block style %}
+{% endblock %}
+
+{% block content %}
+
+
+
Lorem ipsum
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, labore at suscipit necessitatibus cumque commodi velit.
+
+
+
Dolor sit
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, labore at suscipit necessitatibus cumque commodi velit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, labore at suscipit necessitatibus cumque commodi velit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, labore at suscipit necessitatibus cumque commodi velit.
+
+
+
Cumque commodi
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, labore at suscipit necessitatibus cumque commodi velit.
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/divider/default.html b/vanilla/templates/docs/examples/patterns/divider/default.html
new file mode 100644
index 0000000..e7ac479
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/divider/default.html
@@ -0,0 +1,21 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Divider / Default{% endblock %}
+
+{% block standalone_css %}patterns_divider{% endblock %}
+
+{% block content %}
+
+
+
Lorem ipsum
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, labore at suscipit necessitatibus cumque commodi velit.
+
+
+
Dolor sit
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, labore at suscipit necessitatibus cumque commodi velit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, labore at suscipit necessitatibus cumque commodi velit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, labore at suscipit necessitatibus cumque commodi velit.
+
+
+
Cumque commodi
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, labore at suscipit necessitatibus cumque commodi velit.
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/divider/responsive-columns.html b/vanilla/templates/docs/examples/patterns/divider/responsive-columns.html
new file mode 100644
index 0000000..f07c9ad
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/divider/responsive-columns.html
@@ -0,0 +1,21 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Divider / Responsive columns{% endblock %}
+
+{% block standalone_css %}patterns_divider{% endblock %}
+
+{% block content %}
+
+
+
Lorem ipsum
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, labore at suscipit necessitatibus cumque commodi velit.
+
+
+
Dolor sit
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, labore at suscipit necessitatibus cumque commodi velit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, labore at suscipit necessitatibus cumque commodi velit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, labore at suscipit necessitatibus cumque commodi velit.
+
+
+
Cumque commodi
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, labore at suscipit necessitatibus cumque commodi velit.
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/empty-state/error-management.html b/vanilla/templates/docs/examples/patterns/empty-state/error-management.html
new file mode 100644
index 0000000..eb5dbf8
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/empty-state/error-management.html
@@ -0,0 +1,22 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Empty State / Error management{% endblock %}
+
+{% block standalone_css %}patterns_empty-state{% endblock %}
+
+{% block content %}
+
+
+
+
+
404: Page not found
+
+ We can't find the page you're looking for.
+
+
+
+{% endblock %}
+
+
diff --git a/vanilla/templates/docs/examples/patterns/empty-state/no-content.html b/vanilla/templates/docs/examples/patterns/empty-state/no-content.html
new file mode 100644
index 0000000..96310d7
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/empty-state/no-content.html
@@ -0,0 +1,33 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Empty State / No content{% endblock %}
+
+{% block standalone_css %}patterns_empty-state{% endblock %}
+
+{% block content %}
+
+
+
+ Vendor ID
+ Product
+ ProductID
+ Driver
+ Huma Node
+ PCI Address
+
+
+
+
+
+
+
+
+
+
PCI information not available
+
Commission this machine to load PCI and USB device information
+
Commission
+
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/empty-state/user-triggered.html b/vanilla/templates/docs/examples/patterns/empty-state/user-triggered.html
new file mode 100644
index 0000000..b6c3a79
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/empty-state/user-triggered.html
@@ -0,0 +1,52 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Empty State / User action triggered{% endblock %}
+
+{% block standalone_css %}patterns_empty-state{% endblock %}
+
+{% block content %}
+
+
+
Search results for "flibberdygibbery"
+
+
+
+
+
+
+
+
+
+
+ Why not try widening your search?
+
+
+
+ Adding alternative words or phrases
+ Using individual words instead of phrases
+ Trying a different spelling
+
+
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/equal-height-row/3-column-row.html b/vanilla/templates/docs/examples/patterns/equal-height-row/3-column-row.html
new file mode 100644
index 0000000..2e109ac
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/equal-height-row/3-column-row.html
@@ -0,0 +1,62 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Equal height row / Three column row{% endblock %}
+
+{% block standalone_css %}patterns_equal-height-row{% endblock %}
+
+{% block content %}
+
+
+
+{% endblock %}
\ No newline at end of file
diff --git a/vanilla/templates/docs/examples/patterns/equal-height-row/4-items-per-column.html b/vanilla/templates/docs/examples/patterns/equal-height-row/4-items-per-column.html
new file mode 100644
index 0000000..3bddfc4
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/equal-height-row/4-items-per-column.html
@@ -0,0 +1,100 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Equal height row / Four items per column and full-screen divider{% endblock %}
+
+{% block standalone_css %}patterns_equal-height-row{% endblock %}
+
+{% block content %}
+
+
+
+
+
+
Continuous security
+
+
+ Imagine a world where every device is trustworthy. We designed every aspect of Ubuntu
+ Core to create the most secure embedded Linux ever, with a 10 year LTS commitment.
+
+
+
+
+
+
+
Fleet management
+
+
+ Enjoy reliable, remotely accessible and recoverable devices which are always
+ up-to-date with mission-critical OTA updates. In connected or air-gap environments.
+
+
+
+
+
+
+
Agile containerisation
+
+
+ Ubuntu Core is immutable and strictly confined. There is a clean separation between
+ the kernel, OS image and applications, each updated independently and protected
+ against corruption.
+
+
+
+
+
+
+
A strong hardware ecosystem
+
+
+ We enable Ubuntu Core with the best ODMs and silicon vendors in the world. We
+ continuously test it on leading IoT and edge devices and hardware.
+
+
+
+
+
+{% endblock %}
\ No newline at end of file
diff --git a/vanilla/templates/docs/examples/patterns/equal-height-row/default.html b/vanilla/templates/docs/examples/patterns/equal-height-row/default.html
new file mode 100644
index 0000000..1af7b15
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/equal-height-row/default.html
@@ -0,0 +1,73 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Equal height row / Four column row{% endblock %}
+
+{% block standalone_css %}patterns_equal-height-row{% endblock %}
+
+{% block content %}
+
+
+
+
+
Use the Ubuntu terminal and run Linux applications on Windows. Use the Ubuntu
+ terminal
+ and run Linux applications on Windows.
+
+
+
+
+
Use your Raspberry Pi as a desktop, server or IoT device with Ubuntu.
+
+
+
+
+
Spin up Ubuntu VMs on Windows, Mac and Linux.
+
+
+
+
+
Fast, dense, and secure container and VM management at any scale.
+
+
+
+
+{% endblock %}
\ No newline at end of file
diff --git a/vanilla/templates/docs/examples/patterns/forms/_checkbox-heading.html b/vanilla/templates/docs/examples/patterns/forms/_checkbox-heading.html
new file mode 100644
index 0000000..5820875
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/forms/_checkbox-heading.html
@@ -0,0 +1,27 @@
+
+
+ .p-checkbox--heading
+
+
+
+
+
+ .p-checkbox--heading
+
+
+
+
+
+ .p-checkbox--heading
+
+
+
+
+
+ .p-checkbox--heading
+
+
diff --git a/vanilla/templates/docs/examples/patterns/forms/_checkbox-inline.html b/vanilla/templates/docs/examples/patterns/forms/_checkbox-inline.html
new file mode 100644
index 0000000..9ae27f5
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/forms/_checkbox-inline.html
@@ -0,0 +1,36 @@
+
+
+ .p-checkbox--inline
+
+ alongside some text
+
+
+
diff --git a/vanilla/templates/docs/examples/patterns/forms/_checkbox.html b/vanilla/templates/docs/examples/patterns/forms/_checkbox.html
new file mode 100644
index 0000000..69c802f
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/forms/_checkbox.html
@@ -0,0 +1,19 @@
+
+ .p-checkbox
+
+
+
+ checked
+
+
+
+ disabled
+
+
+
+ is-required
+
diff --git a/vanilla/templates/docs/examples/patterns/forms/_form-stacked.html b/vanilla/templates/docs/examples/patterns/forms/_form-stacked.html
new file mode 100644
index 0000000..7c25662
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/forms/_form-stacked.html
@@ -0,0 +1,71 @@
+
diff --git a/vanilla/templates/docs/examples/patterns/forms/_indeterminate_script.js b/vanilla/templates/docs/examples/patterns/forms/_indeterminate_script.js
new file mode 100644
index 0000000..f288b90
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/forms/_indeterminate_script.js
@@ -0,0 +1,33 @@
+/**
+ Sets up indeterminate checkboxes and attaches event handlers to it
+ @param {String} checkboxSelector The CSS selector matching indeterminate checkboxes
+ @param {String} triggerSelector The CSS selector matching the trigger element
+*/
+function initIndeterminateCheckboxes(checkboxSelector, triggerSelector) {
+ var checkbox = document.querySelector(checkboxSelector);
+ var trigger = document.querySelector(triggerSelector);
+
+ // FOR EXAMPLE PURPOSES ONLY:
+ // In this example, we want the indeterminate state to be visible to Percy,
+ // which doesn't seem to support `.indeterminate`, so we hardcode the `aria-checked='mixed'`
+ // attribute in HTML, and only remove it when the checkbox receives a change event.
+ //
+ // The example checkbox isn't controlling other checkboxes (as it would be in
+ // a real world implementation), so we need a way to show each state here. When
+ // the checkbox is clicked, it behaves as a normal checkbox would and shows as either
+ // checked or unchecked, whilst clearing any indeterminate state.
+ checkbox.addEventListener('change', function () {
+ checkbox.removeAttribute('aria-checked');
+ checkbox.indeterminate = false;
+ });
+
+ // We still want to allow people viewing the example to get back to the indeterminate
+ // state, so provide a path to that via a button click.
+ trigger.addEventListener('click', function () {
+ checkbox.indeterminate = true;
+ });
+}
+
+document.addEventListener('DOMContentLoaded', function () {
+ initIndeterminateCheckboxes('.js-indeterminate-checkbox', '.js-indeterminate-trigger');
+});
diff --git a/vanilla/templates/docs/examples/patterns/forms/_radio-heading.html b/vanilla/templates/docs/examples/patterns/forms/_radio-heading.html
new file mode 100644
index 0000000..d29d04e
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/forms/_radio-heading.html
@@ -0,0 +1,27 @@
+
+
+ .p-radio--heading
+
+
+
+
+
+ .p-radio--heading
+
+
+
+
+
+ .p-radio--heading
+
+
+
+
+
+ .p-radio--heading
+
+
diff --git a/vanilla/templates/docs/examples/patterns/forms/_radio-inline.html b/vanilla/templates/docs/examples/patterns/forms/_radio-inline.html
new file mode 100644
index 0000000..afd171a
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/forms/_radio-inline.html
@@ -0,0 +1,36 @@
+
+
+ .p-radio--inline
+
+ alongside some text
+
+
+
diff --git a/vanilla/templates/docs/examples/patterns/forms/_radio.html b/vanilla/templates/docs/examples/patterns/forms/_radio.html
new file mode 100644
index 0000000..c186de7
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/forms/_radio.html
@@ -0,0 +1,19 @@
+
+ .p-radio
+
+
+
+ checked
+
+
+
+ disabled
+
+
+
+ is-required
+
diff --git a/vanilla/templates/docs/examples/patterns/forms/_script.js b/vanilla/templates/docs/examples/patterns/forms/_script.js
new file mode 100644
index 0000000..d13af10
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/forms/_script.js
@@ -0,0 +1,26 @@
+(function () {
+ var passwordToggleForms = Array.prototype.slice.call(document.querySelectorAll('.p-form-password-toggle'));
+
+ passwordToggleForms.forEach(function (passwordToggleForm) {
+ var passwordToggleButton = passwordToggleForm.querySelector('.p-button--base');
+ var passwordToggleLabel = passwordToggleButton.querySelector('span');
+
+ var passwordField = document.getElementById(passwordToggleButton.getAttribute('aria-controls'));
+
+ var passwordToggleIcon = passwordToggleButton.querySelector('i');
+
+ passwordToggleButton.addEventListener('click', function () {
+ if (passwordField.type === 'password') {
+ passwordField.type = 'text';
+ passwordToggleLabel.innerText = 'Hide';
+ passwordToggleIcon.classList.add('p-icon--hide');
+ passwordToggleIcon.classList.remove('p-icon--show');
+ } else {
+ passwordField.type = 'password';
+ passwordToggleLabel.innerText = 'Show';
+ passwordToggleIcon.classList.add('p-icon--show');
+ passwordToggleIcon.classList.remove('p-icon--hide');
+ }
+ });
+ });
+})();
diff --git a/vanilla/templates/docs/examples/patterns/forms/checkbox-heading.html b/vanilla/templates/docs/examples/patterns/forms/checkbox-heading.html
new file mode 100644
index 0000000..e692929
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/forms/checkbox-heading.html
@@ -0,0 +1,10 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Forms / Checkbox heading{% endblock %}
+
+{% block standalone_css %}patterns_form-tick-elements{% endblock %}
+
+{% block content %}
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/forms/checkbox-indeterminate.html b/vanilla/templates/docs/examples/patterns/forms/checkbox-indeterminate.html
new file mode 100644
index 0000000..8eeab46
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/forms/checkbox-indeterminate.html
@@ -0,0 +1,19 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Forms / Checkbox indeterminate{% endblock %}
+
+{% block standalone_css %}patterns_form-tick-elements{% endblock %}
+
+{% block content %}
+
+
+
Make indeterminate
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/forms/checkbox-inline.html b/vanilla/templates/docs/examples/patterns/forms/checkbox-inline.html
new file mode 100644
index 0000000..a7e3061
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/forms/checkbox-inline.html
@@ -0,0 +1,10 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Forms / Checkbox inline{% endblock %}
+
+{% block standalone_css %}patterns_form-tick-elements{% endblock %}
+
+{% block content %}
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/forms/checkbox-validation.html b/vanilla/templates/docs/examples/patterns/forms/checkbox-validation.html
new file mode 100644
index 0000000..0666881
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/forms/checkbox-validation.html
@@ -0,0 +1,18 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Forms / Checkbox Validation{% endblock %}
+
+{% block standalone_css %}patterns_form-tick-elements{% endblock %}
+
+{% block content %}
+
+{% endblock %}
+
+
diff --git a/vanilla/templates/docs/examples/patterns/forms/checkbox.html b/vanilla/templates/docs/examples/patterns/forms/checkbox.html
new file mode 100644
index 0000000..101c0f7
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/forms/checkbox.html
@@ -0,0 +1,10 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Forms / Checkbox{% endblock %}
+
+{% block standalone_css %}patterns_form-tick-elements{% endblock %}
+
+{% block content %}
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/forms/dense.html b/vanilla/templates/docs/examples/patterns/forms/dense.html
new file mode 100644
index 0000000..d736b27
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/forms/dense.html
@@ -0,0 +1,20 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Forms / Dense{% endblock %}
+
+{% block standalone_css %}patterns_forms{% endblock %}
+
+{% block content %}
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/forms/form-help-text.html b/vanilla/templates/docs/examples/patterns/forms/form-help-text.html
new file mode 100644
index 0000000..37a090d
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/forms/form-help-text.html
@@ -0,0 +1,20 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Forms / Help text{% endblock %}
+
+{% block standalone_css %}patterns_forms{% endblock %}
+
+{% block content %}
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/forms/form-inline.html b/vanilla/templates/docs/examples/patterns/forms/form-inline.html
new file mode 100644
index 0000000..15fdef6
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/forms/form-inline.html
@@ -0,0 +1,26 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Forms / Inline{% endblock %}
+
+{% block standalone_css %}patterns_forms{% endblock %}
+
+{% block content %}
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/forms/form-stacked.html b/vanilla/templates/docs/examples/patterns/forms/form-stacked.html
new file mode 100644
index 0000000..5a6a36f
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/forms/form-stacked.html
@@ -0,0 +1,8 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Forms / Stacked{% endblock %}
+
+{% block standalone_css %}patterns_forms{% endblock %}
+
+{% block content %}
+ {% include "docs/examples/patterns/forms/_form-stacked.html" %}
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/forms/form-validation-dark.html b/vanilla/templates/docs/examples/patterns/forms/form-validation-dark.html
new file mode 100644
index 0000000..99f1c11
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/forms/form-validation-dark.html
@@ -0,0 +1,40 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Forms / Validation Dark{% endblock %}
+
+{% block standalone_css %}patterns_forms{% endblock %}
+
+{% set is_dark = true %}
+{% block content %}
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/forms/form-validation.html b/vanilla/templates/docs/examples/patterns/forms/form-validation.html
new file mode 100644
index 0000000..06f1032
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/forms/form-validation.html
@@ -0,0 +1,39 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Forms / Validation{% endblock %}
+
+{% block standalone_css %}patterns_forms{% endblock %}
+
+{% block content %}
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/forms/forms-dark.html b/vanilla/templates/docs/examples/patterns/forms/forms-dark.html
new file mode 100644
index 0000000..20054dd
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/forms/forms-dark.html
@@ -0,0 +1,32 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Forms / Dark{% endblock %}
+
+{% block standalone_css %}patterns_forms{% endblock %}
+
+{% set is_dark = true %}
+{% block content %}
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/forms/forms-required.html b/vanilla/templates/docs/examples/patterns/forms/forms-required.html
new file mode 100644
index 0000000..543b911
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/forms/forms-required.html
@@ -0,0 +1,15 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Forms / Required{% endblock %}
+
+{% block standalone_css %}patterns_forms{% endblock %}
+
+{% block content %}
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/forms/password-toggle.html b/vanilla/templates/docs/examples/patterns/forms/password-toggle.html
new file mode 100644
index 0000000..bd05d19
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/forms/password-toggle.html
@@ -0,0 +1,35 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Forms / Password toggle{% endblock %}
+
+{% block standalone_css %}patterns_form-password-toggle{% endblock %}
+
+{% block content %}
+
+ Password
+
+
+ Show
+
+
+
+
+
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/forms/radio-heading.html b/vanilla/templates/docs/examples/patterns/forms/radio-heading.html
new file mode 100644
index 0000000..f3ffbed
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/forms/radio-heading.html
@@ -0,0 +1,10 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Forms / Radio heading{% endblock %}
+
+{% block standalone_css %}patterns_form-tick-elements{% endblock %}
+
+{% block content %}
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/forms/radio-inline.html b/vanilla/templates/docs/examples/patterns/forms/radio-inline.html
new file mode 100644
index 0000000..3e10061
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/forms/radio-inline.html
@@ -0,0 +1,10 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Forms / Radio inline{% endblock %}
+
+{% block standalone_css %}patterns_form-tick-elements{% endblock %}
+
+{% block content %}
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/forms/radio-validation.html b/vanilla/templates/docs/examples/patterns/forms/radio-validation.html
new file mode 100644
index 0000000..2a73b73
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/forms/radio-validation.html
@@ -0,0 +1,16 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Forms / Radio Validation{% endblock %}
+
+{% block standalone_css %}patterns_form-tick-elements{% endblock %}
+
+{% block content %}
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/forms/radio.html b/vanilla/templates/docs/examples/patterns/forms/radio.html
new file mode 100644
index 0000000..c224ed5
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/forms/radio.html
@@ -0,0 +1,10 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Forms / Radio{% endblock %}
+
+{% block standalone_css %}patterns_form-tick-elements{% endblock %}
+
+{% block content %}
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/forms/tick-variants.html b/vanilla/templates/docs/examples/patterns/forms/tick-variants.html
new file mode 100644
index 0000000..16bd807
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/forms/tick-variants.html
@@ -0,0 +1,102 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Forms / Tick element variants{% endblock %}
+
+{% block standalone_css %}patterns_form-tick-elements{% endblock %}
+
+{% block content %}
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/grid/25-25-25-25.html b/vanilla/templates/docs/examples/patterns/grid/25-25-25-25.html
new file mode 100644
index 0000000..6f12f7f
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/grid/25-25-25-25.html
@@ -0,0 +1,23 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Grid / 25/25/25/25{% endblock %}
+
+{% block standalone_css %}patterns_grid{% endblock %}
+
+{% block content %}
+
+
+
+ 25
+
+
+ 25
+
+
+ 25
+
+
+ 25
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/grid/25-25-50.html b/vanilla/templates/docs/examples/patterns/grid/25-25-50.html
new file mode 100644
index 0000000..0dd385b
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/grid/25-25-50.html
@@ -0,0 +1,20 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Grid / 25/25/50{% endblock %}
+
+{% block standalone_css %}patterns_grid{% endblock %}
+
+{% block content %}
+
+
+
+ 25
+
+
+ 25
+
+
+ 50
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/grid/25-75-mixed-responsive.html b/vanilla/templates/docs/examples/patterns/grid/25-75-mixed-responsive.html
new file mode 100644
index 0000000..51243ce
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/grid/25-75-mixed-responsive.html
@@ -0,0 +1,21 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Grid / 25/75 + 50/50 responsive{% endblock %}
+
+{% block standalone_css %}patterns_grid{% endblock %}
+
+{% block content %}
+
+
+
+ 25 by default
+ 50 on medium
+
+
+ 75 by default
+ 50 on medium
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/grid/25-75-responsive.html b/vanilla/templates/docs/examples/patterns/grid/25-75-responsive.html
new file mode 100644
index 0000000..6646c49
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/grid/25-75-responsive.html
@@ -0,0 +1,17 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Grid / 25/75 on large{% endblock %}
+
+{% block standalone_css %}patterns_grid{% endblock %}
+
+{% block content %}
+
+
+
+ 25 on large only
+
+
+ 75 on large only
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/grid/25-75.html b/vanilla/templates/docs/examples/patterns/grid/25-75.html
new file mode 100644
index 0000000..4af2de8
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/grid/25-75.html
@@ -0,0 +1,17 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Grid / 25/75{% endblock %}
+
+{% block standalone_css %}patterns_grid{% endblock %}
+
+{% block content %}
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/grid/50-50.html b/vanilla/templates/docs/examples/patterns/grid/50-50.html
new file mode 100644
index 0000000..0089ec9
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/grid/50-50.html
@@ -0,0 +1,17 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Grid / 50/50{% endblock %}
+
+{% block standalone_css %}patterns_grid{% endblock %}
+
+{% block content %}
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/grid/bordered.html b/vanilla/templates/docs/examples/patterns/grid/bordered.html
new file mode 100644
index 0000000..832f060
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/grid/bordered.html
@@ -0,0 +1,102 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Grid / Bordered{% endblock %}
+
+{% block standalone_css %}patterns_grid{% endblock %}
+
+{% block content %}
+
+
+
+
+ .col-11
+
+
+ .col-1
+
+
+
+
+ .col-10
+
+
+ .col-2
+
+
+
+
+ .col-9
+
+
+ .col-9
+
+
+
+
+ .col-8
+
+
+ .col-4
+
+
+
+
+ .col-7
+
+
+ .col-5
+
+
+
+
+ .col-6
+
+
+ .col-6
+
+
+
+
+ .col-5
+
+
+ .col-7
+
+
+
+
+ .col-4
+
+
+ .col-8
+
+
+
+
+ .col-3
+
+
+ .col-9
+
+
+
+
+ .col-2
+
+
+ .col-10
+
+
+
+
+ .col-1
+
+
+ .col-11
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/grid/default.html b/vanilla/templates/docs/examples/patterns/grid/default.html
new file mode 100644
index 0000000..2e11f22
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/grid/default.html
@@ -0,0 +1,47 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Grid / Default{% endblock %}
+
+{% block standalone_css %}patterns_grid{% endblock %}
+
+{% block content %}
+
+
+
+ .col-1
+
+
+ .col-1
+
+
+ .col-1
+
+
+ .col-1
+
+
+ .col-1
+
+
+ .col-1
+
+
+ .col-1
+
+
+ .col-1
+
+
+ .col-1
+
+
+ .col-1
+
+
+ .col-1
+
+
+ .col-1
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/grid/empty-columns.html b/vanilla/templates/docs/examples/patterns/grid/empty-columns.html
new file mode 100644
index 0000000..14400f4
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/grid/empty-columns.html
@@ -0,0 +1,37 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Grid / Empty columns{% endblock %}
+
+{% block standalone_css %}patterns_grid{% endblock %}
+
+{% block content %}
+
+
+
+ .col-8
+
+
+ .col-4
+
+
+
+
+ .col-7
+
+
+
+
col-3 col-start-large-2 inside col-4
+
+
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/grid/full.html b/vanilla/templates/docs/examples/patterns/grid/full.html
new file mode 100644
index 0000000..65fa729
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/grid/full.html
@@ -0,0 +1,185 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Grid / Full{% endblock %}
+
+{% block standalone_css %}patterns_grid{% endblock %}
+
+{% block content %}
+
+
+
+
+ .col-11
+
+
+ .col-1
+
+
+
+
+ .col-10
+
+
+ .col-2
+
+
+
+
+ .col-9
+
+
+ .col-3
+
+
+
+
+ .col-8
+
+
+ .col-4
+
+
+
+
+ .col-7
+
+
+ .col-5
+
+
+
+
+ .col-6
+
+
+ .col-6
+
+
+
+
+ .col-5
+
+
+ .col-7
+
+
+
+
+ .col-4
+
+
+ .col-8
+
+
+
+
+ .col-3
+
+
+ .col-9
+
+
+
+
+ .col-2
+
+
+ .col-10
+
+
+
+
+ .col-1
+
+
+ .col-11
+
+
+
+
+ .col-1
+
+
+ .col-1
+
+
+ .col-1
+
+
+ .col-1
+
+
+ .col-1
+
+
+ .col-1
+
+
+ .col-1
+
+
+ .col-1
+
+
+ .col-1
+
+
+ .col-1
+
+
+ .col-1
+
+
+ .col-1
+
+
+
+
+ .col-2
+
+
+ .col-2
+
+
+ .col-2
+
+
+ .col-2
+
+
+ .col-2
+
+
+ .col-2
+
+
+
+
+ .col-3
+
+
+ .col-3
+
+
+ .col-3
+
+
+ .col-3
+
+
+
+
+ .col-4
+
+
+ .col-4
+
+
+ .col-4
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/grid/incorrect-empty-columns.html b/vanilla/templates/docs/examples/patterns/grid/incorrect-empty-columns.html
new file mode 100644
index 0000000..86fc99d
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/grid/incorrect-empty-columns.html
@@ -0,0 +1,57 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Grid / Incorrect usage of empty columns{% endblock %}
+
+{% block standalone_css %}patterns_grid{% endblock %}
+
+{% block content %}
+
+
+
+ .col-1
+
+
+ .col-1
+
+
+ .col-1
+
+
+ .col-1
+
+
+ .col-1
+
+
+ .col-1
+
+
+ .col-1
+
+
+ .col-1
+
+
+ .col-1
+
+
+ .col-1
+
+
+ .col-1
+
+
+ .col-1
+
+
+
+
+ .col-7
+
+
+
+
col-3 col-start-large-7
+
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/grid/nested-medium.html b/vanilla/templates/docs/examples/patterns/grid/nested-medium.html
new file mode 100644
index 0000000..65fdf6b
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/grid/nested-medium.html
@@ -0,0 +1,56 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Grid / Nesting - Medium screens{% endblock %}
+
+{% block standalone_css %}patterns_grid{% endblock %}
+
+{% block content %}
+
+
+ col-medium-6
+
+
+ col-medium-3
+
+ col-medium-1
+
+
+ col-medium-1
+
+
+ col-medium-1
+
+
+ col-medium-1
+
+
+ col-medium-1
+
+
+ col-medium-1
+
+
+
+ col-medium-3
+
+ col-medium-1
+
+
+ col-medium-1
+
+
+ col-medium-1
+
+
+ col-medium-1
+
+
+ col-medium-1
+
+
+ col-medium-1
+
+
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/grid/nested-small.html b/vanilla/templates/docs/examples/patterns/grid/nested-small.html
new file mode 100644
index 0000000..2f57780
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/grid/nested-small.html
@@ -0,0 +1,66 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Grid / Nesting - Small screens{% endblock %}
+
+{% block standalone_css %}patterns_grid{% endblock %}
+
+{% block content %}
+
+
+ col-small-4
+
+
+ col-small-2
+
+
+ col-small-1
+
+
+ col-small-1
+
+
+
+
+ col-small-2
+
+
+
+
+ col-small-3
+
+
+ col-small-1
+
+
+ col-small-1
+
+
+ col-small-1
+
+
+
+
+ col-small-1
+
+
+
+
+ col-small-1
+
+
+ col-small-2
+
+
+ col-small-1
+
+
+ col-small-1
+
+
+
+
+ col-small-1
+
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/grid/nested.html b/vanilla/templates/docs/examples/patterns/grid/nested.html
new file mode 100644
index 0000000..f38520d
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/grid/nested.html
@@ -0,0 +1,31 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Grid / Nesting - All screens{% endblock %}
+
+{% block standalone_css %}patterns_grid{% endblock %}
+
+{% block content %}
+
+
+ col-small-4 .col-medium-6 .col-12
+
+
+ col-small-3 .col-medium-3 .col-9
+
+
+ col-small-1 col-medium-1 col-2
+
+
+ col-small-1 col-medium-1 col-2
+
+
+ col-small-1 col-medium-1 col-2
+
+
+
+
+ col-small-2 col-medium-3 col-3
+
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/grid/offsets.html b/vanilla/templates/docs/examples/patterns/grid/offsets.html
new file mode 100644
index 0000000..ece3a88
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/grid/offsets.html
@@ -0,0 +1,21 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Grid / Offset columns{% endblock %}
+
+{% block standalone_css %}patterns_grid{% endblock %}
+
+{% block content %}
+
+
+
col-start-large-2 col-order-large-2
+
+
+
col-start-large-1 col-order-large-1
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/grid/responsive.html b/vanilla/templates/docs/examples/patterns/grid/responsive.html
new file mode 100644
index 0000000..55ba269
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/grid/responsive.html
@@ -0,0 +1,49 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Grid / Responsive{% endblock %}
+
+{% block standalone_css %}patterns_grid{% endblock %}
+
+{% block style %}
+
+{% endblock %}
+
+{% block content %}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/heading-icon/heading-icon-small.html b/vanilla/templates/docs/examples/patterns/heading-icon/heading-icon-small.html
new file mode 100644
index 0000000..592c779
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/heading-icon/heading-icon-small.html
@@ -0,0 +1,14 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Heading icon / Small{% endblock %}
+
+{% block standalone_css %}patterns_heading-icon{% endblock %}
+
+{% block content %}
+
+
+
LXD, the Linux container hypervisor, merges the speed and density of containers with the manageability and security of traditional virtual machines. Economics are directly tied to density, and no other virtualisation technology is as fast or dense as LXD.
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/heading-icon/heading-icon-stacked.html b/vanilla/templates/docs/examples/patterns/heading-icon/heading-icon-stacked.html
new file mode 100644
index 0000000..17da0ae
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/heading-icon/heading-icon-stacked.html
@@ -0,0 +1,14 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Heading icon / Stacked{% endblock %}
+
+{% block standalone_css %}patterns_heading-icon{% endblock %}
+
+{% block content %}
+
+
+
LXD, the Linux container hypervisor, merges the speed and density of containers with the manageability and security of traditional virtual machines. Economics are directly tied to density, and no other virtualisation technology is as fast or dense as LXD.
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/heading-icon/heading-icon.html b/vanilla/templates/docs/examples/patterns/heading-icon/heading-icon.html
new file mode 100644
index 0000000..71d9d11
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/heading-icon/heading-icon.html
@@ -0,0 +1,14 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Heading icon / Default{% endblock %}
+
+{% block standalone_css %}patterns_heading-icon{% endblock %}
+
+{% block content %}
+
+
+
LXD, the Linux container hypervisor, merges the speed and density of containers with the manageability and security of traditional virtual machines. Economics are directly tied to density, and no other virtualisation technology is as fast or dense as LXD.
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/headings/default.html b/vanilla/templates/docs/examples/patterns/headings/default.html
new file mode 100644
index 0000000..1d19e0f
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/headings/default.html
@@ -0,0 +1,13 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Headings / Default{% endblock %}
+
+{% block standalone_css %}patterns_headings{% endblock %}
+
+{% block content %}
+
Learn DevOps best practices
+
Companies involved in OpenStack
+
Latest news from our blog
+
Further reading
+
Kubernetes
+
Ubuntu is an open source software operating system
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/headings/display.html b/vanilla/templates/docs/examples/patterns/headings/display.html
new file mode 100644
index 0000000..286e1c5
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/headings/display.html
@@ -0,0 +1,8 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Headings / Display{% endblock %}
+
+{% block standalone_css %}patterns_headings{% endblock %}
+
+{% block content %}
+
Build at speed.
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/headings/mixed.html b/vanilla/templates/docs/examples/patterns/headings/mixed.html
new file mode 100644
index 0000000..16bb8fe
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/headings/mixed.html
@@ -0,0 +1,13 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Headings / Mixed classes{% endblock %}
+
+{% block standalone_css %}patterns_headings{% endblock %}
+
+{% block content %}
+
Ubuntu is an open source software operating system
+
Kubernetes
+
Further reading
+
Latest news from our blog
+
Companies involved in OpenStack
+
Learn DevOps best practices
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/headings/muted.html b/vanilla/templates/docs/examples/patterns/headings/muted.html
new file mode 100644
index 0000000..7d74ef5
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/headings/muted.html
@@ -0,0 +1,8 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Headings / Muted{% endblock %}
+
+{% block standalone_css %}patterns_headings{% endblock %}
+
+{% block content %}
+
Influential contributors of openstack
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/hero/hero-404.html b/vanilla/templates/docs/examples/patterns/hero/hero-404.html
new file mode 100644
index 0000000..e129870
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/hero/hero-404.html
@@ -0,0 +1,37 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Hero / 404{% endblock %}
+{% block standalone_css %}patterns_hero{% endblock %}
+
+{% set is_paper = True %}
+{% block content %}
+
+
+
+
+
+
+
Page not found
+
We can't find the page you're looking for.
+ File a bug if you think this might be an error.
+
+
+
+
+{% endblock %}
+
+
+
+
+
diff --git a/vanilla/templates/docs/examples/patterns/hero/hero-blog.html b/vanilla/templates/docs/examples/patterns/hero/hero-blog.html
new file mode 100644
index 0000000..bc78a49
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/hero/hero-blog.html
@@ -0,0 +1,103 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Hero / Blog{% endblock %}
+{% block standalone_css %}patterns_hero{% endblock %}
+
+{% set is_paper = True %}
+{% block content %}
+
+
+
+
+
+
+
Canonical joins the OpenAirInterface Software Alliance
+
+
+
+
+
+{% endblock %}
+
+
+
+
+
diff --git a/vanilla/templates/docs/examples/patterns/hero/hero-heading-1.html b/vanilla/templates/docs/examples/patterns/hero/hero-heading-1.html
new file mode 100644
index 0000000..07206c0
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/hero/hero-heading-1.html
@@ -0,0 +1,16 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Hero / Heading{% endblock %}
+{% block standalone_css %}patterns_hero{% endblock %}
+
+{% set is_paper = True %}
+{% block content %}
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/hero/hero-heading-2.html b/vanilla/templates/docs/examples/patterns/hero/hero-heading-2.html
new file mode 100644
index 0000000..0969946
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/hero/hero-heading-2.html
@@ -0,0 +1,17 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Hero / Subtitle{% endblock %}
+{% block standalone_css %}patterns_hero{% endblock %}
+
+{% set is_paper = True %}
+{% block content %}
+
+
+
+
+
Passionate about open source? So are we.
+
Be where the cutting edge is established.
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/hero/hero-line-breaks.html b/vanilla/templates/docs/examples/patterns/hero/hero-line-breaks.html
new file mode 100644
index 0000000..a1d1eec
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/hero/hero-line-breaks.html
@@ -0,0 +1,44 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Hero / Line break{% endblock %}
+{% block standalone_css %}patterns_hero{% endblock %}
+
+{% set is_paper = True %}
+{% block content %}
+
+
+
+
+
+
Press centre
+
All the latest news and featured stories from Canonical.
+
+
+
+
+
+
Get in touch
+
For the Canonical Communications team, email pr@canonical.com .
+
+
+
+
+{% endblock %}
+
+
+
+
+
diff --git a/vanilla/templates/docs/examples/patterns/hero/hero-nested-grid.html b/vanilla/templates/docs/examples/patterns/hero/hero-nested-grid.html
new file mode 100644
index 0000000..d2a3656
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/hero/hero-nested-grid.html
@@ -0,0 +1,47 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Hero / Nested grid{% endblock %}
+{% block standalone_css %}patterns_hero{% endblock %}
+
+{% set is_paper = True %}
+{% block content %}
+
+
+
+
+
+
+
+
+
What is Kubeflow?
+
Kubeflow is the open source machine learning MLOps platform
+
+
+
+
Kubeflow enables you to develop and deploy machine learning models at any scale. It is a cloud-native application that runs on any cloud.
+
Charmed Kubeflow is Canonical’s distribution. It is secure and seamlessly integrated with other leading tools such as MLflow.
+
+
+
+
+
+
+
+{% endblock %}
+
+
+
+
+
diff --git a/vanilla/templates/docs/examples/patterns/hero/hero-rules.html b/vanilla/templates/docs/examples/patterns/hero/hero-rules.html
new file mode 100644
index 0000000..dbda122
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/hero/hero-rules.html
@@ -0,0 +1,26 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Hero / Horizontal rules{% endblock %}
+{% block standalone_css %}patterns_hero{% endblock %}
+
+{% set is_paper = True %}
+{% block content %}
+
+
+
+
+
+
Enterprise Data Fabric
+
Data flows better with the right tools.
+
+
+
Canonical’s open source enterprise Data Fabric suite delivers better ROI across clouds. Engineered for the most critical workloads.
+
+
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/hero/hero-sections-search.html b/vanilla/templates/docs/examples/patterns/hero/hero-sections-search.html
new file mode 100644
index 0000000..1a7551a
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/hero/hero-sections-search.html
@@ -0,0 +1,36 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Hero / Search{% endblock %}
+{% block standalone_css %}patterns_hero{% endblock %}
+
+{% set is_paper = True %}
+{% block content %}
+
+
+
+
+
+
Find a Canonical partner
+
+
+
Canonical's network of Ubuntu partners spans the full range of our product suite. We offer partner programmes for public clouds, IHVs/OEMs, desktop, channel/resellers and global systems integrators.
+
+
+
+
+
+{% endblock %}
+
+
+
+
+Search 119 partners
\ No newline at end of file
diff --git a/vanilla/templates/docs/examples/patterns/hero/hero-sections.html b/vanilla/templates/docs/examples/patterns/hero/hero-sections.html
new file mode 100644
index 0000000..b3b3ef6
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/hero/hero-sections.html
@@ -0,0 +1,19 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Hero / Sections{% endblock %}
+{% block standalone_css %}patterns_hero{% endblock %}
+
+{% set is_paper = True %}
+{% block content %}
+
+
+
+
+
+
Documentation practice at Canonical
+
+
At Canonical, we have embarked on a comprehensive, long-term project to transform documentation. Our aim is to create and maintain documentation product and practice that will represent a standard of excellence. We want documentation to be the best it possibly can be.
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/hero/hero-signpost.html b/vanilla/templates/docs/examples/patterns/hero/hero-signpost.html
new file mode 100644
index 0000000..f5c51b1
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/hero/hero-signpost.html
@@ -0,0 +1,28 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Hero / Signpost logo{% endblock %}
+{% block standalone_css %}patterns_hero{% endblock %}
+
+{% set is_paper = True %}
+{% block content %}
+
+
+
+
+
+
+
+
+
Apache Spark® operations,
+
+
+
Secure and automate the deployment, maintenance and upgrades of Spark on Kubernetes. Run your big data clusters across private and public clouds.
+
+
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/icons/icons-additional.html b/vanilla/templates/docs/examples/patterns/icons/icons-additional.html
new file mode 100644
index 0000000..eb836b8
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/icons/icons-additional.html
@@ -0,0 +1,209 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Icons / Additional{% endblock %}
+
+{% block style %}
+
+{% endblock %}
+
+{% block content %}
+
+
+
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/icons/icons-dark-deprecated.html b/vanilla/templates/docs/examples/patterns/icons/icons-dark-deprecated.html
new file mode 100644
index 0000000..0376840
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/icons/icons-dark-deprecated.html
@@ -0,0 +1,62 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Icons / Dark (deprecated){% endblock %}
+
+{% block standalone_css %}patterns_icons{% endblock %}
+
+{% block content %}
+
+
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/icons/icons-dark.html b/vanilla/templates/docs/examples/patterns/icons/icons-dark.html
new file mode 100644
index 0000000..2ec0e33
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/icons/icons-dark.html
@@ -0,0 +1,33 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Icons / Dark{% endblock %}
+
+{% block standalone_css %}patterns_icons{% endblock %}
+
+{% set is_dark = True %}
+{% block content %}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/icons/icons-light.html b/vanilla/templates/docs/examples/patterns/icons/icons-light.html
new file mode 100644
index 0000000..5b6cbc6
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/icons/icons-light.html
@@ -0,0 +1,34 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Icons / Light{% endblock %}
+
+{% block standalone_css %}patterns_icons{% endblock %}
+
+{% block content %}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/icons/icons-links.html b/vanilla/templates/docs/examples/patterns/icons/icons-links.html
new file mode 100644
index 0000000..e73a93c
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/icons/icons-links.html
@@ -0,0 +1,9 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Icons / Links{% endblock %}
+
+{% block standalone_css %}patterns_icons{% endblock %}
+
+{% block content %}
+
GitHub
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/icons/icons-social.html b/vanilla/templates/docs/examples/patterns/icons/icons-social.html
new file mode 100644
index 0000000..44f9c2d
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/icons/icons-social.html
@@ -0,0 +1,28 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Icons / Social{% endblock %}
+
+{% block standalone_css %}patterns_icons{% endblock %}
+
+{% block content %}
+
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/image/bordered.html b/vanilla/templates/docs/examples/patterns/image/bordered.html
new file mode 100644
index 0000000..8106ac5
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/image/bordered.html
@@ -0,0 +1,8 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Image / Border{% endblock %}
+
+{% block standalone_css %}patterns_image{% endblock %}
+
+{% block content %}
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/image/caption.html b/vanilla/templates/docs/examples/patterns/image/caption.html
new file mode 100644
index 0000000..7d79295
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/image/caption.html
@@ -0,0 +1,11 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Image / Caption{% endblock %}
+
+{% block standalone_css %}patterns_image{% endblock %}
+
+{% block content %}
+
+ A drone in flight
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/image/shadowed.html b/vanilla/templates/docs/examples/patterns/image/shadowed.html
new file mode 100644
index 0000000..157da51
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/image/shadowed.html
@@ -0,0 +1,8 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Image / Shadow{% endblock %}
+
+{% block standalone_css %}patterns_image{% endblock %}
+
+{% block content %}
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/image/spacing.html b/vanilla/templates/docs/examples/patterns/image/spacing.html
new file mode 100644
index 0000000..1d10181
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/image/spacing.html
@@ -0,0 +1,11 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Image / Spacing{% endblock %}
+
+{% block standalone_css %}base{% endblock %}
+
+{% block content %}
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/labels.html b/vanilla/templates/docs/examples/patterns/labels.html
new file mode 100644
index 0000000..483191b
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/labels.html
@@ -0,0 +1,12 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Labels (deprecated) / Default{% endblock %}
+
+{% block standalone_css %}patterns_label{% endblock %}
+
+{% block content %}
+
Default
+
Positive
+
Caution
+
Negative
+
Information
+{% endblock %}
\ No newline at end of file
diff --git a/vanilla/templates/docs/examples/patterns/links/links-back-to-top.html b/vanilla/templates/docs/examples/patterns/links/links-back-to-top.html
new file mode 100644
index 0000000..5ba0767
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/links/links-back-to-top.html
@@ -0,0 +1,10 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Links / Back to top{% endblock %}
+
+{% block standalone_css %}patterns_links{% endblock %}
+
+{% block content %}
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/links/links-dark.html b/vanilla/templates/docs/examples/patterns/links/links-dark.html
new file mode 100644
index 0000000..f886b89
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/links/links-dark.html
@@ -0,0 +1,9 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Links / On dark{% endblock %}
+
+{% block standalone_css %}patterns_links{% endblock %}
+
+{% set is_dark = True %}
+{% block content %}
+
Package & publish your app
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/links/links-inverted.html b/vanilla/templates/docs/examples/patterns/links/links-inverted.html
new file mode 100644
index 0000000..b56d9d4
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/links/links-inverted.html
@@ -0,0 +1,9 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Links / Inverted (deprecated){% endblock %}
+
+{% block standalone_css %}patterns_links{% endblock %}
+
+{% set is_dark = True %}
+{% block content %}
+
Package & publish your app
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/links/links-skip.html b/vanilla/templates/docs/examples/patterns/links/links-skip.html
new file mode 100644
index 0000000..aeae9d2
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/links/links-skip.html
@@ -0,0 +1,45 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Links / Skip Link{% endblock %}
+
+{% block standalone_css %}patterns_skip-link{% endblock %}
+
+{% block content %}
+
Jump to main content
+
+
+
+
+
+
A simple, extensible CSS framework
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/links/links-soft.html b/vanilla/templates/docs/examples/patterns/links/links-soft.html
new file mode 100644
index 0000000..077208f
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/links/links-soft.html
@@ -0,0 +1,8 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Links / Soft{% endblock %}
+
+{% block standalone_css %}patterns_links{% endblock %}
+
+{% block content %}
+
Learn about MAAS
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/list-tree.html b/vanilla/templates/docs/examples/patterns/list-tree.html
new file mode 100644
index 0000000..b567f09
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/list-tree.html
@@ -0,0 +1,69 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}List tree{% endblock %}
+
+{% block standalone_css %}patterns_list-tree{% endblock %}
+
+{% block content %}
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/lists/list-nested-count.html b/vanilla/templates/docs/examples/patterns/lists/list-nested-count.html
new file mode 100644
index 0000000..4889979
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/lists/list-nested-count.html
@@ -0,0 +1,17 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Lists / Nested Count{% endblock %}
+
+{% block standalone_css %}patterns_lists{% endblock %}
+
+{% block content %}
+
+ Install LXD using the instructions for your OS
+ Install Conjure up using the instructions for your OS
+
+ Ubuntu
+ macOS
+
+
+ Proceed with the relevant steps from the install instructions and choose localhost in the CHOOSE A CLOUD step.
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/lists/list-nested-stepped-detailed.html b/vanilla/templates/docs/examples/patterns/lists/list-nested-stepped-detailed.html
new file mode 100644
index 0000000..c668ddb
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/lists/list-nested-stepped-detailed.html
@@ -0,0 +1,55 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Lists / Ordered list nested in stepped list{% endblock %}
+
+{% block standalone_css %}patterns_lists{% endblock %}
+
+{% block content %}
+
+
+
+ Log in to JAAS
+
+ Ensure you have an Ubuntu SSO account before contacting JAAS. Log in to JAAS now.
+
+
+
+
+ Configure a model
+
+
+
Applications are contained within models and are installed via charms. Configure your model by pressing the "Start a new model" button.
+
+ Insert the USB flash drive in the NUC.
+ Start the NUC and push F10 to enter the boot menu.
+ Select the USB flash drive as a boot option.
+
+
+
+
+
+ Credentials and SSH keys
+
+ After having selected a cloud, a form will appear for submitting your credentials to JAAS. The below resources are available if you need help with gathering credentials.
+
+
+
+
+ Design and build
+
+
+
Together, we design your Kubernetes cluster based on your hardware, scale, roadmap, applications and monitoring system. We'll guide you through the hardware specification process to maximise the efficiency of your CAPEX, and we'll tailor the architecture of your cloud to meet your application, security, regulatory and integration requirements.
+
+ Insert the USB flash drive in the NUC.
+ Start the NUC and push F10 to enter the boot menu.
+ Select the USB flash drive as a boot option.
+ The system will automatically execute the first stage of installation and prompt for an acknowledgement of a complete system recovery.
+ Follow the instructions and enter appropriate options for language, WiFi, location (timezone), and keyboard layout.
+ Pick a hostname, user account and password.
+ Wait for the configuration to finish. If you are connected to an active network, it will take several minutes to download and apply additional updates.
+ Ubuntu is installed. Use your account and password to log in.
+
+
+
+{% endblock %}
\ No newline at end of file
diff --git a/vanilla/templates/docs/examples/patterns/lists/list.html b/vanilla/templates/docs/examples/patterns/lists/list.html
new file mode 100644
index 0000000..5e7a4ba
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/lists/list.html
@@ -0,0 +1,12 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Lists / Default{% endblock %}
+
+{% block standalone_css %}patterns_lists{% endblock %}
+
+{% block content %}
+
+ Digital signage
+ Robotics
+ Gateways
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/lists/lists-dividers-all-wrapping.html b/vanilla/templates/docs/examples/patterns/lists/lists-dividers-all-wrapping.html
new file mode 100644
index 0000000..5c8356a
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/lists/lists-dividers-all-wrapping.html
@@ -0,0 +1,43 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Lists / All variations with horizontal divider and wrapping text{% endblock %}
+
+{% block standalone_css %}patterns_lists{% endblock %}
+
+{% block content %}
+
+
+ Balance compute load in the cloud
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod risus a nisi pharetra iaculis. Maecenas dictum consectetur vehicula. Maecenas ullamcorper interdum ipsum, in rutrum felis consectetur quis. Quisque dictum lorem non pretium pretium. Aenean vitae sodales magna. Vivamus tincidunt, mauris vel accumsan pretium, sem dolor facilisis turpis, vitae imperdiet libero quam eget nibh. Nam vulputate ligula quis turpis facilisis, ac dapibus ipsum commodo. Aliquam dolor turpis, congue eu orci non, commodo placerat magna.
+ In sed tristique lectus. Nunc posuere ullamcorper nulla, id fringilla urna cursus et. Ut in augue sed risus iaculis aliquam. Sed ullamcorper turpis magna, ullamcorper egestas nunc auctor et. Ut rutrum nec enim et tincidunt. Ut quis est est. Donec aliquet mi sit amet lectus posuere consequat. Integer sit amet turpis vel nunc suscipit ultrices. Integer laoreet porttitor sagittis. Suspendisse ut erat ut eros luctus ultricies. Donec varius posuere maximus. Duis venenatis tortor sit amet lacus placerat, eget blandit ex imperdiet. Curabitur maximus aliquam nulla, id auctor ligula accumsan eu. Nulla facilisi. Integer dignissim diam ligula.
+ Nulla sit amet diam ac elit interdum eleifend. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Fusce tempus imperdiet nisi, eget mollis leo faucibus a. Curabitur vitae sem lectus. Nulla facilisi. Fusce ullamcorper ultricies lectus a blandit. Nullam sed nisi libero. Praesent at lectus bibendum, iaculis neque nec, volutpat velit.
+
+
+
+ Balance compute load in the cloud
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod risus a nisi pharetra iaculis. Maecenas dictum consectetur vehicula. Maecenas ullamcorper interdum ipsum, in rutrum felis consectetur quis. Quisque dictum lorem non pretium pretium. Aenean vitae sodales magna. Vivamus tincidunt, mauris vel accumsan pretium, sem dolor facilisis turpis, vitae imperdiet libero quam eget nibh. Nam vulputate ligula quis turpis facilisis, ac dapibus ipsum commodo. Aliquam dolor turpis, congue eu orci non, commodo placerat magna.
+ In sed tristique lectus. Nunc posuere ullamcorper nulla, id fringilla urna cursus et. Ut in augue sed risus iaculis aliquam. Sed ullamcorper turpis magna, ullamcorper egestas nunc auctor et. Ut rutrum nec enim et tincidunt. Ut quis est est. Donec aliquet mi sit amet lectus posuere consequat. Integer sit amet turpis vel nunc suscipit ultrices. Integer laoreet porttitor sagittis. Suspendisse ut erat ut eros luctus ultricies. Donec varius posuere maximus. Duis venenatis tortor sit amet lacus placerat, eget blandit ex imperdiet. Curabitur maximus aliquam nulla, id auctor ligula accumsan eu. Nulla facilisi. Integer dignissim diam ligula.
+ Nulla sit amet diam ac elit interdum eleifend. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Fusce tempus imperdiet nisi, eget mollis leo faucibus a. Curabitur vitae sem lectus. Nulla facilisi. Fusce ullamcorper ultricies lectus a blandit. Nullam sed nisi libero. Praesent at lectus bibendum, iaculis neque nec, volutpat velit.
+
+
+
+ Balance compute load in the cloud
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod risus a nisi pharetra iaculis. Maecenas dictum consectetur vehicula. Maecenas ullamcorper interdum ipsum, in rutrum felis consectetur quis. Quisque dictum lorem non pretium pretium. Aenean vitae sodales magna. Vivamus tincidunt, mauris vel accumsan pretium, sem dolor facilisis turpis, vitae imperdiet libero quam eget nibh. Nam vulputate ligula quis turpis facilisis, ac dapibus ipsum commodo. Aliquam dolor turpis, congue eu orci non, commodo placerat magna.
+ In sed tristique lectus. Nunc posuere ullamcorper nulla, id fringilla urna cursus et. Ut in augue sed risus iaculis aliquam. Sed ullamcorper turpis magna, ullamcorper egestas nunc auctor et. Ut rutrum nec enim et tincidunt. Ut quis est est. Donec aliquet mi sit amet lectus posuere consequat. Integer sit amet turpis vel nunc suscipit ultrices. Integer laoreet porttitor sagittis. Suspendisse ut erat ut eros luctus ultricies. Donec varius posuere maximus. Duis venenatis tortor sit amet lacus placerat, eget blandit ex imperdiet. Curabitur maximus aliquam nulla, id auctor ligula accumsan eu. Nulla facilisi. Integer dignissim diam ligula.
+ Nulla sit amet diam ac elit interdum eleifend. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Fusce tempus imperdiet nisi, eget mollis leo faucibus a. Curabitur vitae sem lectus. Nulla facilisi. Fusce ullamcorper ultricies lectus a blandit. Nullam sed nisi libero. Praesent at lectus bibendum, iaculis neque nec, volutpat velit.
+
+
+
+
+
+ Balance compute load in the cloud
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod risus a nisi pharetra iaculis. Maecenas dictum consectetur vehicula. Maecenas ullamcorper interdum ipsum, in rutrum felis consectetur quis. Quisque dictum lorem non pretium pretium. Aenean vitae sodales magna. Vivamus tincidunt, mauris vel accumsan pretium, sem dolor facilisis turpis, vitae imperdiet libero quam eget nibh. Nam vulputate ligula quis turpis facilisis, ac dapibus ipsum commodo. Aliquam dolor turpis, congue eu orci non, commodo placerat magna.
+ In sed tristique lectus. Nunc posuere ullamcorper nulla, id fringilla urna cursus et. Ut in augue sed risus iaculis aliquam. Sed ullamcorper turpis magna, ullamcorper egestas nunc auctor et. Ut rutrum nec enim et tincidunt. Ut quis est est. Donec aliquet mi sit amet lectus posuere consequat. Integer sit amet turpis vel nunc suscipit ultrices. Integer laoreet porttitor sagittis. Suspendisse ut erat ut eros luctus ultricies. Donec varius posuere maximus. Duis venenatis tortor sit amet lacus placerat, eget blandit ex imperdiet. Curabitur maximus aliquam nulla, id auctor ligula accumsan eu. Nulla facilisi. Integer dignissim diam ligula.
+ Nulla sit amet diam ac elit interdum eleifend. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Fusce tempus imperdiet nisi, eget mollis leo faucibus a. Curabitur vitae sem lectus. Nulla facilisi. Fusce ullamcorper ultricies lectus a blandit. Nullam sed nisi libero. Praesent at lectus bibendum, iaculis neque nec, volutpat velit.
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/lists/lists-dividers-all.html b/vanilla/templates/docs/examples/patterns/lists/lists-dividers-all.html
new file mode 100644
index 0000000..dc1d6f6
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/lists/lists-dividers-all.html
@@ -0,0 +1,35 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Lists / All variations with horizontal divider{% endblock %}
+
+{% block standalone_css %}patterns_lists{% endblock %}
+
+{% block content %}
+
+
+ Balance compute load in the cloud
+
+ Balance compute load in the cloud
+
+
+
+ Balance compute load in the cloud
+
+ Balance compute load in the cloud
+
+
+
+ Balance compute load in the cloud
+
+ Balance compute load in the cloud
+
+
+
+
+
+ Balance compute load in the cloud
+
+ Balance compute load in the cloud
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/lists/lists-dividers-bulleted.html b/vanilla/templates/docs/examples/patterns/lists/lists-dividers-bulleted.html
new file mode 100644
index 0000000..bd45092
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/lists/lists-dividers-bulleted.html
@@ -0,0 +1,19 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Lists / Bulletted with horizontal divider{% endblock %}
+
+{% block standalone_css %}patterns_lists{% endblock %}
+
+{% block content %}
+
+ Balance compute load in the cloud
+
+ List of steps
+
+ Balance compute load in the cloud
+ Optimise for specific workloads
+ Assess overcommit ratios
+
+
+ Assess overcommit ratios
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/lists/lists-dividers-ordered.html b/vanilla/templates/docs/examples/patterns/lists/lists-dividers-ordered.html
new file mode 100644
index 0000000..26b0993
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/lists/lists-dividers-ordered.html
@@ -0,0 +1,19 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Lists / Ordered with horizontal divider{% endblock %}
+
+{% block standalone_css %}patterns_lists{% endblock %}
+
+{% block content %}
+
+ Balance compute load in the cloud
+
+ List of steps
+
+ Balance compute load in the cloud
+ Optimise for specific workloads
+ Assess overcommit ratios
+
+
+ Assess overcommit ratios
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/lists/lists-dividers-ticked.html b/vanilla/templates/docs/examples/patterns/lists/lists-dividers-ticked.html
new file mode 100644
index 0000000..f920f73
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/lists/lists-dividers-ticked.html
@@ -0,0 +1,18 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Lists / Ticked with horizontal divider{% endblock %}
+
+{% block standalone_css %}patterns_lists{% endblock %}
+
+{% block content %}
+
+
+ Balance compute load in the cloud
+
+ Balance compute load in the cloud
+ Optimise for specific workloads
+ Assess overcommit ratios
+
+
+ Assess overcommit ratios
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/lists/lists-dividers.html b/vanilla/templates/docs/examples/patterns/lists/lists-dividers.html
new file mode 100644
index 0000000..7536c4d
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/lists/lists-dividers.html
@@ -0,0 +1,18 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Lists / Horizontal divider{% endblock %}
+
+{% block standalone_css %}patterns_lists{% endblock %}
+
+{% block content %}
+
+
+ Balance compute load in the cloud
+
+ Balance compute load in the cloud
+ Optimise for specific workloads
+ Assess overcommit ratios
+
+
+ Assess overcommit ratios
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/lists/lists-inline-stretch-align.html b/vanilla/templates/docs/examples/patterns/lists/lists-inline-stretch-align.html
new file mode 100644
index 0000000..90a2ecc
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/lists/lists-inline-stretch-align.html
@@ -0,0 +1,13 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Lists / Stretched with alignment{% endblock %}
+
+{% block standalone_css %}patterns_lists{% endblock %}
+
+{% block content %}
+
+ Documentation
+ New
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/lists/lists-inline-stretch.html b/vanilla/templates/docs/examples/patterns/lists/lists-inline-stretch.html
new file mode 100644
index 0000000..9c91931
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/lists/lists-inline-stretch.html
@@ -0,0 +1,12 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Lists / Stretched{% endblock %}
+
+{% block standalone_css %}patterns_lists{% endblock %}
+
+{% block content %}
+
+ Community
+ Careers
+ Press centre
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/lists/lists-inline.html b/vanilla/templates/docs/examples/patterns/lists/lists-inline.html
new file mode 100644
index 0000000..1aefd26
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/lists/lists-inline.html
@@ -0,0 +1,12 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Lists / Inline{% endblock %}
+
+{% block standalone_css %}patterns_lists{% endblock %}
+
+{% block content %}
+
+ Community
+ Careers
+ Press centre
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/lists/lists-mid-dot-dark.html b/vanilla/templates/docs/examples/patterns/lists/lists-mid-dot-dark.html
new file mode 100644
index 0000000..a2b75fa
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/lists/lists-mid-dot-dark.html
@@ -0,0 +1,19 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Lists / Middot - Dark{% endblock %}
+
+{% block standalone_css %}patterns_lists{% endblock %}
+
+{% set is_dark = True %}
+{% block content %}
+
+
+ Legal information
+
+
+ Data privacy
+
+
+ Report a bug on this site
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/lists/lists-mid-dot.html b/vanilla/templates/docs/examples/patterns/lists/lists-mid-dot.html
new file mode 100644
index 0000000..709c997
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/lists/lists-mid-dot.html
@@ -0,0 +1,18 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Lists / Middot{% endblock %}
+
+{% block standalone_css %}patterns_lists{% endblock %}
+
+{% block content %}
+
+
+ Legal information
+
+
+ Data privacy
+
+
+ Report a bug on this site
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/lists/lists-split.html b/vanilla/templates/docs/examples/patterns/lists/lists-split.html
new file mode 100644
index 0000000..3556828
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/lists/lists-split.html
@@ -0,0 +1,15 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Lists / Split{% endblock %}
+
+{% block standalone_css %}patterns_lists{% endblock %}
+
+{% block content %}
+
+ Jointly shape the OpenStack architecture
+ We help you plan your cloud hardware requirements
+ We build OpenStack in your data center. With OpenStack, you can easily manage your cloud infrastructure with our intuitive web-based dashboard. Our platform offers flexible scaling and automatic upgrades, ensuring your cloud stays up-to-date and responsive to your needs.
+ We operate the cloud to an SLA
+ Transparent audit, logging, monitoring and management
+ When your team is ready, we hand over the keys
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/lists/lists-status.html b/vanilla/templates/docs/examples/patterns/lists/lists-status.html
new file mode 100644
index 0000000..46f4370
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/lists/lists-status.html
@@ -0,0 +1,11 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Lists / Status{% endblock %}
+
+{% block standalone_css %}patterns_lists{% endblock %}
+
+{% block content %}
+
+ Hardware guidance and sizing
+ 24 x 7 support
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/lists/lists-stepped-dark.html b/vanilla/templates/docs/examples/patterns/lists/lists-stepped-dark.html
new file mode 100644
index 0000000..0c020af
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/lists/lists-stepped-dark.html
@@ -0,0 +1,67 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Lists / Stepped / Dark{% endblock %}
+
+{% block standalone_css %}patterns_lists{% endblock %}
+
+{% set is_dark = True %}
+{% block content %}
+
+
+
+ Log in to JAAS
+
+ Ensure you have an Ubuntu SSO account before contacting JAAS. Log in to JAAS now.
+
+
+
+
+ Configure a model
+
+ Applications are contained within models and are installed via charms. Configure your model by pressing the "Start a new model" button.
+
+
+
+
+ Credentials and SSH keys
+
+ After having selected a cloud, a form will appear for submitting your credentials to JAAS. The below resources are available if you need help with gathering credentials.
+
+
+
+
+ Design and build
+
+ Together, we design your Kubernetes cluster based on your hardware, scale, roadmap, applications and monitoring system. We'll guide you through the hardware specification process to maximise the efficiency of your CAPEX, and we'll tailor the architecture of your cloud to meet your application, security, regulatory and integration requirements.
+
+
+
+
+
+
+ Log in to JAAS
+
+ Ensure you have an Ubuntu SSO account before contacting JAAS. Log in to JAAS now.
+
+
+
+
+ Configure a model
+
+ Applications are contained within models and are installed via charms. Configure your model by pressing the "Start a new model" button.
+
+
+
+
+ Credentials and SSH keys
+
+ After having selected a cloud, a form will appear for submitting your credentials to JAAS. The below resources are available if you need help with gathering credentials.
+
+
+
+
+ Design and build
+
+ Together, we design your Kubernetes cluster based on your hardware, scale, roadmap, applications and monitoring system. We'll guide you through the hardware specification process to maximise the efficiency of your CAPEX, and we'll tailor the architecture of your cloud to meet your application, security, regulatory and integration requirements.
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/lists/lists-stepped-detailed-headings.html b/vanilla/templates/docs/examples/patterns/lists/lists-stepped-detailed-headings.html
new file mode 100644
index 0000000..32a073d
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/lists/lists-stepped-detailed-headings.html
@@ -0,0 +1,50 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Lists / Stepped detailed (all headings){% endblock %}
+
+{% block standalone_css %}patterns_lists{% endblock %}
+
+{% block content %}
+
+
+
+ Log in to JAAS
+
+ Ensure you have an Ubuntu SSO account before contacting JAAS. Log in to JAAS now.
+
+
+
+
+ Configure a model
+
+ Applications are contained within models and are installed via charms. Configure your model by pressing the "Start a new model" button.
+
+
+
+
+ Credentials and SSH keys
+
+ After having selected a cloud, a form will appear for submitting your credentials to JAAS. The below resources are available if you need help with gathering credentials.
+
+
+
+
+ Design and build
+
+ Together, we design your Kubernetes cluster based on your hardware, scale, roadmap, applications and monitoring system. We'll guide you through the hardware specification process to maximise the efficiency of your CAPEX, and we'll tailor the architecture of your cloud to meet your application, security, regulatory and integration requirements.
+
+
+
+
+ Log in to JAAS
+
+ Ensure you have an Ubuntu SSO account before contacting JAAS. Log in to JAAS now.
+
+
+
+
+ Configure a model
+
+ Applications are contained within models and are installed via charms. Configure your model by pressing the "Start a new model" button.
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/lists/lists-stepped-detailed.html b/vanilla/templates/docs/examples/patterns/lists/lists-stepped-detailed.html
new file mode 100644
index 0000000..7eb19dd
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/lists/lists-stepped-detailed.html
@@ -0,0 +1,36 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Lists / Stepped detailed{% endblock %}
+
+{% block standalone_css %}patterns_lists{% endblock %}
+
+{% block content %}
+
+
+
+ Log in to JAAS
+
+ Ensure you have an Ubuntu SSO account before contacting JAAS. Log in to JAAS now.
+
+
+
+
+ Configure a model
+
+ Applications are contained within models and are installed via charms. Configure your model by pressing the "Start a new model" button.
+
+
+
+
+ Credentials and SSH keys
+
+ After having selected a cloud, a form will appear for submitting your credentials to JAAS. The below resources are available if you need help with gathering credentials.
+
+
+
+
+ Design and build
+
+ Together, we design your Kubernetes cluster based on your hardware, scale, roadmap, applications and monitoring system. We'll guide you through the hardware specification process to maximise the efficiency of your CAPEX, and we'll tailor the architecture of your cloud to meet your application, security, regulatory and integration requirements.
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/lists/lists-stepped-heading-classes.html b/vanilla/templates/docs/examples/patterns/lists/lists-stepped-heading-classes.html
new file mode 100644
index 0000000..1083c51
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/lists/lists-stepped-heading-classes.html
@@ -0,0 +1,29 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Lists / Stepped heading classes{% endblock %}
+
+{% block standalone_css %}patterns_lists-heading-classes{% endblock %}
+
+{% block content %}
+
+
+
+ Log in to JAAS
+
+ Ensure you have an Ubuntu SSO account before contacting JAAS. Log in to JAAS now.
+
+
+
+
+ Configure a model
+
+ Applications are contained within models and are installed via charms. Configure your model by pressing the "Start a new model" button.
+
+
+
+
+ Credentials and SSH keys
+
+ After having selected a cloud, a form will appear for submitting your credentials to JAAS. The below resources are available if you need help with gathering credentials.
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/lists/lists-stepped-headings.html b/vanilla/templates/docs/examples/patterns/lists/lists-stepped-headings.html
new file mode 100644
index 0000000..408d82f
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/lists/lists-stepped-headings.html
@@ -0,0 +1,50 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Lists / Stepped (all headings){% endblock %}
+
+{% block standalone_css %}patterns_lists{% endblock %}
+
+{% block content %}
+
+
+
+ Log in to JAAS
+
+ Ensure you have an Ubuntu SSO account before contacting JAAS. Log in to JAAS now.
+
+
+
+
+ Configure a model
+
+ Applications are contained within models and are installed via charms. Configure your model by pressing the "Start a new model" button.
+
+
+
+
+ Credentials and SSH keys
+
+ After having selected a cloud, a form will appear for submitting your credentials to JAAS. The below resources are available if you need help with gathering credentials.
+
+
+
+
+ Design and build
+
+ Together, we design your Kubernetes cluster based on your hardware, scale, roadmap, applications and monitoring system. We'll guide you through the hardware specification process to maximise the efficiency of your CAPEX, and we'll tailor the architecture of your cloud to meet your application, security, regulatory and integration requirements.
+
+
+
+
+ Log in to JAAS
+
+ Ensure you have an Ubuntu SSO account before contacting JAAS. Log in to JAAS now.
+
+
+
+
+ Configure a model
+
+ Applications are contained within models and are installed via charms. Configure your model by pressing the "Start a new model" button.
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/lists/lists-stepped-without-headings.html b/vanilla/templates/docs/examples/patterns/lists/lists-stepped-without-headings.html
new file mode 100644
index 0000000..69ed8ac
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/lists/lists-stepped-without-headings.html
@@ -0,0 +1,32 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Lists / Stepped without headings{% endblock %}
+
+{% block standalone_css %}patterns_lists{% endblock %}
+
+{% block content %}
+
+
+
+ Download the Ubuntu image for your device in your `Downloads` folder
+
+
+
+
+
+ Insert your SD card or USB flash drive
+
+
+
+
+
+ Identify its address by opening the “Disks” application and look for the “Device” line. If the line is in the /dev/mmcblk0p1 format, then your drive address is: /dev/mmcblk0. If it is in the /dev/sdb1 format, then the address is /dev/sdb
+
+
+
+
+
+ Unmount it by right-clicking its icon in the launcher bar, the eject icon in a file manager or the square icon in the “Disks” application
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/lists/lists-stepped.html b/vanilla/templates/docs/examples/patterns/lists/lists-stepped.html
new file mode 100644
index 0000000..35f61a5
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/lists/lists-stepped.html
@@ -0,0 +1,36 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Lists / Stepped{% endblock %}
+
+{% block standalone_css %}patterns_lists{% endblock %}
+
+{% block content %}
+
+
+
+ Log in to JAAS
+
+ Ensure you have an Ubuntu SSO account before contacting JAAS. Log in to JAAS now.
+
+
+
+
+ Configure a model
+
+ Applications are contained within models and are installed via charms. Configure your model by pressing the "Start a new model" button.
+
+
+
+
+ Credentials and SSH keys
+
+ After having selected a cloud, a form will appear for submitting your credentials to JAAS. The below resources are available if you need help with gathering credentials.
+
+
+
+
+ Design and build
+
+ Together, we design your Kubernetes cluster based on your hardware, scale, roadmap, applications and monitoring system. We'll guide you through the hardware specification process to maximise the efficiency of your CAPEX, and we'll tailor the architecture of your cloud to meet your application, security, regulatory and integration requirements.
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/logo-section/logo-section-dark.html b/vanilla/templates/docs/examples/patterns/logo-section/logo-section-dark.html
new file mode 100644
index 0000000..1b2e98f
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/logo-section/logo-section-dark.html
@@ -0,0 +1,53 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Logo section / Dark{% endblock %}
+
+{% block standalone_css %}patterns_logo-section{% endblock %}
+
+{% block style %}
+
+{% endblock %}
+
+{% set is_not_themed = True %}
+{% block content %}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/logo-section/logo-section-dense.html b/vanilla/templates/docs/examples/patterns/logo-section/logo-section-dense.html
new file mode 100644
index 0000000..72d9340
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/logo-section/logo-section-dense.html
@@ -0,0 +1,37 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Logo section / Dense{% endblock %}
+
+{% block standalone_css %}patterns_logo-section{% endblock %}
+
+{% block content %}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/logo-section/logo-section-fallback.html b/vanilla/templates/docs/examples/patterns/logo-section/logo-section-fallback.html
new file mode 100644
index 0000000..6546699
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/logo-section/logo-section-fallback.html
@@ -0,0 +1,87 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Logo section / Misaligned logos{% endblock %}
+
+{% block standalone_css %}patterns_logo-section{% endblock %}
+
+{% block content %}
+
+
+
Cloud Service Providers
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Read about the companies using app stores for IoT
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/logo-section/logo-section-in-six-column-parent.html b/vanilla/templates/docs/examples/patterns/logo-section/logo-section-in-six-column-parent.html
new file mode 100644
index 0000000..3891284
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/logo-section/logo-section-in-six-column-parent.html
@@ -0,0 +1,20 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Logo section in six-column parent container{% endblock %}
+
+{% block standalone_css %}patterns_logo-section{% endblock %}
+
+{% block content %}
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/logo-section/logo-section-lazyloaded.html b/vanilla/templates/docs/examples/patterns/logo-section/logo-section-lazyloaded.html
new file mode 100644
index 0000000..f808f9a
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/logo-section/logo-section-lazyloaded.html
@@ -0,0 +1,37 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Logo section / Lazyloaded{% endblock %}
+
+{% block standalone_css %}patterns_logo-section{% endblock %}
+
+{% block content %}
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/logo-section/logo-section-legacy.html b/vanilla/templates/docs/examples/patterns/logo-section/logo-section-legacy.html
new file mode 100644
index 0000000..bb2a97a
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/logo-section/logo-section-legacy.html
@@ -0,0 +1,29 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Logo section / Legacy square images{% endblock %}
+
+{% block standalone_css %}patterns_logo-section{% endblock %}
+
+{% block content %}
+
+
+
+
+ Partners
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/logo-section/logo-section-line-breaks.html b/vanilla/templates/docs/examples/patterns/logo-section/logo-section-line-breaks.html
new file mode 100644
index 0000000..faa1181
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/logo-section/logo-section-line-breaks.html
@@ -0,0 +1,37 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Logo section / Line breaks{% endblock %}
+
+{% block standalone_css %}patterns_logo-section{% endblock %}
+
+{% block content %}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/logo-section/logo-section.html b/vanilla/templates/docs/examples/patterns/logo-section/logo-section.html
new file mode 100644
index 0000000..0e618c5
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/logo-section/logo-section.html
@@ -0,0 +1,37 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Logo section{% endblock %}
+
+{% block standalone_css %}patterns_logo-section{% endblock %}
+
+{% block content %}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/matrix.html b/vanilla/templates/docs/examples/patterns/matrix.html
new file mode 100644
index 0000000..fbd2108
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/matrix.html
@@ -0,0 +1,84 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Matrix{% endblock %}
+
+{% block standalone_css %}patterns_matrix{% endblock %}
+
+{% block content %}
+
+
+
+
+
+
Canonical is the global software company behind Ubuntu and is the number-one Ubuntu services provider
+
+
+
+
+
+
+
The world’s most popular Linux for servers, desktops and things, with enterprise support and enhanced security by Canonical
+
+
+
+
+
+
Create a bare-metal cloud with Metal as a Service for IPAM and provisioning
+
+
+
+
+
+
Systems management for Ubuntu - updates, package management, repositories, security, and regulatory compliance dashboards
+
+
+
+
+
+
Model-driven multi-cloud operations for applications. On-premise or on-cloud SAAS app store, with big data, k8s and openstack solutions
+
+
+
+
+
A pure-container hypervisor. Replace legacy app VMs with containers for speed and density
+
+
+
+
+
+
A single secure package and auto-update system for Ubuntu, Debian, Arch, Centos, Amazon Linux
+
+
+
+
+
+
+
The world’s first choice for OpenStack - the leader in density and cost per VM
+
+
+
+
+
+
+
Canonical works with Google GKE and Azure AKS for app portability between private and public infrastructure
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/media-object/media-object-circ-img.html b/vanilla/templates/docs/examples/patterns/media-object/media-object-circ-img.html
new file mode 100644
index 0000000..f9d438e
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/media-object/media-object-circ-img.html
@@ -0,0 +1,21 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Media object / Circle{% endblock %}
+
+{% block standalone_css %}patterns_media-object{% endblock %}
+
+{% block content %}
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/media-object/media-object-large.html b/vanilla/templates/docs/examples/patterns/media-object/media-object-large.html
new file mode 100644
index 0000000..e78422f
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/media-object/media-object-large.html
@@ -0,0 +1,16 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Media object / Large{% endblock %}
+
+{% block standalone_css %}patterns_media-object{% endblock %}
+
+{% block content %}
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/media-object/media-object.html b/vanilla/templates/docs/examples/patterns/media-object/media-object.html
new file mode 100644
index 0000000..249518d
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/media-object/media-object.html
@@ -0,0 +1,27 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Media object / Default{% endblock %}
+
+{% block standalone_css %}patterns_media-object{% endblock %}
+
+{% block content %}
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/modal/_script.js b/vanilla/templates/docs/examples/patterns/modal/_script.js
new file mode 100644
index 0000000..386814c
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/modal/_script.js
@@ -0,0 +1,119 @@
+// This is an example modal implementation inspired by
+// https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html
+
+(function () {
+ // This is not a production ready code, just serves as an example
+ // of how the focus should be controlled within the modal dialog.
+ var currentDialog = null;
+ var lastFocus = null;
+ var ignoreFocusChanges = false;
+ var focusAfterClose = null;
+
+ // Traps the focus within the currently open modal dialog
+ function trapFocus(event) {
+ if (ignoreFocusChanges) return;
+
+ if (currentDialog.contains(event.target)) {
+ lastFocus = event.target;
+ } else {
+ focusFirstDescendant(currentDialog);
+ if (lastFocus == document.activeElement) {
+ focusLastDescendant(currentDialog);
+ }
+ lastFocus = document.activeElement;
+ }
+ }
+
+ // Attempts to focus given element
+ function attemptFocus(child) {
+ if (child.focus) {
+ ignoreFocusChanges = true;
+ child.focus();
+ ignoreFocusChanges = false;
+ return document.activeElement === child;
+ }
+
+ return false;
+ }
+
+ // Focuses first child element
+ function focusFirstDescendant(element) {
+ for (var i = 0; i < element.childNodes.length; i++) {
+ var child = element.childNodes[i];
+ if (attemptFocus(child) || focusFirstDescendant(child)) {
+ return true;
+ }
+ }
+ return false;
+ }
+
+ // Focuses last child element
+ function focusLastDescendant(element) {
+ for (var i = element.childNodes.length - 1; i >= 0; i--) {
+ var child = element.childNodes[i];
+ if (attemptFocus(child) || focusLastDescendant(child)) {
+ return true;
+ }
+ }
+ return false;
+ }
+
+ /**
+ Toggles visibility of modal dialog.
+ @param {HTMLElement} modal Modal dialog to show or hide.
+ @param {HTMLElement} sourceEl Element that triggered toggling modal
+ @param {Boolean} open If defined as `true` modal will be opened, if `false` modal will be closed, undefined toggles current visibility.
+ */
+ function toggleModal(modal, sourceEl, open) {
+ if (modal && modal.classList.contains('p-modal')) {
+ if (typeof open === 'undefined') {
+ open = modal.style.display === 'none';
+ }
+
+ if (open) {
+ currentDialog = modal;
+ modal.style.display = 'flex';
+ focusFirstDescendant(modal);
+ focusAfterClose = sourceEl;
+ document.addEventListener('focus', trapFocus, true);
+ } else {
+ modal.style.display = 'none';
+ if (focusAfterClose && focusAfterClose.focus) {
+ focusAfterClose.focus();
+ }
+ document.removeEventListener('focus', trapFocus, true);
+ currentDialog = null;
+ }
+ }
+ }
+
+ // Find and hide all modals on the page
+ function closeModals() {
+ var modals = [].slice.apply(document.querySelectorAll('.p-modal'));
+ modals.forEach(function (modal) {
+ toggleModal(modal, false, false);
+ });
+ }
+
+ // Add click handler for clicks on elements with aria-controls
+ document.addEventListener('click', function (event) {
+ var targetControls = event.target.getAttribute('aria-controls');
+ if (targetControls) {
+ toggleModal(document.getElementById(targetControls), event.target);
+ }
+ });
+
+ // Add handler for closing modals using ESC key.
+ document.addEventListener('keydown', function (e) {
+ e = e || window.event;
+
+ if (e.code === 'Escape') {
+ closeModals();
+ } else if (e.keyCode === 27) {
+ closeModals();
+ }
+ });
+
+ // init the dialog that is initially opened in the example
+ toggleModal(document.querySelector('#modal'), document.querySelector('[aria-controls=modal]'), true);
+})();
diff --git a/vanilla/templates/docs/examples/patterns/modal/default.html b/vanilla/templates/docs/examples/patterns/modal/default.html
new file mode 100644
index 0000000..835034a
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/modal/default.html
@@ -0,0 +1,32 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Modal / Default{% endblock %}
+
+{% block standalone_css %}patterns_modal{% endblock %}
+
+{% block content %}
+
Show modal…
+
+
+
+
+ Learn how to operate production-ready clusters.
+
+
+
+
+
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/modal/footer.html b/vanilla/templates/docs/examples/patterns/modal/footer.html
new file mode 100644
index 0000000..42fde15
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/modal/footer.html
@@ -0,0 +1,26 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Modal / With footer{% endblock %}
+
+{% block standalone_css %}patterns_modal{% endblock %}
+
+{% block content %}
+
Show modal…
+
+
+
+
+ Are you sure you want to delete user "Simon"? This action is permanent and can not be undone.
+
+
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/modal/modal-scroll.html b/vanilla/templates/docs/examples/patterns/modal/modal-scroll.html
new file mode 100644
index 0000000..e7c0393
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/modal/modal-scroll.html
@@ -0,0 +1,95 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Modal / Scrollable{% endblock %}
+
+{% block standalone_css %}patterns_modal{% endblock %}
+
+{% block content %}
+
Show modal…
+
+
An application is typically a long-running service that is accessible over the network. Applications are the centre of a Juju deployment. Everything within the Juju ecosystem exists to facilitate them.
+
It’s easiest to think of the term “application” in Juju in the same way you would think of using it day-to-day. Middleware such as database servers (PostgreSQL, MySQL, Percona Cluster, etcd, …), message queues (RabbitMQ) and other utilities (Nagios, Prometheus, …) are all applications. The term has a specialist meaning within the Juju community, however. It is broader than the ordinary use of the term in computing.
+
A Juju application is more than a software application
+
Juju takes care of ensuring that the compute node that they’re being deployed to satisfies the size constraints that you specify, installing them, increasing their scale, setting up their networking and storage capacity rules. This, and other functionality, is provided within software packages called charms.
+
Alongside your application, Juju executes charm code when triggered. Triggers are typically requests from the administrator, such as:
+
+
+“The configuration needs to change” via juju config. The spark charm provides the ability to dynamically change the memory available to the driver and executors: juju config spark executor_memory=2g
+
+
+“Please scale-up this application” via juju add-unit. The postgresql charm can detect when its scale is more than 1 and automatically switches itself into a high-availability cluster: juju add -unit --num-units 2 postgresql
+
+
+“Allocate a 20GB storage volume to the application unit 0” via juju add-storage. The etcd charm can provide an SSD-backed volume on AWS to the etcd application with: juju add-storage etcd/0 data=ebs-ssd,20G
+
+
+
+
The Juju project uses an active agent architecture. Juju software agents are running alongside your applications. They periodically execute commands that are provided in software packages called charms.
+
+
Differences between a stock software application and a Juju application
+
Applications are scale-independent
+
An application in the Juju ecosystem can span multiple operating system processes. An HTTP API would probably be considered a Juju application, but that might bundle together several other components.
+
Some examples:
+
+A Ruby on Rails web application might be deployed behind Apache2 and Phusion Passenger.
+All workers within a Hadoop cluster are considered a single application, although each worker its own unit
+
+
+
A Juju application can also span multiple compute nodes and/or containers. Within the Juju community, we use the term machine to cover physical hardware, virtual machines and containers.
+
To make this clearer, consider an analogy from the desktop. An Electron app is composed of an Internet browser, a node.js runtime and application code. Each of those components is distinct, but they exist as a single unit. That unit is an application.
+
A final iteration of scale-independence is that Juju will maintain a record for applications that have a scale of 0. Perhaps earlier in the application’s lifecycle it was wound down, but the business required that the storage volumes were to be retained.
+
Applications are active
+
Applications automatically negotiate their own configuration depending on their situation. Through the business logic encoded within charms, two applications can create user accounts and passwords between themselves without leaking secrets.
+
Applications are responsive
+
Juju applications can indicate their status, run actions and provide metrics. An action is typically a script that is useful for running a management task.
+
+
+
+
+
+
+
Learn how to operate production-ready clusters.
+
An application is typically a long-running service that is accessible over the network. Applications are the centre of a Juju deployment. Everything within the Juju ecosystem exists to facilitate them.
+
It’s easiest to think of the term “application” in Juju in the same way you would think of using it day-to-day. Middleware such as database servers (PostgreSQL, MySQL, Percona Cluster, etcd, …), message queues (RabbitMQ) and other utilities (Nagios, Prometheus, …) are all applications. The term has a specialist meaning within the Juju community, however. It is broader than the ordinary use of the term in computing.
+
A Juju application is more than a software application
+
Juju takes care of ensuring that the compute node that they’re being deployed to satisfies the size constraints that you specify, installing them, increasing their scale, setting up their networking and storage capacity rules. This, and other functionality, is provided within software packages called charms.
+
Alongside your application, Juju executes charm code when triggered. Triggers are typically requests from the administrator, such as:
+
+
+ “The configuration needs to change” via juju config. The spark charm provides the ability to dynamically change the memory available to the driver and executors: juju config spark executor_memory=2g
+
+
+ “Please scale-up this application” via juju add-unit. The postgresql charm can detect when its scale is more than 1 and automatically switches itself into a high-availability cluster: juju add -unit --num-units 2 postgresql
+
+
+ “Allocate a 20GB storage volume to the application unit 0” via juju add-storage. The etcd charm can provide an SSD-backed volume on AWS to the etcd application with: juju add-storage etcd/0 data=ebs-ssd,20G
+
+
+
+
The Juju project uses an active agent architecture.
+
+
Differences between a stock software application and a Juju application
+
Applications are scale-independent
+
An application in the Juju ecosystem can span multiple operating system processes. An HTTP API would probably be considered a Juju application, but that might bundle together several other components.
+
Some examples:
+
+ A Ruby on Rails web application might be deployed behind Apache2 and Phusion Passenger.
+ All workers within a Hadoop cluster are considered a single application, although each worker its own unit
+
+
+
A Juju application can also span multiple compute nodes and/or containers. Within the Juju community, we use the term machine to cover physical hardware, virtual machines and containers.
+
To make this clearer, consider an analogy from the desktop. An Electron app is composed of an Internet browser, a node.js runtime and application code. Each of those components is distinct, but they exist as a single unit. That unit is an application.
+
A final iteration of scale-independence is that Juju will maintain a record for applications that have a scale of 0. Perhaps earlier in the application’s lifecycle it was wound down, but the business required that the storage volumes were to be retained.
+
Applications are active
+
Applications automatically negotiate their own configuration depending on their situation. Through the business logic encoded within charms, two applications can create user accounts and passwords between themselves without leaking secrets.
+
Applications are responsive
+
Juju applications can indicate their status, run actions and provide metrics. An action is typically a script that is useful for running a management task.
+
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/navigation/_script-search.js b/vanilla/templates/docs/examples/patterns/navigation/_script-search.js
new file mode 100644
index 0000000..6353ea2
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/navigation/_script-search.js
@@ -0,0 +1,117 @@
+function initNavigationSearch(element) {
+ const searchButtons = element.querySelectorAll('.js-search-button');
+
+ searchButtons.forEach((searchButton) => {
+ searchButton.addEventListener('click', toggleSearch);
+ });
+
+ const menuButton = element.querySelector('.js-menu-button');
+ if (menuButton) {
+ menuButton.addEventListener('click', toggleMenu);
+ }
+
+ const overlay = element.querySelector('.p-navigation__search-overlay');
+ if (overlay) {
+ overlay.addEventListener('click', closeAll);
+ }
+
+ function toggleMenu(e) {
+ e.preventDefault();
+
+ var navigation = e.target.closest('.p-navigation');
+ if (navigation.classList.contains('has-menu-open')) {
+ closeAll();
+ } else {
+ closeAll();
+ openMenu(e);
+ }
+ }
+
+ function toggleSearch(e) {
+ e.preventDefault();
+
+ var navigation = e.target.closest('.p-navigation');
+ if (navigation.classList.contains('has-search-open')) {
+ closeAll();
+ } else {
+ closeAll();
+ openSearch(e);
+ }
+ }
+
+ function openSearch(e) {
+ e.preventDefault();
+ var navigation = e.target.closest('.p-navigation');
+ var nav = navigation.querySelector('.p-navigation__nav');
+
+ var searchInput = navigation.querySelector('.p-search-box__input');
+ var buttons = document.querySelectorAll('.js-search-button');
+
+ buttons.forEach((searchButton) => {
+ searchButton.setAttribute('aria-pressed', true);
+ });
+
+ navigation.classList.add('has-search-open');
+ searchInput.focus();
+ document.addEventListener('keyup', keyPressHandler);
+ }
+
+ function openMenu(e) {
+ e.preventDefault();
+ var navigation = e.target.closest('.p-navigation');
+ var nav = navigation.querySelector('.p-navigation__nav');
+
+ var buttons = document.querySelectorAll('.js-menu-button');
+
+ buttons.forEach((searchButton) => {
+ searchButton.setAttribute('aria-pressed', true);
+ });
+
+ navigation.classList.add('has-menu-open');
+ document.addEventListener('keyup', keyPressHandler);
+ }
+
+ function closeSearch() {
+ var navigation = document.querySelector('.p-navigation');
+ var nav = navigation.querySelector('.p-navigation__nav');
+
+ var banner = document.querySelector('.p-navigation__banner');
+ var buttons = document.querySelectorAll('.js-search-button');
+
+ buttons.forEach((searchButton) => {
+ searchButton.removeAttribute('aria-pressed');
+ });
+
+ navigation.classList.remove('has-search-open');
+ document.removeEventListener('keyup', keyPressHandler);
+ }
+
+ function closeMenu() {
+ var navigation = document.querySelector('.p-navigation');
+ var nav = navigation.querySelector('.p-navigation__nav');
+
+ var banner = document.querySelector('.p-navigation__banner');
+ var buttons = document.querySelectorAll('.js-menu-button');
+
+ buttons.forEach((searchButton) => {
+ searchButton.removeAttribute('aria-pressed');
+ });
+
+ navigation.classList.remove('has-menu-open');
+ document.removeEventListener('keyup', keyPressHandler);
+ }
+
+ function closeAll() {
+ closeSearch();
+ closeMenu();
+ }
+
+ function keyPressHandler(e) {
+ if (e.key === 'Escape') {
+ closeAll();
+ }
+ }
+}
+
+var navigation = document.querySelector('#navigation');
+initNavigationSearch(navigation);
diff --git a/vanilla/templates/docs/examples/patterns/navigation/_script-sliding.js b/vanilla/templates/docs/examples/patterns/navigation/_script-sliding.js
new file mode 100644
index 0000000..17cb606
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/navigation/_script-sliding.js
@@ -0,0 +1,167 @@
+const initNavigationSliding = () => {
+ const navigation = document.querySelector('.p-navigation--sliding');
+ const toggles = document.querySelectorAll('.p-navigation__link[aria-controls]:not(.js-back)');
+ const searchButtons = document.querySelectorAll('.js-search-button');
+ const menuButton = document.querySelector('.js-menu-button');
+ const dropdowns = document.querySelectorAll('ul.p-navigation__dropdown');
+ const mainList = dropdowns[0].parentNode.parentNode;
+ const lists = [...dropdowns, mainList];
+
+ const hasSearch = searchButtons.length > 0;
+
+ const closeAll = () => {
+ if (hasSearch) {
+ closeSearch();
+ }
+ resetToggles();
+ navigation.classList.remove('has-menu-open');
+ menuButton.innerHTML = 'Menu';
+ };
+
+ const keyPressHandler = (e) => {
+ if (e.key === 'Escape') {
+ closeAll();
+ }
+ };
+
+ const closeSearch = () => {
+ searchButtons.forEach((searchButton) => {
+ searchButton.removeAttribute('aria-pressed');
+ });
+
+ navigation.classList.remove('has-search-open');
+ document.removeEventListener('keyup', keyPressHandler);
+ };
+
+ menuButton.addEventListener('click', function (e) {
+ closeSearch();
+ if (navigation.classList.contains('has-menu-open')) {
+ closeAll();
+ } else {
+ navigation.classList.add('has-menu-open');
+ e.target.innerHTML = 'Close menu';
+ setFocusable(mainList);
+ }
+ });
+
+ const resetToggles = (exception) => {
+ toggles.forEach(function (toggle) {
+ const target = document.getElementById(toggle.getAttribute('aria-controls'));
+ if (target === exception) {
+ return;
+ }
+ target.setAttribute('aria-hidden', 'true');
+ toggle.parentNode.classList.remove('is-active');
+ toggle.parentNode.parentNode.classList.remove('is-active');
+ });
+ };
+
+ document.addEventListener('click', function (event) {
+ const target = event.target;
+ if (target.closest) {
+ if (!target.closest('.p-navigation--sliding')) {
+ resetToggles();
+ }
+ }
+ });
+
+ const setFocusable = (target) => {
+ lists.forEach(function (list) {
+ const elements = list.querySelectorAll('ul > li > a, ul > li > button');
+ elements.forEach(function (element) {
+ element.setAttribute('tabindex', '-1');
+ });
+ });
+ target.querySelectorAll('li').forEach(function (element) {
+ if (element.parentNode === target) {
+ element.children[0].setAttribute('tabindex', '0');
+ }
+ });
+ };
+
+ toggles.forEach(function (toggle) {
+ toggle.addEventListener('click', function (e) {
+ e.preventDefault();
+ const target = document.getElementById(toggle.getAttribute('aria-controls'));
+ const isNested = target.parentNode.parentNode.classList.contains('p-navigation__dropdown');
+
+ if (!isNested) {
+ resetToggles(target);
+ }
+ if (target.getAttribute('aria-hidden') === 'true') {
+ toggle.parentNode.classList.add('is-active');
+ toggle.parentNode.parentNode.classList.add('is-active');
+ target.setAttribute('aria-hidden', 'false');
+ setFocusable(target);
+ } else {
+ target.setAttribute('aria-hidden', 'true');
+ toggle.parentNode.classList.remove('is-active');
+ toggle.parentNode.parentNode.classList.remove('is-active');
+ }
+ });
+ });
+
+ const goBackOneLevel = (e, backButton) => {
+ e.preventDefault();
+ const target = backButton.parentNode.parentNode;
+ target.setAttribute('aria-hidden', 'true');
+ backButton.closest('.is-active').classList.remove('is-active');
+ backButton.closest('.is-active').classList.remove('is-active');
+ setFocusable(target.parentNode.parentNode);
+ };
+
+ dropdowns.forEach(function (dropdown) {
+ console.log(window.getComputedStyle(dropdown.children[0], null).display);
+ dropdown.children[1].addEventListener('keydown', function (e) {
+ if (e.shiftKey && e.key === 'Tab' && window.getComputedStyle(dropdown.children[0], null).display === 'none') {
+ goBackOneLevel(e, dropdown.children[1].children[0]);
+ dropdown.parentNode.children[0].focus({preventScroll: true});
+ }
+ });
+ });
+
+ document.querySelectorAll('.js-back').forEach(function (backButton) {
+ backButton.addEventListener('click', function (e) {
+ goBackOneLevel(e, backButton);
+ });
+ });
+
+ if (hasSearch) {
+ const toggleSearch = (e) => {
+ e.preventDefault();
+
+ if (navigation.classList.contains('has-search-open')) {
+ closeAll();
+ } else {
+ closeAll();
+ openSearch(e);
+ }
+ };
+
+ searchButtons.forEach((searchButton) => {
+ searchButton.addEventListener('click', toggleSearch);
+ });
+
+ const overlay = document.querySelector('.p-navigation__search-overlay');
+ if (overlay) {
+ overlay.addEventListener('click', closeAll);
+ }
+
+ const openSearch = (e) => {
+ e.preventDefault();
+
+ var searchInput = navigation.querySelector('.p-search-box__input');
+ var buttons = document.querySelectorAll('.js-search-button');
+
+ buttons.forEach((searchButton) => {
+ searchButton.setAttribute('aria-pressed', true);
+ });
+
+ navigation.classList.add('has-search-open');
+ searchInput.focus();
+ document.addEventListener('keyup', keyPressHandler);
+ };
+ }
+};
+
+initNavigationSliding();
diff --git a/vanilla/templates/docs/examples/patterns/navigation/_script.js b/vanilla/templates/docs/examples/patterns/navigation/_script.js
new file mode 100644
index 0000000..bd60413
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/navigation/_script.js
@@ -0,0 +1,45 @@
+function toggleDropdown(toggle, open) {
+ var parentElement = toggle.parentNode;
+ var dropdown = document.getElementById(toggle.getAttribute('aria-controls'));
+ dropdown.setAttribute('aria-hidden', !open);
+
+ if (open) {
+ parentElement.classList.add('is-active');
+ } else {
+ parentElement.classList.remove('is-active');
+ }
+}
+
+function closeAllDropdowns(toggles) {
+ toggles.forEach(function (toggle) {
+ toggleDropdown(toggle, false);
+ });
+}
+
+function handleClickOutside(toggles, containerClass) {
+ document.addEventListener('click', function (event) {
+ var target = event.target;
+
+ if (target.closest) {
+ if (!target.closest(containerClass)) {
+ closeAllDropdowns(toggles);
+ }
+ }
+ });
+}
+
+function initNavDropdowns(containerClass) {
+ var toggles = [].slice.call(document.querySelectorAll(containerClass + ' [aria-controls]'));
+
+ handleClickOutside(toggles, containerClass);
+
+ toggles.forEach(function (toggle) {
+ toggle.addEventListener('click', function (e) {
+ e.preventDefault();
+
+ const shouldOpen = !toggle.parentNode.classList.contains('is-active');
+ closeAllDropdowns(toggles);
+ toggleDropdown(toggle, shouldOpen);
+ });
+ });
+}
diff --git a/vanilla/templates/docs/examples/patterns/navigation/default.html b/vanilla/templates/docs/examples/patterns/navigation/default.html
new file mode 100644
index 0000000..00568ce
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/navigation/default.html
@@ -0,0 +1,59 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Navigation / Grid{% endblock %}
+
+{% block standalone_css %}patterns_navigation{% endblock %}
+
+{% block content %}
+
+
+
+
+
+
Page content in the grid
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/navigation/deprecated-dark.html b/vanilla/templates/docs/examples/patterns/navigation/deprecated-dark.html
new file mode 100644
index 0000000..cf8d2b1
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/navigation/deprecated-dark.html
@@ -0,0 +1,36 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Navigation / Deprecated dark{% endblock %}
+
+{% block standalone_css %}patterns_navigation{% endblock %}
+
+{% block content %}
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/navigation/deprecated-logo.html b/vanilla/templates/docs/examples/patterns/navigation/deprecated-logo.html
new file mode 100644
index 0000000..af65ebb
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/navigation/deprecated-logo.html
@@ -0,0 +1,157 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Navigation / Deprecated old logo{% endblock %}
+
+{% block standalone_css %}patterns_navigation{% endblock %}
+
+{% block content %}
+
+
Light theme with expanding search:
+
+
+
+
Dark theme with search box:
+
+
+
+
+
Dark theme with dropdowns:
+
+
+
+
+{% endblock %}
\ No newline at end of file
diff --git a/vanilla/templates/docs/examples/patterns/navigation/deprecated.html b/vanilla/templates/docs/examples/patterns/navigation/deprecated.html
new file mode 100644
index 0000000..ecf6100
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/navigation/deprecated.html
@@ -0,0 +1,37 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Navigation / Deprecated{% endblock %}
+
+{% block standalone_css %}patterns_navigation{% endblock %}
+
+{% block content %}
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/navigation/dropdown-alignment.html b/vanilla/templates/docs/examples/patterns/navigation/dropdown-alignment.html
new file mode 100644
index 0000000..8ee467c
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/navigation/dropdown-alignment.html
@@ -0,0 +1,93 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Navigation / Dropdown alignment{% endblock %}
+
+{% block standalone_css %}patterns_navigation{% endblock %}
+
+{% block content %}
+
+
+
+
+
+
+ LXD
+
+
+
+ LXCFS
+
+
+
+
+
+
+
+
+
Navigation dropdowns on the right need to align with selects or search icons.
+
+ Test
+
+
+
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/navigation/dropdown-dark.html b/vanilla/templates/docs/examples/patterns/navigation/dropdown-dark.html
new file mode 100644
index 0000000..2d0634d
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/navigation/dropdown-dark.html
@@ -0,0 +1,79 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Navigation / Dropdown dark{% endblock %}
+
+{% block standalone_css %}patterns_navigation{% endblock %}
+
+{% block content %}
+
+
+
+
+
+
+ LXD
+
+
+
+ LXCFS
+
+
+
+
+
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/navigation/dropdown.html b/vanilla/templates/docs/examples/patterns/navigation/dropdown.html
new file mode 100644
index 0000000..c97deed
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/navigation/dropdown.html
@@ -0,0 +1,79 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Navigation / Dropdown{% endblock %}
+
+{% block standalone_css %}patterns_navigation{% endblock %}
+
+{% block content %}
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/navigation/full-width.html b/vanilla/templates/docs/examples/patterns/navigation/full-width.html
new file mode 100644
index 0000000..af0350e
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/navigation/full-width.html
@@ -0,0 +1,36 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Navigation / Full-width{% endblock %}
+
+{% block standalone_css %}patterns_navigation{% endblock %}
+
+{% block content %}
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/navigation/search-dark.html b/vanilla/templates/docs/examples/patterns/navigation/search-dark.html
new file mode 100644
index 0000000..e6b9039
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/navigation/search-dark.html
@@ -0,0 +1,66 @@
+{% extends "_layouts/examples.html" %}
+
+{% block title %}Navigation / Search dark{% endblock %}
+
+{% block standalone_css %}patterns_navigation{% endblock %}
+
+{% block content %}
+
+
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/navigation/search-light.html b/vanilla/templates/docs/examples/patterns/navigation/search-light.html
new file mode 100644
index 0000000..b86154f
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/navigation/search-light.html
@@ -0,0 +1,66 @@
+{% extends "_layouts/examples.html" %}
+
+{% block title %}Navigation / Search light{% endblock %}
+
+{% block standalone_css %}patterns_navigation{% endblock %}
+
+{% block content %}
+
+
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/navigation/sliding-dark.html b/vanilla/templates/docs/examples/patterns/navigation/sliding-dark.html
new file mode 100644
index 0000000..6a62f29
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/navigation/sliding-dark.html
@@ -0,0 +1,118 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Navigation / Sliding dark{% endblock %}
+
+{% block standalone_css %}patterns_navigation{% endblock %}
+
+{% block content %}
+
+
+
+{% endblock %}
+
+{% block style %}
+
+{% endblock %}
\ No newline at end of file
diff --git a/vanilla/templates/docs/examples/patterns/navigation/sliding-light.html b/vanilla/templates/docs/examples/patterns/navigation/sliding-light.html
new file mode 100644
index 0000000..cf3bfcb
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/navigation/sliding-light.html
@@ -0,0 +1,118 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Navigation / Sliding light{% endblock %}
+
+{% block standalone_css %}patterns_navigation{% endblock %}
+
+{% block content %}
+
+
+
+{% endblock %}
+
+{% block style %}
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/navigation/sliding-search.html b/vanilla/templates/docs/examples/patterns/navigation/sliding-search.html
new file mode 100644
index 0000000..9347582
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/navigation/sliding-search.html
@@ -0,0 +1,138 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Navigation / Sliding with search{% endblock %}
+
+{% block standalone_css %}patterns_navigation{% endblock %}
+
+{% block content %}
+
+
+
+{% endblock %}
+
+{% block style %}
+
+{% endblock %}
\ No newline at end of file
diff --git a/vanilla/templates/docs/examples/patterns/notifications/_variants.html b/vanilla/templates/docs/examples/patterns/notifications/_variants.html
new file mode 100644
index 0000000..0c57fee
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/notifications/_variants.html
@@ -0,0 +1,203 @@
+
Borderless
+
+
+
Title
+
+ Body lorem ipsum dolor sit amet consequiteor. Lorem ipsum dolor sit amet consequiteor.
+
+
+
+
+
Borderless inline
+
+
+
Title:
+
+ Body lorem ipsum dolor sit amet consequiteor. Lorem ipsum dolor sit amet consequiteor.
+
+
+
+
+
Dismissible
+
+
+
Title
+
+ Body lorem ipsum dolor sit amet consequiteor. Lorem ipsum dolor sit amet consequiteor.
+
+
+ Close
+
+
+
+
+
Multiline
+
+
+
Title:
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat pretium facilisis. Phasellus cursus neque vel elementum pharetra. Cras maximus neque non mi fermentum, vel ultrices sem rutrum. Aliquam ornare nulla et justo fermentum tincidunt. Duis in enim nec velit consequat sollicitudin ac eget arcu. Proin id leo nunc. Donec varius sem et mattis cursus.
+
+
+
+
+
Inline multiline
+
+
+
Title:
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat pretium facilisis. Phasellus cursus neque vel elementum pharetra. Cras maximus neque non mi fermentum, vel ultrices sem rutrum. Aliquam ornare nulla et justo fermentum tincidunt. Duis in enim nec velit consequat sollicitudin ac eget arcu. Proin id leo nunc. Donec varius sem et mattis cursus.
+
+
+
+
+
Meta - Action buttons
+
+
+
Title
+
+ Body lorem ipsum dolor sit amet consequiteor. Lorem ipsum dolor sit amet consequiteor.
+
+
+
+
+
+
Meta - Action links
+
+
+
Title
+
+ Body lorem ipsum dolor sit amet consequiteor. Lorem ipsum dolor sit amet consequiteor.
+
+
Close
+
+
+
+
+
Meta - Date
+
+
+
Title
+
+ Body lorem ipsum dolor sit amet consequiteor. Lorem ipsum dolor sit amet consequiteor.
+
+
+
+ 1h ago
+
+
+
+
Meta - Date + action buttons
+
+
+
Title
+
+ Body lorem ipsum dolor sit amet consequiteor. Lorem ipsum dolor sit amet consequiteor.
+
+
+
+
+
+
Meta - Date + action links
+
+
+
Title
+
+ Body lorem ipsum dolor sit amet consequiteor. Lorem ipsum dolor sit amet consequiteor.
+
+
+
+
+
+
No title
+
+
+
+ Body lorem ipsum dolor sit amet consequiteor. Lorem ipsum dolor sit amet consequiteor.
+
+
+
+
+
Spacing
+
+
+
Title
+
+ Body lorem ipsum dolor sit amet consequiteor. Lorem ipsum dolor sit amet consequiteor.
+
+
+
+
+
+
Title
+
+ Body lorem ipsum dolor sit amet consequiteor. Lorem ipsum dolor sit amet consequiteor.
+
+
+
+
+
+
Title
+
+ Body lorem ipsum dolor sit amet consequiteor. Lorem ipsum dolor sit amet consequiteor.
+
+
+
+
+
+
Title
+
+ Body lorem ipsum dolor sit amet consequiteor. Lorem ipsum dolor sit amet consequiteor.
+
+
+
+
+
diff --git a/vanilla/templates/docs/examples/patterns/notifications/action.html b/vanilla/templates/docs/examples/patterns/notifications/action.html
new file mode 100644
index 0000000..e080752
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/notifications/action.html
@@ -0,0 +1,20 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Notifications / Action{% endblock %}
+
+{% block standalone_css %}patterns_notifications{% endblock %}
+
+{% block content %}
+
+
+
Title
+
Body lorem ipsum dolor sit amet consequiteor. Lorem ipsum dolor sit amet consequiteor.
+
Close
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/notifications/borderless.html b/vanilla/templates/docs/examples/patterns/notifications/borderless.html
new file mode 100644
index 0000000..425222f
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/notifications/borderless.html
@@ -0,0 +1,43 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Notifications / Borderless{% endblock %}
+
+{% block standalone_css %}patterns_notifications{% endblock %}
+
+{% block content %}
+
+
+
+ Column 1
+ Column 2
+ Column 3
+ Column 4
+
+
+
+
+ Cell 1
+ Cell 2
+ Cell 3
+ Cell 4
+
+
+
+
+
+
Title
+
+ Body lorem ipsum dolor sit amet consequiteor. Lorem ipsum dolor sit amet consequiteor.
+
+
+
+
+
+ Cell 1
+ Cell 2
+ Cell 3
+ Cell 4
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/notifications/caution.html b/vanilla/templates/docs/examples/patterns/notifications/caution.html
new file mode 100644
index 0000000..313e5d8
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/notifications/caution.html
@@ -0,0 +1,13 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Notifications / Caution{% endblock %}
+
+{% block standalone_css %}patterns_notifications{% endblock %}
+
+{% block content %}
+
+
+
Blocked
+
Custom storage configuration is only supported on Ubuntu, CentOS and RHEL.
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/notifications/dismissible.html b/vanilla/templates/docs/examples/patterns/notifications/dismissible.html
new file mode 100644
index 0000000..3334275
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/notifications/dismissible.html
@@ -0,0 +1,38 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Notifications / Dismissible{% endblock %}
+
+{% block standalone_css %}patterns_notifications{% endblock %}
+
+{% block content %}
+
+
+
Title
+
Body lorem ipsum dolor sit amet consequiteor. Lorem ipsum dolor sit amet consequiteor.
+
Close
+
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/notifications/information.html b/vanilla/templates/docs/examples/patterns/notifications/information.html
new file mode 100644
index 0000000..38104b9
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/notifications/information.html
@@ -0,0 +1,13 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Notifications / Information{% endblock %}
+
+{% block standalone_css %}patterns_notifications{% endblock %}
+
+{% block content %}
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/notifications/inline.html b/vanilla/templates/docs/examples/patterns/notifications/inline.html
new file mode 100644
index 0000000..fc8797d
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/notifications/inline.html
@@ -0,0 +1,13 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Notifications / Inline{% endblock %}
+
+{% block standalone_css %}patterns_notifications{% endblock %}
+
+{% block content %}
+
+
+
Title:
+
Body copy goes here
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/notifications/negative.html b/vanilla/templates/docs/examples/patterns/notifications/negative.html
new file mode 100644
index 0000000..c1da4ad
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/notifications/negative.html
@@ -0,0 +1,13 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Notifications / Negative{% endblock %}
+
+{% block standalone_css %}patterns_notifications{% endblock %}
+
+{% block content %}
+
+
+
Error
+
Node must be connected to a network.
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/notifications/notifications-dark.html b/vanilla/templates/docs/examples/patterns/notifications/notifications-dark.html
new file mode 100644
index 0000000..55cf75d
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/notifications/notifications-dark.html
@@ -0,0 +1,13 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Notifications / Default dark{% endblock %}
+
+{% block standalone_css %}patterns_notifications{% endblock %}
+
+{% set is_dark = true %}
+{% block content %}
+
+
+
Cookie policy
+
We use cookies to improve your experience. By your continued use of this site you accept such use.
+
+
{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/notifications/notifications.html b/vanilla/templates/docs/examples/patterns/notifications/notifications.html
new file mode 100644
index 0000000..9469de3
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/notifications/notifications.html
@@ -0,0 +1,13 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Notifications / Default{% endblock %}
+
+{% block standalone_css %}patterns_notifications{% endblock %}
+
+{% block content %}
+
+
+
Cookie policy
+
We use cookies to improve your experience. By your continued use of this site you accept such use.
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/notifications/positive.html b/vanilla/templates/docs/examples/patterns/notifications/positive.html
new file mode 100644
index 0000000..61fc39a
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/notifications/positive.html
@@ -0,0 +1,13 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Notifications / Positive{% endblock %}
+
+{% block standalone_css %}patterns_notifications{% endblock %}
+
+{% block content %}
+
+
+
Success
+
Code successfully reformatted.
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/notifications/timestamp.html b/vanilla/templates/docs/examples/patterns/notifications/timestamp.html
new file mode 100644
index 0000000..fbe76b3
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/notifications/timestamp.html
@@ -0,0 +1,20 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Notifications / Timestamp{% endblock %}
+
+{% block standalone_css %}patterns_notifications{% endblock %}
+
+{% block content %}
+
+
+
Title
+
Body lorem ipsum dolor sit amet consequiteor. Lorem ipsum dolor sit amet consequiteor.
+
Close
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/notifications/variants-dark.html b/vanilla/templates/docs/examples/patterns/notifications/variants-dark.html
new file mode 100644
index 0000000..fcca044
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/notifications/variants-dark.html
@@ -0,0 +1,14 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Notifications / Variants Dark{% endblock %}
+
+{% block standalone_css %}patterns_notifications{% endblock %}
+
+{% block style %}
+{% endblock %}
+
+{% set is_dark = true %}
+{% block content %}
+
+{% include "/docs/examples/patterns/notifications/_variants.html" %}
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/notifications/variants.html b/vanilla/templates/docs/examples/patterns/notifications/variants.html
new file mode 100644
index 0000000..7ef9b06
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/notifications/variants.html
@@ -0,0 +1,13 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Notifications / Variants{% endblock %}
+
+{% block standalone_css %}patterns_notifications{% endblock %}
+
+{% block style %}
+{% endblock %}
+
+{% block content %}
+
+{% include "/docs/examples/patterns/notifications/_variants.html" %}
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/pagination/pagination-deprecated.html b/vanilla/templates/docs/examples/patterns/pagination/pagination-deprecated.html
new file mode 100644
index 0000000..cc455e3
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/pagination/pagination-deprecated.html
@@ -0,0 +1,33 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Pagination / Deprecated{% endblock %}
+
+{% block standalone_css %}patterns_pagination{% endblock %}
+
+{% set is_not_themed = True %}
+{% block content %}
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/pagination/pagination-disabled.html b/vanilla/templates/docs/examples/patterns/pagination/pagination-disabled.html
new file mode 100644
index 0000000..1f0132a
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/pagination/pagination-disabled.html
@@ -0,0 +1,32 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Pagination / Disabled{% endblock %}
+
+{% block standalone_css %}patterns_pagination{% endblock %}
+
+{% block content %}
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/pagination/pagination-truncated.html b/vanilla/templates/docs/examples/patterns/pagination/pagination-truncated.html
new file mode 100644
index 0000000..5ae6892
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/pagination/pagination-truncated.html
@@ -0,0 +1,38 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Pagination / Truncated{% endblock %}
+
+{% block standalone_css %}patterns_pagination{% endblock %}
+
+{% block content %}
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/pagination/pagination-verbose.html b/vanilla/templates/docs/examples/patterns/pagination/pagination-verbose.html
new file mode 100644
index 0000000..0ad16ab
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/pagination/pagination-verbose.html
@@ -0,0 +1,17 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Pagination / Previous and next buttons only {% endblock %}
+
+{% block standalone_css %}patterns_pagination{% endblock %}
+
+{% block content %}
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/pagination/pagination.html b/vanilla/templates/docs/examples/patterns/pagination/pagination.html
new file mode 100644
index 0000000..d6aacab
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/pagination/pagination.html
@@ -0,0 +1,32 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Pagination / Default{% endblock %}
+
+{% block standalone_css %}patterns_pagination{% endblock %}
+
+{% block content %}
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/pull-quotes/default-image.html b/vanilla/templates/docs/examples/patterns/pull-quotes/default-image.html
new file mode 100644
index 0000000..fc53118
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/pull-quotes/default-image.html
@@ -0,0 +1,12 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Pull quote / Image{% endblock %}
+
+{% block standalone_css %}patterns_pull-quotes{% endblock %}
+
+{% block content %}
+
+ Using the modelling ethos brought by Juju allows me to quickly run big data applications in a multitude of places. Be it locally on my laptop, on bare metal or in the Cloud, Juju lets me reuse the same models and code without changing any aspects of my deployment.
+ Tom Barber, CTO, Spicule LTD
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/pull-quotes/default.html b/vanilla/templates/docs/examples/patterns/pull-quotes/default.html
new file mode 100644
index 0000000..4f92d5b
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/pull-quotes/default.html
@@ -0,0 +1,11 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Pull quote / Default{% endblock %}
+
+{% block standalone_css %}patterns_pull-quotes{% endblock %}
+
+{% block content %}
+
+ We want to be able to deliver the same high-quality experience on Linux as we do on other platforms. Snaps allow us to do just that, by giving us the ability to push the latest features straight to our users, no matter what device or distribution they happen to use.
+ Jonáš Tajrych, Senior Software Engineer at Skype at Microsoft
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/pull-quotes/large.html b/vanilla/templates/docs/examples/patterns/pull-quotes/large.html
new file mode 100644
index 0000000..61aa8ff
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/pull-quotes/large.html
@@ -0,0 +1,11 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Pull quote / Large{% endblock %}
+
+{% block standalone_css %}patterns_pull-quotes{% endblock %}
+
+{% block content %}
+
+ The support has been fabulous. The whole team stepped up and helped us work through issues.
+ Director of Web Engineering, Best Buy Corp
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/pull-quotes/small.html b/vanilla/templates/docs/examples/patterns/pull-quotes/small.html
new file mode 100644
index 0000000..80bc6f6
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/pull-quotes/small.html
@@ -0,0 +1,11 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Pull quote / Small{% endblock %}
+
+{% block standalone_css %}patterns_pull-quotes{% endblock %}
+
+{% block content %}
+
+ We want to be able to deliver the same high-quality experience on Linux as we do on other platforms. Snaps allow us to do just that, by giving us the ability to push the latest features straight to our users, no matter what device or distribution they happen to use.
+ Jonáš Tajrych, Senior Software Engineer at Skype at Microsoft
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/pull-quotes/variants.html b/vanilla/templates/docs/examples/patterns/pull-quotes/variants.html
new file mode 100644
index 0000000..c5889a7
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/pull-quotes/variants.html
@@ -0,0 +1,121 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Pull quote / Variants{% endblock %}
+
+{% block standalone_css %}patterns_pull-quotes{% endblock %}
+
+{% block content %}
+
.p-pull-quote
+
Default variant - 1 paragraph with cite:
+
+ We want to be able to deliver the same high-quality experience on Linux as we do on other platforms. Snaps allow us to do just that, by giving us the ability to push the latest features straight to our users, no matter what device or distribution they happen to use.
+ Jonáš Tajrych, Senior Software Engineer at Skype at Microsoft
+
+
+
Default variant - 2 paragraphs with cite:
+
+ We want to be able to deliver the same high-quality experience on Linux as we do on other platforms.
+ Snaps allow us to do just that, by giving us the ability to push the latest features straight to our users, no matter what device or distribution they happen to use.
+ Jonáš Tajrych, Senior Software Engineer at Skype at Microsoft
+
+
+
Default variant - 1 paragraph, no cite:
+
+ We want to be able to deliver the same high-quality experience on Linux as we do on other platforms. Snaps allow us to do just that, by giving us the ability to push the latest features straight to our users, no matter what device or distribution they happen to use.
+
+
+
Default variant - 2 paragraphs, no cite:
+
+ We want to be able to deliver the same high-quality experience on Linux as we do on other platforms.
+ Snaps allow us to do just that, by giving us the ability to push the latest features straight to our users, no matter what device or distribution they happen to use.
+
+
+
Default variant - image, 1 paragraph, with cite:
+
+ Using the modelling ethos brought by Juju allows me to quickly run big data applications in a multitude of places. Be it locally on my laptop, on bare metal or in the Cloud, Juju lets me reuse the same models and code without changing any aspects of my deployment.
+ Tom Barber, CTO, Spicule LTD
+
+
+
Default variant - image, 1 paragraph, no cite:
+
+ Using the modelling ethos brought by Juju allows me to quickly run big data applications in a multitude of places. Be it locally on my laptop, on bare metal or in the Cloud, Juju lets me reuse the same models and code without changing any aspects of my deployment.
+
+
+
.p-pull-quote--small
+
Small variant - 1 paragraph with cite:
+
+ We want to be able to deliver the same high-quality experience on Linux as we do on other platforms. Snaps allow us to do just that, by giving us the ability to push the latest features straight to our users, no matter what device or distribution they happen to use.
+ Jonáš Tajrych, Senior Software Engineer at Skype at Microsoft
+
+
+
Small variant - 2 paragraphs with cite:
+
+ We want to be able to deliver the same high-quality experience on Linux as we do on other platforms.
+ Snaps allow us to do just that, by giving us the ability to push the latest features straight to our users, no matter what device or distribution they happen to use.
+ Jonáš Tajrych, Senior Software Engineer at Skype at Microsoft
+
+
+
Small variant - 1 paragraph, no cite:
+
+ We want to be able to deliver the same high-quality experience on Linux as we do on other platforms. Snaps allow us to do just that, by giving us the ability to push the latest features straight to our users, no matter what device or distribution they happen to use.
+
+
+
Small variant - 2 paragraphs, no cite:
+
+ We want to be able to deliver the same high-quality experience on Linux as we do on other platforms.
+ Snaps allow us to do just that, by giving us the ability to push the latest features straight to our users, no matter what device or distribution they happen to use.
+
+
+
Small variant - image, 1 paragraph, with cite:
+
+ Using the modelling ethos brought by Juju allows me to quickly run big data applications in a multitude of places. Be it locally on my laptop, on bare metal or in the Cloud, Juju lets me reuse the same models and code without changing any aspects of my deployment.
+ Tom Barber, CTO, Spicule LTD
+
+
+
Small variant - image, 1 paragraph, no cite:
+
+ Using the modelling ethos brought by Juju allows me to quickly run big data applications in a multitude of places. Be it locally on my laptop, on bare metal or in the Cloud, Juju lets me reuse the same models and code without changing any aspects of my deployment.
+
+
+
+
.p-pull-quote--large
+
Large variant - 1 paragraph with cite:
+
+ We want to be able to deliver the same high-quality experience on Linux as we do on other platforms. Snaps allow us to do just that, by giving us the ability to push the latest features straight to our users, no matter what device or distribution they happen to use.
+ Jonáš Tajrych, Senior Software Engineer at Skype at Microsoft
+
+
+
Large variant - 2 paragraphs with cite:
+
+ We want to be able to deliver the same high-quality experience on Linux as we do on other platforms.
+ Snaps allow us to do just that, by giving us the ability to push the latest features straight to our users, no matter what device or distribution they happen to use.
+ Jonáš Tajrych, Senior Software Engineer at Skype at Microsoft
+
+
+
Large variant - 1 paragraph, no cite:
+
+ We want to be able to deliver the same high-quality experience on Linux as we do on other platforms. Snaps allow us to do just that, by giving us the ability to push the latest features straight to our users, no matter what device or distribution they happen to use.
+
+
+
Large variant - 2 paragraphs, no cite:
+
+ We want to be able to deliver the same high-quality experience on Linux as we do on other platforms.
+ Snaps allow us to do just that, by giving us the ability to push the latest features straight to our users, no matter what device or distribution they happen to use.
+
+
+
Large variant - image, 1 paragraph, with cite:
+
+ Using the modelling ethos brought by Juju allows me to quickly run big data applications in a multitude of places. Be it locally on my laptop, on bare metal or in the Cloud, Juju lets me reuse the same models and code without changing any aspects of my deployment.
+ Tom Barber, CTO, Spicule LTD
+
+
+
Large variant - image, 1 paragraph, no cite:
+
+ Using the modelling ethos brought by Juju allows me to quickly run big data applications in a multitude of places. Be it locally on my laptop, on bare metal or in the Cloud, Juju lets me reuse the same models and code without changing any aspects of my deployment.
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/rule/dark.html b/vanilla/templates/docs/examples/patterns/rule/dark.html
new file mode 100644
index 0000000..1a96fa0
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/rule/dark.html
@@ -0,0 +1,37 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Rule / Dark{% endblock %}
+
+{% block standalone_css %}patterns_rule{% endblock %}
+
+{% set is_not_themed = True %}
+{% block content %}
+
+
+
+
+ A broad portfolio.
+
+
+
+
+
+
+
+
+
One stable platform
+
Build with confidence using the world's favourite Linux operating system.
+
+
+
+
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/rule/default.html b/vanilla/templates/docs/examples/patterns/rule/default.html
new file mode 100644
index 0000000..b7aa4c1
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/rule/default.html
@@ -0,0 +1,10 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Rule / Default{% endblock %}
+
+{% block standalone_css %}patterns_rule{% endblock %}
+
+{% block content %}
+
+{% include "/docs/examples/brochure/_50-50.html" %}
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/rule/highlight.html b/vanilla/templates/docs/examples/patterns/rule/highlight.html
new file mode 100644
index 0000000..c00611d
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/rule/highlight.html
@@ -0,0 +1,10 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Rule / Highlight{% endblock %}
+
+{% block standalone_css %}patterns_rule{% endblock %}
+
+{% block content %}
+
+{% include "/docs/examples/brochure/_25-75-nested.html" %}
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/rule/muted.html b/vanilla/templates/docs/examples/patterns/rule/muted.html
new file mode 100644
index 0000000..5640f6b
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/rule/muted.html
@@ -0,0 +1,30 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Rule / Muted{% endblock %}
+
+{% block standalone_css %}patterns_rule{% endblock %}
+
+{% block content %}
+
+
+
+
+
+
+
+
Infrastructure,
+
Flexible and engineered for efficiency.
+
+
+
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/search-and-filter/_default-script.js b/vanilla/templates/docs/examples/patterns/search-and-filter/_default-script.js
new file mode 100644
index 0000000..8dc75ff
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/search-and-filter/_default-script.js
@@ -0,0 +1,32 @@
+/**
+ Toggles visibility of filter panel.
+ @param {HTMLElement} panel Filter panel to show or hide.
+*/
+function togglePanel(container, panel, collapse) {
+ if (typeof collapse === 'undefined') {
+ collapse = panel.getAttribute('aria-hidden') !== 'false';
+ }
+ if (panel && container) {
+ if (collapse) {
+ panel.setAttribute('aria-hidden', 'true');
+ container.setAttribute('aria-expanded', 'false');
+ } else {
+ panel.setAttribute('aria-hidden', 'false');
+ container.setAttribute('aria-expanded', 'true');
+ }
+ }
+}
+
+// Add click handler for clicks on elements with aria-controls
+[].slice.call(document.querySelectorAll('.p-search-and-filter')).forEach(function (pattern) {
+ var input = pattern.querySelector('.p-search-and-filter__input');
+ var container = pattern.querySelector('.p-search-and-filter__search-container');
+ input.addEventListener('blur', function (event) {
+ var targetPanel = pattern.querySelector('.p-search-and-filter__panel');
+ togglePanel(container, targetPanel, true);
+ });
+ input.addEventListener('focus', function (event) {
+ var targetPanel = pattern.querySelector('.p-search-and-filter__panel');
+ togglePanel(container, targetPanel, false);
+ });
+});
diff --git a/vanilla/templates/docs/examples/patterns/search-and-filter/_overflow-script.js b/vanilla/templates/docs/examples/patterns/search-and-filter/_overflow-script.js
new file mode 100644
index 0000000..77aa208
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/search-and-filter/_overflow-script.js
@@ -0,0 +1,12 @@
+// Add click handler for clicks on elements with aria-controls
+[].slice.call(document.querySelectorAll('.p-search-and-filter')).forEach(function (pattern) {
+ var overflowCount = pattern.querySelector('.p-search-and-filter__selected-count');
+ var container = pattern.querySelector('.p-search-and-filter__search-container');
+ var searchBox = pattern.querySelector('.p-search-and-filter__box');
+ var panel = pattern.querySelector('.p-search-and-filter__panel');
+ overflowCount.addEventListener('click', function (event) {
+ searchBox.dataset.overflowing = 'true';
+ panel.setAttribute('aria-hidden', 'false');
+ container.setAttribute('aria-expanded', 'true');
+ });
+});
diff --git a/vanilla/templates/docs/examples/patterns/search-and-filter/_search-prompt-script.js b/vanilla/templates/docs/examples/patterns/search-and-filter/_search-prompt-script.js
new file mode 100644
index 0000000..3572aa8
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/search-and-filter/_search-prompt-script.js
@@ -0,0 +1,57 @@
+/**
+ Create a simple text chip element
+ @param {string} value The value of the search input.
+ @return {HTMLElement} A chip element containing the value
+*/
+function createChip(value) {
+ var chip = document.createElement('button');
+ chip.classList.add('p-chip');
+ chip.setAttribute('aria-pressed', 'false');
+ chip.innerHTML = `
'${value}' `;
+ return chip;
+}
+
+// Add click handler for clicks on elements with aria-controls
+[].slice.call(document.querySelectorAll('.p-search-and-filter')).forEach(function (pattern) {
+ var input = pattern.querySelector('.p-search-and-filter__input');
+ var query = pattern.querySelector('.p-search-and-filter__search-query');
+ var prompt = pattern.querySelector('.p-search-and-filter__search-prompt');
+ var container = pattern.querySelector('.p-search-and-filter__search-container');
+ var searchBox = pattern.querySelector('.p-search-and-filter__box');
+ var clear = pattern.querySelector('.p-search-and-filter__clear');
+
+ clear.addEventListener('click', function (event) {
+ input.value = '';
+ clear.style.display = 'none';
+ });
+
+ input.addEventListener('keyup', function (event) {
+ query.innerHTML = input.value;
+ if (input.value === '') {
+ clear.style.display = 'none';
+ } else {
+ clear.style.display = 'block';
+ }
+ });
+
+ prompt.addEventListener('click', function (event) {
+ if (input.value !== '') {
+ container.insertBefore(createChip(input.value), searchBox);
+ input.value = '';
+ clear.style.display = 'none';
+ query.innerHTML = '';
+ }
+ });
+
+ input.addEventListener('blur', function (event) {
+ var targetPanel = pattern.querySelector('.p-search-and-filter__panel');
+ targetPanel.setAttribute('aria-hidden', 'true');
+ container.setAttribute('aria-expanded', 'false');
+ });
+
+ input.addEventListener('focus', function (event) {
+ var targetPanel = pattern.querySelector('.p-search-and-filter__panel');
+ targetPanel.setAttribute('aria-hidden', 'false');
+ container.setAttribute('aria-expanded', 'true');
+ });
+});
diff --git a/vanilla/templates/docs/examples/patterns/search-and-filter/chip-overflow.html b/vanilla/templates/docs/examples/patterns/search-and-filter/chip-overflow.html
new file mode 100644
index 0000000..deadcb1
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/search-and-filter/chip-overflow.html
@@ -0,0 +1,129 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Search and filter / Chips overflow{% endblock %}
+
+{% block standalone_css %}patterns_search-and-filter{% endblock %}
+
+{% set is_not_themed = True %}
+{% block content %}
+
+
+
+ CLOUD Google
+ Dismiss
+
+
+ CLOUD AWS
+ Dismiss
+
+
+ CLOUD Google
+ Dismiss
+
+
+ CLOUD AWS
+ Dismiss
+
+
+ CLOUD Google
+ Dismiss
+
+
+ CLOUD AWS
+ Dismiss
+
+
+ CLOUD Google
+ Dismiss
+
+
+ CLOUD AWS
+ Dismiss
+
+
+ CLOUD Google
+ Dismiss
+
+
+ CLOUD AWS
+ Dismiss
+
+ +2
+
+
+
+
+
Cloud
+
+
+ CLOUD Google
+
+
+ CLOUD AWS
+
+
+ CLOUD Azure
+
+
+
+
+
+
Region
+
+
+ REGION us-east1
+
+
+ REGION us-north2
+
+
+ REGION us-south3
+
+
+ REGION us-north4
+
+
+ REGION us-east5
+
+
+ REGION us-south6
+
+
+ REGION us-east7
+
+
+ REGION us-east8
+
+
+ REGION us-east9
+
+
+ REGION us-east10
+
+
+
+
+
+
Owner
+
+
+ OWNER foo
+
+
+ OWNER bar
+
+
+ OWNER baz
+
+
+
+
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/search-and-filter/default.html b/vanilla/templates/docs/examples/patterns/search-and-filter/default.html
new file mode 100644
index 0000000..9b43f13
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/search-and-filter/default.html
@@ -0,0 +1,88 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Search and filter / Default{% endblock %}
+
+{% block standalone_css %}patterns_search-and-filter{% endblock %}
+
+{% set is_not_themed = True %}
+{% block content %}
+
+
+
+
+
+
+
Cloud
+
+
+ CLOUD Google
+
+
+ CLOUD AWS
+
+
+ CLOUD Azure
+
+
+
+
+
+
Region
+
+
+ REGION us-east1
+
+
+ REGION us-north2
+
+
+ REGION us-south3
+
+
+ REGION us-north4
+
+
+ REGION us-east5
+
+
+ REGION us-south6
+
+
+ REGION us-east7
+
+
+ REGION us-east8
+
+
+ REGION us-east9
+
+
+ REGION us-east10
+
+
+
+
+
+
Owner
+
+
+ OWNER foo
+
+
+ OWNER bar
+
+
+ OWNER baz
+
+
+
+
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/search-and-filter/expanded.html b/vanilla/templates/docs/examples/patterns/search-and-filter/expanded.html
new file mode 100644
index 0000000..bfc43f8
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/search-and-filter/expanded.html
@@ -0,0 +1,88 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Search and filter / Expanded{% endblock %}
+
+{% block standalone_css %}patterns_search-and-filter{% endblock %}
+
+{% set is_not_themed = True %}
+{% block content %}
+
+
+
+
+
+
+
Cloud
+
+
+ CLOUD Google
+
+
+ CLOUD AWS
+
+
+ CLOUD Azure
+
+
+
+
+
+
Region
+
+
+ REGION us-east1
+
+
+ REGION us-north2
+
+
+ REGION us-south3
+
+
+ REGION us-north4
+
+
+ REGION us-east5
+
+
+ REGION us-south6
+
+
+ REGION us-east7
+
+
+ REGION us-east8
+
+
+ REGION us-east9
+
+
+ REGION us-east10
+
+
+
+
+
+
Owner
+
+
+ OWNER foo
+
+
+ OWNER bar
+
+
+ OWNER baz
+
+
+
+
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/search-and-filter/with-chips.html b/vanilla/templates/docs/examples/patterns/search-and-filter/with-chips.html
new file mode 100644
index 0000000..2c5cf85
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/search-and-filter/with-chips.html
@@ -0,0 +1,96 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Search and filter / With chips{% endblock %}
+
+{% block standalone_css %}patterns_search-and-filter{% endblock %}
+
+{% set is_not_themed = True %}
+{% block content %}
+
+
+
+ CLOUD Google
+ Dismiss
+
+
+ CLOUD AWS
+ Dismiss
+
+
+
+
+
+
Cloud
+
+
+ CLOUD Google
+
+
+ CLOUD AWS
+
+
+ CLOUD Azure
+
+
+
+
+
+
Region
+
+
+ REGION us-east1
+
+
+ REGION us-north2
+
+
+ REGION us-south3
+
+
+ REGION us-north4
+
+
+ REGION us-east5
+
+
+ REGION us-south6
+
+
+ REGION us-east7
+
+
+ REGION us-east8
+
+
+ REGION us-east9
+
+
+ REGION us-east10
+
+
+
+
+
+
Owner
+
+
+ OWNER foo
+
+
+ OWNER bar
+
+
+ OWNER baz
+
+
+
+
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/search-and-filter/with-search-prompt.html b/vanilla/templates/docs/examples/patterns/search-and-filter/with-search-prompt.html
new file mode 100644
index 0000000..075b8b2
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/search-and-filter/with-search-prompt.html
@@ -0,0 +1,27 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Search and filter / With search prompt{% endblock %}
+
+{% block standalone_css %}patterns_search-and-filter{% endblock %}
+
+{% set is_not_themed = True %}
+{% block content %}
+
+
+
+
+
+
+
+ Search for vanilla ...
+
+
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/search-box/_script.js b/vanilla/templates/docs/examples/patterns/search-box/_script.js
new file mode 100644
index 0000000..811d953
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/search-box/_script.js
@@ -0,0 +1,15 @@
+function initSearchResetButtons(selector) {
+ var resetButtons = [].slice.call(document.querySelectorAll(selector));
+
+ resetButtons.forEach(function (button) {
+ button.addEventListener('click', function () {
+ var input = button.parentNode.querySelector('input');
+
+ input.focus();
+ });
+ });
+}
+
+document.addEventListener('DOMContentLoaded', function () {
+ initSearchResetButtons('.p-search-box__reset');
+});
diff --git a/vanilla/templates/docs/examples/patterns/search-box/default-dark.html b/vanilla/templates/docs/examples/patterns/search-box/default-dark.html
new file mode 100644
index 0000000..6f57b3d
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/search-box/default-dark.html
@@ -0,0 +1,24 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Search box / Default dark{% endblock %}
+
+{% block standalone_css %}patterns_search-box{% endblock %}
+
+{% set is_dark = true %}
+{% block content %}
+
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/search-box/default.html b/vanilla/templates/docs/examples/patterns/search-box/default.html
new file mode 100644
index 0000000..b1e7f57
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/search-box/default.html
@@ -0,0 +1,23 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Search box / Default{% endblock %}
+
+{% block standalone_css %}patterns_search-box{% endblock %}
+
+{% block content %}
+
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/section/deep.html b/vanilla/templates/docs/examples/patterns/section/deep.html
new file mode 100644
index 0000000..2b70ebf
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/section/deep.html
@@ -0,0 +1,14 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Section / Deep{% endblock %}
+
+{% block standalone_css %}patterns_section{% endblock %}
+
+{% block content %}
+
+
+ Deep section
+ I'm a deep section on the page. I'm a deep section on the page. I'm a deep section on the page. I'm a deep section on the page. I'm a deep section on the page.
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/section/hero.html b/vanilla/templates/docs/examples/patterns/section/hero.html
new file mode 100644
index 0000000..e913a10
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/section/hero.html
@@ -0,0 +1,16 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Section / Hero{% endblock %}
+
+{% block standalone_css %}patterns_section{% endblock %}
+
+{% block content %}
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/section/section.html b/vanilla/templates/docs/examples/patterns/section/section.html
new file mode 100644
index 0000000..67a8403
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/section/section.html
@@ -0,0 +1,19 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Section{% endblock %}
+
+{% block standalone_css %}patterns_section{% endblock %}
+
+{% block content %}
+
+
+ Section
+ I'm a section on the page. I'm a section on the page. I'm a section on the page. I'm a section on the page. I'm a section on the page. I'm a section on the page. I'm a section on the page. I'm a section on the page.
+
+
+ Section
+ I'm a section on the page. I'm a section on the page. I'm a section on the page. I'm a section on the page. I'm a section on the page. I'm a section on the page. I'm a section on the page. I'm a section on the page.
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/section/shallow.html b/vanilla/templates/docs/examples/patterns/section/shallow.html
new file mode 100644
index 0000000..acd9e28
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/section/shallow.html
@@ -0,0 +1,17 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Section / Shallow{% endblock %}
+
+{% block standalone_css %}patterns_section{% endblock %}
+
+{% block content %}
+
+ Section
+
+
I'm a nested shallow section. I'm a nested shallow section. I'm a nested shallow section. I'm a nested shallow section. I'm a nested shallow section. I'm a nested shallow section.
+
+
I'm a nested shallow section. I'm a nested shallow section. I'm a nested shallow section. I'm a nested shallow section. I'm a nested shallow section. I'm a nested shallow section.
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/segmented-control/default.html b/vanilla/templates/docs/examples/patterns/segmented-control/default.html
new file mode 100644
index 0000000..27e33bc
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/segmented-control/default.html
@@ -0,0 +1,51 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Segmented control / Default{% endblock %}
+
+{% block standalone_css %}patterns_segmented-control{% endblock %}
+
+{% block content %}
+
+
+
+ OLM
+ SDK
+ Charmhub
+
+
+
+
+
A system to help you move from configuration management to application management across your hybrid cloud estate - through sharable, reusable, tiny applications called Charmed Operators.
+
+
+
+
A set of tools to help you write Charmed Operators and to package them as Charms.
+
+
+
+
A repository for charms - from Observability to Data to Identity and more.
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/segmented-control/dense.html b/vanilla/templates/docs/examples/patterns/segmented-control/dense.html
new file mode 100644
index 0000000..2868cdf
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/segmented-control/dense.html
@@ -0,0 +1,53 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Segmented control / Dense{% endblock %}
+
+{% block standalone_css %}patterns_segmented-control{% endblock %}
+
+{% block content %}
+
+
+
+
+ OLM
+
+ SDK
+ Charmhub
+
+
+
+
+
A system to help you move from configuration management to application management across your hybrid cloud estate - through sharable, reusable, tiny applications called Charmed Operators.
+
+
+
+
A set of tools to help you write Charmed Operators and to package them as Charms.
+
+
+
+
A repository for charms - from Observability to Data to Identity and more.
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/segmented-control/icons.html b/vanilla/templates/docs/examples/patterns/segmented-control/icons.html
new file mode 100644
index 0000000..9cbb486
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/segmented-control/icons.html
@@ -0,0 +1,57 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Segmented control / Icons{% endblock %}
+
+{% block standalone_css %}patterns_segmented-control{% endblock %}
+
+{% block content %}
+
+
+
+
+ OLM
+
+
+ SDK
+
+
+ Charmhub
+
+
+
+
+
+
A system to help you move from configuration management to application management across your hybrid cloud estate - through sharable, reusable, tiny applications called Charmed Operators.
+
+
+
+
A set of tools to help you write Charmed Operators and to package them as Charms.
+
+
+
+
A repository for charms - from Observability to Data to Identity and more.
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/separator.html b/vanilla/templates/docs/examples/patterns/separator.html
new file mode 100644
index 0000000..e072653
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/separator.html
@@ -0,0 +1,16 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Separator{% endblock %}
+
+{% block standalone_css %}patterns_separator{% endblock %}
+
+{% block content %}
+
+
Modern enterprise open source
+
Publisher of Ubuntu.
+
Contact Canonical
+
+
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/side-navigation/_accordion.html b/vanilla/templates/docs/examples/patterns/side-navigation/_accordion.html
new file mode 100644
index 0000000..cef54e1
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/side-navigation/_accordion.html
@@ -0,0 +1,96 @@
+
diff --git a/vanilla/templates/docs/examples/patterns/side-navigation/_default.html b/vanilla/templates/docs/examples/patterns/side-navigation/_default.html
new file mode 100644
index 0000000..a395b74
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/side-navigation/_default.html
@@ -0,0 +1,129 @@
+
+
+
+ Toggle side navigation
+
+
+
+
+
+
+
+ Group heading
+
+
+
+
+
+ First level text
+
+
+ Text item with children
+
+
+ Second level link
+
+
+ Second level text
+
+
+ Second level text with children
+
+
+
+
+
+ List title that is not a link
+
+
+ First level item that is not a link
+
+
+ First level link
+
+
+
+
diff --git a/vanilla/templates/docs/examples/patterns/side-navigation/_docs.html b/vanilla/templates/docs/examples/patterns/side-navigation/_docs.html
new file mode 100644
index 0000000..4b4c0b5
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/side-navigation/_docs.html
@@ -0,0 +1,79 @@
+
diff --git a/vanilla/templates/docs/examples/patterns/side-navigation/_example_script.js b/vanilla/templates/docs/examples/patterns/side-navigation/_example_script.js
new file mode 100644
index 0000000..729b0a9
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/side-navigation/_example_script.js
@@ -0,0 +1,15 @@
+// small script to make the example interactive
+// not intended to be used in projects
+var links = [].slice.call(document.querySelectorAll('.p-side-navigation__link, .p-side-navigation--raw-html li > a'));
+
+links.forEach(function (link) {
+ link.addEventListener('click', function () {
+ var active = [].slice.call(document.querySelectorAll('.is-active, [aria-current]'));
+ active.forEach(function (link) {
+ link.classList.remove('is-active');
+ link.removeAttribute('aria-current');
+ });
+ this.setAttribute('aria-current', 'page');
+ this.blur();
+ });
+});
diff --git a/vanilla/templates/docs/examples/patterns/side-navigation/_expand_script.js b/vanilla/templates/docs/examples/patterns/side-navigation/_expand_script.js
new file mode 100644
index 0000000..724c9b2
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/side-navigation/_expand_script.js
@@ -0,0 +1,40 @@
+// Setup expand toggles for all side navigations on the page.
+
+function setupSideNavigationExpandToggle(toggle) {
+ const isExpanded = toggle.getAttribute('aria-expanded') === 'true';
+ if (!isExpanded) {
+ toggle.setAttribute('aria-expanded', isExpanded);
+ }
+ const item = toggle.closest('.p-side-navigation__item');
+ const link = item.querySelector('.p-side-navigation__link');
+ const nestedList = item.querySelector('.p-side-navigation__list');
+ if (!link?.hasAttribute('aria-expanded')) {
+ link.setAttribute('aria-expanded', isExpanded);
+ }
+ if (!nestedList?.hasAttribute('aria-expanded')) {
+ nestedList.setAttribute('aria-expanded', isExpanded);
+ }
+}
+
+function handleExpandToggle(event) {
+ const item = event.currentTarget.closest('.p-side-navigation__item');
+ const button = item.querySelector('.p-side-navigation__expand, .p-side-navigation__accordion-button');
+ const link = item.querySelector('.p-side-navigation__link');
+ const nestedList = item.querySelector('.p-side-navigation__list');
+
+ [button, link, nestedList].forEach((el) => {
+ el.setAttribute('aria-expanded', el.getAttribute('aria-expanded') === 'true' ? 'false' : 'true');
+ });
+}
+
+function setupSideNavigationExpands() {
+ var expandToggles = document.querySelectorAll('.p-side-navigation__expand, .p-side-navigation__accordion-button');
+ expandToggles.forEach((toggle) => {
+ setupSideNavigationExpandToggle(toggle);
+ toggle.addEventListener('click', (e) => {
+ handleExpandToggle(e);
+ });
+ });
+}
+
+setupSideNavigationExpands();
diff --git a/vanilla/templates/docs/examples/patterns/side-navigation/_expandable.html b/vanilla/templates/docs/examples/patterns/side-navigation/_expandable.html
new file mode 100644
index 0000000..9025b45
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/side-navigation/_expandable.html
@@ -0,0 +1,88 @@
+
diff --git a/vanilla/templates/docs/examples/patterns/side-navigation/_icons.html b/vanilla/templates/docs/examples/patterns/side-navigation/_icons.html
new file mode 100644
index 0000000..d99b44d
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/side-navigation/_icons.html
@@ -0,0 +1,132 @@
+
+
+ Toggle side navigation
+
+
+
+
+ {% if is_dark %}
+
+ {% endif %}
+
+
+
+ Group heading
+
+
+
+
+
+ First level text
+
+
+ Text item with children
+
+
+ Second level link
+
+
+ Second level text
+
+
+ Second level text with children
+
+
+
+
+
+ Title that is not a link
+
+
+ First level item that is not a link
+
+
+ First level link
+
+
+
+
diff --git a/vanilla/templates/docs/examples/patterns/side-navigation/_layout-JAAS.html b/vanilla/templates/docs/examples/patterns/side-navigation/_layout-JAAS.html
new file mode 100644
index 0000000..a852056
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/side-navigation/_layout-JAAS.html
@@ -0,0 +1,42 @@
+{# used by the application layout example #}
+
+
+
+
+
+
+
+ Version 0.4.0
+
+ Beta
+
+
+
+
+
+
diff --git a/vanilla/templates/docs/examples/patterns/side-navigation/_layout-application.html b/vanilla/templates/docs/examples/patterns/side-navigation/_layout-application.html
new file mode 100644
index 0000000..c3a2e15
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/side-navigation/_layout-application.html
@@ -0,0 +1,107 @@
+{# used by the application layout example #}
+
+
+
+
+
+
+ Title that is not a link
+
+
+ First level text
+
+
+ Text item with children
+
+
+ Second level link
+
+
+ Second level text
+
+
+ Second level text with children
+
+
+
+
+
+ First level item that is not a link
+
+
+ First level link
+
+
+
+
diff --git a/vanilla/templates/docs/examples/patterns/side-navigation/_toggle_script.js b/vanilla/templates/docs/examples/patterns/side-navigation/_toggle_script.js
new file mode 100644
index 0000000..9dbcb17
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/side-navigation/_toggle_script.js
@@ -0,0 +1,172 @@
+// This is not a production ready code, just serves as an example
+// of how the focus should be controlled within the sidenav drawer.
+var expandedSidenavContainer = null;
+var lastFocus = null;
+var ignoreFocusChanges = false;
+var focusAfterClose = null;
+
+// Traps the focus within the currently expanded sidenav drawer
+function trapFocus(event) {
+ if (ignoreFocusChanges || !expandedSidenavContainer) return;
+ // skip the focus trap if the sidenav is not in the expanded status (large screens)
+ if (!expandedSidenavContainer.classList.contains('is-drawer-expanded')) return;
+ var sidenavDrawer = expandedSidenavContainer.querySelector('.p-side-navigation__drawer');
+
+ if (sidenavDrawer.contains(event.target)) {
+ lastFocus = event.target;
+ } else {
+ focusFirstDescendant(sidenavDrawer);
+ if (lastFocus == document.activeElement) {
+ focusLastDescendant(sidenavDrawer);
+ }
+ lastFocus = document.activeElement;
+ }
+}
+
+// Attempts to focus given element
+function attemptFocus(child) {
+ if (child.focus) {
+ ignoreFocusChanges = true;
+ child.focus();
+ ignoreFocusChanges = false;
+ return document.activeElement === child;
+ }
+
+ return false;
+}
+
+// Focuses first child element
+function focusFirstDescendant(element) {
+ for (var i = 0; i < element.childNodes.length; i++) {
+ var child = element.childNodes[i];
+ if (attemptFocus(child) || focusFirstDescendant(child)) {
+ return true;
+ }
+ }
+ return false;
+}
+
+// Focuses last child element
+function focusLastDescendant(element) {
+ for (var i = element.childNodes.length - 1; i >= 0; i--) {
+ var child = element.childNodes[i];
+ if (attemptFocus(child) || focusLastDescendant(child)) {
+ return true;
+ }
+ }
+ return false;
+}
+
+/**
+ Toggles the expanded/collapsed classes on side navigation element.
+
+ @param {HTMLElement} sideNavigation The side navigation element.
+ @param {Boolean} show Whether to show or hide the drawer.
+*/
+function toggleDrawer(sideNavigation, show) {
+ expandedSidenavContainer = show ? sideNavigation : null;
+ const toggleButtonOutsideDrawer = sideNavigation.querySelector('.p-side-navigation__toggle, .js-drawer-toggle');
+ const toggleButtonInsideDrawer = sideNavigation.querySelector('.p-side-navigation__toggle--in-drawer');
+
+ if (sideNavigation) {
+ if (show) {
+ sideNavigation.classList.remove('is-drawer-collapsed');
+ sideNavigation.classList.add('is-drawer-expanded');
+
+ toggleButtonInsideDrawer.focus();
+ toggleButtonOutsideDrawer.setAttribute('aria-expanded', true);
+ toggleButtonInsideDrawer.setAttribute('aria-expanded', true);
+ focusFirstDescendant(sideNavigation);
+ focusAfterClose = toggleButtonOutsideDrawer;
+ document.addEventListener('focus', trapFocus, true);
+ } else {
+ sideNavigation.classList.remove('is-drawer-expanded');
+ sideNavigation.classList.add('is-drawer-collapsed');
+
+ toggleButtonOutsideDrawer.focus();
+ toggleButtonOutsideDrawer.setAttribute('aria-expanded', false);
+ toggleButtonInsideDrawer.setAttribute('aria-expanded', false);
+ if (focusAfterClose && focusAfterClose.focus) {
+ focusAfterClose.focus();
+ }
+ document.removeEventListener('focus', trapFocus, true);
+ }
+ }
+}
+
+// throttle util (for window resize event)
+var throttle = function (fn, delay) {
+ var timer = null;
+ return function () {
+ var context = this,
+ args = arguments;
+ clearTimeout(timer);
+ timer = setTimeout(function () {
+ fn.apply(context, args);
+ }, delay);
+ };
+};
+
+/**
+ Attaches event listeners for the side navigation toggles
+ @param {HTMLElement} sideNavigation The side navigation element.
+*/
+function setupSideNavigation(sideNavigation) {
+ var toggles = [].slice.call(sideNavigation.querySelectorAll('.js-drawer-toggle'));
+ var drawerEl = sideNavigation.querySelector('.p-side-navigation__drawer');
+
+ // hide navigation drawer on small screens
+ sideNavigation.classList.add('is-drawer-hidden');
+
+ // setup drawer element
+ drawerEl.addEventListener('animationend', () => {
+ if (!sideNavigation.classList.contains('is-drawer-expanded')) {
+ sideNavigation.classList.add('is-drawer-hidden');
+ }
+ });
+
+ window.addEventListener('keydown', (e) => {
+ if (e.key === 'Escape') {
+ toggleDrawer(sideNavigation, false);
+ }
+ });
+
+ // setup toggle buttons
+ toggles.forEach(function (toggle) {
+ toggle.addEventListener('click', function (event) {
+ event.preventDefault();
+
+ if (sideNavigation) {
+ sideNavigation.classList.remove('is-drawer-hidden');
+ toggleDrawer(sideNavigation, !sideNavigation.classList.contains('is-drawer-expanded'));
+ }
+ });
+ });
+
+ // hide side navigation drawer when screen is resized
+ window.addEventListener(
+ 'resize',
+ throttle(function () {
+ toggles.forEach((toggle) => {
+ return toggle.setAttribute('aria-expanded', false);
+ });
+ // remove expanded/collapsed class names to avoid unexpected animations
+ sideNavigation.classList.remove('is-drawer-expanded');
+ sideNavigation.classList.remove('is-drawer-collapsed');
+ sideNavigation.classList.add('is-drawer-hidden');
+ }, 10),
+ );
+}
+
+/**
+ Attaches event listeners for all the side navigations in the document.
+ @param {String} sideNavigationSelector The CSS selector matching side navigation elements.
+*/
+function setupSideNavigations(sideNavigationSelector) {
+ // Setup all side navigations on the page.
+ var sideNavigations = [].slice.call(document.querySelectorAll(sideNavigationSelector));
+
+ sideNavigations.forEach(setupSideNavigation);
+}
+
+setupSideNavigations('.p-side-navigation, [class*="p-side-navigation--"]');
diff --git a/vanilla/templates/docs/examples/patterns/side-navigation/accordion-dark.html b/vanilla/templates/docs/examples/patterns/side-navigation/accordion-dark.html
new file mode 100644
index 0000000..acb3ceb
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/side-navigation/accordion-dark.html
@@ -0,0 +1,15 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Side navigation / Accordion dark{% endblock %}
+
+{% block standalone_css %}patterns_side-navigation{% endblock %}
+
+{% set is_dark = true %}
+{% block content %}
+{% include "docs/examples/patterns/side-navigation/_accordion.html" %}
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/side-navigation/accordion.html b/vanilla/templates/docs/examples/patterns/side-navigation/accordion.html
new file mode 100644
index 0000000..3c43370
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/side-navigation/accordion.html
@@ -0,0 +1,14 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Side navigation / Accordion{% endblock %}
+
+{% block standalone_css %}patterns_side-navigation{% endblock %}
+
+{% block content %}
+{% include "docs/examples/patterns/side-navigation/_accordion.html" %}
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/side-navigation/application.html b/vanilla/templates/docs/examples/patterns/side-navigation/application.html
new file mode 100644
index 0000000..f95ae41
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/side-navigation/application.html
@@ -0,0 +1,9 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Side navigation / Application{% endblock %}
+
+{% block standalone_css %}patterns_side-navigation{% endblock %}
+
+{% set is_dark = True %}
+{% block content %}
+ {% include "docs/examples/patterns/side-navigation/_layout-JAAS.html" %}
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/side-navigation/dark.html b/vanilla/templates/docs/examples/patterns/side-navigation/dark.html
new file mode 100644
index 0000000..bafdb43
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/side-navigation/dark.html
@@ -0,0 +1,26 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Side navigation / Dark{% endblock %}
+
+{% block standalone_css %}patterns_side-navigation{% endblock %}
+
+{% set is_dark = True %}
+{% block content %}
+
+
+ {% include "docs/examples/patterns/side-navigation/_default.html" %}
+
+
+ {% include "docs/examples/patterns/side-navigation/_icons.html" %}
+
+
+ {% with is_sticky = True %}
+ {% include "docs/examples/patterns/side-navigation/_default.html" %}
+ {% endwith %}
+
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/side-navigation/default.html b/vanilla/templates/docs/examples/patterns/side-navigation/default.html
new file mode 100644
index 0000000..2015a20
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/side-navigation/default.html
@@ -0,0 +1,25 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Side navigation / Variants{% endblock %}
+
+{% block standalone_css %}patterns_side-navigation{% endblock %}
+
+{% block content %}
+
+
+ {% include "docs/examples/patterns/side-navigation/_default.html" %}
+
+
+ {% include "docs/examples/patterns/side-navigation/_icons.html" %}
+
+
+ {% with is_sticky = True %}
+ {% include "docs/examples/patterns/side-navigation/_default.html" %}
+ {% endwith %}
+
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/side-navigation/docs.html b/vanilla/templates/docs/examples/patterns/side-navigation/docs.html
new file mode 100644
index 0000000..78d4aff
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/side-navigation/docs.html
@@ -0,0 +1,12 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Side navigation / Docs{% endblock %}
+
+{% block standalone_css %}patterns_side-navigation{% endblock %}
+
+{% block content %}
+{% include "docs/examples/patterns/side-navigation/_docs.html" %}
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/side-navigation/expandable-dark.html b/vanilla/templates/docs/examples/patterns/side-navigation/expandable-dark.html
new file mode 100644
index 0000000..6aee3ab
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/side-navigation/expandable-dark.html
@@ -0,0 +1,19 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Side navigation / Expandable dark{% endblock %}
+
+{% block standalone_css %}patterns_side-navigation{% endblock %}
+
+{% set is_dark = True %}
+{% block content %}
+
+
+ {% include "docs/examples/patterns/side-navigation/_expandable.html" %}
+
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/side-navigation/expandable.html b/vanilla/templates/docs/examples/patterns/side-navigation/expandable.html
new file mode 100644
index 0000000..99db889
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/side-navigation/expandable.html
@@ -0,0 +1,18 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Side navigation / Expandable{% endblock %}
+
+{% block standalone_css %}patterns_side-navigation{% endblock %}
+
+{% block content %}
+
+
+ {% include "docs/examples/patterns/side-navigation/_expandable.html" %}
+
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/side-navigation/icons.html b/vanilla/templates/docs/examples/patterns/side-navigation/icons.html
new file mode 100644
index 0000000..0bc2d47
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/side-navigation/icons.html
@@ -0,0 +1,75 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Side navigation / With icons{% endblock %}
+
+{% block standalone_css %}patterns_side-navigation{% endblock %}
+
+{% block content %}
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/side-navigation/paper.html b/vanilla/templates/docs/examples/patterns/side-navigation/paper.html
new file mode 100644
index 0000000..770096d
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/side-navigation/paper.html
@@ -0,0 +1,26 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Side navigation / Paper{% endblock %}
+
+{% block standalone_css %}patterns_side-navigation{% endblock %}
+
+{% set is_paper = True %}
+{% block content %}
+
+
+ {% include "docs/examples/patterns/side-navigation/_default.html" %}
+
+
+ {% include "docs/examples/patterns/side-navigation/_icons.html" %}
+
+
+ {% with is_sticky = True %}
+ {% include "docs/examples/patterns/side-navigation/_default.html" %}
+ {% endwith %}
+
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/side-navigation/raw-html.html b/vanilla/templates/docs/examples/patterns/side-navigation/raw-html.html
new file mode 100644
index 0000000..4bbef6a
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/side-navigation/raw-html.html
@@ -0,0 +1,104 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Side navigation / Raw HTML{% endblock %}
+
+{% block standalone_css %}patterns_side-navigation{% endblock %}
+
+{% block content %}
+
+
+
+
+ Toggle side navigation
+
+
+
+
+
+
+
+
Title
+
+
Title
+
+
+ Title that is not a link
+
+
+ First level text
+
+
+ Text item with children
+
+
+ Second level link
+
+
+ Second level text
+
+
+ Second level text with children and has some code in the text
+
+
+
+
+
+ First level item that is not a link
+
+
+ First level link
+
+
+
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/side-navigation/sticky.html b/vanilla/templates/docs/examples/patterns/side-navigation/sticky.html
new file mode 100644
index 0000000..1e1ec1c
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/side-navigation/sticky.html
@@ -0,0 +1,15 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Side navigation / Sticky{% endblock %}
+
+{% block standalone_css %}patterns_side-navigation{% endblock %}
+
+{% block content %}
+
+{% with is_sticky = True %}
+ {% include "docs/examples/patterns/side-navigation/_docs.html" %}
+{% endwith %}
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/slider/slider-input.html b/vanilla/templates/docs/examples/patterns/slider/slider-input.html
new file mode 100644
index 0000000..80c7ab6
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/slider/slider-input.html
@@ -0,0 +1,103 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Slider / Input{% endblock %}
+
+{% block standalone_css %}patterns_slider{% endblock %}
+
+{% block content %}
+
+
+
+
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/status-labels.html b/vanilla/templates/docs/examples/patterns/status-labels.html
new file mode 100644
index 0000000..6642389
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/status-labels.html
@@ -0,0 +1,12 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Status labels / Default{% endblock %}
+
+{% block standalone_css %}patterns_status-label{% endblock %}
+
+{% block content %}
+
Default
+
Positive
+
Caution
+
Negative
+
Information
+{% endblock %}
\ No newline at end of file
diff --git a/vanilla/templates/docs/examples/patterns/strips/accent.html b/vanilla/templates/docs/examples/patterns/strips/accent.html
new file mode 100644
index 0000000..c56c04a
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/strips/accent.html
@@ -0,0 +1,18 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Strip / Accent (deprecated){% endblock %}
+
+{% block standalone_css %}patterns_strip{% endblock %}
+
+{% block content %}
+
+
+
+
Still running Ubuntu 14.04 LTS?
+
Learn how to maintain ongoing security compliance for your Ubuntu 14.04 LTS systems.
+
+
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/strips/dark.html b/vanilla/templates/docs/examples/patterns/strips/dark.html
new file mode 100644
index 0000000..4f6a3e1
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/strips/dark.html
@@ -0,0 +1,16 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Strips / Dark{% endblock %}
+
+{% block standalone_css %}patterns_strip{% endblock %}
+
+{% set is_paper = true %}
+{% set is_not_themed = true %}
+{% block content %}
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/strips/deep.html b/vanilla/templates/docs/examples/patterns/strips/deep.html
new file mode 100644
index 0000000..9f7199a
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/strips/deep.html
@@ -0,0 +1,19 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Strip / Deep{% endblock %}
+
+{% block standalone_css %}patterns_strip{% endblock %}
+
+{% set is_paper = True %}
+{% block content %}
+
+
+
+
+
+
+
The fastest way to go from development to production in IoT
+
Learn about how Ubuntu Core and snaps can help you build your connected devices.
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/strips/highlighted.html b/vanilla/templates/docs/examples/patterns/strips/highlighted.html
new file mode 100644
index 0000000..a490d91
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/strips/highlighted.html
@@ -0,0 +1,16 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Strips / Highlighted{% endblock %}
+
+{% block standalone_css %}patterns_strip{% endblock %}
+
+{% set is_paper = true %}
+{% block content %}
+
+
+
+
Highlighted strip
+
With an alternative light version of background colour.
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/strips/image.html b/vanilla/templates/docs/examples/patterns/strips/image.html
new file mode 100644
index 0000000..d159894
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/strips/image.html
@@ -0,0 +1,33 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Strip / Image (deprecated){% endblock %}
+
+{% block standalone_css %}patterns_strip{% endblock %}
+
+{% block content %}
+
+
+
+
Get started with big software, fast
+
conjure-up lets you summon up a big-software stack as a “spell” — a model of the stack, combined with extra know-how to get you from an installed stack to a fully usable one. Start using your big software instead of learning how to deploy
+ it.
+
+
+
+
+
+
+
+
+
+
+
We are Canonical
+
It is our mission to make open source software available to people everywhere. We believe the best way to fuel innovation is to give the innovators the technology they need.
+
+
+
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/strips/is-bordered.html b/vanilla/templates/docs/examples/patterns/strips/is-bordered.html
new file mode 100644
index 0000000..50b5b6b
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/strips/is-bordered.html
@@ -0,0 +1,15 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Strip / Bordered (deprecated){% endblock %}
+
+{% block standalone_css %}patterns_strip{% endblock %}
+
+{% block content %}
+
+
+
+
The node lifecycle
+
Each machine (“node”) managed by MAAS goes through a lifecycle — from its enlistment or onboarding to MAAS, through commissioning when we inventory and can setup firmware or other hardware-specific elements, then allocation to a user and deployment, and finally they are released back to the pool or retired altogether.
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/strips/shallow.html b/vanilla/templates/docs/examples/patterns/strips/shallow.html
new file mode 100644
index 0000000..409c796
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/strips/shallow.html
@@ -0,0 +1,16 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Strip / Shallow{% endblock %}
+
+{% block standalone_css %}patterns_strip{% endblock %}
+
+{% set is_paper = True %}
+{% block content %}
+
+
+
+
The fastest way to go from development to production in IoT
+
Learn about how Ubuntu Core and snaps can help you build your connected devices.
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/strips/strips-dark.html b/vanilla/templates/docs/examples/patterns/strips/strips-dark.html
new file mode 100644
index 0000000..12b6906
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/strips/strips-dark.html
@@ -0,0 +1,14 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Strips / Dark (deprecated){% endblock %}
+
+{% block standalone_css %}patterns_strip{% endblock %}
+
+{% block content %}
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/strips/strips-light.html b/vanilla/templates/docs/examples/patterns/strips/strips-light.html
new file mode 100644
index 0000000..1f48761
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/strips/strips-light.html
@@ -0,0 +1,14 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Strips / Light (deprecated){% endblock %}
+
+{% block standalone_css %}patterns_strip{% endblock %}
+
+{% block content %}
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/strips/suru-topped.html b/vanilla/templates/docs/examples/patterns/strips/suru-topped.html
new file mode 100644
index 0000000..d4f073b
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/strips/suru-topped.html
@@ -0,0 +1,21 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Strips / Suru-topped (deprecated){% endblock %}
+
+{% block standalone_css %}patterns_strip{% endblock %}
+
+{% block content %}
+
+
+
+
Accessibility guidelines
+
+
+
+
+
Vanilla aims to be as inclusive as possible.
+
While traditionally accessibility focuses on making the web more accessible for users with permanent disabilities, a focus on accessibility can deliver an improved user experience for everyone, including those with a temporary or circumstantial disability.
+
Accessibility should permeate the entire design and development process, rather than being something that you only think about after everything else has been defined and implemented. You should focus on accessibility when you are:
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/strips/suru.html b/vanilla/templates/docs/examples/patterns/strips/suru.html
new file mode 100644
index 0000000..833fecb
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/strips/suru.html
@@ -0,0 +1,16 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Strips / Suru (deprecated){% endblock %}
+
+{% block standalone_css %}patterns_strip{% endblock %}
+
+{% block content %}
+
+
+
+
A simple, extensible CSS framework
+
Backed by open-source code and written in Sass by the Canonical Web Team.
+
Get started
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/strips/white.html b/vanilla/templates/docs/examples/patterns/strips/white.html
new file mode 100644
index 0000000..cb40a13
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/strips/white.html
@@ -0,0 +1,18 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Strips / White (deprecated){% endblock %}
+
+{% block standalone_css %}patterns_strip{% endblock %}
+
+{% set is_paper = true %}
+{% block content %}
+
+
+
+
+
Company culture
+ We believe that talent is evenly distributed around the world. Diversity is part of our strength. What unifies us isn’t our background, it’s our mission to amplify open source.
+
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/suru/50-50-dark.html b/vanilla/templates/docs/examples/patterns/suru/50-50-dark.html
new file mode 100644
index 0000000..391b814
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/suru/50-50-dark.html
@@ -0,0 +1,15 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Suru / 50/50 Dark{% endblock %}
+
+{% block standalone_css %}patterns_suru{% endblock %}
+
+{% set is_dark = True %}
+{% block content %}
+
+{% endblock %}
\ No newline at end of file
diff --git a/vanilla/templates/docs/examples/patterns/suru/50-50.html b/vanilla/templates/docs/examples/patterns/suru/50-50.html
new file mode 100644
index 0000000..c8c45cf
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/suru/50-50.html
@@ -0,0 +1,15 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Suru / 50/50{% endblock %}
+
+{% block standalone_css %}patterns_suru{% endblock %}
+
+{% set is_paper = True %}
+{% block content %}
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/suru/dark.html b/vanilla/templates/docs/examples/patterns/suru/dark.html
new file mode 100644
index 0000000..4413645
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/suru/dark.html
@@ -0,0 +1,15 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Suru / Dark{% endblock %}
+
+{% block standalone_css %}patterns_suru{% endblock %}
+
+{% set is_dark = True %}
+{% block content %}
+
+{% endblock %}
\ No newline at end of file
diff --git a/vanilla/templates/docs/examples/patterns/suru/default.html b/vanilla/templates/docs/examples/patterns/suru/default.html
new file mode 100644
index 0000000..23b9cd7
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/suru/default.html
@@ -0,0 +1,15 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Suru{% endblock %}
+
+{% block standalone_css %}patterns_suru{% endblock %}
+
+{% set is_paper = True %}
+{% block content %}
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/suru/divider.html b/vanilla/templates/docs/examples/patterns/suru/divider.html
new file mode 100644
index 0000000..6637e3f
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/suru/divider.html
@@ -0,0 +1,25 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Suru / Divider{% endblock %}
+
+{% block standalone_css %}patterns_suru{% endblock %}
+
+{% set is_paper = True %}
+{% block content %}
+
+
+
+
Suru divider section
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam modi tempora, quam ipsum nobis, eius vitae magni sunt suscipit provident praesentium debitis iste minima corporis rerum voluptatum facere adipisci dolore!
+
+
+
+
+
+
+
+
Following content
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam modi tempora, quam ipsum nobis, eius vitae magni sunt suscipit provident praesentium debitis iste minima corporis rerum voluptatum facere adipisci dolore!
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/suru/fan-bottom.html b/vanilla/templates/docs/examples/patterns/suru/fan-bottom.html
new file mode 100644
index 0000000..83b96d7
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/suru/fan-bottom.html
@@ -0,0 +1,16 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Suru / Fan bottom{% endblock %}
+
+{% block standalone_css %}patterns_suru{% endblock %}
+
+{% set is_paper = True %}
+{% block content %}
+
+
+
+
Suru fan bottom
+
Suru background is only visible on large screen.
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/suru/fan-pyramid-left.html b/vanilla/templates/docs/examples/patterns/suru/fan-pyramid-left.html
new file mode 100644
index 0000000..e109fb2
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/suru/fan-pyramid-left.html
@@ -0,0 +1,16 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Suru / Pyramid left{% endblock %}
+
+{% block standalone_css %}patterns_suru{% endblock %}
+
+{% set is_paper = True %}
+{% block content %}
+
+
+
+
Suru pyramid left
+
Suru background is only visible on large screen.
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/suru/fan-pyramid-right.html b/vanilla/templates/docs/examples/patterns/suru/fan-pyramid-right.html
new file mode 100644
index 0000000..451c293
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/suru/fan-pyramid-right.html
@@ -0,0 +1,16 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Suru / Pyramid right{% endblock %}
+
+{% block standalone_css %}patterns_suru{% endblock %}
+
+{% set is_paper = True %}
+{% block content %}
+
+
+
+
Suru pyramid right
+
Suru background is only visible on large screen.
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/suru/fan-top.html b/vanilla/templates/docs/examples/patterns/suru/fan-top.html
new file mode 100644
index 0000000..d24a8de
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/suru/fan-top.html
@@ -0,0 +1,16 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Suru / Fan top{% endblock %}
+
+{% block standalone_css %}patterns_suru{% endblock %}
+
+{% set is_paper = True %}
+{% block content %}
+
+
+
+
Suru fan top
+
Suru background is only visible on large screen.
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/suru/standalone.html b/vanilla/templates/docs/examples/patterns/suru/standalone.html
new file mode 100644
index 0000000..8d4f71c
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/suru/standalone.html
@@ -0,0 +1,9 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Suru / Standalone{% endblock %}
+
+{% block standalone_css %}patterns_suru{% endblock %}
+
+{% set is_paper = True %}
+{% block content %}
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/suru/variants.html b/vanilla/templates/docs/examples/patterns/suru/variants.html
new file mode 100644
index 0000000..c6df756
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/suru/variants.html
@@ -0,0 +1,104 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Suru / Variants{% endblock %}
+
+{% block standalone_css %}patterns_suru{% endblock %}
+
+{% set is_paper = True %}
+{% block content %}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Suru fan top Dark
+
+
+
+
+
+
+
+
+
+
Suru fan bottom Dark
+
+
+
+
+
+
+
+
Suru pyramid left
+
+
+
+
+
+
+
+
Suru pyramid left Dark
+
+
+
+
+
+
+
+
Suru pyramid right
+
+
+
+
+
+
+
+
Suru pyramid right Dark
+
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/switch.html b/vanilla/templates/docs/examples/patterns/switch.html
new file mode 100644
index 0000000..ea8da71
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/switch.html
@@ -0,0 +1,27 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Switch{% endblock %}
+
+{% block standalone_css %}patterns_switch{% endblock %}
+
+{% block content %}
+
+ On
+
+
+ Off
+
+
+ On disabled
+
+
+ Off disabled
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/tab-buttons/default.html b/vanilla/templates/docs/examples/patterns/tab-buttons/default.html
new file mode 100644
index 0000000..7d7b809
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/tab-buttons/default.html
@@ -0,0 +1,51 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Tab Buttons (deprecated) / Default{% endblock %}
+
+{% block standalone_css %}patterns_segmented-control{% endblock %}
+
+{% block content %}
+
+
+
+
+
A system to help you move from configuration management to application management across your hybrid cloud estate - through sharable, reusable, tiny applications called Charmed Operators.
+
+
+
+
A set of tools to help you write Charmed Operators and to package them as Charms.
+
+
+
+
A repository for charms - from Observability to Data to Identity and more.
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/tab-buttons/dense.html b/vanilla/templates/docs/examples/patterns/tab-buttons/dense.html
new file mode 100644
index 0000000..147c17f
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/tab-buttons/dense.html
@@ -0,0 +1,53 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Tab Buttons (deprecated) / Dense{% endblock %}
+
+{% block standalone_css %}patterns_segmented-control{% endblock %}
+
+{% block content %}
+
+
+
+
+
A system to help you move from configuration management to application management across your hybrid cloud estate - through sharable, reusable, tiny applications called Charmed Operators.
+
+
+
+
A set of tools to help you write Charmed Operators and to package them as Charms.
+
+
+
+
A repository for charms - from Observability to Data to Identity and more.
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/tab-buttons/icons.html b/vanilla/templates/docs/examples/patterns/tab-buttons/icons.html
new file mode 100644
index 0000000..16681f8
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/tab-buttons/icons.html
@@ -0,0 +1,57 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Tab Buttons (deprecated) / Icons{% endblock %}
+
+{% block standalone_css %}patterns_segmented-control{% endblock %}
+
+{% block content %}
+
+
+
+
+
A system to help you move from configuration management to application management across your hybrid cloud estate - through sharable, reusable, tiny applications called Charmed Operators.
+
+
+
+
A set of tools to help you write Charmed Operators and to package them as Charms.
+
+
+
+
A repository for charms - from Observability to Data to Identity and more.
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/table-of-contents/default.html b/vanilla/templates/docs/examples/patterns/table-of-contents/default.html
new file mode 100644
index 0000000..4cec0d0
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/table-of-contents/default.html
@@ -0,0 +1,25 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Table of contents{% endblock %}
+
+{% block standalone_css %}patterns_table-of-contents{% endblock %}
+
+{% block content %}
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/table-of-contents/sections.html b/vanilla/templates/docs/examples/patterns/table-of-contents/sections.html
new file mode 100644
index 0000000..baf44ad
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/table-of-contents/sections.html
@@ -0,0 +1,35 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Table of contents / Sections{% endblock %}
+
+{% block standalone_css %}patterns_table-of-contents{% endblock %}
+
+{% block content %}
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/tables/_script-expanding.js b/vanilla/templates/docs/examples/patterns/tables/_script-expanding.js
new file mode 100644
index 0000000..e014ce7
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/tables/_script-expanding.js
@@ -0,0 +1,47 @@
+/**
+ Toggles the necessary aria- attributes' values on the table panels
+ to show or hide them.
+ @param {HTMLElement} element The tab that acts as the handles.
+ @param {Boolean} show Whether to show or hide the expanded row panel.
+*/
+function toggleExpanded(element, show) {
+ var target = document.getElementById(element.getAttribute('aria-controls'));
+
+ if (target) {
+ element.setAttribute('aria-expanded', show);
+
+ // Adjust the text of the toggle button
+ if (show) {
+ element.innerHTML = element.getAttribute('data-shown-text');
+ } else {
+ element.innerHTML = element.getAttribute('data-hidden-text');
+ }
+
+ target.setAttribute('aria-hidden', !show);
+ }
+}
+
+/**
+ Attaches event listeners for the expandable table open and close click events.
+ @param {HTMLElement} table The expandable table container element.
+ */
+function setupExpandableTable(table) {
+ // Set up an event listener on the container so that panels can be added
+ // and removed and events do not need to be managed separately.
+ table.addEventListener('click', function (event) {
+ var target = event.target;
+ var isTargetOpen = target.getAttribute('aria-expanded') === 'true';
+
+ if (target.classList.contains('u-toggle')) {
+ // Toggle visibility of the target panel.
+ toggleExpanded(target, !isTargetOpen);
+ }
+ });
+}
+
+// Setup all expandable tables on the page.
+var tables = document.querySelectorAll('.p-table--expanding');
+
+for (var i = 0, l = tables.length; i < l; i++) {
+ setupExpandableTable(tables[i]);
+}
diff --git a/vanilla/templates/docs/examples/patterns/tables/_script-sorting.js b/vanilla/templates/docs/examples/patterns/tables/_script-sorting.js
new file mode 100644
index 0000000..203ac17
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/tables/_script-sorting.js
@@ -0,0 +1,99 @@
+/**
+ * Sorts a table by the column specified.
+ * @param {HTMLElement} header Sortable header element that was clicked.
+ * @param {HTMLTableElement} table Table to sort.
+ */
+function sortTable(header, table) {
+ var SORTABLE_STATES = {
+ none: 0,
+ ascending: -1,
+ descending: 1,
+ ORDER: ['none', 'ascending', 'descending'],
+ };
+
+ // Get index of column based on position of header cell in
+ // We assume there is only one row in the table head.
+ var col = [].slice.call(table.tHead.rows[0].cells).indexOf(header);
+
+ // Based on the current aria-sort value, get the next state.
+ var newOrder = SORTABLE_STATES.ORDER.indexOf(header.getAttribute('aria-sort')) + 1;
+ newOrder = newOrder > SORTABLE_STATES.ORDER.length - 1 ? 0 : newOrder;
+ newOrder = SORTABLE_STATES.ORDER[newOrder];
+
+ // Reset all header sorts.
+ var headerSorts = table.querySelectorAll('[aria-sort]');
+
+ for (var i = 0, ii = headerSorts.length; i < ii; i += 1) {
+ headerSorts[i].setAttribute('aria-sort', 'none');
+ }
+
+ // Set the new header sort.
+ header.setAttribute('aria-sort', newOrder);
+
+ // Get the direction of the sort and assume only one tbody.
+ // For this example only assume one tbody.
+ var direction = SORTABLE_STATES[newOrder];
+ var body = table.tBodies[0];
+
+ // Convert the HTML element list to an array.
+ var newRows = [].slice.call(body.rows, 0);
+
+ // If the direction is 0 - aria-sort="none".
+ if (direction === 0) {
+ // Reset to the default order.
+ newRows.sort(function (a, b) {
+ return a.getAttribute('data-index') - b.getAttribute('data-index');
+ });
+ } else {
+ // Sort based on a cell contents
+ newRows.sort(function (rowA, rowB) {
+ // Trim the cell contents.
+ var contentA = rowA.cells[col].textContent.trim();
+ var contentB = rowB.cells[col].textContent.trim();
+
+ // Based on the direction, do the sort.
+ //
+ // This example only sorts based on alphabetical order, to sort based on
+ // number value a more specific implementation would be needed, to provide
+ // number parsing and comparison function between text strings and numbers.
+ return contentA < contentB ? direction : -direction;
+ });
+ }
+ // Append each row into the table, replacing the current elements.
+ for (i = 0, ii = body.rows.length; i < ii; i += 1) {
+ body.appendChild(newRows[i]);
+ }
+}
+
+function setupClickableHeader(table, header) {
+ header.addEventListener('click', function () {
+ sortTable(header, table);
+ });
+}
+
+/**
+ * Initializes a sortable table by assigning event listeners to sortable column headers.
+ * @param {HTMLTableElement} table
+ */
+function setupSortableTable(table) {
+ // For this example, assume only one tbody.
+ var rows = table.tBodies[0].rows;
+ // Set an index for the default order.
+ for (var row = 0, totalRows = rows.length; row < totalRows; row += 1) {
+ rows[row].setAttribute('data-index', row);
+ }
+
+ // Select sortable column headers.
+ var clickableHeaders = table.querySelectorAll('th[aria-sort]');
+ // Attach the click event for each header.
+ for (var i = 0, ii = clickableHeaders.length; i < ii; i += 1) {
+ setupClickableHeader(table, clickableHeaders[i]);
+ }
+}
+
+// Make all tables on the page sortable.
+var tables = document.querySelectorAll('table');
+
+for (var i = 0, ii = tables.length; i < ii; i += 1) {
+ setupSortableTable(tables[i]);
+}
diff --git a/vanilla/templates/docs/examples/patterns/tables/_table-mobile-card.html b/vanilla/templates/docs/examples/patterns/tables/_table-mobile-card.html
new file mode 100644
index 0000000..8fd4628
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/tables/_table-mobile-card.html
@@ -0,0 +1,130 @@
+
+
+
+ FQDN
+ Power
+ Status
+ Owner
+ Zone
+ Cores
+ RAM
+ Disks
+ Storage
+ Actions
+
+
+
+
+ LongEnoughToCauseEllipsis
+ On
+ Failed testing
+ Caleb
+ london
+ 4
+ 2 GiB
+ 1
+ 2TB
+
+
+
+
+
+ upward-muskox
+ Off
+ Allocated
+ sparkiegeek
+ london
+ 6
+ 4 GiB
+ 1
+ 500GB
+
+
+
+
+
+ first-cattle
+ On
+ Failed to enter rescue mode
+ admin
+ london
+ 8
+ 16 GiB
+ 3
+ 6TB
+
+
+
+
+
+ golden-rodent
+ Off
+ Broken
+ —
+ london
+ 2
+ 1 GiB
+ 1
+ 240GB
+
+
+
+
+
+
diff --git a/vanilla/templates/docs/examples/patterns/tables/_table-sortable.html b/vanilla/templates/docs/examples/patterns/tables/_table-sortable.html
new file mode 100644
index 0000000..9cc21dc
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/tables/_table-sortable.html
@@ -0,0 +1,30 @@
+
+
+
+ Status
+ Cores
+ RAM
+ Disks
+
+
+
+
+ Ready
+ 1
+ 1 GiB
+ 2
+
+
+ Ready
+ 1
+ 1 GiB
+ 2
+
+
+ Ready
+ 8
+ 3.9 GiB
+ 3
+
+
+
diff --git a/vanilla/templates/docs/examples/patterns/tables/table-colored-rows.html b/vanilla/templates/docs/examples/patterns/tables/table-colored-rows.html
new file mode 100644
index 0000000..fce99e2
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/tables/table-colored-rows.html
@@ -0,0 +1,35 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Table / With colored rows{% endblock %}
+
+{% block standalone_css %}base{% endblock %}
+
+{% block content %}
+
+
+
+ Foundation Cloud
+ Foundation Cloud Plus
+
+
+
+
+ Expert delivery of an Ubuntu OpenStack cloud
+ Reference architecture
+ Custom architecture
+
+
+ Workshop and training
+ 2-days
+ 4-days
+
+
+
+
+ One-time price
+ $75,000
+ $150,000
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/tables/table-expanding.html b/vanilla/templates/docs/examples/patterns/tables/table-expanding.html
new file mode 100644
index 0000000..d4b158a
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/tables/table-expanding.html
@@ -0,0 +1,91 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Table / Expanding{% endblock %}
+
+{% block standalone_css %}patterns_table-expanding{% endblock %}
+
+{% block content %}
+
+
+
+ Name
+ Mac address
+ IP
+ Rack
+ Last seen
+ Actions
+
+
+
+
+
+
+
+ Unknown
+ 2c:44:fd:80:3f:25
+ 10.249.0.1
+ karura
+ Thu, 25 Oct. 2018 13:55:21
+
+ Show
+
+
+
+
+
Expanding table cell
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur cum dicta beatae
+ nostrum eligendi similique earum, dolorem fuga quis, sequi voluptates architecto ipsa
+ dolorum eaque rem expedita inventore voluptas odit aspernatur alias molestias facere.
+
+
+
+
+ Unknown
+ 52:54:00:3a:fe:e9
+ 172.16.99.191
+ karura
+ Wed, 3 Oct. 2018 23:08:06
+
+ Show
+
+
+
+
+
Expanding table cell
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur cum dicta beatae
+ nostrum eligendi similique earum, dolorem fuga quis, sequi voluptates architecto ipsa
+ dolorum eaque rem expedita inventore voluptas odit aspernatur alias molestias facere.
+
+
+
+
+ Unknown
+ 52:54:00:74:c2:10
+ 172.16.99.192
+ karura
+ Wed, 17 Oct. 2018 12:18:18
+
+ Show
+
+
+
+
+
Expanding table cell
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur cum dicta beatae
+ nostrum eligendi similique earum, dolorem fuga quis, sequi voluptates architecto ipsa
+ dolorum eaque rem expedita inventore voluptas odit aspernatur alias molestias facere.
+
+
+
+
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/tables/table-formatting.html b/vanilla/templates/docs/examples/patterns/tables/table-formatting.html
new file mode 100644
index 0000000..228ec24
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/tables/table-formatting.html
@@ -0,0 +1,41 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Table / Formatting{% endblock %}
+
+{% block standalone_css %}patterns_table-sortable{% endblock %}
+
+{% block content %}
+
+
+
+ Name
+ Status
+ Cores
+ RAM
+ Disks
+
+
+
+
+ Example
+ Ready
+ 1
+ 1 GiB
+ 2
+
+
+ Very long long long example name that should wrap
+ Ready
+ 1
+ 1 GiB
+ 2
+
+
+ Truncated very long long long example name
+ Ready
+ 8
+ 3.9 GiB
+ 3
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/tables/table-icons.html b/vanilla/templates/docs/examples/patterns/tables/table-icons.html
new file mode 100644
index 0000000..bce6f71
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/tables/table-icons.html
@@ -0,0 +1,41 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Table / With icons{% endblock %}
+
+{% block standalone_css %}base{% endblock %}
+
+{% block content %}
+
+
+
+ ID
+ Architecture
+ Duration
+ Result
+ Build finished
+
+
+
+
+ #1234
+ amd64
+ 6 minutes
+ 2 hours ago
+
+
+ #1233
+ arm64
+ 5 minutes
+ 2 hours ago
+
+
+ #1232
+ i386
+ 4 minutes
+ In progress
+ 2 hours ago
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/tables/table-mobile-card-dark.html b/vanilla/templates/docs/examples/patterns/tables/table-mobile-card-dark.html
new file mode 100644
index 0000000..11f2524
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/tables/table-mobile-card-dark.html
@@ -0,0 +1,14 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Table / Mobile card Dark{% endblock %}
+
+{% block standalone_css %}patterns_table-mobile-card{% endblock %}
+
+{% set is_dark = true %}
+{% block content %}
+
+{% include "/docs/examples/patterns/tables/_table-mobile-card.html" %}
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/tables/table-mobile-card.html b/vanilla/templates/docs/examples/patterns/tables/table-mobile-card.html
new file mode 100644
index 0000000..a51a844
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/tables/table-mobile-card.html
@@ -0,0 +1,13 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Table / Mobile card{% endblock %}
+
+{% block standalone_css %}patterns_table-mobile-card{% endblock %}
+
+{% block content %}
+
+{% include "/docs/examples/patterns/tables/_table-mobile-card.html" %}
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/tables/table-overflow.html b/vanilla/templates/docs/examples/patterns/tables/table-overflow.html
new file mode 100644
index 0000000..19af2be
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/tables/table-overflow.html
@@ -0,0 +1,71 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Table / Overflow{% endblock %}
+
+{% block standalone_css %}patterns_table-overflow{% endblock %}
+
+{% block content %}
+
+
+
+ Name
+ Status
+
+ Actions
+
+
+
+
+
+ Machine A
+ Pending
+
+ This machine is currently being setup
+
+
+
+
+
+
+
+ Machine B
+ Ready
+
+
+
+
+
+ Machine C
+ Ready
+
+
+
+
+
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/tables/table-sortable-dark.html b/vanilla/templates/docs/examples/patterns/tables/table-sortable-dark.html
new file mode 100644
index 0000000..a8f211f
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/tables/table-sortable-dark.html
@@ -0,0 +1,14 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Table / Sortable Dark{% endblock %}
+
+{% block standalone_css %}patterns_table-sortable{% endblock %}
+
+{% set is_dark = true %}
+{% block content %}
+
+{% include "/docs/examples/patterns/tables/_table-sortable.html" %}
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/tables/table-sortable.html b/vanilla/templates/docs/examples/patterns/tables/table-sortable.html
new file mode 100644
index 0000000..3cc61b6
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/tables/table-sortable.html
@@ -0,0 +1,13 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Table / Sortable{% endblock %}
+
+{% block standalone_css %}patterns_table-sortable{% endblock %}
+
+{% block content %}
+
+{% include "/docs/examples/patterns/tables/_table-sortable.html" %}
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/tabs/_script.js b/vanilla/templates/docs/examples/patterns/tabs/_script.js
new file mode 100644
index 0000000..f2c6eea
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/tabs/_script.js
@@ -0,0 +1,99 @@
+(function () {
+ var keys = {
+ left: 'ArrowLeft',
+ right: 'ArrowRight',
+ };
+
+ var direction = {
+ ArrowLeft: -1,
+ ArrowRight: 1,
+ };
+
+ /**
+ Attaches a number of events that each trigger
+ the reveal of the chosen tab content
+ @param {Array} tabs an array of tabs within a container
+ */
+ function attachEvents(tabs) {
+ tabs.forEach(function (tab, index) {
+ tab.addEventListener('keyup', function (e) {
+ if (e.code === keys.left || e.code === keys.right) {
+ switchTabOnArrowPress(e, tabs);
+ }
+ });
+
+ tab.addEventListener('click', function (e) {
+ e.preventDefault();
+ setActiveTab(tab, tabs);
+ });
+
+ tab.addEventListener('focus', function () {
+ setActiveTab(tab, tabs);
+ });
+
+ tab.index = index;
+ });
+ }
+
+ /**
+ Determine which tab to show when an arrow key is pressed
+ @param {KeyboardEvent} event
+ @param {Array} tabs an array of tabs within a container
+ */
+ function switchTabOnArrowPress(event, tabs) {
+ var pressed = event.code;
+
+ if (direction[pressed]) {
+ var target = event.target;
+ if (target.index !== undefined) {
+ if (tabs[target.index + direction[pressed]]) {
+ tabs[target.index + direction[pressed]].focus();
+ } else if (pressed === keys.left) {
+ tabs[tabs.length - 1].focus();
+ } else if (pressed === keys.right) {
+ tabs[0].focus();
+ }
+ }
+ }
+ }
+
+ /**
+ Cycles through an array of tab elements and ensures
+ only the target tab and its content are selected
+ @param {HTMLElement} tab the tab whose content will be shown
+ @param {Array} tabs an array of tabs within a container
+ */
+ function setActiveTab(tab, tabs) {
+ tabs.forEach(function (tabElement) {
+ var tabContent = document.getElementById(tabElement.getAttribute('aria-controls'));
+
+ if (tabElement === tab) {
+ tabElement.setAttribute('aria-selected', true);
+ tabContent.removeAttribute('hidden');
+ } else {
+ tabElement.setAttribute('aria-selected', false);
+ tabContent.setAttribute('hidden', true);
+ }
+ });
+ }
+
+ /**
+ Attaches events to tab links within a given parent element,
+ and sets the active tab if the current hash matches the id
+ of an element controlled by a tab link
+ @param {String} selector class name of the element
+ containing the tabs we want to attach events to
+ */
+ function initTabs(selector) {
+ var tabContainers = [].slice.call(document.querySelectorAll(selector));
+
+ tabContainers.forEach(function (tabContainer) {
+ var tabs = [].slice.call(tabContainer.querySelectorAll('[aria-controls]'));
+ attachEvents(tabs);
+ });
+ }
+
+ document.addEventListener('DOMContentLoaded', function () {
+ initTabs('[role="tablist"]');
+ });
+})();
diff --git a/vanilla/templates/docs/examples/patterns/tabs/content-dark.html b/vanilla/templates/docs/examples/patterns/tabs/content-dark.html
new file mode 100644
index 0000000..262e54d
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/tabs/content-dark.html
@@ -0,0 +1,58 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Tabs / Tabbed Content Dark{% endblock %}
+
+{% block standalone_css %}patterns_tabs{% endblock %}
+
+{% set is_dark = true %}
+{% block content %}
+
+
+
+ Charmed Operator Lifecycle Manager
+
+
+ Charmed Operator SDK
+
+
+ Charmhub
+
+
+
+
+
A system to help you move from configuration management to application management across your hybrid cloud estate - through sharable, reusable, tiny applications called Charmed Operators.
+
+
+
+
A set of tools to help you write Charmed Operators and to package them as Charms.
+
+
+
+
A repository for charms - from Observability to Data to Identity and more.
+
+
+
+
+ Charmed Operator Lifecycle Manager
+
+
+ Charmed Operator SDK
+
+
+ Charmhub
+
+
+
+
+
A system to help you move from configuration management to application management across your hybrid cloud estate - through sharable, reusable, tiny applications called Charmed Operators.
+
+
+
+
A set of tools to help you write Charmed Operators and to package them as Charms.
+
+
+
+
A repository for charms - from Observability to Data to Identity and more.
+
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/text-small-caps.html b/vanilla/templates/docs/examples/patterns/text-small-caps.html
new file mode 100644
index 0000000..134ecd9
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/text-small-caps.html
@@ -0,0 +1,6 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Small caps text{% endblock %}
+
+{% block content %}
+small caps text 1234567890
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/tooltips/_tooltips_script.js b/vanilla/templates/docs/examples/patterns/tooltips/_tooltips_script.js
new file mode 100644
index 0000000..1c11ac7
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/tooltips/_tooltips_script.js
@@ -0,0 +1,78 @@
+function setTooltipPosition(trigger, container) {
+ var triggerRect = trigger.getBoundingClientRect();
+
+ // FOR VANILLA EXAMPLE ONLY:
+ // this example only covers two tooltip positions
+ if (container.classList.contains('p-tooltip--btm-center')) {
+ tooltipX = triggerRect.x + triggerRect.width / 2;
+ } else {
+ tooltipX = triggerRect.x + 16;
+ }
+
+ container.style.left = tooltipX + 'px';
+ container.style.top = triggerRect.y + triggerRect.height + 'px';
+}
+
+function handleTooltipEvents(target, tooltipContainers) {
+ var trigger = document.querySelector("[aria-describedby='" + target.getAttribute('id') + "']");
+ var timeout;
+ var showEvents = ['click', 'mouseenter', 'focus'];
+ var hideEvents = ['click', 'mouseout', 'blur'];
+ var tooltipClickedOpen = false;
+
+ showEvents.forEach(function (event) {
+ trigger.addEventListener(event, function () {
+ if (event === 'click') {
+ tooltipClickedOpen = !tooltipClickedOpen;
+ }
+ // wait 200ms before showing the tooltip,
+ // so we know there is intent
+ timeout = setTimeout(function () {
+ // hide any tooltips that may still be visible
+ tooltipContainers.forEach(function (container) {
+ container.classList.add('u-hide');
+ });
+ target.classList.remove('u-hide');
+ setTooltipPosition(trigger, target);
+ }, 200);
+ });
+ });
+
+ hideEvents.forEach(function (event) {
+ trigger.addEventListener(event, function (e) {
+ if (e.target.parentNode !== trigger) {
+ if (tooltipClickedOpen) {
+ return;
+ } else {
+ clearTimeout(timeout);
+ target.classList.add('u-hide');
+ }
+ }
+ });
+ });
+
+ // Hide the tooltip when the user clicks outside the trigger or presses escape
+ ['keyup', 'click'].forEach(function (event) {
+ document.addEventListener(event, function (e) {
+ if (tooltipClickedOpen) {
+ if (e.target !== trigger || e.key === 'Escape') {
+ clearTimeout(timeout);
+ target.classList.add('u-hide');
+ tooltipClickedOpen = false;
+ }
+ }
+ });
+ });
+}
+
+function initDetachedTooltips(selector) {
+ var tooltipContainers = [].slice.call(document.querySelectorAll(selector));
+
+ tooltipContainers.forEach(function (target) {
+ handleTooltipEvents(target, tooltipContainers);
+ });
+}
+
+document.addEventListener('DOMContentLoaded', function () {
+ initDetachedTooltips('[class*="p-tooltip"].is-detached');
+});
diff --git a/vanilla/templates/docs/examples/patterns/tooltips/default.html b/vanilla/templates/docs/examples/patterns/tooltips/default.html
new file mode 100644
index 0000000..4537238
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/tooltips/default.html
@@ -0,0 +1,41 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Tooltips{% endblock %}
+
+{% block standalone_css %}patterns_tooltips{% endblock %}
+
+{% block content %}
+
+ Bottom left
+ Product name to be displayed on the storefront.
+
+
+ Bottom center
+ Product name to be displayed on the storefront.
+
+
+ Bottom right
+ Product name to be displayed on the storefront.
+
+
+ Left
+ Product name to be displayed on the storefront.
+
+
+ Right
+ Product name to be displayed on the storefront.
+
+
+ Top left
+ Product name to be displayed on the storefront.
+
+
+ Top center
+ Product name to be displayed on the storefront.
+
+
+ Top right
+ Product name to be displayed on the storefront.
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/tooltips/detached.html b/vanilla/templates/docs/examples/patterns/tooltips/detached.html
new file mode 100644
index 0000000..b91b01c
--- /dev/null
+++ b/vanilla/templates/docs/examples/patterns/tooltips/detached.html
@@ -0,0 +1,26 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Tooltips / Detached{% endblock %}
+
+{% block standalone_css %}patterns_tooltips{% endblock %}
+
+{% block content %}
+
+ UA Infrastructure - Standard
+
+
+
+ Support level: 24 hours, 5 days a week
+
+
+
+ UA Infrastructure - Advanced
+
+
+
+ Support level: 24 hours, 7 days a week
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/standalone.html b/vanilla/templates/docs/examples/standalone.html
new file mode 100644
index 0000000..c4dbb51
--- /dev/null
+++ b/vanilla/templates/docs/examples/standalone.html
@@ -0,0 +1,45 @@
+{% extends "_layouts/_root.html" %}
+
+{% block custom_head %}
+
+
+
+
Standalone component examples
+
+
Examples below use CSS built with single pattern included with base styles instead of the whole Vanilla framework CSS file.
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/templates/maas-docs-grid.html b/vanilla/templates/docs/examples/templates/maas-docs-grid.html
new file mode 100644
index 0000000..10b538a
--- /dev/null
+++ b/vanilla/templates/docs/examples/templates/maas-docs-grid.html
@@ -0,0 +1,344 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}MAAS docs / Grid layout{% endblock %}
+
+{% block style %}
+
+{% endblock %}
+
+{% block content %}
+
+
+
+
+
+
+
+
+
+ Toggle side navigation
+
+
+
+
+
+
+
+
+
+ MAAS Documentation
+
+
+ MAAS is Metal As A Service , a service that lets you treat physical servers like virtual machines – instances – in the cloud. No need to manage servers
+ individually: MAAS turns your bare metal into an elastic, cloud-like resource.
+
+ Quick questions you might have:
+
+
+
+ The minimum requirements for the machines that run MAAS vary widely depending on local implementation and usage. Below, you will find resource estimates based on MAAS
+ components and operating system (Ubuntu Server). We consider both a test configuration (for proof of concept) and a production environment.
+
+
+ Quick questions you might have:
+
+
+
+ Requirements for a test environment
+
+
+ Here is a proof of concept scenario, with all MAAS components installed on a single host. This scenario assumes two complete sets of images (latest two Ubuntu LTS
+ releases) for a single architecture (amd64).
+
+
+
+
+
+
+ Memory (MB)
+ CPU (GHz)
+ Disk (GB)
+
+
+
+
+ Region controller (minus PostgreSQL)512
+ 0.5
+ 5
+
+
+ PostgreSQL
+ 512
+ 0.5
+ 5
+
+
+ Rack controller 512
+ 0.5
+ 5
+
+
+ Ubuntu Server (including logs)
+ 512
+ 0.5
+ 5
+
+
+
+
Therefore, the approximate requirements for this scenario are 2 GB memory, 2 GHz CPU, and 20 GB of disk space.
+ Requirements for a production environment
+
+ Here is a production scenario designed to handle a high number of sustained client connections. This scenario implements both high availability (region and rack) and load
+ balancing (region).
+
+ MAAS reserves extra space for images (database and rack controller), some images such as those for Microsoft Windows may require a lot more, so plan accordingly.
+ Therefore, the approximate requirements for this scenario are:
+
+ A region controller (including PostgreSQL) installed on one host, with 4.5 GB memory, 4.5 GHz CPU, and 45 GB of disk space.
+ A duplicate region controller (including PostgreSQL) on a second host, also with 4.5 GB memory, 4.5 GHz CPU, and 45 GB of disk space.
+ A rack controller installed on a third host, with 2.5 GB memory, 2.5 GHz CPU, and 40 GB of disk space.
+ A duplicate rack controller on a fourth host, also with 2.5 GB memory, 2.5 GHz CPU, and 40 GB of disk space.
+
+
+
+ The tables above refer to MAAS infrastructure only. They do not cover the resources needed by subsequently-added nodes. Note that machines should have IPMI-based BMC
+ controllers for power cycling, see [BMC power types][power-types].
+
+
Examples of factors that influence hardware specifications include:
+
+ the number of connecting clients (client activity)
+ how you decide to distribute services
+ whether or not you use high availability
+ whether or not you use load balancing
+ the number of images that you choose to store (disk space affecting PostgreSQL and the rack controller)
+
+ Also not taken into account is a possible local image mirror, which would be a large consumer of disk space.
+
+ One rack controller should only service 1000 machines or less, regardless of how you distribute them across subnets. There is no load balancing at the rack level, so you
+ will need additional, independent rack controllers. Each controller must service its own subnet(s).
+
+
+
+
+
+
+
+
+
+
+
Filter by
+
+
+
+
+ Owner
+
+
+
+ Status
+
+
+
+ Tags
+
+
+
+
+
+
+
+
+
+
+
+ FQDN | MAC
+ Power
+ Status
+ Owner | Pool
+ Cores
+ RAM(GB)
+ Disks
+ Storage(GB)
+
+
+
+
+ Machine 1
+ Off
+ Ready
+ Maria
+ 8
+ 16
+ 2
+ 2
+
+
+ Machine 1
+ Off
+ Ready
+ Maria
+ 8
+ 16
+ 2
+ 2
+
+
+ Machine 1
+ Off
+ Ready
+ Maria
+ 8
+ 16
+ 2
+ 2
+
+
+ Machine 1
+ Off
+ Ready
+ Maria
+ 8
+ 16
+ 2
+ 2
+
+
+ Machine 1
+ Off
+ Ready
+ Maria
+ 8
+ 16
+ 2
+ 2
+
+
+ Machine 1
+ Off
+ Ready
+ Maria
+ 8
+ 16
+ 2
+ 2
+
+
+
+
+
+
+
Stats
+
Screen: small medium large
+
Grid: 4 columns 6 columns 12 columns
+
+
+
Grid
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Hide utilities
+
u-hide--small: hidden when grid is 4 cols
+
u-hide--medium: hidden when grid is 6 cols
+
u-hide--large: hidden when grid is 12 cols
+
+
+
Show utilities
+
u-show--small: visible when grid is 4 cols
+
u-show--medium: visible when grid is 6 cols
+
u-show--large: visible when grid is 12 cols
+
+
+
+
+
Float utilities
+
+
u-float-left--small
+
This text floats next to previous element when grid is 4 cols.
+
+
+
+
u-float-left--medium
+
This text floats next to previous element when grid is 6 cols.
+
+
+
+
u-float-left--large
+
This text floats next to previous element when grid is 12 cols.
+
+
+
+
u-float-right--small
+
This text floats next to previous element when grid is 4 cols.
+
+
+
+
u-float-right--medium
+
This text floats next to previous element when grid is 6 cols.
+
+
+
+
u-float-right--large
+
This text floats next to previous element when grid is 12 cols.
+
+
+
+
+
List stepped detailed
+
+
+
+ Log in to JAAS
+
+ Ensure you have an Ubuntu SSO account before contacting JAAS. Log in to JAAS now.
+
+
+
+
+ Configure a model
+
+ Applications are contained within models and are installed via charms. Configure your model by pressing the "Start a new model" button.
+
+
+
+
+ Credentials and SSH keys
+
+ After having selected a cloud, a form will appear for submitting your credentials to JAAS. The below resources are available if you need help with gathering credentials.
+
+
+
+
+ Design and build
+
+ Together, we design your Kubernetes cluster based on your hardware, scale, roadmap, applications and monitoring system. We'll guide you through the hardware specification process to maximise the efficiency of your CAPEX, and we'll tailor the architecture of your cloud to meet your application, security, regulatory and integration requirements.
+
+
+
+
+
+
+
Matrix
+
+
+
+
+
+
Canonical is the global software company behind Ubuntu and is the number-one Ubuntu services provider
+
+
+
+
+
+
+
The world’s most popular Linux for servers, desktops and things, with enterprise support and enhanced security by Canonical
+
+
+
+
+
+
Create a bare-metal cloud with Metal as a Service for IPAM and provisioning
+
+
+
+
+
+
Systems management for Ubuntu - updates, package management, repositories, security, and regulatory compliance dashboards
+
+
+
+
+
+
Model-driven multi-cloud operations for applications. On-premise or on-cloud SAAS app store, with big data, k8s and openstack solutions
+
+
+
+
+
A pure-container hypervisor. Replace legacy app VMs with containers for speed and density
+
+
+
+
+
+
A single secure package and auto-update system for Ubuntu, Debian, Arch, Centos, Amazon Linux
+
+
+
+
+
+
+
The world’s first choice for OpenStack - the leader in density and cost per VM
+
+
+
+
+
+
+
Canonical works with Google GKE and Azure AKS for app portability between private and public infrastructure
+
+
+
+
+
+
+
Table mobile card
+
+
+
+ FQDN
+ Power
+ Status
+ Owner
+ Zone
+ Cores
+ RAM
+ Disks
+ Storage
+ Actions
+
+
+
+
+ LongEnoughToCauseEllipsis
+ On
+ Failed testing
+ Caleb
+ london
+ 4
+ 2 GiB
+ 1
+ 2TB
+
+
+
+
+
+ upward-muskox
+ Off
+ Allocated
+ sparkiegeek
+ london
+ 6
+ 4 GiB
+ 1
+ 500GB
+
+
+
+
+
+ first-cattle
+ On
+ Failed to enter rescue mode
+ admin
+ london
+ 8
+ 16 GiB
+ 3
+ 6TB
+
+
+
+
+
+ golden-rodent
+ Off
+ Broken
+ —
+ london
+ 2
+ 1 GiB
+ 1
+ 240GB
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Promote your snap using Snap Store badges
+
+
+
+
+
+
+
+
+
+
+
+ HTML:
+
+
+
<a href="https://snapcraft.io/my-awesome-snap">
+ <img alt="Get it from the Snap Store" src="https://snapcraft.io/static/images/badges/en/snap-store-black.svg" />
+</a>
+
+
+
+
+
+ Markdown:
+
+
+
[](https://snapcraft.io/my-awesome-snap)
+
+
+
+
+
+
+
+
+
+
+ HTML:
+
+
+
<a href="https://snapcraft.io/my-awesome-snap">
+ <img alt="Get it from the Snap Store" src="https://snapcraft.io/static/images/badges/en/snap-store-white.svg" />
+</a>
+
+
+
+
+
+ Markdown:
+
+
+
[](https://snapcraft.io/my-awesome-snap)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
In padded containers (table cells, some list items), checkboxes and labels need to align with text not wrapped in a tag. Use .p-checkbox--inline or .p-radio--inline elements to achieve that.
+
+
+
+
+
+
+
+
+
+
+ Power
+ Status
+ Owner | Pool
+ Cores
+ RAM(GB)
+ Disks
+ Storage(GB)
+
+
+
+
+
+
+
+ Off
+ Ready
+ Maria
+ 8
+ 16
+ 2
+ 2
+
+
+
+
+
+ Off
+ Ready
+ Maria
+ 8
+ 16
+ 2
+ 2
+
+
+
+
+
+
+
Canonical’s AI and ML solutions feature…
+
Architectural freedom. Fully automated operations.
+
Canonical’s AI solutions such as Kubeflow on Ubuntu give you the flexibility to place
+ your AI, ML and DL services exactly where you want them while sharing operational code with a large community.
+
+
+
Canonical’s AI and ML solutions feature…
+
Architectural freedom. Fully automated operations.
+
Canonical’s AI solutions such as Kubeflow on Ubuntu give you the flexibility to place
+ your AI, ML and DL services exactly where you want them while sharing operational code with a large community.
+
Get started
+
+
+
Canonical’s AI and ML solutions feature…
+
Architectural freedom. Fully automated operations.
+
Canonical’s AI solutions such as Kubeflow on Ubuntu give you the flexibility to place
+ your AI, ML and DL services exactly where you want them while sharing operational code with a large community.
+
Contact us
+
+
+
Canonical’s AI and ML solutions feature…
+
Architectural freedom. Fully automated operations.
+
Canonical’s AI solutions such as Kubeflow on Ubuntu give you the flexibility to place
+ your AI, ML and DL services exactly where you want them while sharing operational code with a large community.
+
Contact us
+
+
+
Canonical’s AI and ML solutions feature…
+
Architectural freedom. Fully automated operations.
+
Canonical’s AI solutions such as Kubeflow on Ubuntu give you the flexibility to place
+ your AI, ML and DL services exactly where you want them while sharing operational code with a large community.
+
Contact us
+
+
+
Canonical’s AI and ML solutions feature…
+
Architectural freedom. Fully automated operations.
+
Canonical’s AI solutions such as Kubeflow on Ubuntu give you the flexibility to place
+ your AI, ML and DL services exactly where you want them while sharing operational code with a large community.
+
Contact us
+
+
+
+
Canonical’s AI and ML solutions feature…
+
Architectural freedom. Fully automated operations.
+
Canonical’s AI solutions such as Kubeflow on Ubuntu give you the flexibility to place
+ your AI, ML and DL services exactly where you want them while sharing operational code with a large community.
+
+
+
Canonical’s AI and ML solutions feature…
+
Architectural freedom. Fully automated operations.
+
Canonical’s AI solutions such as Kubeflow on Ubuntu give you the flexibility to place
+ your AI, ML and DL services exactly where you want them while sharing operational code with a large community.
+
Get started
+
+
+
Canonical’s AI and ML solutions feature…
+
Architectural freedom. Fully automated operations.
+
Canonical’s AI solutions such as Kubeflow on Ubuntu give you the flexibility to place
+ your AI, ML and DL services exactly where you want them while sharing operational code with a large community.
+
Contact us
+
+
+
Canonical’s AI and ML solutions feature…
+
Architectural freedom. Fully automated operations.
+
Canonical’s AI solutions such as Kubeflow on Ubuntu give you the flexibility to place
+ your AI, ML and DL services exactly where you want them while sharing operational code with a large community.
+
Contact us
+
+
+
Canonical’s AI and ML solutions feature…
+
Architectural freedom. Fully automated operations.
+
Canonical’s AI solutions such as Kubeflow on Ubuntu give you the flexibility to place
+ your AI, ML and DL services exactly where you want them while sharing operational code with a large community.
+
Contact us
+
+
+
Canonical’s AI and ML solutions feature…
+
Architectural freedom. Fully automated operations.
+
Canonical’s AI solutions such as Kubeflow on Ubuntu give you the flexibility to place
+ your AI, ML and DL services exactly where you want them while sharing operational code with a large community.
+
Contact us
+
+
+
+
Canonical’s AI and ML solutions feature…
+
Architectural freedom. Fully automated operations.
+
Canonical’s AI solutions such as Kubeflow on Ubuntu give you the flexibility to place
+ your AI, ML and DL services exactly where you want them while sharing operational code with a large community.
+
+
+
Canonical’s AI and ML solutions feature…
+
Architectural freedom. Fully automated operations.
+
Canonical’s AI solutions such as Kubeflow on Ubuntu give you the flexibility to place
+ your AI, ML and DL services exactly where you want them while sharing operational code with a large community.
+
Get started
+
+
+
Canonical’s AI and ML solutions feature…
+
Architectural freedom. Fully automated operations.
+
Canonical’s AI solutions such as Kubeflow on Ubuntu give you the flexibility to place
+ your AI, ML and DL services exactly where you want them while sharing operational code with a large community.
+
Contact us
+
+
+
Canonical’s AI and ML solutions feature…
+
Architectural freedom. Fully automated operations.
+
Canonical’s AI solutions such as Kubeflow on Ubuntu give you the flexibility to place
+ your AI, ML and DL services exactly where you want them while sharing operational code with a large community.
+
Contact us
+
+
+
Canonical’s AI and ML solutions feature…
+
Architectural freedom. Fully automated operations.
+
Canonical’s AI solutions such as Kubeflow on Ubuntu give you the flexibility to place
+ your AI, ML and DL services exactly where you want them while sharing operational code with a large community.
+
Contact us
+
+
+
Canonical’s AI and ML solutions feature…
+
Architectural freedom. Fully automated operations.
+
Canonical’s AI solutions such as Kubeflow on Ubuntu give you the flexibility to place
+ your AI, ML and DL services exactly where you want them while sharing operational code with a large community.
+
Contact us
+
+
+
+
Canonical’s AI and ML solutions feature…
+
Architectural freedom. Fully automated operations.
+
Canonical’s AI solutions such as Kubeflow on Ubuntu give you the flexibility to place
+ your AI, ML and DL services exactly where you want them while sharing operational code with a large community.
+
+
+
Canonical’s AI and ML solutions feature…
+
Architectural freedom. Fully automated operations.
+
Canonical’s AI solutions such as Kubeflow on Ubuntu give you the flexibility to place
+ your AI, ML and DL services exactly where you want them while sharing operational code with a large community.
+
Get started
+
+
+
Canonical’s AI and ML solutions feature…
+
Architectural freedom. Fully automated operations.
+
Canonical’s AI solutions such as Kubeflow on Ubuntu give you the flexibility to place
+ your AI, ML and DL services exactly where you want them while sharing operational code with a large community.
+
Contact us
+
+
+
Canonical’s AI and ML solutions feature…
+
Architectural freedom. Fully automated operations.
+
Canonical’s AI solutions such as Kubeflow on Ubuntu give you the flexibility to place
+ your AI, ML and DL services exactly where you want them while sharing operational code with a large community.
+
Contact us
+
+
+
Canonical’s AI and ML solutions feature…
+
Architectural freedom. Fully automated operations.
+
Canonical’s AI solutions such as Kubeflow on Ubuntu give you the flexibility to place
+ your AI, ML and DL services exactly where you want them while sharing operational code with a large community.
+
Contact us
+
+
+
Canonical’s AI and ML solutions feature…
+
Architectural freedom. Fully automated operations.
+
Canonical’s AI solutions such as Kubeflow on Ubuntu give you the flexibility to place
+ your AI, ML and DL services exactly where you want them while sharing operational code with a large community.
+
Contact us
+
+
+
+
Canonical’s AI and ML solutions feature…
+
Architectural freedom. Fully automated operations.
+
Canonical’s AI solutions such as Kubeflow on Ubuntu give you the flexibility to place
+ your AI, ML and DL services exactly where you want them while sharing operational code with a large community.
+
+
+
Canonical’s AI and ML solutions feature…
+
Architectural freedom. Fully automated operations.
+
Canonical’s AI solutions such as Kubeflow on Ubuntu give you the flexibility to place
+ your AI, ML and DL services exactly where you want them while sharing operational code with a large community.
+
Get started
+
+
+
Canonical’s AI and ML solutions feature…
+
Architectural freedom. Fully automated operations.
+
Canonical’s AI solutions such as Kubeflow on Ubuntu give you the flexibility to place
+ your AI, ML and DL services exactly where you want them while sharing operational code with a large community.
+
Contact us
+
+
+
Canonical’s AI and ML solutions feature…
+
Architectural freedom. Fully automated operations.
+
Canonical’s AI solutions such as Kubeflow on Ubuntu give you the flexibility to place
+ your AI, ML and DL services exactly where you want them while sharing operational code with a large community.
+
Contact us
+
+
+
Canonical’s AI and ML solutions feature…
+
Architectural freedom. Fully automated operations.
+
Canonical’s AI solutions such as Kubeflow on Ubuntu give you the flexibility to place
+ your AI, ML and DL services exactly where you want them while sharing operational code with a large community.
+
Contact us
+
+
+
Canonical’s AI and ML solutions feature…
+
Architectural freedom. Fully automated operations.
+
Canonical’s AI solutions such as Kubeflow on Ubuntu give you the flexibility to place
+ your AI, ML and DL services exactly where you want them while sharing operational code with a large community.
+
Contact us
+
+
+
+
Canonical’s AI and ML solutions feature…
+
Architectural freedom. Fully automated operations.
+
Canonical’s AI solutions such as Kubeflow on Ubuntu give you the flexibility to place
+ your AI, ML and DL services exactly where you want them while sharing operational code with a large community.
+
+
+
Canonical’s AI and ML solutions feature…
+
Architectural freedom. Fully automated operations.
+
Canonical’s AI solutions such as Kubeflow on Ubuntu give you the flexibility to place
+ your AI, ML and DL services exactly where you want them while sharing operational code with a large community.
+
Get started
+
+
+
Canonical’s AI and ML solutions feature…
+
Architectural freedom. Fully automated operations.
+
Canonical’s AI solutions such as Kubeflow on Ubuntu give you the flexibility to place
+ your AI, ML and DL services exactly where you want them while sharing operational code with a large community.
+
Contact us
+
+
+
Canonical’s AI and ML solutions feature…
+
Architectural freedom. Fully automated operations.
+
Canonical’s AI solutions such as Kubeflow on Ubuntu give you the flexibility to place
+ your AI, ML and DL services exactly where you want them while sharing operational code with a large community.
+
Contact us
+
+
+
Canonical’s AI and ML solutions feature…
+
Architectural freedom. Fully automated operations.
+
Canonical’s AI solutions such as Kubeflow on Ubuntu give you the flexibility to place
+ your AI, ML and DL services exactly where you want them while sharing operational code with a large community.
+
Contact us
+
+
+
Canonical’s AI and ML solutions feature…
+
Architectural freedom. Fully automated operations.
+
Canonical’s AI solutions such as Kubeflow on Ubuntu give you the flexibility to place
+ your AI, ML and DL services exactly where you want them while sharing operational code with a large community.
+
Contact us
+
+
+
+
+ Select
+ Option 1
+ Option 2
+ Option 3
+
+
+
+
+
+
+ Email address
+
+
+
+
+ Button
+
+
+
+
+
h5
+
+
+
h6
+
+
+
h4
+
+
+
h3
+
+
+
h2
+
+
+
h1
+
+
+
+
h1
+
+ Select
+ Option 1
+ Option 2
+ Option 3
+
+
+
+
h1
+
+
+
+
h1
+ Email address
+
+
+
h1
+
+
+
h1
+ Button
+
+
+
+
+
h1
+ h5
+
+
+
h1
+ h6
+
+
+
h1
+ h4
+
+
+
h1
+ h3
+
+
+
h1
+ h2
+
+
+
h1
+ h1
+
+
+
+
h2
+
+ Select
+ Option 1
+ Option 2
+ Option 3
+
+
+
+
h2
+
+
+
+
h2
+ Email address
+
+
+
h2
+
+
+
h2
+ Button
+
+
+
+
+
h2
+ h5
+
+
+
h2
+ h6
+
+
+
h2
+ h4
+
+
+
h2
+ h3
+
+
+
h2
+ h2
+
+
+
h2
+ h1
+
+
+
+
h3
+
+ Select
+ Option 1
+ Option 2
+ Option 3
+
+
+
+
h3
+
+
+
+
h3
+ Email address
+
+
+
h3
+
+
+
h3
+ Button
+
+
+
+
+
h3
+ h5
+
+
+
h3
+ h6
+
+
+
h3
+ h4
+
+
+
h3
+ h3
+
+
+
h3
+ h2
+
+
+
h3
+ h1
+
+
+
+
h4
+
+ Select
+ Option 1
+ Option 2
+ Option 3
+
+
+
+
h4
+
+
+
+
h4
+ Email address
+
+
+
h4
+
+
+
h4
+ Button
+
+
+
+
+
h4
+ h5
+
+
+
h4
+ h6
+
+
+
h4
+ h4
+
+
+
h4
+ h3
+
+
+
h4
+ h2
+
+
+
h4
+ h1
+
+
+
+
h5
+
+ Select
+ Option 1
+ Option 2
+ Option 3
+
+
+
+
h5
+
+
+
+
h5
+ Email address
+
+
+
h5
+
+
+
h5
+ Button
+
+
+
+
+
h5
+ h5
+
+
+
h5
+ h6
+
+
+
h5
+ h4
+
+
+
h5
+ h3
+
+
+
h5
+ h2
+
+
+
h5
+ h1
+
+
+
+
Muted
+
+ Select
+ Option 1
+ Option 2
+ Option 3
+
+
+
+
+
Muted
+
Email address
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Headings preceding block level element
+
+
+
+
+
+
H1
+
+
Title
+
Use data triggers to schedule content.
+
+
+
+
H2
+
+
Title
+
Use data triggers to schedule content.
+
+
+
+
H3
+
+
Title
+
Use data triggers to schedule content.
+
+
+
+
H4
+
+
Title
+
Use data triggers to schedule content.
+
+
+
+
H5
+
+
Title
+
Use data triggers to schedule content.
+
+
+
+
+
+
+
+
+
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id venenatis turpis, ac tincidunt neque.
+ Vestibulum dapibus sollicitudin tortor vel lacinia. Etiam et purus eu mi vehicula rhoncus non sit amet justo.
+ Vestibulum quam elit, rhoncus a dolor ac, scelerisque aliquam tellus. Donec eget nisl odio. Suspendisse feugiat
+ erat et.
+
Heading one
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id venenatis turpis, ac tincidunt neque.
+ Vestibulum dapibus sollicitudin tortor vel lacinia. Etiam et purus eu mi vehicula rhoncus non sit amet justo.
+ Vestibulum quam elit, rhoncus a dolor ac, scelerisque aliquam tellus. Donec eget nisl odio. Suspendisse feugiat
+ erat et.
+
Heading two
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id venenatis turpis, ac tincidunt neque.
+ Vestibulum dapibus sollicitudin tortor vel lacinia. Etiam et purus eu mi vehicula rhoncus non sit amet justo.
+ Vestibulum quam elit, rhoncus a dolor ac, scelerisque aliquam tellus. Donec eget nisl odio. Suspendisse feugiat
+ erat et.
+
Heading three
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id venenatis turpis, ac tincidunt neque.
+ Vestibulum dapibus sollicitudin tortor vel lacinia. Etiam et purus eu mi vehicula rhoncus non sit amet justo.
+ Vestibulum quam elit, rhoncus a dolor ac, scelerisque aliquam tellus. Donec eget nisl odio. Suspendisse feugiat
+ erat et.
+
Heading four
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id venenatis turpis, ac tincidunt neque.
+ Vestibulum dapibus sollicitudin tortor vel lacinia. Etiam et purus eu mi vehicula rhoncus non sit amet justo.
+ Vestibulum quam elit, rhoncus a dolor ac, scelerisque aliquam tellus. Donec eget nisl odio. Suspendisse feugiat
+ erat et.
+
Heading five
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id venenatis turpis, ac tincidunt neque.
+ Vestibulum dapibus sollicitudin tortor vel lacinia. Etiam et purus eu mi vehicula rhoncus non sit amet justo.
+ Vestibulum quam elit, rhoncus a dolor ac, scelerisque aliquam tellus. Donec eget nisl odio. Suspendisse feugiat
+ erat et.
+
Heading six
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id venenatis turpis, ac tincidunt neque.
+ Vestibulum dapibus sollicitudin tortor vel lacinia. Etiam et purus eu mi vehicula rhoncus non sit amet justo.
+ Vestibulum quam elit, rhoncus a dolor ac, scelerisque aliquam tellus. Donec eget nisl odio. Suspendisse feugiat
+ erat et.
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id venenatis turpis, ac tincidunt neque.
+ Vestibulum dapibus sollicitudin tortor vel lacinia. Etiam et purus eu mi vehicula rhoncus non sit amet justo.
+ Vestibulum quam elit, rhoncus a dolor ac, scelerisque aliquam tellus. Donec eget nisl odio. Suspendisse feugiat
+ erat et.
+
Muted heading
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id venenatis turpis, ac tincidunt neque.
+ Vestibulum dapibus sollicitudin tortor vel lacinia. Etiam et purus eu mi vehicula rhoncus non sit amet justo.
+ Vestibulum quam elit, rhoncus a dolor ac, scelerisque aliquam tellus. Donec eget nisl odio. Suspendisse feugiat
+ erat et.
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id venenatis turpis, ac tincidunt neque.
+ Vestibulum dapibus sollicitudin tortor vel lacinia. Etiam et purus eu mi vehicula rhoncus non sit amet justo.
+ Vestibulum quam elit, rhoncus a dolor ac, scelerisque aliquam tellus. Donec eget nisl odio. Suspendisse feugiat
+ erat et.
+
+
+
+
+
Canonical’s AI and ML solutions feature…
+
Architectural freedom. Fully automated operations. Accelerated Deep Learning
+
Canonical’s AI solutions such as Kubeflow on Ubuntu give you the flexibility to place
+ your AI, ML and DL services exactly where you want them while sharing operational code with a large community.
+ From your developer workstation, to your racks, to the public cloud, AI on Ubuntu is accelerated with the latest
+ tools, drivers and libraries.
+
The standard for enterprise machine learning, from Silicon Valley to Wall Street, for the Fortune 50 and for
+ startups.
+
Contact us
+
Contact us for machine learning, deep learning and AI
+ consulting ›
+
+
+
+
+
+
+
+
+
Canonical’s AI and ML solutions feature…
+
Architectural freedom. Fully automated operations. Accelerated Deep Learning
+
Canonical’s AI solutions such as Kubeflow on Ubuntu give you the flexibility to place
+ your AI, ML and DL services exactly where you want them while sharing operational code with a large community.
+ From your developer workstation, to your racks, to the public cloud, AI on Ubuntu is accelerated with the latest
+ tools, drivers and libraries.
+
The standard for enterprise machine learning, from Silicon Valley to Wall Street, for the Fortune 50 and for
+ startups.
+
Contact us
+
+
+
+
+
+
+
+
+
Canonical’s AI and ML solutions feature…
+
Architectural freedom. Fully automated operations. Accelerated Deep Learning
+
Canonical’s AI solutions such as Kubeflow on Ubuntu give you the flexibility to place
+ your AI, ML and DL services exactly where you want them while sharing operational code with a large community.
+ From your developer workstation, to your racks, to the public cloud, AI on Ubuntu is accelerated with the latest
+ tools, drivers and libraries.
+
The standard for enterprise machine learning, from Silicon Valley to Wall Street, for the Fortune 50 and for
+ startups.
+
Contact us
+
+
+
+
+
+
+
+
+
Canonical’s AI and ML solutions feature…
+
Architectural freedom. Fully automated operations. Accelerated Deep Learning
+
Canonical’s AI solutions such as Kubeflow on Ubuntu give you the flexibility to place
+ your AI, ML and DL services exactly where you want them while sharing operational code with a large community.
+ From your developer workstation, to your racks, to the public cloud, AI on Ubuntu is accelerated with the latest
+ tools, drivers and libraries.
+
The standard for enterprise machine learning, from Silicon Valley to Wall Street, for the Fortune 50 and for
+ startups.
+
Contact us
+
+
+
+
+
+
+
+
+
Canonical’s AI and ML solutions feature…
+
Architectural freedom. Fully automated operations. Accelerated Deep Learning
+
Canonical’s AI solutions such as Kubeflow on Ubuntu give you the flexibility to place
+ your AI, ML and DL services exactly where you want them while sharing operational code with a large community.
+ From your developer workstation, to your racks, to the public cloud, AI on Ubuntu is accelerated with the latest
+ tools, drivers and libraries.
+
The standard for enterprise machine learning, from Silicon Valley to Wall Street, for the Fortune 50 and for
+ startups.
+
Contact us
+
+
+
+
+
+
+
+
+ Select
+ Option 1
+ Option 2
+ Option 3
+
+
This is a paragraph
+
+ Select
+ Option 1
+ Option 2
+ Option 3
+
+
+
+
Email address
+
This is a paragraph
+
+
+
+
This is a paragraph
+
+
+
Button
+
This is a paragraph
+
+
+
para
+
This is a paragraph
+
+
+
+
+ Headings and paragraphs are siblings, p + h* rules apply
+
+
+ Snaps are applications packaged with all their dependencies to run on all popular Linux distributions from a
+ single build. They update automatically and roll back gracefully.
+
+
+ Headings and paragraphs are siblings, p + h* rules apply
+
+
+ Snaps are applications packaged with all their dependencies to run on all popular Linux distributions from a
+ single build. They update automatically and roll back gracefully.
+
+
+ Headings and paragraphs are siblings, p + h* rules apply
+
+
+ Snap is available for CentOS 7.6+, and Red Hat Enterprise Linux 7.6+, from the Extra Packages for Enterprise Linux
+ (EPEL) repository. The EPEL repository can be added to your system with the following command:
+
+
+ Headings and paragraphs are siblings, p + h* rules apply
+
+
+ Snap is available for CentOS 7.6+, and Red Hat Enterprise Linux 7.6+, from the Extra Packages for Enterprise Linux
+ (EPEL) repository. The EPEL repository can be added to your system with the following command:
+
+
+ Headings and paragraphs are siblings, p + h* rules apply
+
+
+ Snap is available for CentOS 7.6+, and Red Hat Enterprise Linux 7.6+, from the Extra Packages for Enterprise Linux
+ (EPEL) repository. The EPEL repository can be added to your system with the following command:
+
+
+ Snap is available for CentOS 7.6+, and Red Hat Enterprise Linux 7.6+, from the Extra Packages for Enterprise Linux
+ (EPEL) repository. The EPEL repository can be added to your system with the following command:
+
+
+ Headings and paragraphs are siblings, p + h* rules apply
+
+
+ Snap is available for CentOS 7.6+, and Red Hat Enterprise Linux 7.6+, from the Extra Packages for Enterprise Linux
+ (EPEL) repository. The EPEL repository can be added to your system with the following command:
+
+
+
+
+
+ Headings wrapped in divs so p + h* no longer apply
+
+
+
+ Snaps are applications packaged with all their dependencies to run on all popular Linux distributions from a
+ single build. They update automatically and roll back gracefully.
+
+
+
+ Headings wrapped in divs so p + h* no longer apply
+
+
+
+ Snaps are applications packaged with all their dependencies to run on all popular Linux distributions from a
+ single build. They update automatically and roll back gracefully.
+
+
+
+ Headings wrapped in divs so p + h* no longer apply
+
+
+
+ Snap is available for CentOS 7.6+, and Red Hat Enterprise Linux 7.6+, from the Extra Packages for Enterprise Linux
+ (EPEL) repository. The EPEL repository can be added to your system with the following command:
+
+
+ Headings wrapped in divs so p + h* no longer apply
+
+
+ Snap is available for CentOS 7.6+, and Red Hat Enterprise Linux 7.6+, from the Extra Packages for Enterprise Linux
+ (EPEL) repository. The EPEL repository can be added to your system with the following command:
+
+
+ Headings wrapped in divs so p + h* no longer apply
+
+
+ Snap is available for CentOS 7.6+, and Red Hat Enterprise Linux 7.6+, from the Extra Packages for Enterprise Linux
+ (EPEL) repository. The EPEL repository can be added to your system with the following command:
+
+
+ Snap is available for CentOS 7.6+, and Red Hat Enterprise Linux 7.6+, from the Extra Packages for Enterprise Linux
+ (EPEL) repository. The EPEL repository can be added to your system with the following command:
+
+
+ Headings wrapped in divs so p + h* no longer apply
+
+
+ Snap is available for CentOS 7.6+, and Red Hat Enterprise Linux 7.6+, from the Extra Packages for Enterprise Linux
+ (EPEL) repository. The EPEL repository can be added to your system with the following command:
+
+
+
+
+
List styles and spacing
+
This is just a line of text before unordered list:
+
+ Unordered list
+ Unordered list unordered list unordered list unordered list unordered list unordered list unordered list unordered list
+ Unordered list
+
+
This is just a line of text before ordered list:
+
+ Ordered list
+ Ordered list ordered list ordered list ordered list ordered list ordered list ordered list ordered list ordered list
+ Ordered list
+
+
This is just a line of text before definition list:
+
+ Definition item
+ Definition description
+ Definition item with two descriptions
+ Definition first description
+ Definition second description
+ Definition item with long description
+ Definition long description long description long description long description long description long description long description long description
+
+
This is just a line of text after the lists.
+
+
+
+
+
This is a heading following an image
+
+
+
Heading
+
+
This is an h1 heading inside a dark strip
+
+
+
+
+
Heading
+
+
This is an h2 heading inside a dark strip
+
+
+
+
+
Heading
+
+
This is an h3 heading inside a dark strip
+
+
+
+
+
Heading
+
+
This is an h4 heading inside a dark strip
+
+
+
+
+
Heading
+
+
This is an h5 heading inside a dark strip
+
+
+
+
+
Heading
+
+
This is an h6 heading inside a dark strip
+
+
+
+
+
+
+
Guidelines
+
If you are contributing to Vanilla, make sure to read and follow these guidelines.
+
+
+
+
+
+
+
+
+
+
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
+ magna aliqua. Ut enim ad minim veniam
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
+ magna aliqua. Ut enim ad minim veniam
+
+
+
+
+
+
+
+
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+ incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
+
+
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+ incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
+
+
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+ incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
+
+
+
+
+
+
Latest news from Insights
+
+
+
Kernel Team Summary – September 13, 2017
+
13 September 2017
+
+
+
Running Ubuntu Containers with Hyper-V Isolation on Windows
+
13 September 2017
+
+
+
Congratulations to GNOME on the release of 3.26
+
13 September 2017
+
+
+
+
+
Spotlight
+
Why containers and automation are essential in a world being eaten by software
+
31 August 2017
+
+
+
+
+
+
Manage your servers without leaving your seat
+
Use the Web UI or the command line (CLI ) to remotely manage your nodes or use the API to automate management.
+
+
+
+
+
Operate your machines remotely
+
Manage individual or groups of servers.
+
+ Power on/off
+ Commission
+ Deploy
+ Assign an owner
+ Mark a node fixed or broken
+ Enter rescue mode
+ Test your hardware
+ Assign to physical zones
+
+
+ Learn more about the node actions
+
+
+
+
+
Provision with any OS image
+
Select the OS you require in your data centre *
+
+ Ubuntu
+ CentOS
+ Windows
+ RHEL
+ SUSE
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/templates/z-index.html b/vanilla/templates/docs/examples/templates/z-index.html
new file mode 100644
index 0000000..232021a
--- /dev/null
+++ b/vanilla/templates/docs/examples/templates/z-index.html
@@ -0,0 +1,209 @@
+{% extends "_layouts/examples.html" %} {% block title %}Z-index{% endblock %} {% block content %}
+
+
+
+
Show modal…
+
+
+ Tooltip
+
+
+
+
+ This excessively long tooltip appears above other elements.
+
+
+
+ Lorem ipsum dolor sit amet consectetur adipiscing elit
+
+ nunc dolor. Arcu molestie non arcu porttitor
+
+ volutpat rutrum ipsum nunc lacus ligula ornare et diam
+
+ vel eu.
+
+
+
+
+
+
+
+
+
+
+
+
Learn how to operate production-ready clusters.
+
+
+
+
+
+
+
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/utilities/align/content.html b/vanilla/templates/docs/examples/utilities/align/content.html
new file mode 100644
index 0000000..5f87b92
--- /dev/null
+++ b/vanilla/templates/docs/examples/utilities/align/content.html
@@ -0,0 +1,16 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Align / Content{% endblock %}
+
+{% block content %}
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/utilities/align/text.html b/vanilla/templates/docs/examples/utilities/align/text.html
new file mode 100644
index 0000000..a75b303
--- /dev/null
+++ b/vanilla/templates/docs/examples/utilities/align/text.html
@@ -0,0 +1,10 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Align / Text{% endblock %}
+
+{% block content %}
+
Centered text
+
Left-aligned text
+
Right-aligned text
+{% endblock %}
+
+
diff --git a/vanilla/templates/docs/examples/utilities/animations/spin.html b/vanilla/templates/docs/examples/utilities/animations/spin.html
new file mode 100644
index 0000000..fe9f15f
--- /dev/null
+++ b/vanilla/templates/docs/examples/utilities/animations/spin.html
@@ -0,0 +1,6 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Animations / Spin{% endblock %}
+
+{% block content %}
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/utilities/baseline-grid.html b/vanilla/templates/docs/examples/utilities/baseline-grid.html
new file mode 100644
index 0000000..71bc2b0
--- /dev/null
+++ b/vanilla/templates/docs/examples/utilities/baseline-grid.html
@@ -0,0 +1,40 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Baseline grid{% endblock %}
+
+{% block content %}
+
+
Heading one
+ Heading two
+ Heading three
+ Heading four
+ Heading five
+ Heading six
+
+ Toggle baseline grid
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/utilities/clearfix.html b/vanilla/templates/docs/examples/utilities/clearfix.html
new file mode 100644
index 0000000..7c13ab7
--- /dev/null
+++ b/vanilla/templates/docs/examples/utilities/clearfix.html
@@ -0,0 +1,9 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Clearfix{% endblock %}
+
+{% block content %}
+
+
Content floated left
+
Content floated right
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/utilities/embedded-media.html b/vanilla/templates/docs/examples/utilities/embedded-media.html
new file mode 100644
index 0000000..1fb20f3
--- /dev/null
+++ b/vanilla/templates/docs/examples/utilities/embedded-media.html
@@ -0,0 +1,10 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Embedded media{% endblock %}
+
+{% block content %}
+
+ VIDEO
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/utilities/equal-height.html b/vanilla/templates/docs/examples/utilities/equal-height.html
new file mode 100644
index 0000000..cad224e
--- /dev/null
+++ b/vanilla/templates/docs/examples/utilities/equal-height.html
@@ -0,0 +1,16 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Equal height{% endblock %}
+
+{% block content %}
+
+
+
This is a long piece of text This is a long piece of text This is a long piece of text This is a long piece of text This is a long piece of text This is a long piece of text This is a long piece of text This is a long piece of text This is a long piece of text
+
+
+
This is a short piece of text
+
+
+
This is a short piece of text
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/utilities/fixed-width-container-nesting.html b/vanilla/templates/docs/examples/utilities/fixed-width-container-nesting.html
new file mode 100644
index 0000000..44c025e
--- /dev/null
+++ b/vanilla/templates/docs/examples/utilities/fixed-width-container-nesting.html
@@ -0,0 +1,26 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Fixed width container / Nesting{% endblock %}
+
+{% block content %}
+
+
+ Nested u-fixed-width containers should not add additional padding.
+
+
+
+
+
+
+ row nested in u-fixed-width container should not add additional padding.
+
+
+
+
+
+
+
+ u-fixed-width container nested in row should not add additional padding.
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/utilities/fixed-width-container.html b/vanilla/templates/docs/examples/utilities/fixed-width-container.html
new file mode 100644
index 0000000..449c54d
--- /dev/null
+++ b/vanilla/templates/docs/examples/utilities/fixed-width-container.html
@@ -0,0 +1,8 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Fixed width container{% endblock %}
+
+{% block content %}
+
+ Content inside a container with the class `u-fixed-width` matches the width and position of content inside a grid.
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/utilities/floats/default.html b/vanilla/templates/docs/examples/utilities/floats/default.html
new file mode 100644
index 0000000..75c428b
--- /dev/null
+++ b/vanilla/templates/docs/examples/utilities/floats/default.html
@@ -0,0 +1,11 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Floats / All screens{% endblock %}
+
+{% block content %}
+
+ Content floated right on all screen sizes
+
+
+ Content floated left on all screen sizes
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/utilities/floats/large-screens.html b/vanilla/templates/docs/examples/utilities/floats/large-screens.html
new file mode 100644
index 0000000..8cd785c
--- /dev/null
+++ b/vanilla/templates/docs/examples/utilities/floats/large-screens.html
@@ -0,0 +1,7 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Floats / Large screens{% endblock %}
+
+{% block content %}
+
Float left on large screens
+
Float right on large screens
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/utilities/floats/medium-screens.html b/vanilla/templates/docs/examples/utilities/floats/medium-screens.html
new file mode 100644
index 0000000..1b7c216
--- /dev/null
+++ b/vanilla/templates/docs/examples/utilities/floats/medium-screens.html
@@ -0,0 +1,7 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Floats / Medium screens{% endblock %}
+
+{% block content %}
+
Float left on medium screens
+
Float right on medium screens
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/utilities/floats/small-screens.html b/vanilla/templates/docs/examples/utilities/floats/small-screens.html
new file mode 100644
index 0000000..8c22068
--- /dev/null
+++ b/vanilla/templates/docs/examples/utilities/floats/small-screens.html
@@ -0,0 +1,7 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Floats / Small screens{% endblock %}
+
+{% block content %}
+
Float left on small screens
+
Float right on small screens
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/utilities/font-metrics.html b/vanilla/templates/docs/examples/utilities/font-metrics.html
new file mode 100644
index 0000000..8680684
--- /dev/null
+++ b/vanilla/templates/docs/examples/utilities/font-metrics.html
@@ -0,0 +1,47 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Font metrics{% endblock %}
+
+{% block content %}
+
+ Xx
+
+
+ Xx
+
+
+ Xx
+
+
+ Xx
+
+
+ Xx
+
+
+ Xx
+
+
+ Xx
+
+
+
+ Button with icon
+
+
+
+
+
+
+
+
+ Button with icon
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/utilities/hide-table-columns.html b/vanilla/templates/docs/examples/utilities/hide-table-columns.html
new file mode 100644
index 0000000..e9cf2fa
--- /dev/null
+++ b/vanilla/templates/docs/examples/utilities/hide-table-columns.html
@@ -0,0 +1,28 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Hide / Table columns{% endblock %}
+
+{% block content %}
+
+
+
+ Always visible
+ Hidden on small screens
+ Hidden on medium screens
+ Hidden on large screens
+ Always hidden
+
+
+
+
+ Always visible
+ Hidden on small screens
+ Hidden on medium screens
+ Hidden on large screens
+ Always hidden
+
+
+ Cells with colspan should work correctly regardless of hidden columns
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/utilities/hide.html b/vanilla/templates/docs/examples/utilities/hide.html
new file mode 100644
index 0000000..fc3d3e2
--- /dev/null
+++ b/vanilla/templates/docs/examples/utilities/hide.html
@@ -0,0 +1,9 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Hide{% endblock %}
+
+{% block content %}
+
Hidden on all screen sizes
+
Hidden on small screens
+
Hidden on medium screens
+
Hidden on large screens
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/utilities/image-position/bottom-left.html b/vanilla/templates/docs/examples/utilities/image-position/bottom-left.html
new file mode 100644
index 0000000..77f4f60
--- /dev/null
+++ b/vanilla/templates/docs/examples/utilities/image-position/bottom-left.html
@@ -0,0 +1,16 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Image position / Bottom left{% endblock %}
+
+{% block content %}
+
+
+
+
+
+
+
Fast, secure and simple, Ubuntu powers millions of PCs worldwide
+
Download the latest version of Ubuntu, for desktop PCs and laptops.
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/utilities/image-position/bottom-right.html b/vanilla/templates/docs/examples/utilities/image-position/bottom-right.html
new file mode 100644
index 0000000..35221bc
--- /dev/null
+++ b/vanilla/templates/docs/examples/utilities/image-position/bottom-right.html
@@ -0,0 +1,16 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Image position / Bottom right{% endblock %}
+
+{% block content %}
+
+
+
+
Fast, secure and simple, Ubuntu powers millions of PCs worldwide
+
Download the latest version of Ubuntu, for desktop PCs and laptops.
+
+
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/utilities/image-position/bottom.html b/vanilla/templates/docs/examples/utilities/image-position/bottom.html
new file mode 100644
index 0000000..e12fb42
--- /dev/null
+++ b/vanilla/templates/docs/examples/utilities/image-position/bottom.html
@@ -0,0 +1,16 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Image position / Bottom{% endblock %}
+
+{% block content %}
+
+
+
+
Fast, secure and simple, Ubuntu powers millions of PCs worldwide
+
Download the latest version of Ubuntu, for desktop PCs and laptops.
+
+
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/utilities/image-position/left.html b/vanilla/templates/docs/examples/utilities/image-position/left.html
new file mode 100644
index 0000000..1b16252
--- /dev/null
+++ b/vanilla/templates/docs/examples/utilities/image-position/left.html
@@ -0,0 +1,16 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Image position / Left{% endblock %}
+
+{% block content %}
+
+
+
+
+
+
+
Fast, secure and simple, Ubuntu powers millions of PCs worldwide
+
Download the latest version of Ubuntu, for desktop PCs and laptops.
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/utilities/image-position/right.html b/vanilla/templates/docs/examples/utilities/image-position/right.html
new file mode 100644
index 0000000..ef54b71
--- /dev/null
+++ b/vanilla/templates/docs/examples/utilities/image-position/right.html
@@ -0,0 +1,16 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Image position / Right{% endblock %}
+
+{% block content %}
+
+
+
+
Fast, secure and simple, Ubuntu powers millions of PCs worldwide
+
Download the latest version of Ubuntu, for desktop PCs and laptops.
+
+
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/utilities/image-position/top-left.html b/vanilla/templates/docs/examples/utilities/image-position/top-left.html
new file mode 100644
index 0000000..9bf9e9f
--- /dev/null
+++ b/vanilla/templates/docs/examples/utilities/image-position/top-left.html
@@ -0,0 +1,16 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Image position / Top left{% endblock %}
+
+{% block content %}
+
+
+
+
+
+
+
Fast, secure and simple, Ubuntu powers millions of PCs worldwide
+
Download the latest version of Ubuntu, for desktop PCs and laptops.
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/utilities/image-position/top-right.html b/vanilla/templates/docs/examples/utilities/image-position/top-right.html
new file mode 100644
index 0000000..c5a7850
--- /dev/null
+++ b/vanilla/templates/docs/examples/utilities/image-position/top-right.html
@@ -0,0 +1,16 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Image position / Top right{% endblock %}
+
+{% block content %}
+
+
+
+
Fast, secure and simple, Ubuntu powers millions of PCs worldwide
+
Download the latest version of Ubuntu, for desktop PCs and laptops.
+
+
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/utilities/image-position/top.html b/vanilla/templates/docs/examples/utilities/image-position/top.html
new file mode 100644
index 0000000..199bc52
--- /dev/null
+++ b/vanilla/templates/docs/examples/utilities/image-position/top.html
@@ -0,0 +1,16 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Image position / Top{% endblock %}
+
+{% block content %}
+
+
+
+
Fast, secure and simple, Ubuntu powers millions of PCs worldwide
+
Download the latest version of Ubuntu, for desktop PCs and laptops.
+
+
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/utilities/margin-collapse.html b/vanilla/templates/docs/examples/utilities/margin-collapse.html
new file mode 100644
index 0000000..9a3ea30
--- /dev/null
+++ b/vanilla/templates/docs/examples/utilities/margin-collapse.html
@@ -0,0 +1,39 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Margin collapse{% endblock %}
+
+{% block content %}
+
+ This div has no margin
+
+
+ This div has no top margin
+
+
+ This div has no right margin
+
+
+ This div has no bottom margin
+
+
+ This div has no left margin
+
+
<h1> heading with u-no-margin--bottom
+
+
<h2> heading with u-no-margin--bottom
+
+
<h3> heading with u-no-margin--bottom
+
+
<h4> heading with u-no-margin--bottom
+
+
<h5> heading with u-no-margin--bottom
+
+
<h6> heading with u-no-margin--bottom
+
+
<p> with u-no-margin--bottom
+
+
<p> p-muted-heading with u-no-margin--bottom
+
+
<p> p-text--default with u-no-margin--bottom
+
+
<p> small-text with u-no-margin--bottom
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/utilities/max-width-unset.html b/vanilla/templates/docs/examples/utilities/max-width-unset.html
new file mode 100644
index 0000000..ea59bb0
--- /dev/null
+++ b/vanilla/templates/docs/examples/utilities/max-width-unset.html
@@ -0,0 +1,6 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Max-width unset{% endblock %}
+
+{% block content %}
+
Ubuntu is an open source software operating system that runs from the desktop, to the cloud, to all your internet connected things.
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/utilities/muted-text.html b/vanilla/templates/docs/examples/utilities/muted-text.html
new file mode 100644
index 0000000..4bc1d84
--- /dev/null
+++ b/vanilla/templates/docs/examples/utilities/muted-text.html
@@ -0,0 +1,6 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Muted text{% endblock %}
+
+{% block content %}
+
Influential contributors of openstack
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/utilities/no-print.html b/vanilla/templates/docs/examples/utilities/no-print.html
new file mode 100644
index 0000000..ca9ec7a
--- /dev/null
+++ b/vanilla/templates/docs/examples/utilities/no-print.html
@@ -0,0 +1,7 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}No print{% endblock %}
+
+{% block content %}
+
I will not be printed
+
I will be printed
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/utilities/off-screen.html b/vanilla/templates/docs/examples/utilities/off-screen.html
new file mode 100644
index 0000000..6dee505
--- /dev/null
+++ b/vanilla/templates/docs/examples/utilities/off-screen.html
@@ -0,0 +1,7 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Off-screen{% endblock %}
+
+{% block content %}
+
To hear a great joke, visit this page with your favorite screen reader.
+
“My dog has no nose.” “How does it smell?” “Awful!”
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/utilities/padding-collapse.html b/vanilla/templates/docs/examples/utilities/padding-collapse.html
new file mode 100644
index 0000000..7eeaf31
--- /dev/null
+++ b/vanilla/templates/docs/examples/utilities/padding-collapse.html
@@ -0,0 +1,20 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Padding collapse{% endblock %}
+
+{% block content %}
+
+ This div has no padding
+
+
+ This div has no top padding
+
+
+ This div has no right padding
+
+
+ This div has no bottom padding
+
+
+ This div has no left padding
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/utilities/show.html b/vanilla/templates/docs/examples/utilities/show.html
new file mode 100644
index 0000000..1ae65f4
--- /dev/null
+++ b/vanilla/templates/docs/examples/utilities/show.html
@@ -0,0 +1,16 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Show{% endblock %}
+
+{% block content %}
+
Shown on small screens
+
Shown on medium screens
+
Shown on large screens
+
+
+ This is a
+ small
+ medium
+ large
+ screen.
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/utilities/table-cell-padding-overlap.html b/vanilla/templates/docs/examples/utilities/table-cell-padding-overlap.html
new file mode 100644
index 0000000..8771f1d
--- /dev/null
+++ b/vanilla/templates/docs/examples/utilities/table-cell-padding-overlap.html
@@ -0,0 +1,21 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Table cell padding overlap{% endblock %}
+
+{% block content %}
+
+
+
+ Select Text
+
+
+ Select Text not wrapped in a tag
+
+
+ Select Text in a paragraph
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/utilities/table-layout/table-layout-auto-nested.html b/vanilla/templates/docs/examples/utilities/table-layout/table-layout-auto-nested.html
new file mode 100644
index 0000000..4a72add
--- /dev/null
+++ b/vanilla/templates/docs/examples/utilities/table-layout/table-layout-auto-nested.html
@@ -0,0 +1,23 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Table layout / Automatic / Nested{% endblock %}
+
+{% block content %}
+
+
+
+
+
+ Attribute name
+ Value
+
+
+
+
+ table-layout
+ auto
+
+
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/utilities/table-layout/table-layout-auto.html b/vanilla/templates/docs/examples/utilities/table-layout/table-layout-auto.html
new file mode 100644
index 0000000..5a15766
--- /dev/null
+++ b/vanilla/templates/docs/examples/utilities/table-layout/table-layout-auto.html
@@ -0,0 +1,22 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Table layout / Automatic{% endblock %}
+
+{% block content %}
+
+
+
+ Attribute name
+ Value
+
+
+
+
+ table-layout
+ auto
+
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/utilities/text-figures.html b/vanilla/templates/docs/examples/utilities/text-figures.html
new file mode 100644
index 0000000..fd1bc50
--- /dev/null
+++ b/vanilla/templates/docs/examples/utilities/text-figures.html
@@ -0,0 +1,7 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Text figures{% endblock %}
+
+{% block content %}
+
Lining figures (default): 1234567890
+
Text figures: 1234567890
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/utilities/text-max-width-container.html b/vanilla/templates/docs/examples/utilities/text-max-width-container.html
new file mode 100644
index 0000000..82871ff
--- /dev/null
+++ b/vanilla/templates/docs/examples/utilities/text-max-width-container.html
@@ -0,0 +1,21 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Text max width / Container{% endblock %}
+
+{% block standalone_css %}patterns_lists{% endblock %}
+
+{% block content %}
+
+
Reduce your average CVE exposure time from 98 days to 1 day with expanded CVE patching, ten-years security maintenance, optional support and operations for the full stack of open-source applications.
+
+
+ How to check for and apply security updates on your Ubuntu machine, including security updates for Ubuntu Universe packages which are only available with Ubuntu Pro
+ Design and build
+
+ 1870 packages are from Ubuntu Main/ Restricted repository which means that they receive Ubuntu LTS updates until 2025. This is covered without any subscription but can be expanded with Ubuntu Pro for additional 5 years, until 2030.
+ Integration requirements
+
+
+ 281 packages are from Ubuntu Universe/ Multiverse repository and they come with no security assurance with Ubuntu LTS. They would be covered by Ubuntu Pro and there might be beta security updates available for them today. Let’s find out if that is the case.
+
+
+{% endblock %}
\ No newline at end of file
diff --git a/vanilla/templates/docs/examples/utilities/text-max-width-divided.html b/vanilla/templates/docs/examples/utilities/text-max-width-divided.html
new file mode 100644
index 0000000..e35ad2e
--- /dev/null
+++ b/vanilla/templates/docs/examples/utilities/text-max-width-divided.html
@@ -0,0 +1,19 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Text max width / Divided{% endblock %}
+
+{% block standalone_css %}patterns_lists{% endblock %}
+
+{% block content %}
+
Reduce your average CVE exposure time from 98 days to 1 day with expanded CVE patching, ten-years security maintenance, optional support and operations for the full stack of open-source applications.
+
+
+ How to check for and apply security updates on your Ubuntu machine, including security updates for Ubuntu Universe packages which are only available with Ubuntu Pro
+ Design and build
+
+ 1870 packages are from Ubuntu Main/ Restricted repository which means that they receive Ubuntu LTS updates until 2025. This is covered without any subscription but can be expanded with Ubuntu Pro for additional 5 years, until 2030.
+ Integration requirements
+
+
+ 281 packages are from Ubuntu Universe/ Multiverse repository and they come with no security assurance with Ubuntu LTS. They would be covered by Ubuntu Pro and there might be beta security updates available for them today. Let’s find out if that is the case.
+
+{% endblock %}
\ No newline at end of file
diff --git a/vanilla/templates/docs/examples/utilities/text-max-width.html b/vanilla/templates/docs/examples/utilities/text-max-width.html
new file mode 100644
index 0000000..923ad45
--- /dev/null
+++ b/vanilla/templates/docs/examples/utilities/text-max-width.html
@@ -0,0 +1,19 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Text max width{% endblock %}
+
+{% block standalone_css %}patterns_lists{% endblock %}
+
+{% block content %}
+
Reduce your average CVE exposure time from 98 days to 1 day with expanded CVE patching, ten-years security maintenance, optional support and operations for the full stack of open-source applications.
+
+
+ How to check for and apply security updates on your Ubuntu machine, including security updates for Ubuntu Universe packages which are only available with Ubuntu Pro
+ Design and build
+
+ 1870 packages are from Ubuntu Main/ Restricted repository which means that they receive Ubuntu LTS updates until 2025. This is covered without any subscription but can be expanded with Ubuntu Pro for additional 5 years, until 2030.
+ Integration requirements
+
+
+ 281 packages are from Ubuntu Universe/ Multiverse repository and they come with no security assurance with Ubuntu LTS. They would be covered by Ubuntu Pro and there might be beta security updates available for them today. Let’s find out if that is the case.
+
+{% endblock %}
\ No newline at end of file
diff --git a/vanilla/templates/docs/examples/utilities/text-with-icon.html b/vanilla/templates/docs/examples/utilities/text-with-icon.html
new file mode 100644
index 0000000..5649a97
--- /dev/null
+++ b/vanilla/templates/docs/examples/utilities/text-with-icon.html
@@ -0,0 +1,6 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Text / With icon{% endblock %}
+
+{% block content %}
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/utilities/truncate.html b/vanilla/templates/docs/examples/utilities/truncate.html
new file mode 100644
index 0000000..6226df2
--- /dev/null
+++ b/vanilla/templates/docs/examples/utilities/truncate.html
@@ -0,0 +1,44 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Truncate text{% endblock %}
+
+{% block content %}
+
+
+
+ FQDN
+ Status
+ RAM
+ Disks
+ Storage
+
+
+
+
+ NameLongEnoughToCauseOverflowAndRevealAnEllipsis
+ Failed to enter rescue mode
+ 2 GiB
+ 1
+ 2TB
+
+
+
+ This sentence will wrap on multiple lines without truncating, while the following one will truncate once it reaches the end of the line.
+
+ This one will truncate when it reaches the end of the line
+
+
+ This text will not get truncated.
+ 2 GiB
+ 1
+ 2TB
+
+
+
+
This sentence will truncate and reveal an ellipsis once it exceeds the paragraph's max-width.
+
+
+ This label will truncate at the end of the col
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/utilities/vertical-spacing.html b/vanilla/templates/docs/examples/utilities/vertical-spacing.html
new file mode 100644
index 0000000..b2b1fab
--- /dev/null
+++ b/vanilla/templates/docs/examples/utilities/vertical-spacing.html
@@ -0,0 +1,34 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Vertical spacing by unit{% endblock %}
+
+{% block content %}
+
+
+
<p> with .u-sv-3
+
text below
+
+
+
<p> with .u-sv-2
+
text below
+
+
+
<p> with .u-sv-1
+
text below
+
+
+
+
+
+
<p> with .u-sv1
+
text below
+
+
+
<p> with .u-sv2
+
text below
+
+
+
<p> with .u-sv3
+
text below
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/examples/utilities/vertically-center.html b/vanilla/templates/docs/examples/utilities/vertically-center.html
new file mode 100644
index 0000000..67751c4
--- /dev/null
+++ b/vanilla/templates/docs/examples/utilities/vertically-center.html
@@ -0,0 +1,10 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Vertically center{% endblock %}
+
+{% block content %}
+
+
+ Vertically centered content
+
+
+{% endblock %}
diff --git a/vanilla/templates/docs/components/grid/index.md b/vanilla/templates/docs/foundations/grid/index.md
similarity index 99%
rename from vanilla/templates/docs/components/grid/index.md
rename to vanilla/templates/docs/foundations/grid/index.md
index 1b89c7c..2eea3c7 100644
--- a/vanilla/templates/docs/components/grid/index.md
+++ b/vanilla/templates/docs/foundations/grid/index.md
@@ -1,7 +1,7 @@
---
wrapper_template: '_layouts/docs.html'
context:
- title: Grid | Implementation
+ title: Grid | Foundations
---
## Structure
diff --git a/vanilla/templates/docs/components/suru/index.md b/vanilla/templates/docs/foundations/suru/index.md
similarity index 100%
rename from vanilla/templates/docs/components/suru/index.md
rename to vanilla/templates/docs/foundations/suru/index.md
diff --git a/vanilla/templates/docs/foundations/typography/accessibility/index.md b/vanilla/templates/docs/foundations/typography/accessibility/index.md
deleted file mode 100644
index 08c5b2b..0000000
--- a/vanilla/templates/docs/foundations/typography/accessibility/index.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-wrapper_template: '_layouts/docs.html'
-context:
- title: Typography | Accessibility
----
-
-# 🚧 WIP 🚧
diff --git a/vanilla/templates/docs/foundations/typography/design-guidelines/index.md b/vanilla/templates/docs/foundations/typography/design-guidelines/index.md
deleted file mode 100644
index de62fe4..0000000
--- a/vanilla/templates/docs/foundations/typography/design-guidelines/index.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-wrapper_template: '_layouts/docs.html'
-context:
- title: Typography | Design Guidelines
----
-
-# 🚧 WIP 🚧
diff --git a/vanilla/templates/docs/foundations/typography/figma/index.md b/vanilla/templates/docs/foundations/typography/figma/index.md
deleted file mode 100644
index 5de92cd..0000000
--- a/vanilla/templates/docs/foundations/typography/figma/index.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-wrapper_template: '_layouts/docs.html'
-context:
- title: Typography | Figma
----
-
-# 🚧 WIP 🚧
diff --git a/vanilla/templates/docs/getting-started/index.md b/vanilla/templates/docs/getting-started/index.md
new file mode 100644
index 0000000..ecafa0d
--- /dev/null
+++ b/vanilla/templates/docs/getting-started/index.md
@@ -0,0 +1,254 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+ title: Getting started | Contributing
+ status: completed
+---
+
+
+
+## Step 1: Divide and conquer
+
+
+
+
+
+
+
+
+
+
+
+
1.2. Assign yourself to one of the rows
+
+
+
+
+
+
1.3. Is there documentation available?
+
+
+
+
+
gi
+
+---
+
+
+
+## Step 2: Create initial documentation
+
+
+
+This is just some guidance of what content would be useful to cover as basic documentation. Feel free to change headings or structure the content in a way that makes sense to you. The bullets are some ideas what to cover.
+
+**What is there?**
+
+- Break down the component into its parts (anatomy). What elements is it made of?
+ - Optional: make an illustration [Side nav example]
+- Are there multiple variants of this component? Variants are significantly different implementations of a component, for example, the cards in a blog or in Charmhub.
+- Figure out what aspects of the component can be configured (properties). For example, size, colour, show and hide parts, editable text, etc.
+
+**When to use it?**
+
+- What problem is this component solving? Write about the context in which it should be used.
+- In what situations should a designer pick this component?
+ - Are there any alternatives they could consider? When is this option more suitable than another? E.g. when a button should be used vs. when to use a link.
+- If there are obvious situations where the designer should avoid using the component, list some don’ts. For example, in situations where there is consensus in the team or directions of when not to use a component.
+- Optional: provide examples of this component being used in our UIs.
+
+**How to use it?**
+
+- Dos and don’ts: provide best practices of how the component should be used. For example, don’t use multiple primary buttons in a section of a page.
+
+---
+
+
+
+## Step 3: Copy existing documentation
+
+
+
+
+
+
+
3.1. Open the Google Doc file from the corresponding Design guidelines column
+
+
+
+
+
+
+
3.2. Go to Extensions > Add-ons > Get add-ons
+
+
+
+
+
+
+
3.3. Install the Docs™ to Markdown add-on
+
+
+
+
+
+
+
3.4. Open the extension
+
+
+
+
+
+
+
3.5. Press the Markdown command and copy generated text
+
+
+
+
+
+
+
+---
+
+
+
+## Step 4: Log in and fork the repository
+
+
+
+
+
+
+
+
+
+
+
+
4.2. Authorize dgtlntv
+
+
+
+
+
+
+
4.3. Fork the repo
+
+
+
+
+
+
+
+---
+
+
+
+## Step 5: Paste the text
+
+
+
+
+
+
+
5.1. Select the correct component from the side menu
+
+
+
+
+
+
+
5.2. Open the file with the design-guidelines
+
+
+
+
+
+
+
5.3. Set the status to Braindump and switch the editor to Markdown
+
+
+
+
+
+
+
5.4. Paste the markdown text you copied earlier from the Google Doc
+
+
+
+
+
+
+
5.5. Check for red error paragraphs and make sure to remove them
+
+
+
+
+
+
+
+
+---
+
+
+
+## Step 6: Add images
+
+
+
+
+
+
+
6.1. Go back to the Google Doc and download the document as the Web Page
+
+
+
+
+
+
+
6.2. Switch to Rich Text and upload the images that are located in the recently downloaded folder
+
+
+
+
+
+
+
+---
+
+
+
+## Step 7: Save
+
+
+
+
+
+
+
7.1. Change the status to In review and Save
+
+
+
+
+
+
+
7.2. Change the status in the Google Sheet to Done
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/vanilla/templates/docs/guidelines/data-visualisation/index.md b/vanilla/templates/docs/guidelines/data-visualisation/index.md
new file mode 100644
index 0000000..5e3ca63
--- /dev/null
+++ b/vanilla/templates/docs/guidelines/data-visualisation/index.md
@@ -0,0 +1,7 @@
+---
+wrapper_template: '_layouts/docs.html'
+context:
+ title: Data visualisation | Guidelines
+---
+
+# 🚧 WIP 🚧
diff --git a/vanilla/templates/docs/components/empty-state/index.md b/vanilla/templates/docs/guidelines/empty-state/index.md
similarity index 98%
rename from vanilla/templates/docs/components/empty-state/index.md
rename to vanilla/templates/docs/guidelines/empty-state/index.md
index 661f126..d4b5f1e 100644
--- a/vanilla/templates/docs/components/empty-state/index.md
+++ b/vanilla/templates/docs/guidelines/empty-state/index.md
@@ -1,7 +1,7 @@
---
wrapper_template: '_layouts/docs.html'
context:
- title: Empty state | Implementation
+ title: Empty state | Guideline
---
State zero or the empty state is the moment in the app where there is no data to display in the UI. It is most commonly used when a new feature is developed or a user interacts with the page for the first time. It can also be used when all data is deleted or unavailable.
diff --git a/vanilla/templates/docs/guidelines/example/index.md b/vanilla/templates/docs/guidelines/example/index.md
deleted file mode 100644
index a99b436..0000000
--- a/vanilla/templates/docs/guidelines/example/index.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-wrapper_template: '_layouts/docs.html'
-context:
- title: Example | Layouts
----
-
-# 🚧 WIP 🚧
diff --git a/vanilla/templates/docs/components/fieldset/figma/index.md b/vanilla/templates/docs/guidelines/forms/index.md
similarity index 72%
rename from vanilla/templates/docs/components/fieldset/figma/index.md
rename to vanilla/templates/docs/guidelines/forms/index.md
index 995d62f..1eb4298 100644
--- a/vanilla/templates/docs/components/fieldset/figma/index.md
+++ b/vanilla/templates/docs/guidelines/forms/index.md
@@ -1,7 +1,7 @@
---
wrapper_template: '_layouts/docs.html'
context:
- title: Fieldset | Figma
+ title: Forms | Guidelines
---
# 🚧 WIP 🚧
diff --git a/vanilla/templates/docs/components/fieldset/react/index.md b/vanilla/templates/docs/guidelines/navigation/index.md
similarity index 72%
rename from vanilla/templates/docs/components/fieldset/react/index.md
rename to vanilla/templates/docs/guidelines/navigation/index.md
index 9212bf9..1eb4298 100644
--- a/vanilla/templates/docs/components/fieldset/react/index.md
+++ b/vanilla/templates/docs/guidelines/navigation/index.md
@@ -1,7 +1,7 @@
---
wrapper_template: '_layouts/docs.html'
context:
- title: Fieldset | React
+ title: Forms | Guidelines
---
# 🚧 WIP 🚧
diff --git a/vanilla/templates/docs/layouts/documentation-brochure/index.md b/vanilla/templates/docs/layouts/documentation-brochure/index.md
deleted file mode 100644
index c094eb9..0000000
--- a/vanilla/templates/docs/layouts/documentation-brochure/index.md
+++ /dev/null
@@ -1,91 +0,0 @@
----
-wrapper_template: '_layouts/docs.html'
-context:
- title: Documentation brochure layout | Layouts
----
-
-
-
-
Legacy
-
Please note that this is a documentation for a legacy documentation layout using our brochure site grid. New documentation layout is documented separately.
-
-
-
-## Structure
-
-The documentation layout is built using Vanilla grid classes and common components. It consists of 3 horizontal areas that span the entire fixed width of the grid: header, content, footer.
-
-
-
-At the large breakpoint, the content area is further divided into an aside (3 columns) and a main content area (9 columns).
-
-At smaller breakpoints, the aside is moved off-screen and shown / hidden using a toggle.
-
-### Header
-
-Place the [navigation component](/docs/patterns/navigation#global-navigation) and any other full width elements in the header. This could include a strip with a search, a hero element, etc.
-
-Style and contents of the documentation main navigation should be consistent with rest of the site.
-
-#### Search
-
-Documentation pages may have an optional search box in the main navigation.
-
-Alternatively, a search can be added in a full-width area under the top navigation, but above the aside and main content in a [strip component](/docs/patterns/strip) with grid row inside. The specific styling of the strip can be customised to match the site branding or other design requirements.
-
-### Content area
-
-The content area is implemented as a regular strip (`.p-strip`) with a grid row (`.row`) inside. Within the standard Vanilla 12 column grid, 3 of the columns are reserved for the side navigation (`.col-3`) with the rest of the row width (9 columns, `.col-9`) is dedicated to the main documentation content.
-
-The aside area should contain the [side navigation component](/docs/patterns/navigation#side-navigation) with a list of all documentation pages. Grouping and nesting of navigation items should be used to build the logical structure of the documentation navigation. The side navigation component has built-in responsive functionality which makes it appear / go off-screen using a toggle.
-
-If the contents of the side navigation are generated in a way that doesn't provide the specific class names required by Vanilla, use a [raw HTML variant of the pattern](/docs/patterns/navigation#raw-html) to style the basic HTML lists of links.
-
-The main content area is placed in a `col-9` grid container. Note that the number of columns available to use by content inside this container is equal to the number of columns the container spans. For the main content this means 9 available columns.
-
-A visualisation of the grid, and how to nest different layouts inside the main content container:
-
-
-
-
.col-1
-
.col-1
-
.col-1
-
.col-1
-
.col-1
-
.col-1
-
.col-1
-
.col-1
-
.col-1
-
-
-
-To split the main content area into 3 parts, use `col-3`:
-
-
-
-
.col-3
-
.col-3
-
.col-3
-
-
-
-To split the main content into 2 parts, use `col-4`:
-
-
-
-### Footer
-
-The footer is built using a [strip component](/docs/patterns/strip).
-
-## Example
-
-
-
-[View full screen example of the documentation layout](/docs/examples/layouts/documentation/).
diff --git a/vanilla/templates/docs/components/equal-height-row/index.md b/vanilla/templates/docs/layouts/equal-height-row/index.md
similarity index 100%
rename from vanilla/templates/docs/components/equal-height-row/index.md
rename to vanilla/templates/docs/layouts/equal-height-row/index.md
diff --git a/vanilla/templates/docs/components/section/index.md b/vanilla/templates/docs/layouts/section/index.md
similarity index 98%
rename from vanilla/templates/docs/components/section/index.md
rename to vanilla/templates/docs/layouts/section/index.md
index c450c53..6e73892 100644
--- a/vanilla/templates/docs/components/section/index.md
+++ b/vanilla/templates/docs/layouts/section/index.md
@@ -1,7 +1,7 @@
---
wrapper_template: '_layouts/docs.html'
context:
- title: Section | Implementation
+ title: Section | Layout
---
Use section components to wrap around parts of content on the page. They are used for managing the bottom space after each element.
diff --git a/vanilla/templates/docs/components/strip/index.md b/vanilla/templates/docs/layouts/strip/index.md
similarity index 99%
rename from vanilla/templates/docs/components/strip/index.md
rename to vanilla/templates/docs/layouts/strip/index.md
index b888e28..d85bd35 100644
--- a/vanilla/templates/docs/components/strip/index.md
+++ b/vanilla/templates/docs/layouts/strip/index.md
@@ -1,7 +1,7 @@
---
wrapper_template: '_layouts/docs.html'
context:
- title: Strip | Implementation
+ title: Strip | Layout
---
The strip pattern provides a full width strip container in which to wrap a grid. It is an alternative to the section component, that surrounds its content with a padding both on the top and bottom, and is used usually when a change of the background is needed or to separate different sections of the page.
diff --git a/vanilla/templates/docs/components/card/accessibility/index.md b/vanilla/templates/docs/patterns/card/accessibility/index.md
similarity index 100%
rename from vanilla/templates/docs/components/card/accessibility/index.md
rename to vanilla/templates/docs/patterns/card/accessibility/index.md
diff --git a/vanilla/templates/docs/components/card/design-guidelines/index.md b/vanilla/templates/docs/patterns/card/design-guidelines/index.md
similarity index 100%
rename from vanilla/templates/docs/components/card/design-guidelines/index.md
rename to vanilla/templates/docs/patterns/card/design-guidelines/index.md
diff --git a/vanilla/templates/docs/components/card/figma/index.md b/vanilla/templates/docs/patterns/card/figma/index.md
similarity index 100%
rename from vanilla/templates/docs/components/card/figma/index.md
rename to vanilla/templates/docs/patterns/card/figma/index.md
diff --git a/vanilla/templates/docs/components/card/index.md b/vanilla/templates/docs/patterns/card/index.md
similarity index 100%
rename from vanilla/templates/docs/components/card/index.md
rename to vanilla/templates/docs/patterns/card/index.md
diff --git a/vanilla/templates/docs/components/card/react/index.md b/vanilla/templates/docs/patterns/card/react/index.md
similarity index 100%
rename from vanilla/templates/docs/components/card/react/index.md
rename to vanilla/templates/docs/patterns/card/react/index.md
diff --git a/vanilla/templates/docs/patterns/example/accessibility/index.md b/vanilla/templates/docs/patterns/example/accessibility/index.md
deleted file mode 100644
index ecdc931..0000000
--- a/vanilla/templates/docs/patterns/example/accessibility/index.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-wrapper_template: '_layouts/docs.html'
-context:
- title: Example | Accessibility
----
-
-# 🚧 WIP 🚧
diff --git a/vanilla/templates/docs/patterns/example/design-guidelines/index.md b/vanilla/templates/docs/patterns/example/design-guidelines/index.md
deleted file mode 100644
index 691f43f..0000000
--- a/vanilla/templates/docs/patterns/example/design-guidelines/index.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-wrapper_template: '_layouts/docs.html'
-context:
- title: Example | Design Guidelines
----
-
-# 🚧 WIP 🚧
diff --git a/vanilla/templates/docs/patterns/example/figma/index.md b/vanilla/templates/docs/patterns/example/figma/index.md
deleted file mode 100644
index 22bd497..0000000
--- a/vanilla/templates/docs/patterns/example/figma/index.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-wrapper_template: '_layouts/docs.html'
-context:
- title: Example | Figma
----
-
-# 🚧 WIP 🚧
diff --git a/vanilla/templates/docs/patterns/example/react/index.md b/vanilla/templates/docs/patterns/example/react/index.md
deleted file mode 100644
index 0cd00f2..0000000
--- a/vanilla/templates/docs/patterns/example/react/index.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-wrapper_template: '_layouts/docs.html'
-context:
- title: Example | React
----
-
-# 🚧 WIP 🚧
diff --git a/vanilla/templates/docs/components/modal/accessibility/index.md b/vanilla/templates/docs/patterns/modal/accessibility/index.md
similarity index 100%
rename from vanilla/templates/docs/components/modal/accessibility/index.md
rename to vanilla/templates/docs/patterns/modal/accessibility/index.md
diff --git a/vanilla/templates/docs/components/modal/design-guidelines/index.md b/vanilla/templates/docs/patterns/modal/design-guidelines/index.md
similarity index 100%
rename from vanilla/templates/docs/components/modal/design-guidelines/index.md
rename to vanilla/templates/docs/patterns/modal/design-guidelines/index.md
diff --git a/vanilla/templates/docs/components/modal/figma/index.md b/vanilla/templates/docs/patterns/modal/figma/index.md
similarity index 100%
rename from vanilla/templates/docs/components/modal/figma/index.md
rename to vanilla/templates/docs/patterns/modal/figma/index.md
diff --git a/vanilla/templates/docs/components/modal/index.md b/vanilla/templates/docs/patterns/modal/index.md
similarity index 100%
rename from vanilla/templates/docs/components/modal/index.md
rename to vanilla/templates/docs/patterns/modal/index.md
diff --git a/vanilla/templates/docs/components/modal/react/index.md b/vanilla/templates/docs/patterns/modal/react/index.md
similarity index 100%
rename from vanilla/templates/docs/components/modal/react/index.md
rename to vanilla/templates/docs/patterns/modal/react/index.md
diff --git a/vanilla/templates/static/decap/config.yml b/vanilla/templates/static/decap/config.yml
index 87ae4ef..186fad6 100644
--- a/vanilla/templates/static/decap/config.yml
+++ b/vanilla/templates/static/decap/config.yml
@@ -7,7 +7,7 @@ backend:
open_authoring: true
base_url: https://auth.dgtln.tv # Path to ext auth provider
-media_folder: 'images/uploads' # Media files will be stored in the repo under images/uploads
+media_folder: 'vanilla/templates/static/images' # Media files will be stored in the repo under images/uploads
collections:
- name: 'foundations'
diff --git a/vanilla/templates/static/images/0.jpg b/vanilla/templates/static/images/0.jpg
new file mode 100644
index 0000000..ed2c995
Binary files /dev/null and b/vanilla/templates/static/images/0.jpg differ
diff --git a/vanilla/templates/static/images/1.jpg b/vanilla/templates/static/images/1.jpg
new file mode 100644
index 0000000..d42d1e7
Binary files /dev/null and b/vanilla/templates/static/images/1.jpg differ
diff --git a/vanilla/templates/static/images/10.jpg b/vanilla/templates/static/images/10.jpg
new file mode 100644
index 0000000..071d8e4
Binary files /dev/null and b/vanilla/templates/static/images/10.jpg differ
diff --git a/vanilla/templates/static/images/11.jpg b/vanilla/templates/static/images/11.jpg
new file mode 100644
index 0000000..9cb10dc
Binary files /dev/null and b/vanilla/templates/static/images/11.jpg differ
diff --git a/vanilla/templates/static/images/12.jpg b/vanilla/templates/static/images/12.jpg
new file mode 100644
index 0000000..3daa956
Binary files /dev/null and b/vanilla/templates/static/images/12.jpg differ
diff --git a/vanilla/templates/static/images/13.jpg b/vanilla/templates/static/images/13.jpg
new file mode 100644
index 0000000..ea7168c
Binary files /dev/null and b/vanilla/templates/static/images/13.jpg differ
diff --git a/vanilla/templates/static/images/14.jpg b/vanilla/templates/static/images/14.jpg
new file mode 100644
index 0000000..5e8c6f7
Binary files /dev/null and b/vanilla/templates/static/images/14.jpg differ
diff --git a/vanilla/templates/static/images/15.jpg b/vanilla/templates/static/images/15.jpg
new file mode 100644
index 0000000..b0ac43e
Binary files /dev/null and b/vanilla/templates/static/images/15.jpg differ
diff --git a/vanilla/templates/static/images/16.jpg b/vanilla/templates/static/images/16.jpg
new file mode 100644
index 0000000..1f3cbaf
Binary files /dev/null and b/vanilla/templates/static/images/16.jpg differ
diff --git a/vanilla/templates/static/images/17.jpg b/vanilla/templates/static/images/17.jpg
new file mode 100644
index 0000000..80fdd5b
Binary files /dev/null and b/vanilla/templates/static/images/17.jpg differ
diff --git a/vanilla/templates/static/images/2.jpg b/vanilla/templates/static/images/2.jpg
new file mode 100644
index 0000000..92750ab
Binary files /dev/null and b/vanilla/templates/static/images/2.jpg differ
diff --git a/vanilla/templates/static/images/3.jpg b/vanilla/templates/static/images/3.jpg
new file mode 100644
index 0000000..e436e98
Binary files /dev/null and b/vanilla/templates/static/images/3.jpg differ
diff --git a/vanilla/templates/static/images/4.jpg b/vanilla/templates/static/images/4.jpg
new file mode 100644
index 0000000..6a2cdf4
Binary files /dev/null and b/vanilla/templates/static/images/4.jpg differ
diff --git a/vanilla/templates/static/images/5.jpg b/vanilla/templates/static/images/5.jpg
new file mode 100644
index 0000000..4d25e35
Binary files /dev/null and b/vanilla/templates/static/images/5.jpg differ
diff --git a/vanilla/templates/static/images/6.jpg b/vanilla/templates/static/images/6.jpg
new file mode 100644
index 0000000..88ad592
Binary files /dev/null and b/vanilla/templates/static/images/6.jpg differ
diff --git a/vanilla/templates/static/images/7.1.jpg b/vanilla/templates/static/images/7.1.jpg
new file mode 100644
index 0000000..4056edb
Binary files /dev/null and b/vanilla/templates/static/images/7.1.jpg differ
diff --git a/vanilla/templates/static/images/7.2.jpg b/vanilla/templates/static/images/7.2.jpg
new file mode 100644
index 0000000..53975bc
Binary files /dev/null and b/vanilla/templates/static/images/7.2.jpg differ
diff --git a/vanilla/templates/static/images/7.jpg b/vanilla/templates/static/images/7.jpg
new file mode 100644
index 0000000..02bfda3
Binary files /dev/null and b/vanilla/templates/static/images/7.jpg differ
diff --git a/vanilla/templates/static/images/8.jpg b/vanilla/templates/static/images/8.jpg
new file mode 100644
index 0000000..80d153a
Binary files /dev/null and b/vanilla/templates/static/images/8.jpg differ
diff --git a/vanilla/templates/static/images/9.jpg b/vanilla/templates/static/images/9.jpg
new file mode 100644
index 0000000..0aad7b3
Binary files /dev/null and b/vanilla/templates/static/images/9.jpg differ
diff --git a/vanilla/webapp/app.py b/vanilla/webapp/app.py
index 06a466e..56d1868 100644
--- a/vanilla/webapp/app.py
+++ b/vanilla/webapp/app.py
@@ -224,7 +224,7 @@ def utility_processor():
@app.route('/')
def forward():
- return redirect("/docs/foundations/icons", code=302)
+ return redirect("/docs/getting-started", code=302)
template_finder_view = TemplateFinder.as_view("template_finder")