forked from canonical/vanilla-framework
/
docs.html
204 lines (177 loc) · 19.3 KB
/
docs.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
{% extends "_layouts/_root.html" %}
{% block custom_head %}
<link rel="stylesheet" href="/static/build/css/docs/docs.css" />
{% endblock %}
{% block body %}
<header id="navigation" class="p-navigation">
<div class="p-navigation__row--full-width">
<div class="p-navigation__banner">
<div class="p-navigation__logo">
<a class="p-navigation__item" href="/">
<img class="p-navigation__image" src="https://assets.ubuntu.com/v1/d96d86b5-vanilla_black-orange_hex.svg" alt="Vanilla framework logo">
</a>
</div>
<div class="p-navigation__toggles u-hide--large u-hide--medium">
<a href="#navigation" class="p-navigation__toggle--open" title="about menu">About</a>
<a href="#navigation-closed" class="p-navigation__toggle--close" title="close about menu">About</a>
<a class="p-sidebar__toggle u-hide--medium u-hide--large" href="#">Docs</a>
</div>
</div>
<nav class="p-navigation__nav">
<span class="u-off-screen">
<a href="#main-content">Jump to main content</a>
</span>
<ul class="p-navigation__items">
<li class="p-navigation__item u-hide--small {% if path.startswith('/docs') and not path.startswith('/docs/examples') %}is-selected{% endif %}"><a class="p-navigation__link" href="/docs">Docs</a></li>
<li class="p-navigation__item {% if '/docs/examples' in path %}is-selected{% endif %}"><a class="p-navigation__link" href="/docs/examples">Examples</a></li>
<li class="p-navigation__item"><a class="p-navigation__link" href="/accessibility">Accessibility</a></li>
<li class="p-navigation__item"><a class="p-navigation__link" href="/browser-support">Browser support</a></li>
<li class="p-navigation__item"><a class="p-navigation__link" href="/contribute">Contribute</a></li>
</ul>
<form class="p-search-box" action="/docs/search">
<input type="search" id="search-docs" class="p-search-box__input" name="q" {% if query %}value="{{ query }}"{% endif %} placeholder="Search the docs" title="Search the documentation" required />
<button type="reset" id="search-docs-reset" class="p-search-box__reset u-no-margin--right" alt="reset"><i class="p-icon--close"></i></button>
<button type="submit" class="p-search-box__button" alt="search"><i class="p-icon--search"></i></button>
</form>
</nav>
</div>
</header>
<hr class="u-no-margin u-hide--small">
<div class="docs-container">
<aside class="p-sidebar">
<nav class="p-side-navigation">
<ul class="p-side-navigation__list">
<li class="p-side-navigation__item--title"><span class="p-side-navigation__text">Welcome</span></li>
<li class="p-side-navigation__item"><a class="p-side-navigation__link {% if path == '/docs' %}is-active{% endif %}" href="/docs">Get started</a></li>
<li class="p-side-navigation__item"><a class="p-side-navigation__link {% if path == '/docs/building-vanilla' %}is-active{% endif %}" href="/docs/building-vanilla">Building with Vanilla</a></li>
<li class="p-side-navigation__item"><a class="p-side-navigation__link {% if path == '/docs/customising-vanilla' %}is-active{% endif %}" href="/docs/customising-vanilla">Customising Vanilla</a></li>
<li class="p-side-navigation__item"><a class="p-side-navigation__link" href="https://github.com/canonical-web-and-design/vanilla-framework/releases/latest">What’s new in {{ version }}</a></li>
</ul>
<ul class="p-side-navigation__list">
<li class="p-side-navigation__item--title"><span class="p-side-navigation__text">Base elements</span></li>
<li class="p-side-navigation__item"><a class="p-side-navigation__link {% if path == '/docs/base/code' %}is-active{% endif %}" href="/docs/base/code">Code</a></li>
<li class="p-side-navigation__item"><a class="p-side-navigation__link {% if path == '/docs/base/forms' %}is-active{% endif %}" href="/docs/base/forms">Forms</a></li>
<li class="p-side-navigation__item"><a class="p-side-navigation__link {% if path == '/docs/base/reset' %}is-active{% endif %}" href="/docs/base/reset">Reset</a></li>
<li class="p-side-navigation__item"><a class="p-side-navigation__link {% if path == '/docs/base/tables' %}is-active{% endif %}" href="/docs/base/tables">Tables</a></li>
<li class="p-side-navigation__item"><a class="p-side-navigation__link {% if path == '/docs/base/typography' %}is-active{% endif %}" href="/docs/base/typography">Typography</a></li>
</ul>
<ul class="p-side-navigation__list">
<li class="p-side-navigation__item--title"><span class="p-side-navigation__text">Components</span></li>
<li class="p-side-navigation__item"><a class="p-side-navigation__link {% if path == '/docs/patterns/accordion' %}is-active{% endif %}" href="/docs/patterns/accordion">Accordion</a></li>
<li class="p-side-navigation__item"><a class="p-side-navigation__link {% if path == '/docs/patterns/article-pagination' %}is-active{% endif %}" href="/docs/patterns/article-pagination">Article pagination</a></li>
<li class="p-side-navigation__item"><a class="p-side-navigation__link {% if path == '/docs/patterns/breadcrumbs' %}is-active{% endif %}" href="/docs/patterns/breadcrumbs">Breadcrumbs</a></li>
<li class="p-side-navigation__item"><a class="p-side-navigation__link {% if path == '/docs/patterns/buttons' %}is-active{% endif %}" href="/docs/patterns/buttons">Buttons</a></li>
<li class="p-side-navigation__item"><a class="p-side-navigation__link {% if path == '/docs/patterns/card' %}is-active{% endif %}" href="/docs/patterns/card">Cards</a></li>
<li class="p-side-navigation__item"><a class="p-side-navigation__link {% if path == '/docs/patterns/contextual-menu' %}is-active{% endif %}" href="/docs/patterns/contextual-menu">Contextual menu</a></li>
<li class="p-side-navigation__item"><a class="p-side-navigation__link {% if path == '/docs/patterns/grid' %}is-active{% endif %}" href="/docs/patterns/grid">Grid</a></li>
<li class="p-side-navigation__item"><a class="p-side-navigation__link {% if path == '/docs/patterns/heading-icon' %}is-active{% endif %}" href="/docs/patterns/heading-icon">Heading icon</a></li>
<li class="p-side-navigation__item"><a class="p-side-navigation__link {% if path == '/docs/patterns/icons' %}is-active{% endif %}" href="/docs/patterns/icons">Icons</a></li>
<li class="p-side-navigation__item"><a class="p-side-navigation__link {% if path == '/docs/patterns/images' %}is-active{% endif %}" href="/docs/patterns/images">Images</a></li>
<li class="p-side-navigation__item"><a class="p-side-navigation__link {% if path == '/docs/patterns/inline-images' %}is-active{% endif %}" href="/docs/patterns/inline-images">Inline images</a></li>
<li class="p-side-navigation__item"><a class="p-side-navigation__link {% if path == '/docs/patterns/labels' %}is-active{% endif %}" href="/docs/patterns/labels">Labels</a></li>
<li class="p-side-navigation__item"><a class="p-side-navigation__link {% if path == '/docs/patterns/links' %}is-active{% endif %}" href="/docs/patterns/links">Links</a></li>
<li class="p-side-navigation__item"><a class="p-side-navigation__link {% if path == '/docs/patterns/list-tree' %}is-active{% endif %}" href="/docs/patterns/list-tree">List tree</a></li>
<li class="p-side-navigation__item"><a class="p-side-navigation__link {% if path == '/docs/patterns/lists' %}is-active{% endif %}" href="/docs/patterns/lists">Lists</a></li>
<li class="p-side-navigation__item"><a class="p-side-navigation__link {% if path == '/docs/patterns/matrix' %}is-active{% endif %}" href="/docs/patterns/matrix">Matrix</a></li>
<li class="p-side-navigation__item"><a class="p-side-navigation__link {% if path == '/docs/patterns/media-object' %}is-active{% endif %}" href="/docs/patterns/media-object">Media object</a></li>
<li class="p-side-navigation__item"><a class="p-side-navigation__link {% if path == '/docs/patterns/modal' %}is-active{% endif %}" href="/docs/patterns/modal">Modal</a></li>
<li class="p-side-navigation__item"><a class="p-side-navigation__link {% if path == '/docs/patterns/muted-heading' %}is-active{% endif %}" href="/docs/patterns/muted-heading">Muted heading</a></li>
<li class="p-side-navigation__item"><a class="p-side-navigation__link {% if path == '/docs/patterns/navigation' %}is-active{% endif %}" href="/docs/patterns/navigation">Navigation<span class="p-side-navigation__status"><span class="p-label--new">New</span></span></a></li>
<li class="p-side-navigation__item"><a class="p-side-navigation__link {% if path == '/docs/patterns/notification' %}is-active{% endif %}" href="/docs/patterns/notification">Notifications</a></li>
<li class="p-side-navigation__item"><a class="p-side-navigation__link {% if path == '/docs/patterns/pagination' %}is-active{% endif %}" href="/docs/patterns/pagination">Pagination</a></li>
<li class="p-side-navigation__item"><a class="p-side-navigation__link {% if path == '/docs/patterns/pull-quote' %}is-active{% endif %}" href="/docs/patterns/pull-quote">Quotes</a></li>
<li class="p-side-navigation__item"><a class="p-side-navigation__link {% if path == '/docs/patterns/search-box' %}is-active{% endif %}" href="/docs/patterns/search-box">Search box</a></li>
<li class="p-side-navigation__item"><a class="p-side-navigation__link {% if path == '/docs/patterns/slider' %}is-active{% endif %}" href="/docs/patterns/slider">Slider</a></li>
<li class="p-side-navigation__item"><a class="p-side-navigation__link {% if path == '/docs/patterns/strip' %}is-active{% endif %}" href="/docs/patterns/strip">Strip</a></li>
<li class="p-side-navigation__item"><a class="p-side-navigation__link {% if path == '/docs/patterns/switch' %}is-active{% endif %}" href="/docs/patterns/switch">Switch</a></li>
<li class="p-side-navigation__item"><a class="p-side-navigation__link {% if path == '/docs/patterns/table-of-contents' %}is-active{% endif %}" href="/docs/patterns/table-of-contents">Table of contents</a></li>
<li class="p-side-navigation__item"><a class="p-side-navigation__link {% if path == '/docs/patterns/tabs' %}is-active{% endif %}" href="/docs/patterns/tabs">Tabs</a></li>
<li class="p-side-navigation__item"><a class="p-side-navigation__link {% if path == '/docs/patterns/tooltips' %}is-active{% endif %}" href="/docs/patterns/tooltips">Tooltips</a></li>
</ul>
<ul class="p-side-navigation__list">
<li class="p-side-navigation__item--title"><span class="p-side-navigation__text">Utilities</span></li>
<li class="p-side-navigation__item"><a class="p-side-navigation__link {% if path == '/docs/utilities/align' %}is-active{% endif %}" href="/docs/utilities/align">Alignment</a></li>
<li class="p-side-navigation__item"><a class="p-side-navigation__link {% if path == '/docs/utilities/baseline-grid' %}is-active{% endif %}" href="/docs/utilities/baseline-grid">Baseline grid</a></li>
<li class="p-side-navigation__item"><a class="p-side-navigation__link {% if path == '/docs/utilities/clearfix' %}is-active{% endif %}" href="/docs/utilities/clearfix">Clearfix</a></li>
<li class="p-side-navigation__item"><a class="p-side-navigation__link {% if path == '/docs/utilities/embedded-media' %}is-active{% endif %}" href="/docs/utilities/embedded-media">Embedded media</a></li>
<li class="p-side-navigation__item"><a class="p-side-navigation__link {% if path == '/docs/utilities/equal-height' %}is-active{% endif %}" href="/docs/utilities/equal-height">Equal height</a></li>
<li class="p-side-navigation__item"><a class="p-side-navigation__link {% if path == '/docs/utilities/floats' %}is-active{% endif %}" href="/docs/utilities/floats">Floats</a></li>
<li class="p-side-navigation__item"><a class="p-side-navigation__link {% if path == '/docs/utilities/font-metrics' %}is-active{% endif %}" href="/docs/utilities/font-metrics">Font metrics</a></li>
<li class="p-side-navigation__item"><a class="p-side-navigation__link {% if path == '/docs/utilities/functions' %}is-active{% endif %}" href="/docs/utilities/functions">Functions</a></li>
<li class="p-side-navigation__item"><a class="p-side-navigation__link {% if path == '/docs/utilities/hide' %}is-active{% endif %}" href="/docs/utilities/hide">Hide</a></li>
<li class="p-side-navigation__item"><a class="p-side-navigation__link {% if path == '/docs/utilities/image-position' %}is-active{% endif %}" href="/docs/utilities/image-position">Image position</a></li>
<li class="p-side-navigation__item"><a class="p-side-navigation__link {% if path == '/docs/utilities/margin-collapse' %}is-active{% endif %}" href="/docs/utilities/margin-collapse">Margin collapse</a></li>
<li class="p-side-navigation__item"><a class="p-side-navigation__link {% if path == '/docs/utilities/no-print' %}is-active{% endif %}" href="/docs/utilities/no-print">No print</a></li>
<li class="p-side-navigation__item"><a class="p-side-navigation__link {% if path == '/docs/utilities/off-screen' %}is-active{% endif %}" href="/docs/utilities/off-screen">Off-screen</a></li>
<li class="p-side-navigation__item"><a class="p-side-navigation__link {% if path == '/docs/utilities/padding-collapse' %}is-active{% endif %}" href="/docs/utilities/padding-collapse">Padding collapse</a></li>
<li class="p-side-navigation__item"><a class="p-side-navigation__link {% if path == '/docs/utilities/table-cell-padding-overlap' %}is-active{% endif %}" href="/docs/utilities/table-cell-padding-overlap">Table cell padding overlap</a></li>
<li class="p-side-navigation__item"><a class="p-side-navigation__link {% if path == '/docs/utilities/truncate' %}is-active{% endif %}" href="/docs/utilities/truncate">Truncation</a></li>
<li class="p-side-navigation__item"><a class="p-side-navigation__link {% if path == '/docs/utilities/show' %}is-active{% endif %}" href="/docs/utilities/show">Show</a></li>
<li class="p-side-navigation__item"><a class="p-side-navigation__link {% if path == '/docs/utilities/vertically-center' %}is-active{% endif %}" href="/docs/utilities/vertically-center">Vertically center</a></li>
</ul>
<ul class="p-side-navigation__list">
<li class="p-side-navigation__item--title"><span class="p-side-navigation__text">Settings</span></li>
<li class="p-side-navigation__item"><a class="p-side-navigation__link {% if path == '/docs/settings/animation-settings' %}is-active{% endif %}" href="/docs/settings/animation-settings">Animations</a></li>
<li class="p-side-navigation__item"><a class="p-side-navigation__link {% if path == '/docs/settings/assets-settings' %}is-active{% endif %}" href="/docs/settings/assets-settings">Assets</a></li>
<li class="p-side-navigation__item"><a class="p-side-navigation__link {% if path == '/docs/settings/breakpoint-settings' %}is-active{% endif %}" href="/docs/settings/breakpoint-settings">Breakpoints</a></li>
<li class="p-side-navigation__item"><a class="p-side-navigation__link {% if path == '/docs/settings/color-settings' %}is-active{% endif %}" href="/docs/settings/color-settings">Color</a></li>
<li class="p-side-navigation__item"><a class="p-side-navigation__link {% if path == '/docs/settings/font-settings' %}is-active{% endif %}" href="/docs/settings/font-settings">Font</a></li>
<li class="p-side-navigation__item"><a class="p-side-navigation__link {% if path == '/docs/settings/layout-settings' %}is-active{% endif %}" href="/docs/settings/layout-settings">Layout</a></li>
<li class="p-side-navigation__item"><a class="p-side-navigation__link {% if path == '/docs/settings/placeholder-settings' %}is-active{% endif %}" href="/docs/settings/placeholder-settings">Placeholders</a></li>
<li class="p-side-navigation__item"><a class="p-side-navigation__link {% if path == '/docs/settings/spacing-settings' %}is-active{% endif %}" href="/docs/settings/spacing-settings">Spacing</a></li>
<li class="p-side-navigation__item"><a class="p-side-navigation__link {% if path == '/docs/settings/table-layout' %}is-active{% endif %}" href="/docs/settings/table-layout">Table layout</a></li>
</ul>
<ul class="p-side-navigation__list">
<li class="p-side-navigation__item--title"><span class="p-side-navigation__text">Resources</span></li>
<li class="p-side-navigation__item"><a class="p-side-navigation__link {% if path == '/docs/examples' %}is-active{% endif %}" href="/docs/examples">Component examples</a></li>
<li class="p-side-navigation__item"><a class="p-side-navigation__link {% if path == '/docs/component-status' %}is-active{% endif %}" href="/docs/component-status">Component status</a></li>
<li class="p-side-navigation__item"><a class="p-side-navigation__link" href="https://assets.ubuntu.com/latest-redirects/vanilla-framework.sketch">Download the Sketch UI Kit</a></li>
</ul>
</nav>
</aside>
<main class="p-content" id="main-content">
{% block banner %}{% endblock %}
<div class="p-strip is-shallow">
<div class="p-content__row">
{% block content %}{{ content | safe }}{% endblock content %}
</div>
</div>
<hr>
{% include "_layouts/_footer.html" %}
</main>
<aside id="side-content" class="u-hide--small p-aside js-contents" style="display: none">
<div class="p-aside__section">
<h4 class="p-aside__header">Contents</h4>
<nav class="p-aside__nav">
<ul class="p-list js-contents-list"></ul>
</nav>
</div>
</aside>
<script>
let aside = document.querySelector('.js-contents');
let list = aside.querySelector('.js-contents-list');
let item = document.createElement('li');
let anchor = document.createElement('a');
anchor.classList.add('p-toc__link');
item.classList.add('p-toc__item');
// Add all H3s with IDs to the "Contents" list
[].slice.call(document.querySelectorAll('main h3[id]')).forEach(
function(heading) {
let thisItem = item.cloneNode();
let thisAnchor = anchor.cloneNode();
thisAnchor.setAttribute('href', '#' + heading.id);
thisAnchor.textContent = heading.textContent;
thisItem.appendChild(thisAnchor);
list.appendChild(thisItem);
}
)
// Display the "Contents" list, if there are items
if (list.querySelectorAll('li').length > 0) {
aside.style.display = 'block';
}
</script>
</div>
<script src="/static/js/scripts.js"></script>
<script defer src="https://static.codepen.io/assets/embed/ei.js"></script>
<script defer src="/static/js/example.js"></script>
{% endblock %}