A checklist that can be filtered by A / AA / AAA level, with a short description and links to the related "Understanding" and "How to Meet" articles that accompany each criterion.
- WAI-ARIA A guide for understanding how to use WAI-ARIA 1.1 to create an accessible Rich Internet Application. It provides guidance on the appropriate application of WAI-ARIA, describes recommended WAI-ARIA usage patterns, and explains concepts behind them.
The volume of information on the WCAG 2.0 website can be disorienting. We keep the following links handy for quick reference:
-
-
-
-
-
-
-
-
WCAG 2.0: the W3C standard, includes principles, guidelines and success criteria
-
Understanding WCAG 2.0: detailed reference, includes intent, benefits to people with disabilities, examples, resources and techniques
-
How to Meet WCAG 2.0: a customisable quick reference, includes guidelines, success criteria and techniques
-
Techniques for WCAG 2.0: instructions for developers, includes browser and assistive technology support notes, examples, code, resources and test procedures
-
-
-
-
-
-
-
-
-
-
-
-
Useful tools
-
The web is abundant in tools that help to create and test for accessible sites. We find the following particularly useful:
Vanilla framework follows the principles of progressive enhancement and web standards. Users should be able to access core content and functionality from any browser or operating system, with varying degrees of access to visual and other enhancements — design components do not have to look exactly the same on every browser.
-
-
-
-
-
-
-
-
-
-
-
-
Bugs and prioritisation
-
-
-
-
If the bug prevents access to core content (for example, by hiding it or covering it), it should be prioritised
-
If the bug relates to visual differences that do not affect access to content on modern browsers, it should be queued up
-
Priority level should be determined case by case
-
If the bug relates to visual differences that do not affect access to content on old browsers, it should be deprioritised
-
-
-
-
-
-
-
-
-
-
-
-
-
Supported browsers
-
The following are the browsers that we actively test all components on. That does not mean other browsers are not supported or that bugs reported are not acted on.
When submitting a new issue, please check that it hasn't already been raised by someone else. We've provided a template for new issues which will help you structure your issue to ensure it can be picked up and actioned easily.
-
Please provide as much information possible detailing what you're currently experiencing and what you'd expect to experience.
-
To work on an issue, please fork this repo and create a new branch on your local fork. When you're happy and would like to propose that changeset to be merged back upstream, open a pull request to merge from your local origin/master to upstream/master.
-
When committing changes, make sure to group related changes so that the project is always in a working state. Use succinct yet descriptive commit messages to allow for easy reading of the commit log.
-
-
-
-
-
Guidelines
-
We follow two guideline documents that align with the practices that the Canonical Web Team follows across all projects.
-
We use GitHub issues to track all our bugs and feature requests.
-
-
-
Chat with us
-
Find out about new releases, latest features and get help on Twitter.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Running tests locally
-
-
-
The simplest way to run Vanilla framework is to first install Docker and dotrun, and then use the dotrun script to build the site. Before proposing a pull request, ensure that the tests pass on your local fork. To kick off the tests for your project, in the terminal dotrun test.
If you try to run lxd init on a system that is connected to a network with a 10.x.x.x
- subnet, then the final step of the Iinit* may fail with the following error:
-
How to check the source of your installed packages
-
How to attach an Ubuntu Pro subscription to your existing Ubuntu LTS machine
-
Install Conjure up using the instructions for your OS
-
-
Ubuntu
-
Some obscure OS that has a very very very long name so that it wraps and shows that things align correctly.
-
macOS
-
-
-
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
How to attach an Ubuntu Pro subscription to your existing Ubuntu LTS machine
-
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
-
-
Hardware specification
-
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
-
-
-
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.
-
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.
- Derry Cheng
- Product Manager for Compute Engine
-
-
-
-
-
- “For the last decade, Google has partnered with Canonical to promote the adoption of open-source
- software.
-
-
- By offering Ubuntu Pro on Google Compute Engine, together we help customers enhance the security and
- compliance for their production workloads.”
-
-
-
-
-
-
-
-
-
-
-
-
-
- Robert Huber
- Chief Security Officer
-
-
-
-
-
- “Tenable and Canonical collaborate to provide timely, accurate and actionable vulnerability alerts.
-
-
- Ubuntu Pro offers security patch assurance for a broad spectrum of open-source software. Together, we give
- customers a foundation for the trustworthy open source.
- ”
-
The future is already here, as open source. Canonical delivers it to the world. We play a critical role in broadening the benefits of open source to more people and more industries than ever before. This means bringing new work opportunities to people regardless of their location too.
-
-
-
-
-
\ No newline at end of file
diff --git a/vanilla/templates/docs/examples/brochure/_25-75-offset-structure.html b/vanilla/templates/docs/examples/brochure/_25-75-offset-structure.html
deleted file mode 100644
index bb397c9..0000000
--- a/vanilla/templates/docs/examples/brochure/_25-75-offset-structure.html
+++ /dev/null
@@ -1,7 +0,0 @@
-
-
-
(25)/75 offset split
-
Use (25)/75 split with offset when first column is empty and the rest of the content is to be aligned with other 75% section of the page.
-
To achieve that use row--25-75 class name and only one col child.
-
-
\ No newline at end of file
diff --git a/vanilla/templates/docs/examples/brochure/_25-75-offset.html b/vanilla/templates/docs/examples/brochure/_25-75-offset.html
deleted file mode 100644
index 151df46..0000000
--- a/vanilla/templates/docs/examples/brochure/_25-75-offset.html
+++ /dev/null
@@ -1,8 +0,0 @@
-
-
-
-
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.
-
-
-
\ No newline at end of file
diff --git a/vanilla/templates/docs/examples/brochure/_25-75-responsive-structure.html b/vanilla/templates/docs/examples/brochure/_25-75-responsive-structure.html
deleted file mode 100644
index 36241e8..0000000
--- a/vanilla/templates/docs/examples/brochure/_25-75-responsive-structure.html
+++ /dev/null
@@ -1,10 +0,0 @@
-
-
-
25/75 split on large
-
-
-
Use the 25/75 split on large screens for sections with a narrow first column (usually a heading), followed by a large content area that can be split into smaller nested grid if needed.
-
On medium and small screens, columns will be stacked.
-
To achieve that, use the row--25-75-on-large class name on the row and col on the columns.
-
-
\ No newline at end of file
diff --git a/vanilla/templates/docs/examples/brochure/_25-75-structure.html b/vanilla/templates/docs/examples/brochure/_25-75-structure.html
deleted file mode 100644
index 798cab5..0000000
--- a/vanilla/templates/docs/examples/brochure/_25-75-structure.html
+++ /dev/null
@@ -1,11 +0,0 @@
-
-
-
25/75 split
-
-
-
Use 25/75 split on sections with narrow first column (usually a heading) followed by large content area that isn't split into smaller columns.
-
On medium screens the 25/75 split is adjusted to be 33/66 (2 columns and 4 columns)
-
On small screens it becomes 2 rows of 100 + 100 split.
-
To achieve that use row--25-75 class name on the row and col on the columns.
-
-
\ No newline at end of file
diff --git a/vanilla/templates/docs/examples/brochure/_25-75.html b/vanilla/templates/docs/examples/brochure/_25-75.html
deleted file mode 100644
index c98c163..0000000
--- a/vanilla/templates/docs/examples/brochure/_25-75.html
+++ /dev/null
@@ -1,12 +0,0 @@
-
-
-
-
Our mission
-
-
-
Seamless consumption of open source across the compute spectrum
-
Join an intense global mission - to deliver the world's best open source experience, from platform to platform.
-
-
-
-
\ No newline at end of file
diff --git a/vanilla/templates/docs/examples/brochure/_50-50-structure.html b/vanilla/templates/docs/examples/brochure/_50-50-structure.html
deleted file mode 100644
index a2b1702..0000000
--- a/vanilla/templates/docs/examples/brochure/_50-50-structure.html
+++ /dev/null
@@ -1,9 +0,0 @@
-
-
-
50/50 split
-
-
-
Use 50/50 split for standard section with a heading and some content.
-
The 50/50 split should be preserved on large and medium screen sizes.
For enterprices to cover their Ubuntu estate - servers and workstations.
- See Ubuntu Pro pricing
-
-
-
-
-
-
-
-
-
-
-
-
Free for personal use
-
-
-
Anyone can use Ubuntu Pro for free on up to 5 machines, or 50 if you are an officialUbuntu Community member.
-
-
-
-
-
-
-
-
-
-
-
-
Trial at no extra cost for existing Ubuntu Advantage customers
-
-
-
If you were an active customer before January 26th, 2023 you can try Ubuntu Pro for up to 1 year - until the end of your current contract. At the end of the trial, you can choose to upgrade to full Pro (at extra cost), or remain with your current plan.
-
Multi-cloud (also referred to as multi cloud or multicloud) is a concept that refers to using multiple clouds from more than one cloud service provider at the same time. The term is also used to refer to the simultaneous running of bare metal, virtualised and containerised workloads.
Multi-cloud (also referred to as multi cloud or multicloud) is a concept that refers to using multiple clouds from more than one cloud service provider at the same time. The term is also used to refer to the simultaneous running of bare metal, virtualised and containerised workloads.
-
In conjunction with a hybrid cloud architecture, the multi-cloud approach enables organisations to optimise their infrastructure costs. Multi-cloud reflects the reality of most organisations today and is expected to become the standard for cloud infrastructure in the coming years.
Multi-cloud (also referred to as multi cloud or multicloud) is a concept that refers to using multiple clouds from more than one cloud service provider at the same time. The term is also used to refer to the simultaneous running of bare metal, virtualised and containerised workloads.
-
In conjunction with a hybrid cloud architecture, the multi-cloud approach enables organisations to optimise their infrastructure costs. Multi-cloud reflects the reality of most organisations today and is expected to become the standard for cloud infrastructure in the coming years.
- This page showcases and documents the use of Vanilla framework to build a brochure site.
-
-
All the sections of the page should be implemented using one of the grid layouts demonstrated below. By default all content should be inside the containers that use 25% of the full width (3 columns out of 12 column grid on large screens) or multiplication of it.
-
The grid layout should also be responsive, making sure that relative size is preserved on medium screen as much as possible (for details check the individual documentation of each split). On small screens all columns should take whole width of the page and appear in sequence (as by default Vanilla behaviour).
-
-
-
-
-
-
-
-
-
-
-
-
Layouts
-
-
-
In the sections below we demonstrate how to implement the available layouts using standard Vanilla grid.
- 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]"
-
-
-
-
-
-{% 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
deleted file mode 100644
index d5d24d4..0000000
--- a/vanilla/templates/docs/examples/layouts/documentation.html
+++ /dev/null
@@ -1,283 +0,0 @@
-{% 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" %}
-
-
-
- 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]"
-
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.
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
deleted file mode 100644
index 20ff89c..0000000
--- a/vanilla/templates/docs/examples/patterns/chip/colors.html
+++ /dev/null
@@ -1,27 +0,0 @@
-{% extends "_layouts/examples.html" %}
-{% block title %}Chip / Colors{% endblock %}
-
-{% block standalone_css %}patterns_chip{% endblock %}
-
-{% block content %}
-
-
-
-
-
-{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/chip/dark.html b/vanilla/templates/docs/examples/patterns/chip/dark.html
deleted file mode 100644
index 7b2f88c..0000000
--- a/vanilla/templates/docs/examples/patterns/chip/dark.html
+++ /dev/null
@@ -1,31 +0,0 @@
-{% extends "_layouts/examples.html" %}
-{% block title %}Chip / Dark{% endblock %}
-
-{% block standalone_css %}patterns_chip{% endblock %}
-
-{% set is_dark = true %}
-{% block content %}
-
-
-
-
-
-
- Type
- Information
-
-
-
-{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/chip/default.html b/vanilla/templates/docs/examples/patterns/chip/default.html
deleted file mode 100644
index e1cf76f..0000000
--- a/vanilla/templates/docs/examples/patterns/chip/default.html
+++ /dev/null
@@ -1,20 +0,0 @@
-{% extends "_layouts/examples.html" %}
-{% block title %}Chip / Default{% endblock %}
-
-{% block standalone_css %}patterns_chip{% endblock %}
-
-{% block content %}
-
-
-
-
-
-
-{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/chip/dense.html b/vanilla/templates/docs/examples/patterns/chip/dense.html
deleted file mode 100644
index 3e7fa76..0000000
--- a/vanilla/templates/docs/examples/patterns/chip/dense.html
+++ /dev/null
@@ -1,11 +0,0 @@
-{% extends "_layouts/examples.html" %}
-{% block title %}Chip / Dense{% endblock %}
-
-{% block standalone_css %}patterns_chip{% endblock %}
-
-{% block content %}
-
-{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/chip/inline.html b/vanilla/templates/docs/examples/patterns/chip/inline.html
deleted file mode 100644
index cdcf13c..0000000
--- a/vanilla/templates/docs/examples/patterns/chip/inline.html
+++ /dev/null
@@ -1,11 +0,0 @@
-{% extends "_layouts/examples.html" %}
-{% block title %}Chip / Inline{% endblock %}
-
-{% block standalone_css %}patterns_chip{% endblock %}
-
-{% block content %}
-
-{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/chip/long-values.html b/vanilla/templates/docs/examples/patterns/chip/long-values.html
deleted file mode 100644
index b215c12..0000000
--- a/vanilla/templates/docs/examples/patterns/chip/long-values.html
+++ /dev/null
@@ -1,55 +0,0 @@
-{% extends "_layouts/examples.html" %}
-{% block title %}Chip / Long values{% endblock %}
-
-{% block standalone_css %}patterns_chip{% endblock %}
-
-{% block content %}
-
- Short lead
- Short value
-
-
-
-
-
- Short value + dismiss button
-
-
-
-
-
-
- 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
-
-
-
-
-
- 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
-
-
-
-
-{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/chip/variants.html b/vanilla/templates/docs/examples/patterns/chip/variants.html
deleted file mode 100644
index b39a94a..0000000
--- a/vanilla/templates/docs/examples/patterns/chip/variants.html
+++ /dev/null
@@ -1,731 +0,0 @@
-{% extends"_layouts/examples.html" %}
-{% block title %}Chip / Variants{% endblock %}
-
-{% block standalone_css %}patterns_chip{% endblock %}
-
-{% block content %}
-
-
-
- 21.10
-
-
-
-
-
-
- Owner
- Bob
-
-
-
-
-
-
-
-
- 21.10
-
-
-
-
-
-
- Owner
- Bob
-
-
-
-
-
-
-
-
- 21.10
-
-
-
-
-
-
- Owner
- Bob
-
-
-
-
-
-
-
-
- 21.10
-
-
-
-
-
-
- Owner
- Bob
-
-
-
-
-
-
-
-
- 21.10
-
-
-
-
-
-
- Owner
- Bob
-
-
-
-
-
-
-
-
- 21.10
-
-
-
-
-
-
- Owner
- Bob
-
-
-
-
-
-
-
-
- 21.10
-
-
-
-
-
-
- Owner
- Bob
-
-
-
-
-
-
-
-
- 21.10
-
-
-
-
-
-
- Owner
- Bob
-
-
-
-
-
-
-
-
- 21.10
-
-
-
-
-
-
- Owner
- Bob
-
-
-
-
-
-
-
-
- 21.10
-
-
-
-
-
-
- Owner
- Bob
-
-
-
-
-
-
-
-
-
-
- 21.10
-
-
-
-
- 21.10
-
-
-
-
-
-
-
-
- Owner
- Bob
-
-
-
-
- Owner
- Bob
-
-
-
-
-
-
npm install --save-dev vanilla-framework
-export SASS_PATH=`pwd`/node_modules:${SASS_PATH}
-
-// Add to your main build scss file the following line
-@import'vanilla-framework'
git commit -a -m "This is an example git commit message to demonstrate the wrapping of pre elements in the code snippet"
-
-
-
-
-
With .is-wrapped applied
-
-
-
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
deleted file mode 100644
index 378bf71..0000000
--- a/vanilla/templates/docs/examples/patterns/contextual-menu/_script.js
+++ /dev/null
@@ -1,87 +0,0 @@
-/**
- 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
deleted file mode 100644
index 6d5229f..0000000
--- a/vanilla/templates/docs/examples/patterns/contextual-menu/dark.html
+++ /dev/null
@@ -1,71 +0,0 @@
-{% extends "_layouts/examples.html" %}
-{% block title %}Contextual menu / Dark{% endblock %}
-
-{% block standalone_css %}patterns_contextual-menu{% endblock %}
-
-{% set is_dark = True %}
-{% block content %}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
A few months ago, the OpenSSL Project announced the end of life of OpenSSL
- 1.1.1. It is used by thousands of software components included in Ubuntu 18.04 LTS and Ubuntu 20.04 LTS, with
- many organisations relying on version 1.1.1....
If you've been following my previous blog posts, you already know that
- the automotive industry is changing faster than ever. Updating software and firmware in vehicles is one area
- that's particularly challenging and in flux....
Today, around 96% of software projects utilize open source in some way. The
- web team here at Canonical is passionate about Open source. We lead with an open-by-default approach and so
- almost everything we do and work on can be found publicly on the Canonical Github org.
-
-{% 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
deleted file mode 100644
index 1f04610..0000000
--- a/vanilla/templates/docs/examples/patterns/equal-height-row/4-items-per-column.html
+++ /dev/null
@@ -1,100 +0,0 @@
-{% 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.
-
- Enjoy reliable, remotely accessible and recoverable devices which are always
- up-to-date with mission-critical OTA updates. In connected or air-gap environments.
-
- 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.
-
diff --git a/vanilla/templates/docs/examples/patterns/forms/_checkbox.html b/vanilla/templates/docs/examples/patterns/forms/_checkbox.html
deleted file mode 100644
index 69c802f..0000000
--- a/vanilla/templates/docs/examples/patterns/forms/_checkbox.html
+++ /dev/null
@@ -1,19 +0,0 @@
-
-
-
-
-
-
-
diff --git a/vanilla/templates/docs/examples/patterns/forms/_form-stacked.html b/vanilla/templates/docs/examples/patterns/forms/_form-stacked.html
deleted file mode 100644
index 7c25662..0000000
--- a/vanilla/templates/docs/examples/patterns/forms/_form-stacked.html
+++ /dev/null
@@ -1,71 +0,0 @@
-
diff --git a/vanilla/templates/docs/examples/patterns/forms/_indeterminate_script.js b/vanilla/templates/docs/examples/patterns/forms/_indeterminate_script.js
deleted file mode 100644
index f288b90..0000000
--- a/vanilla/templates/docs/examples/patterns/forms/_indeterminate_script.js
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- 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
deleted file mode 100644
index d29d04e..0000000
--- a/vanilla/templates/docs/examples/patterns/forms/_radio-heading.html
+++ /dev/null
@@ -1,27 +0,0 @@
-
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.
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.
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.
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
deleted file mode 100644
index 5e7a4ba..0000000
--- a/vanilla/templates/docs/examples/patterns/lists/list.html
+++ /dev/null
@@ -1,12 +0,0 @@
-{% extends "_layouts/examples.html" %}
-{% block title %}Lists / Default{% endblock %}
-
-{% block standalone_css %}patterns_lists{% endblock %}
-
-{% block content %}
-
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.
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
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.
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.
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.
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.
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.
- 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
-
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.
Ubuntu was powering everything from autonomous cars to workstations to inference at the edge, supporting organizations in their AI and data science journeys as they create the intelligent systems that are transforming the world as we know it.
-
-
- Date: 18 - 21 March 2019
-
-
- Venue: San Jose McEnery Convention Center
-
-
- Location: Silicon Valley, CA
-
-
-
-
-{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/modal/_script.js b/vanilla/templates/docs/examples/patterns/modal/_script.js
deleted file mode 100644
index 386814c..0000000
--- a/vanilla/templates/docs/examples/patterns/modal/_script.js
+++ /dev/null
@@ -1,119 +0,0 @@
-// 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
deleted file mode 100644
index 835034a..0000000
--- a/vanilla/templates/docs/examples/patterns/modal/default.html
+++ /dev/null
@@ -1,32 +0,0 @@
-{% extends "_layouts/examples.html" %}
-{% block title %}Modal / Default{% endblock %}
-
-{% block standalone_css %}patterns_modal{% endblock %}
-
-{% block content %}
-
-
-
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.
-
-
-
-
-
-
-
Help
-
-
-
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 %}
-
-{% 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
deleted file mode 100644
index 0c57fee..0000000
--- a/vanilla/templates/docs/examples/patterns/notifications/_variants.html
+++ /dev/null
@@ -1,203 +0,0 @@
-
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.
-
-
-
-
-
-
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.
-
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.
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
-
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
-
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.
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.
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.
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.
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.
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.
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.
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.
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.
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:
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.
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!
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.
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.
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
deleted file mode 100644
index 4cec0d0..0000000
--- a/vanilla/templates/docs/examples/patterns/table-of-contents/default.html
+++ /dev/null
@@ -1,25 +0,0 @@
-{% 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
deleted file mode 100644
index baf44ad..0000000
--- a/vanilla/templates/docs/examples/patterns/table-of-contents/sections.html
+++ /dev/null
@@ -1,35 +0,0 @@
-{% 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
deleted file mode 100644
index e014ce7..0000000
--- a/vanilla/templates/docs/examples/patterns/tables/_script-expanding.js
+++ /dev/null
@@ -1,47 +0,0 @@
-/**
- 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
deleted file mode 100644
index 203ac17..0000000
--- a/vanilla/templates/docs/examples/patterns/tables/_script-sorting.js
+++ /dev/null
@@ -1,99 +0,0 @@
-/**
- * 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
deleted file mode 100644
index 8fd4628..0000000
--- a/vanilla/templates/docs/examples/patterns/tables/_table-mobile-card.html
+++ /dev/null
@@ -1,130 +0,0 @@
-
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
deleted file mode 100644
index a8f211f..0000000
--- a/vanilla/templates/docs/examples/patterns/tables/table-sortable-dark.html
+++ /dev/null
@@ -1,14 +0,0 @@
-{% 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
deleted file mode 100644
index 3cc61b6..0000000
--- a/vanilla/templates/docs/examples/patterns/tables/table-sortable.html
+++ /dev/null
@@ -1,13 +0,0 @@
-{% 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
deleted file mode 100644
index f2c6eea..0000000
--- a/vanilla/templates/docs/examples/patterns/tabs/_script.js
+++ /dev/null
@@ -1,99 +0,0 @@
-(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
deleted file mode 100644
index 262e54d..0000000
--- a/vanilla/templates/docs/examples/patterns/tabs/content-dark.html
+++ /dev/null
@@ -1,58 +0,0 @@
-{% extends "_layouts/examples.html" %}
-{% block title %}Tabs / Tabbed Content Dark{% endblock %}
-
-{% block standalone_css %}patterns_tabs{% endblock %}
-
-{% set is_dark = true %}
-{% 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.
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.
- 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.
-
- 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.
-
- 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).
-
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)
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).
-
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.
<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>
-
-
-
-
-
-
-
-
-
[](https://snapcraft.io/my-awesome-snap)
<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>
-
-
-
-
-
-
-
-
-
[](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.
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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
muted
-
-
-
para
-
-
-
h5
-
-
-
h6
-
-
-
h4
-
-
-
h3
-
-
-
h2
-
-
-
h1
-
-
-
-
-
-
-
h1
-
-
-
-
h1
-
-
-
-
h1
-
-
-
-
h1
-
-
-
-
h1
-
-
-
-
h1
-
muted
-
-
-
h1
-
para
-
-
-
h1
-
h5
-
-
-
h1
-
h6
-
-
-
h1
-
h4
-
-
-
h1
-
h3
-
-
-
h1
-
h2
-
-
-
h1
-
h1
-
-
-
-
-
-
-
h2
-
-
-
-
h2
-
-
-
-
h2
-
-
-
-
h2
-
-
-
-
h2
-
-
-
-
h2
-
muted
-
-
-
h2
-
para
-
-
-
h2
-
h5
-
-
-
h2
-
h6
-
-
-
h2
-
h4
-
-
-
h2
-
h3
-
-
-
h2
-
h2
-
-
-
h2
-
h1
-
-
-
-
-
-
-
h3
-
-
-
-
h3
-
-
-
-
h3
-
-
-
-
h3
-
-
-
-
h3
-
-
-
-
h3
-
muted
-
-
-
h3
-
para
-
-
-
h3
-
h5
-
-
-
h3
-
h6
-
-
-
h3
-
h4
-
-
-
h3
-
h3
-
-
-
h3
-
h2
-
-
-
h3
-
h1
-
-
-
-
-
-
-
h4
-
-
-
-
h4
-
-
-
-
h4
-
-
-
-
h4
-
-
-
-
h4
-
-
-
-
h4
-
muted
-
-
-
h4
-
para
-
-
-
h4
-
h5
-
-
-
h4
-
h6
-
-
-
h4
-
h4
-
-
-
h4
-
h3
-
-
-
h4
-
h2
-
-
-
h4
-
h1
-
-
-
-
-
-
-
h5
-
-
-
-
h5
-
-
-
-
h5
-
-
-
-
h5
-
-
-
-
h5
-
-
-
-
h5
-
muted
-
-
-
h5
-
para
-
-
-
h5
-
h5
-
-
-
h5
-
h6
-
-
-
h5
-
h4
-
-
-
h5
-
h3
-
-
-
h5
-
h2
-
-
-
h5
-
h1
-
-
-
-
-
-
-
Muted
-
-
-
-
Muted
-
-
-
-
Muted
-
-
-
-
Muted
-
-
-
-
Muted
-
-
-
-
Muted
-
muted
-
-
-
Muted
-
para
-
-
-
Muted
-
h5
-
-
-
Muted
-
h6
-
-
-
Muted
-
h4
-
-
-
Muted
-
h3
-
-
-
Muted
-
h2
-
-
-
Muted
-
h1
-
-
-
-
-
-
-
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.
-
-
-
-
H6
-
-
Title
-
-
-
-
P
-
-
Title
-
-
-
-
-
-
-
-
-
-
-
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.
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.
-
-
-
-
-
-
-
-
-
-
-
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.
-
-
-
-
-
-
-
-
-
-
-
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.
-
-
-
-
-
-
-
-
-
-
-
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.
-
-
-
-
-
-
-
-
-
-
-
This is a paragraph
-
-
-
-
-
This is a paragraph
-
-
-
-
This is a paragraph
-
-
-
-
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 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
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
deleted file mode 100644
index e35ad2e..0000000
--- a/vanilla/templates/docs/examples/utilities/text-max-width-divided.html
+++ /dev/null
@@ -1,19 +0,0 @@
-{% 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
deleted file mode 100644
index 923ad45..0000000
--- a/vanilla/templates/docs/examples/utilities/text-max-width.html
+++ /dev/null
@@ -1,19 +0,0 @@
-{% 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
deleted file mode 100644
index 5649a97..0000000
--- a/vanilla/templates/docs/examples/utilities/text-with-icon.html
+++ /dev/null
@@ -1,6 +0,0 @@
-{% extends "_layouts/examples.html" %}
-{% block title %}Text / With icon{% endblock %}
-
-{% block content %}
-Done
-{% endblock %}
diff --git a/vanilla/templates/docs/examples/utilities/truncate.html b/vanilla/templates/docs/examples/utilities/truncate.html
deleted file mode 100644
index 6226df2..0000000
--- a/vanilla/templates/docs/examples/utilities/truncate.html
+++ /dev/null
@@ -1,44 +0,0 @@
-{% 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.
-
-## Reduced motion
-
-Vanilla implements the [prefers-reduced-motion CSS media feature](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) so that - in supported browsers and operating systems - users with an accessibility need or preference see reduced animation applied to page elements.
-
-Currently, Vanilla's implementation of this feature is a simple media query where both animations and transitions are set to `none !important` for all HTML elements. Nothing needs to be done to use this feature in your pages but we encourage using animations and transitions in a progressive manner so that your web sites and applications are usable without animations being present.
-
-## Usage
-
-Animations are preset to components. Components can be modified or extended to
-include animation by including the animation mixin.
-
-The format is as follows:
-
-```scss
-@include vf-transition(PROPERTY, DURATION, EASING);
-```
-
-
-
- Note:
- The list of valid DURATION and EASING options are shown in the duration and easing sections of the documentation.
-
-
-
-A valid use could be, for example:
-
-```scss
-@include vf-transition(height, brisk, out);
-```
-
-If you require multiple properties then the list must be interpolated as shown in the following example:
-
-```scss
-@include vf-transition(#{height, width}, brisk, out);
-```
-
-Deprecated
-Previously used `vf-animation` mixin has been deprecated in 3.7.0 and will be removed in future versions of Vanilla. Please use `vf-transition` instead.
diff --git a/vanilla/templates/docs/settings/assets-settings/index.md b/vanilla/templates/docs/settings/assets-settings/index.md
deleted file mode 100644
index b234882..0000000
--- a/vanilla/templates/docs/settings/assets-settings/index.md
+++ /dev/null
@@ -1,11 +0,0 @@
----
-wrapper_template: '_layouts/docs.html'
-context:
- title: Assets | Settings
----
-
-Assets might include images, icons or font files. If you wish to load these via a content delivery network (CDN), you can specify the CDN host using this variable.
-
-| Setting | Default value |
-| -------------- | ----------------------------- |
-| `$assets-path` | https://assets.ubuntu.com/v1/ |
diff --git a/vanilla/templates/docs/settings/breakpoint-settings/index.md b/vanilla/templates/docs/settings/breakpoint-settings/index.md
deleted file mode 100644
index c5e54a6..0000000
--- a/vanilla/templates/docs/settings/breakpoint-settings/index.md
+++ /dev/null
@@ -1,62 +0,0 @@
----
-wrapper_template: '_layouts/docs.html'
-context:
- title: Breakpoints | Settings
----
-
-Vanilla uses three main breakpoints for screen sizes, below you can see the setting, default width and device examples at which the content will scale.
-
-| Setting | Default value | Device example |
-| ---------------------------------- | ------------------- | ----------------- |
-| `$breakpoint-x-small` | `460px` | Mobile (portrait) |
-| `$breakpoint-small` | `620px` | Mobile or tablet |
-| `$breakpoint-large` | `1036px` | Desktop |
-| `$breakpoint-x-large` | `1681px` | Large desktop |
-| `$breakpoint-navigation-threshold` | `$breakpoint-large` | Desktop |
-| `$breakpoint-heading-threshold` | `$breakpoint-large` | Desktop |
-
-
-
-## Target small screens
-
-```css
-@media screen and (max-width: $breakpoint-small - 1) {
- // css
-}
-```
-
-## Target medium size screens
-
-```css
-@media screen and (min-width: $breakpoint-small) and (max-width: $breakpoint-large - 1) {
- // css
-}
-```
-
-## Target large screens
-
-```css
-@media screen and (min-width: $breakpoint-large) {
- //css
-}
-```
-
-## Target extra large screens
-
-```css
-@media screen and (min-width: $breakpoint-x-large) {
- //css
-}
-```
-
-## Modifying the navigation breakpoint threshold
-
-The `$breakpoint-navigation-threshold` is the breakpoint in which the navigation switches from horizontal (desktop devices) navigation to a burger style menu (mobile devices).
-
-
-
-If you have a large number of menu items, you may consider overriding this value to a larger value so the navigation snaps to a burger menu at a larger breakpoint.
-
-## Modifying the heading breakpoint threshold
-
-`$breakpoint-heading-threshold` is the breakpoint in which the heading sizes switch from a 1:2 modular scale ratio (desktop devices) to a 2:3 ratio (mobile devices).
diff --git a/vanilla/templates/docs/settings/color-settings/index.md b/vanilla/templates/docs/settings/color-settings/index.md
deleted file mode 100644
index f0df131..0000000
--- a/vanilla/templates/docs/settings/color-settings/index.md
+++ /dev/null
@@ -1,170 +0,0 @@
----
-wrapper_template: '_layouts/docs.html'
-context:
- title: Color | Settings
----
-
-These guidelines are the framework upon which we have built our system for how color is used in Vanilla, we use a fairly neutral color palette along with a traffic light palette.
-
-
-
-
-
-
- $color-x-light #fff
-
-
-
-
-
- $color-light #f7f7f7
-
-
-
-
-
- $color-mid-x-light #e5e5e5
-
-
-
-
-
- $color-mid-light #d9d9d9
-
-
-
-
-
-
-
- $color-mid-dark #666
-
-
-
-
-
- $color-dark #111
-
-
-
-
-
- $color-x-dark #000
-
-
-
-
-
- $color-brand #e95420
-
-
-
-
-
-
-
- $color-negative #c7162b
-
-
-
-
-
- $color-caution #f99b11
-
-
-
-
-
- $color-positive #0e8420
-
-
-
-
-
- $color-information #24598f
-
-
-
-
-
-
-
- $color-link #06c
-
-
-
-
-
- $color-accent #0f95a1
-
-
-
-
-
-## Accessibility
-
-It’s important for us to meet all web accessibility standards. Vanilla encourages meeting the minimum contrast ratios specified by WCAG 2.1 Level AA for text, icons and background colors.
-
-
-
-
-
-
-
Do:
- Use a minimum contrast ratio of 4.5 for normal text and UI components.
-
-
-
-
-
-
-
-
-
Don't:
- Use low-contrast text and background combinations.
-
-
-
-
-
-
-
-## Color theming
-
-Starting with the [2.3.0](https://github.com/canonical/vanilla-framework/releases/tag/v2.3.0) release, Vanilla framework introduces a theming mechanism. The current default for all components is referred to as the light theme. A subset of elements and components now offer a dark theme:
-
-- [Checkbox](/docs/base/forms#checkbox) and [radio](/docs/base/forms#radio-button) form inputs
-- Horizontal rule element ``
-- [Contextual menu](/docs/patterns/contextual-menu)
-- [Lists / Divider](/docs/patterns/lists#responsive-divider)
-- [Lists / Middot](/docs/patterns/lists#middot)
-- [Navigation](/docs/patterns/navigation)
-- [Side navigation](/docs/patterns/navigation#side-navigation)
-- [Search box](/docs/patterns/search-box)
-
-### Setting the default color theme per element / component
-
-
-
-
Deprecated
- Setting default theme via SCSS variables is now deprecated. Use is-dark or is-light class names in HTML instead.
-
-
-
-| Element / Component | Variable | Default value |
-| ------------------- | -------------------------------------- | ------------- |
-| checkbox | `$theme-default-forms` | `light` |
-| radio | `$theme-default-forms` | `light` |
-| hr | `$theme-default-hr` | `light` |
-| Contextual menu | `$theme-default-p-contextual-menu` | `light` |
-| Lists / Divider | `$theme-default-p-divider` | `light` |
-| Lists / Middot | `$theme-default-p-inline-list--middot` | `light` |
-| Navigation | `$theme-default-nav` | `light` |
-| Side navigation | `$theme-default-p-side-navigation` | `light` |
-| Search box | `$theme-default-p-search-box` | `light` |
-
-The `_settings_themes.scss` file contains a list of variables that used to define the default theme for a subset of elements and components. Starting with Vanilla 4.8.0 this type of theming is deprecated.
-
-With new theming mechanism based on CSS custom properties, the default theme for all components remains light. To change the theme of given element and all its children, add `is-dark` or `is-light` class to it.
-
-Future releases will expand this list to include all elements and components.
diff --git a/vanilla/templates/docs/settings/font-settings/index.md b/vanilla/templates/docs/settings/font-settings/index.md
deleted file mode 100644
index 45b77de..0000000
--- a/vanilla/templates/docs/settings/font-settings/index.md
+++ /dev/null
@@ -1,37 +0,0 @@
----
-wrapper_template: '_layouts/docs.html'
-context:
- title: Font | Settings
----
-
-Vanilla uses the Ubuntu font family by default, but you can specify any other font family to better suit your project.
-
-All Ubuntu sites and applications should use the Ubuntu font, as it has been specially created to complement the Ubuntu tone of voice. It has a contemporary style and contains characteristics unique to the Ubuntu brand that convey a precise, reliable and free attitude.
-
-[Read more about the Ubuntu typeface](http://font.ubuntu.com/)
-
-| Setting | Default value |
-| ---------------------- | ----------------------------------------------------- |
-| `$font-base-family` | 'Ubuntu, Arial, "libra sans", sans-serif' |
-| `$font-monospace` | '"Ubuntu Mono", Consolas, Monaco, Courier, monospace' |
-| `$font-base-size` | `1rem` |
-| `$font-heading-family` | `$font-base-family` |
-
-## Font weight
-
-Vanilla uses three font weight settings in tandem with the Ubuntu font, which can be overridden to suit your needs:
-
-| Setting | Default value | Notes |
-| ------------------------------ | ------------- | ----------------------------------------------------------------------- |
-| `$font-weight-display-heading` | `100` | This lighter font weight is used by `h1`, `h2` and `h3` elements which |
-| `$font-weight-regular-text` | `400` | Vanilla's default font-weight |
-| `$font-weight-bold` | `550` | Most often used on elements with very small text to make them stand out |
-
-
-
-
-## Related
-
-- [Base typography](/docs/base/typography)
-- [Code](/docs/base/code)
-- [Pull quote pattern](/docs/patterns/pull-quote)
diff --git a/vanilla/templates/docs/settings/layout-settings/index.md b/vanilla/templates/docs/settings/layout-settings/index.md
deleted file mode 100644
index efee683..0000000
--- a/vanilla/templates/docs/settings/layout-settings/index.md
+++ /dev/null
@@ -1,23 +0,0 @@
----
-wrapper_template: '_layouts/docs.html'
-context:
- title: Layout | Settings
----
-
-These settings are used specifically to configure the grid which will determine your overall site layout. Patterns placed within the grid structure will then adapt to fill the space available to them.
-
-| Setting | Default value |
-| -------------------- | ------------- |
-| `$grid-gutter-width` | `20px` |
-| `$grid-columns` | `12` |
-| `$grid-max-width` | `1030px` |
-
-## Import
-
-To import just this utility into your project, copy the snippet below and include it in your main Sass file.
-
-```scss
-@import 'utilities_layout';
-```
-
-For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
diff --git a/vanilla/templates/docs/settings/placeholder-settings/index.md b/vanilla/templates/docs/settings/placeholder-settings/index.md
deleted file mode 100644
index 09c5629..0000000
--- a/vanilla/templates/docs/settings/placeholder-settings/index.md
+++ /dev/null
@@ -1,43 +0,0 @@
----
-wrapper_template: '_layouts/docs.html'
-context:
- title: Placeholders | Settings
----
-
-Vanilla uses several global placeholders to share common styles between components. These placeholders can be edited via the following placeholder variables, assuming a `$sp-unit` of `0.5rem`.
-
-
Deprecated This variable should not be used or modified, it will be removed in future version of Vanilla.
-
-
-
-
-## Related
-
-- [Spacing settings](/docs/settings/spacing-settings)
diff --git a/vanilla/templates/docs/settings/spacing-settings/index.md b/vanilla/templates/docs/settings/spacing-settings/index.md
deleted file mode 100644
index 333920f..0000000
--- a/vanilla/templates/docs/settings/spacing-settings/index.md
+++ /dev/null
@@ -1,89 +0,0 @@
----
-wrapper_template: '_layouts/docs.html'
-context:
- title: Spacing | Settings
----
-
-Spacing in Vanilla is controlled via a set of variables. There are two kinds of variables - nudges, which keep text aligned to the baseline grid, and multiples of the spacing unit, which define vertical and horizontal spacing.
-
-## The baseline grid
-
-Everything in Vanilla adheres to a `.5rem` baseline grid. This is achieved by ensuring that:
-
-- text baselines are "nudged" until they fall precisely on the grid
-- any margin, padding or other positioning happens in multiples of the baseline grid spacing unit.
-
-## Nudges
-
-Nudges apply `padding-top` to text elements to ensure the text's baseline coincides with the baseline grid.
-CSS does not allow access to the font metrics embedded in each font, so the precise nudge amount is empirically measured and kept in a `scss` map called `$nudges` in the `_settings_spacing.scss` file.
-The nudge amount depends on two things - the `font-size` and the `line-height` of a piece of text. This means that elements that share the same `font-size` and `line-height` use the same nudge amounts.
-It also means that, if you change the `font-size` or `line-height` of an element on different breakpoints, you need to adjust the nudge for that breakpoint too.
-
-
-## The spacing unit
-
-Apart from nudges, all other spacing variables in Vanilla are multiples (or fractions) of the spacing unit. The value of the spacing unit is `.5rem` (`8px`).
-
-
-
-The example above shows headings sitting on the baseline grid, where the space between each red line is one `$sp-unit`.
-
-## Vertical spacing
-
-Variables starting with `$spv--` are used to denote vertical spacing.
-
-| Spacing variable | Formula | Default value |
-| --------------------- | ---------------- | ------------- |
-| `$spv--x-small` | `$sp-unit * 0.5` | `0.25rem` |
-| `$spv--small` | `$sp-unit` | `0.5rem` |
-| `$spv--medium` | `$sp-unit * 1.5` | `0.75rem` |
-| `$spv--large` | `$sp-unit * 2` | `1rem` |
-| `$spv--x-large` | `$sp-unit * 3` | `1.5rem` |
-| `$spv--strip-regular` | `$sp-unit * 8` | `4rem` |
-| `$spv--strip-deep` | `$sp-unit * 12` | `6rem` |
-
-The last 2 variables are used for strips only, which is why they follow the strip component naming.
-
-
-
-## Horizontal spacing
-
-The variables controlling horizontal spacing are much fewer, as the grid handles more complex scenarios. The table below shows the variables currently in use.
-
-| Spacing variable | Formula | Default value |
-| ---------------- | -------------- | ------------- |
-| `$sph--small` | `$sp-unit` | `0.5rem` |
-| `$sph--large` | `$sp-unit * 2` | `1rem` |
-| `$sph--x-large` | `$sp-unit * 3` | `1.5rem` |
-
-
-
-## Generic units
-
-There are also generic spacing units for backwards compatibility with components created with Vanilla before `v1.7.0`.
-
-| Spacing variable | Formula | Default value |
-| ----------------- | ----------------- | ------------- |
-| `$sp-xx-small` | `$sp-unit * 0.25` | `0.125rem` |
-| `$sp-x-small` | `$sp-unit * 0.5` | `0.25rem` |
-| `$sp-small` | `$sp-unit` | `0.5rem` |
-| `$sp-medium` | `$sp-unit * 2` | `1rem` |
-| `$sp-large` | `$sp-unit * 3` | `1.5rem` |
-| `$sp-x-large` | `$sp-unit * 4` | `2rem` |
-| `$sp-xx-large` | `$sp-unit * 5` | `2.5rem` |
-| `$sp-xxx-large` | `$sp-unit * 6` | `3rem` |
-| `$sp-xxxx-large` | `$sp-unit * 8` | `4rem` |
-| `$sp-xxxxx-large` | `$sp-unit * 12` | `6rem` |
-
-## Import
-
-To import just this utility into your project, copy the snippet below and include it in your main Sass file.
-
-```scss
-@import 'utilities_vertical-spacing';
-```
-
-For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
diff --git a/vanilla/templates/docs/settings/table-layout/index.md b/vanilla/templates/docs/settings/table-layout/index.md
deleted file mode 100644
index ea49952..0000000
--- a/vanilla/templates/docs/settings/table-layout/index.md
+++ /dev/null
@@ -1,14 +0,0 @@
----
-wrapper_template: '_layouts/docs.html'
-context:
- title: Table layout | Settings
----
-
-By default, tables in Vanilla use `table-layout: fixed`.
-
-There are cases where you might want to use `table-layout: auto` - e.g. in automatically generated tables. To do this, you need to set the `$table-layout-fixed` variable to `true`.
-
-Depending on the value of `$table-layout-fixed`, a utility class is generated to allow overriding if necessary:
-
-- If `$table-layout-fixed` is set to `true` (the default), you can use `u-table-layout--auto` to override it.
-- if `$table-layout-fixed` is set to `auto` it adds a utility called `u-table-layout--fixed`.
diff --git a/vanilla/templates/docs/utilities/align.md b/vanilla/templates/docs/utilities/align.md
deleted file mode 100644
index 834a4c8..0000000
--- a/vanilla/templates/docs/utilities/align.md
+++ /dev/null
@@ -1,36 +0,0 @@
----
-wrapper_template: '_layouts/docs.html'
-context:
- title: Align | Utilities
----
-
-## Content
-
-When you need to align elements within a container, you can use the `u-align` utilities to force them to align center, left or right.
-
-
-
-## Import
-
-To import just this utility into your project, copy the snippet below and include it in your main Sass file.
-
-```scss
-// import Vanilla and include base mixins
-// this only needs to happen once in a given project
-@import 'vanilla-framework';
-@include vf-base;
-
-@include vf-u-align;
-```
-
-For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
diff --git a/vanilla/templates/docs/utilities/baseline-grid.md b/vanilla/templates/docs/utilities/baseline-grid.md
deleted file mode 100644
index c97f171..0000000
--- a/vanilla/templates/docs/utilities/baseline-grid.md
+++ /dev/null
@@ -1,26 +0,0 @@
----
-wrapper_template: '_layouts/docs.html'
-context:
- title: Font metrics | Utilities
----
-
-You can apply this utility to an element (such as ``) to visualise the `.5rem` baseline grid to which text elements adhere.
-
-
-
-## Import
-
-To import just this utility into your project, copy the snippet below and include it in your main Sass file.
-
-```scss
-// import Vanilla and include base mixins
-// this only needs to happen once in a given project
-@import 'vanilla-framework';
-@include vf-base;
-
-@include vf-u-baseline-grid;
-```
-
-For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
diff --git a/vanilla/templates/docs/utilities/clearfix.md b/vanilla/templates/docs/utilities/clearfix.md
deleted file mode 100644
index c117611..0000000
--- a/vanilla/templates/docs/utilities/clearfix.md
+++ /dev/null
@@ -1,30 +0,0 @@
----
-wrapper_template: '_layouts/docs.html'
-context:
- title: Clearfix | Utilities
----
-
-A clearfix is a way for an element to automatically clear its child elements, so that you don't need to add additional markup. It's generally used in float layouts where elements are floated to be stacked horizontally.
-
-The clearfix is a way to combat the zero-height container problem for floated elements.
-
-In the example below, the parent wrapping container does not collapse even though it's only two children are floated.
-
-
-
-## Import
-
-To import just this utility into your project, copy the snippet below and include it in your main Sass file.
-
-```scss
-// import Vanilla and include base mixins
-// this only needs to happen once in a given project
-@import 'vanilla-framework';
-@include vf-base;
-
-@include vf-u-clearfix;
-```
-
-For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
diff --git a/vanilla/templates/docs/utilities/embedded-media.md b/vanilla/templates/docs/utilities/embedded-media.md
deleted file mode 100644
index 4a9e47c..0000000
--- a/vanilla/templates/docs/utilities/embedded-media.md
+++ /dev/null
@@ -1,26 +0,0 @@
----
-wrapper_template: '_layouts/docs.html'
-context:
- title: Embedded media | Utilities
----
-
-Embed media objects such as videos, maps and calendars.
-
-
-
-## Import
-
-To import just this utility into your project, copy the snippet below and include it in your main Sass file.
-
-```scss
-// import Vanilla and include base mixins
-// this only needs to happen once in a given project
-@import 'vanilla-framework';
-@include vf-base;
-
-@include vf-u-embedded-media;
-```
-
-For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
diff --git a/vanilla/templates/docs/utilities/equal-height.md b/vanilla/templates/docs/utilities/equal-height.md
deleted file mode 100644
index 3a5dbba..0000000
--- a/vanilla/templates/docs/utilities/equal-height.md
+++ /dev/null
@@ -1,26 +0,0 @@
----
-wrapper_template: '_layouts/docs.html'
-context:
- title: Equal height | Utilities
----
-
-To ensure two or more elements have an equal height regardless of their content, add the class `.u-equal-height` to their wrapping parent element.
-
-
-
-## Import
-
-To import just this utility into your project, copy the snippet below and include it in your main Sass file.
-
-```scss
-// import Vanilla and include base mixins
-// this only needs to happen once in a given project
-@import 'vanilla-framework';
-@include vf-base;
-
-@include vf-u-equal-height;
-```
-
-For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
diff --git a/vanilla/templates/docs/utilities/floats.md b/vanilla/templates/docs/utilities/floats.md
deleted file mode 100644
index 44bdaf8..0000000
--- a/vanilla/templates/docs/utilities/floats.md
+++ /dev/null
@@ -1,55 +0,0 @@
----
-wrapper_template: '_layouts/docs.html'
-context:
- title: Floats | Utilities
----
-
-The float utilities allow you to float an element left or right.
-
-## All screens
-
-You can use the following to float an element on left or right on all screen
-sizes.
-
-
-
-## Import
-
-To import just this utility into your project, copy the snippet below and include it in your main Sass file.
-
-```scss
-// import Vanilla and include base mixins
-// this only needs to happen once in a given project
-@import 'vanilla-framework';
-@include vf-base;
-
-@include vf-u-floats;
-```
-
-For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
diff --git a/vanilla/templates/docs/utilities/font-metrics.md b/vanilla/templates/docs/utilities/font-metrics.md
deleted file mode 100644
index 71e5f9d..0000000
--- a/vanilla/templates/docs/utilities/font-metrics.md
+++ /dev/null
@@ -1,34 +0,0 @@
----
-wrapper_template: '_layouts/docs.html'
-context:
- title: Font metrics | Utilities
----
-
-Being able to visualise the baseline position, cap-height and x-height of a typeface can be helpful, for example when trying to precisely align inline-block elements (like icons) to text.
-
-These properties are not directly accessible via css, but can be obtained from font-editing software like FontForge. The values are stored in `_settings_font.scss` (the defaults apply to the Ubuntu font family). If you want to use this utility with another font, you will need to change the default values to match your font.
-
-
-
-## Import
-
-To import just this utility into your project, copy the snippet below and include it in your main Sass file.
-
-```scss
-// import Vanilla and include base mixins
-// this only needs to happen once in a given project
-@import 'vanilla-framework';
-@include vf-base;
-
-@include vf-u-visualise-baseline($horisontal-bleed: 2rem);
-```
-
-Then insert a `span` with class `u-visualise-font-metrics` in a heading, paragraph or button.
-
-The `$horisontal-bleed` variable (default value `2rem`) makes the lines protrude on either side of the element, in order to help align adjacent elements. To remove the bleed, use `@include vf-u-visualise-baseline(0)`.
-
-For more information on font metrics, this blog post gives a good overview.
-
-For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
diff --git a/vanilla/templates/docs/utilities/functions.md b/vanilla/templates/docs/utilities/functions.md
deleted file mode 100644
index e8d5869..0000000
--- a/vanilla/templates/docs/utilities/functions.md
+++ /dev/null
@@ -1,111 +0,0 @@
----
-wrapper_template: '_layouts/docs.html'
-context:
- title: Functions | Utilities
----
-
-Vanilla has several global functions used across multiple components or utilities, which can be also be used when building custom components.
-
-## URL-friendly color
-
-This function is used to inject Vanilla color variables into inline vector graphics by converting all `#` with the HTML encoded `%23`.
-
-```scss
-@function vf-url-friendly-color($color) {
- @if type-of($color) != 'color' {
- @warn '#{$color} is not a color.';
- @return $color;
- } @else {
- @return '%23' + str-slice('#{$color}', 2, -1);
- }
-}
-```
-
-## Determine text color
-
-This function tests the value of the background's colour and returns light or dark text accordingly.
-
-```scss
-@function vf-determine-text-color($background-color) {
- @if (lightness($background-color) > 50) {
- @return $colors--light-theme--text-default;
- } @else {
- @return $colors--dark-theme--text-default;
- }
-}
-```
-
-## Power function
-
-This function raises a given number to a given power.
-
-```scss
-@function pow($number, $exponent) {
- $value: 1;
-
- @if $exponent > 0 {
- @for $i from 1 through $exponent {
- $value: $value * $number;
- }
- } @else if $exponent < 0 {
- @for $i from 1 through -$exponent {
- $value: $value / $number;
- }
- }
-
- @return $value;
-}
-```
-
-## Highlight bar
-
-This function adds a `3px` thick, coloured bar to one side of a component (for example in Notification, Navigation and Tab components). The `$over-border` argument determines whether the bar sits on top of a component with borders.
-
-```scss
-@mixin vf-highlight-bar($bg-color: $color-mid-dark, $position: top, $over-border: false) {
- position: relative;
-
- &::before {
- #{$position}: 0;
- background-color: $bg-color;
- content: '';
- position: absolute;
- }
-
- @if $position == top or $position == bottom {
- &::before {
- height: $bar-thickness;
- width: auto;
-
- @if $over-border == true {
- left: -1px;
- right: -1px;
- z-index: 1;
- } @else {
- left: 0;
- right: 0;
- }
- }
- } @else if $position == left or $position == right {
- &::before {
- height: auto;
- width: $bar-thickness;
-
- @if $over-border == true {
- bottom: -1px;
- top: -1px;
- z-index: 1;
- } @else {
- bottom: 0;
- top: 0;
- }
- }
- }
-}
-```
-
-## Related
-
-- [Icons](/docs/patterns/icons)
-- [Strip](/docs/patterns/strip)
-- [Typography](/docs/base/typography)
diff --git a/vanilla/templates/docs/utilities/has-icon.md b/vanilla/templates/docs/utilities/has-icon.md
deleted file mode 100644
index 5570c12..0000000
--- a/vanilla/templates/docs/utilities/has-icon.md
+++ /dev/null
@@ -1,26 +0,0 @@
----
-wrapper_template: '_layouts/docs.html'
-context:
- title: Text with icon | Utilities
----
-
-To place an icon next to some text with correct spacing, use the class `u-has-icon` on the parent element.
-
-
-
-## Import
-
-To import just this utility into your project, copy the snippet below and include it in your main Sass file.
-
-```scss
-// import Vanilla and include base mixins
-// this only needs to happen once in a given project
-@import 'vanilla-framework';
-@include vf-base;
-
-@include vf-u-has-icon;
-```
-
-For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
diff --git a/vanilla/templates/docs/utilities/hide.md b/vanilla/templates/docs/utilities/hide.md
deleted file mode 100644
index 8d09e11..0000000
--- a/vanilla/templates/docs/utilities/hide.md
+++ /dev/null
@@ -1,30 +0,0 @@
----
-wrapper_template: '_layouts/docs.html'
-context:
- title: Hide | Utilities
----
-
-To hide an element from the user, use the class `u-hide`.
-
-## Viewports
-
-To hide only at a specific viewport, add `--small`, `--medium` or `--large` modifiers to the `u-hide` class.
-
-
-
-## Import
-
-To import just this utility into your project, copy the snippet below and include it in your main Sass file.
-
-```scss
-// import Vanilla and include base mixins
-// this only needs to happen once in a given project
-@import 'vanilla-framework';
-@include vf-base;
-
-@include vf-u-hide;
-```
-
-For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
diff --git a/vanilla/templates/docs/utilities/image-position.md b/vanilla/templates/docs/utilities/image-position.md
deleted file mode 100644
index 0d76799..0000000
--- a/vanilla/templates/docs/utilities/image-position.md
+++ /dev/null
@@ -1,79 +0,0 @@
----
-collection: utilities
-wrapper_template: '_layouts/docs.html'
-context:
- title: Image position | Utilities
----
-
-Image position is a utility to position an image within a parent container, in
-most cases it would be a strip.
-
-
-
- Note:
- This only affects medium and large screen sizes.
-
-
-## Import
-
-To import just this utility into your project, copy the snippet below and include it in your main Sass file.
-
-```scss
-// import Vanilla and include base mixins
-// this only needs to happen once in a given project
-@import 'vanilla-framework';
-@include vf-base;
-
-@include vf-u-image-position;
-```
-
-For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
diff --git a/vanilla/templates/docs/utilities/margin-collapse.md b/vanilla/templates/docs/utilities/margin-collapse.md
deleted file mode 100644
index 3026b40..0000000
--- a/vanilla/templates/docs/utilities/margin-collapse.md
+++ /dev/null
@@ -1,26 +0,0 @@
----
-wrapper_template: '_layouts/docs.html'
-context:
- title: Margin collapse | Utilities
----
-
-Remove one or more margins of an element.
-
-
-
-## Import
-
-To import just this utility into your project, copy the snippet below and include it in your main Sass file.
-
-```scss
-// import Vanilla and include base mixins
-// this only needs to happen once in a given project
-@import 'vanilla-framework';
-@include vf-base;
-
-@include vf-u-margin-collapse;
-```
-
-For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
diff --git a/vanilla/templates/docs/utilities/no-print.md b/vanilla/templates/docs/utilities/no-print.md
deleted file mode 100644
index 5109e33..0000000
--- a/vanilla/templates/docs/utilities/no-print.md
+++ /dev/null
@@ -1,29 +0,0 @@
----
-collection: utilities
-wrapper_template: '_layouts/docs.html'
-context:
- title: No print | Utilities
----
-
-Add the class `u-no-print` to elements you want to hide when the page is printed.
-
-Use your browser's print preview to see the following example working.
-
-
-
-## Import
-
-To import just this utility into your project, copy the snippet below and include it in your main Sass file.
-
-```scss
-// import Vanilla and include base mixins
-// this only needs to happen once in a given project
-@import 'vanilla-framework';
-@include vf-base;
-
-@include vf-u-no-print;
-```
-
-For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
diff --git a/vanilla/templates/docs/utilities/off-screen.md b/vanilla/templates/docs/utilities/off-screen.md
deleted file mode 100644
index d148978..0000000
--- a/vanilla/templates/docs/utilities/off-screen.md
+++ /dev/null
@@ -1,26 +0,0 @@
----
-wrapper_template: '_layouts/docs.html'
-context:
- title: Off screen | Utilities
----
-
-The `.u-off-screen` class will position an element out of the page flow and off-screen, while still making it available to screen readers.
-
-
-
-## Import
-
-To import just this utility into your project, copy the snippet below and include it in your main Sass file.
-
-```scss
-// import Vanilla and include base mixins
-// this only needs to happen once in a given project
-@import 'vanilla-framework';
-@include vf-base;
-
-@include vf-u-off-screen;
-```
-
-For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
diff --git a/vanilla/templates/docs/utilities/padding-collapse.md b/vanilla/templates/docs/utilities/padding-collapse.md
deleted file mode 100644
index b1083e2..0000000
--- a/vanilla/templates/docs/utilities/padding-collapse.md
+++ /dev/null
@@ -1,26 +0,0 @@
----
-wrapper_template: '_layouts/docs.html'
-context:
- title: Padding collapse | Utilities
----
-
-Remove one or more paddings on an element.
-
-
-
-## Import
-
-To import just this utility into your project, copy the snippet below and include it in your main Sass file.
-
-```scss
-// import Vanilla and include base mixins
-// this only needs to happen once in a given project
-@import 'vanilla-framework';
-@include vf-base;
-
-@include vf-u-padding-collapse;
-```
-
-For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
diff --git a/vanilla/templates/docs/utilities/show.md b/vanilla/templates/docs/utilities/show.md
deleted file mode 100644
index b1e6596..0000000
--- a/vanilla/templates/docs/utilities/show.md
+++ /dev/null
@@ -1,26 +0,0 @@
----
-wrapper_template: '_layouts/docs.html'
-context:
- title: Show | Utilities
----
-
-Show an element within a certain breakpoint.
-
-
-
-## Import
-
-To import just this utility into your project, copy the snippet below and include it in your main Sass file.
-
-```scss
-// import Vanilla and include base mixins
-// this only needs to happen once in a given project
-@import 'vanilla-framework';
-@include vf-base;
-
-@include vf-u-show;
-```
-
-For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
diff --git a/vanilla/templates/docs/utilities/table-cell-padding-overlap.md b/vanilla/templates/docs/utilities/table-cell-padding-overlap.md
deleted file mode 100644
index cb70ff1..0000000
--- a/vanilla/templates/docs/utilities/table-cell-padding-overlap.md
+++ /dev/null
@@ -1,13 +0,0 @@
----
-wrapper_template: '_layouts/docs.html'
-context:
- title: Table cell padding overlap | Utilities
----
-
-Vanilla applies padding-top and padding bottom to table cells. This is done to prevent row borders from getting too close to text that is not wrapped in a `
` or other text element.
-
-In some cases it can be helpful to override this behaviour for specific children of the table cell, e.g. a `button`:
-
-
diff --git a/vanilla/templates/docs/utilities/text-max-width.md b/vanilla/templates/docs/utilities/text-max-width.md
deleted file mode 100644
index c0e2e98..0000000
--- a/vanilla/templates/docs/utilities/text-max-width.md
+++ /dev/null
@@ -1,34 +0,0 @@
----
-wrapper_template: '_layouts/docs.html'
-context:
- title: Text max width | Utilities
----
-
-We aim to limit text to a measure (line width) of around 90 characters. This is done for readability purposes, and is already applied to paragraphs and headings.
-
-To limit the width of text lists to match the line width of paragraphs use the `.u-text-max-width` utility class on the list element itself, or on a parent element.
-
-
-
-When class can't be applied to the list element itself, for example when the list is generated from Markdown or Discourse, you can apply the utility class to a parent element.
-
-
-
-## Import
-
-To import just this utility into your project, copy the snippet below and include it in your main Sass file.
-
-```scss
-// import Vanilla and include base mixins
-// this only needs to happen once in a given project
-@import 'vanilla-framework';
-@include vf-base;
-
-@include vf-u-text-max-width;
-```
-
-For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
diff --git a/vanilla/templates/docs/utilities/truncate.md b/vanilla/templates/docs/utilities/truncate.md
deleted file mode 100644
index b543a61..0000000
--- a/vanilla/templates/docs/utilities/truncate.md
+++ /dev/null
@@ -1,31 +0,0 @@
----
-wrapper_template: '_layouts/docs.html'
-context:
- title: Truncation | Utilities
----
-
-To truncate text, use the class `u-truncate`.
-
-When applied to a parent container, it will truncate any elements placed inside, so long as the parent's width is set.
-When applied to individual elements within a parent, e.g. a table cell, only those elements will be truncated.
-
-
-
-Note: `u-truncate` will affect any tooltips placed inside.
-
-## Import
-
-To import just this utility into your project, copy the snippet below and include it in your main Sass file.
-
-```scss
-// import Vanilla and include base mixins
-// this only needs to happen once in a given project
-@import 'vanilla-framework';
-@include vf-base;
-
-@include vf-u-truncate;
-```
-
-For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
diff --git a/vanilla/templates/docs/utilities/vertical-spacing.md b/vanilla/templates/docs/utilities/vertical-spacing.md
deleted file mode 100644
index b58f86f..0000000
--- a/vanilla/templates/docs/utilities/vertical-spacing.md
+++ /dev/null
@@ -1,62 +0,0 @@
----
-wrapper_template: '_layouts/docs.html'
-context:
- title: Vertical spacing | Utilities
----
-
-The `.u-sv` set of utility classes adjusts the space after an element in positive or negative multiples of the baseline grid unit. A baseline grid unit is equivalent to `.5rem`.
-
-For example, to pull the next element `1rem` closer, apply `.u-sv-2`. To push it `.5rem` away from the current element, apply `u-sv1`.
-
-Throughout Vanilla, margin is only applied to the bottom of an element. If elements beneath an element using this utility have a top margin applied, there is a risk of margin collapse. For predictable results, use single margin direction.
-
-These classes should be used sparingly, and exist to give designers greater flexibility when it comes to spacing and alignment.
-
-
-
-
-
-
-
Do:
-
Use u-sv classes to modify space between elements that are not part of Vanilla components.
-
-
-
-
-
-
-
Don't:
-
Use u-sv to modify the space between elements inside of Vanilla components.
-
-
-
-
-
-
-| Variable | Effect |
-| --------- | ---------------------------------------- |
-| `.u-sv-3` | Decreases space by 3 baseline grid units |
-| `.u-sv-2` | Decreases space by 2 baseline grid units |
-| `.u-sv-1` | Decreases space by 1 baseline grid unit |
-| `.u-sv1` | Increases space by 1 baseline grid unit |
-| `.u-sv2` | Increases space by 2 baseline grid units |
-| `.u-sv3` | Increases space by 3 baseline grid units |
-
-
-
-## Import
-
-To import just this utility into your project, copy the snippet below and include it in your main Sass file.
-
-```scss
-// import Vanilla and include base mixins
-// this only needs to happen once in a given project
-@import 'vanilla-framework';
-@include vf-base;
-
-@include vf-u-vertical-spacing;
-```
-
-For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
diff --git a/vanilla/templates/docs/utilities/vertically-center.md b/vanilla/templates/docs/utilities/vertically-center.md
deleted file mode 100644
index cb54d37..0000000
--- a/vanilla/templates/docs/utilities/vertically-center.md
+++ /dev/null
@@ -1,28 +0,0 @@
----
-wrapper_template: '_layouts/docs.html'
-context:
- title: Vertically center | Utilities
----
-
-The `.u-vertically-center` class will vertically center the direct child of the element it is placed on.
-
-Note: only affects medium and large screens.
-
-
-
-## Import
-
-To import just this utility into your project, copy the snippet below and include it in your main Sass file.
-
-```scss
-// import Vanilla and include base mixins
-// this only needs to happen once in a given project
-@import 'vanilla-framework';
-@include vf-base;
-
-@include vf-u-vertically-center;
-```
-
-For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.
diff --git a/vanilla/templates/index.html b/vanilla/templates/index.html
deleted file mode 100644
index b3c2203..0000000
--- a/vanilla/templates/index.html
+++ /dev/null
@@ -1,325 +0,0 @@
-{% extends "_layouts/site.html" %}
-
-{% block description %}Vanilla Framework - a simple extensible CSS framework, written in Sass, by the Ubuntu Web Team.{% endblock %}
-{% block copydoc %}https://docs.google.com/document/d/1WQ3u4Eg9Vqp_yFBdIYUyGXkvhMxlPBMSr7g7O3rLzpg/edit{% endblock %}
-
-{% block content %}
-
-
-
-
-
-
-
A simple, extensible CSS framework
-
Backed by open-source code and written in Sass by the Canonical Web Team.
Anyone can contribute to Vanilla, improve it and extend it. All the code is available on GitHub and is licensed under LGPLv3 by Canonical.
-
-
-
-
-
-
-
-
-
-
-
-
-
Quick start
-
-
-
-
-
The recommended method of including Vanilla Framework in your project is via npm or yarn. You can then simply include the framework in your SCSS files and compile.
-
- 
-
- 
-
- 
-
- 
-
- 
- 
- 
- 
- 
- 
-
- 
- 
-
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
-{% endblock %}
diff --git a/vanilla/templates/docs/examples/patterns/image/caption.html b/vanilla/templates/docs/examples/patterns/image/caption.html
deleted file mode 100644
index 7d79295..0000000
--- a/vanilla/templates/docs/examples/patterns/image/caption.html
+++ /dev/null
@@ -1,11 +0,0 @@
-{% extends "_layouts/examples.html" %}
-{% block title %}Image / Caption{% endblock %}
-
-{% block standalone_css %}patterns_image{% endblock %}
-
-{% block content %}
-
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
-
- 
- -
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
-
- 
- 
- 
- 
- 
- 
-
- 
-
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
-
-If you have a large number of menu items, you may consider overriding this value to a larger value so the navigation snaps to a burger menu at a larger breakpoint.
-
-## Modifying the heading breakpoint threshold
-
-`$breakpoint-heading-threshold` is the breakpoint in which the heading sizes switch from a 1:2 modular scale ratio (desktop devices) to a 2:3 ratio (mobile devices).
diff --git a/vanilla/templates/docs/settings/color-settings/index.md b/vanilla/templates/docs/settings/color-settings/index.md
deleted file mode 100644
index f0df131..0000000
--- a/vanilla/templates/docs/settings/color-settings/index.md
+++ /dev/null
@@ -1,170 +0,0 @@
----
-wrapper_template: '_layouts/docs.html'
-context:
- title: Color | Settings
----
-
-These guidelines are the framework upon which we have built our system for how color is used in Vanilla, we use a fairly neutral color palette along with a traffic light palette.
-
-
- 
- 
- 
- 
- 
-