This repository has been archived by the owner on Mar 6, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 33
/
index.html
221 lines (211 loc) · 12.5 KB
/
index.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
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
---
layout: default
desc: Vanilla Framework - a simple extensible CSS framework, written in Sass, by the Ubuntu Web Team.
sitemap:
priority: 1.0
changefreq: 'monthly'
lastmod: 2017-01-13T17:20:30+00:00
copydoc: https://docs.google.com/document/d/1WQ3u4Eg9Vqp_yFBdIYUyGXkvhMxlPBMSr7g7O3rLzpg/edit
---
<script defer src="https://buttons.github.io/buttons.js"></script>
<div id="main-content" class="p-strip--image is-dark is-deep" style="background-image: url('https://assets.ubuntu.com/v1/b70dcf07-vanilla-grad-background-min.png'); background-position: 75% 50%;">
<div class="row">
<h1>A simple extensible CSS framework</h1>
<p>Backed by open-source code and written in Sass by the Canonical Web Team.</p>
<ul class="p-inline-list u-no-margin--bottom">
<li class="p-inline-list__item">
<a href="https://docs.vanillaframework.io" onclick="dataLayer.push({'event' : 'GAEvent', 'eventCategory' : 'Homepage', 'eventAction' : 'Docs link', 'eventLabel' : 'See the docs', 'eventValue' : undefined });" class="p-button--positive u-no-margin--bottom">Get started</a>
</li>
<li class="p-inline-list__item">
<a href="https://github.com/canonical-web-and-design/vanilla-framework/releases/latest" onclick="dataLayer.push({'event' : 'GAEvent', 'eventCategory' : 'Homepage', 'eventAction' : 'Downloads', 'eventLabel' : 'Download latest', 'eventValue' : undefined });" class="p-button--neutral p-link--external u-no-margin--bottom">Download Vanilla</a>
</li>
</ul>
</div>
</div>
<div class="p-strip is-bordered is-deep">
<div class="row">
<div class="col-4">
<div class="p-heading-icon">
<div class="p-heading-icon__header is-stacked">
<img class="b-lazy p-heading-icon__img" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== data-src="https://assets.ubuntu.com/v1/1958451f-pictogram_lightweight01b-dark.svg" alt="" />
<h3 class="p-heading-icon__title">Lightweight</h3>
</div>
<p>Vanilla contains a responsive CSS grid, basic style for HTML elements and a selection of key useful patterns and utility classes that you can extend.</p>
</div>
</div>
<div class="col-4">
<div class="p-heading-icon">
<div class="p-heading-icon__header is-stacked">
<img class="b-lazy p-heading-icon__img" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== data-src="https://assets.ubuntu.com/v1/730b14b9-pictogram_extension01-dark.svg" alt="" />
<h3 class="p-heading-icon__title">Composable</h3>
</div>
<p>Designed to be composable — you can include the whole framework to avail of all styles or you can use only what you need for your project.</p>
</div>
</div>
<div class="col-4">
<div class="p-heading-icon">
<div class="p-heading-icon__header is-stacked">
<img class="b-lazy p-heading-icon__img" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== data-src="https://assets.ubuntu.com/v1/ff78e55c-pictogram_opensource01-dark.svg" alt="" />
<h3 class="p-heading-icon__title">Open source</h3>
</div>
<p>Anyone can contribute to Vanilla, improve it and extend it. All the code is available on GitHub and is licensed under LGPLv3 by Canonical.</p>
</div>
</div>
</div>
</div>
<div id="quick-start" class="p-strip is-bordered is-deep">
<div class="row">
<div class="col-12">
<h2>Quick start</h2>
</div>
</div>
<div class="row">
<div class="col-6">
<p>The recommended method of including Vanilla Framework in your project is via <a href="https://www.npmjs.com/package/vanilla-framework">npm</a>. You can then simply include the framework in your SCSS files and compile.</p>
<p>For other methods, please see the <a href="https://docs.vanillaframework.io">advanced usage docs.</a></p>
</div>
<div class="col-6">
<pre><code>npm install --save-dev vanilla-framework
<span class="hljs-built_in">export</span> SASS_PATH=`<span class="hljs-built_in">pwd</span>`/node_modules:<span class="hljs-variable">${SASS_PATH}</span>
<span class="hljs-comment">// Add to your main build scss file the following line</span>
<span class="hljs-annotation">@import</span> <span class="hljs-string">'vanilla-framework/scss/build'</span></code></pre>
</div>
</div>
</div>
<div class="p-strip is-bordered is-deep">
<div class="row u-equal-height">
<div class="col-4">
<h2>Guidelines</h2>
<p>If you are <a href="https://vanillaframework.io/contribute">contributing to Vanilla</a>, make sure to read and follow these guidelines.</p>
<ul class="p-list--divided">
<li class="p-list__item">
<a href="/accessibility" class="p-link">Accessibility</a>
</li>
<li class="p-list__item">
<a href="/browser-support" class="p-link">Browser support</a>
</li>
</ul>
</div>
<div class="col-8 u-vertically-center u-align--center">
<img class="b-lazy" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== data-src="https://assets.ubuntu.com/v1/af1e0f04-guidelines-illustration.svg" alt="">
</div>
</div>
</div>
<div class="p-strip is-bordered is-deep">
<div class="row">
<div class="col-4">
<h2>Downloads</h2>
</div>
</div>
<div class="row">
<div class="p-card--highlighted col-4">
<div class="p-heading-icon--small">
<div class="p-heading-icon__header">
<img class="p-heading-icon__img" src="https://assets.ubuntu.com/v1/0276b842-github-icon.svg" alt="GitHub repo:" />
<h4 class="p-heading-icon__title">Vanilla Framework</h4>
</div>
<p>Use our CSS framework to start building your project.</p>
<p style="margin-bottom: 0px;"><a onclick="dataLayer.push({'event' : 'GAEvent', 'eventCategory' : 'Homepage', 'eventAction' : 'Downloads', 'eventLabel' : 'Download Vanilla framework', 'eventValue' : undefined });" class="p-button--neutral p-link--external" href="https://github.com/canonical-web-and-design/vanilla-framework/releases/latest">Download latest release</a></p>
<small>See the <a class="p-link--external" href="https://github.com/canonical-web-and-design/vanilla-framework/releases">release notes</a> for details on the latest updates.</small>
</div>
</div>
<div class="p-card--highlighted col-4">
<div class="p-heading-icon--small">
<div class="p-heading-icon__header">
<img class="p-heading-icon__img" src="https://assets.ubuntu.com/v1/9a5b9c51-sketch-icon.svg" alt="Sketch library:" />
<h4 class="p-heading-icon__title">Vanilla Design</h4>
</div>
<p>Get our Sketch library of common design components.</p>
<p style="margin-bottom: 0px;"><a onclick="dataLayer.push({'event' : 'GAEvent', 'eventCategory' : 'Homepage', 'eventAction' : 'Downloads', 'eventLabel' : 'Download Vanilla Design UI Kit', 'eventValue' : undefined });" class="p-button--neutral" href="https://assets.ubuntu.com/latest-redirects/vanilla-framework.sketch">Download the Sketch UI Kit</a></p>
<small>Filesize - 2.4 MB</small>
</div>
</div>
</div>
</div>
<div class="p-strip is-deep is-bordered">
<div class="row">
<h2>Latest news from our blog</h2>
</div>
<div class="row">
<div class="col-3">
<h4><a href="https://ubuntu.com/blog/the-lifecycle-of-components-in-your-design-system">The lifecycle of a component</a></h4>
<p class="p-heading--6">21 November 2019</p>
</div>
<div class="col-3">
<h4><a href="https://ubuntu.com/blog/vanilla-framework-2-0-upgrade-guide">Vanilla Framework 2.0 upgrade guide</a></h4>
<p class="p-heading--6">20 June 2019</p>
</div>
<div class="col-3">
<h4><a href="https://ubuntu.com/blog/new-release-vanilla-framework-2-0">New release: Vanilla framework 2.0</a></h4>
<p class="p-heading--6">13 June 2019</p>
</div>
<div class="col-3">
<h4><a href="https://ubuntu.com/blog/a-fresh-look-for-releases-ubuntu-com">A fresh look for releases.ubuntu.com</a></h4>
<p class="p-heading--6">13 February 2019</p>
</div>
</div>
<div class="u-fixed-width"><a href="https://ubuntu.com/blog/topics/design" class="p-button--neutral">View more from our blog</a></div>
</div>
<div class="p-strip">
<div class="row">
<h2 class="p-muted-heading u-align-text--center">Who’s using Vanilla</h2>
</div>
<div class="row">
<div class="col-small-2 col-medium-2 col-2">
<a href="https://ubuntu.com">
<img class="b-lazy" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== data-src="https://assets.ubuntu.com/v1/5a8a0172-2018-logo-ubuntu.svg" alt="Ubuntu" /></a>
</div>
<div class="col-small-2 col-medium-2 col-2">
<a href="https://jaas.ai">
<img class="b-lazy" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== data-src="https://assets.ubuntu.com/v1/7fe3f290-2019-logo-jaas.svg" alt="JAAS" />
</a>
</div>
<div class="col-small-2 col-medium-2 col-2">
<a href="https://docs.aliceos.app/master/index.html">
<img class="b-lazy" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== data-src="https://assets.ubuntu.com/v1/07efa0fc-2019-alice-os-logo.svg" alt="AliceOS" /></a>
</div>
<div class="col-small-2 col-medium-2 col-2">
<a href="https://stmargarets.london/">
<img class="b-lazy" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== data-src="https://assets.ubuntu.com/v1/b7c9c8ce-2019-st-margarets-logo.svg" alt="St Margarets" /></a>
</div>
<div class="col-small-2 col-medium-2 col-2">
<a href="https://snapcraft.io">
<img class="b-lazy" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== data-src="https://assets.ubuntu.com/v1/35cbab33-2018-logo-snapcraft.svg" alt="Snapcraft" /></a>
</div>
</div>
</div>
<div class="p-strip--light">
<div class="row">
<div class="col-3">
<h2 class="p-heading--3">Contribute</h2>
<p><a class="github-button" href="https://github.com/canonical-web-and-design/vanilla-framework" data-size="large" data-show-count="true" aria-label="Follow @vanilla-framework on GitHub">Follow @vanilla-framework</a></p>
<p><a class="github-button" href="https://github.com/canonical-web-and-design/vanilla-framework/fork" data-icon="octicon-repo-forked" data-size="large" data-show-count="true" aria-label="Fork vanilla-framework/vanilla-framework on GitHub">Fork</a></p>
</div>
<div class="col-3">
<h2 class="p-heading--3">Get involved</h2>
<ul class="p-list--divided">
<li class="p-list__item is-ticked" style="background-image: url('https://assets.ubuntu.com/v1/8a2851df-slack-icon-vanilla.svg'); background-size: 1rem;">
<a href="https://vanillaframework.slack.com" class="p-link--soft">Slack ›</a>
</li>
<li class="p-list__item is-ticked" style="background-image: url('https://assets.ubuntu.com/v1/7eae50ca-icon-twitter.svg'); background-size: 1rem;">
<a href="https://twitter.com/vanillaframewrk" class="p-link--soft">Twitter ›</a>
</li>
<li class="p-list__item is-ticked" style="background-image: url('https://assets.ubuntu.com/v1/f307a122-icon-github.svg'); background-size: 1rem;">
<a href="https://github.com/canonical-web-and-design/vanilla-framework" class="p-link--soft">GitHub ›</a>
</li>
</ul>
</div>
<div class="col-6">
<h3>Subscribe to Vanilla updates</h3>
<form action="//canonical.us3.list-manage.com/subscribe/post?u=56dac47c206ba0f58ec25f314&id=36f7d8394e" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="p-form">
<div class="p-form__group">
<label for="mce-EMAIL">Email address</label>
<input type="email" value="" name="EMAIL" placeholder="vanilla@example.com" id="mce-EMAIL" aria-label="Email address" required />
<input class="u-off-screen" aria-hidden="true" type="text" name="b_56dac47c206ba0f58ec25f314_36f7d8394e" tabindex="-1" value="" />
<p class="p-form-help-text">Know about new releases, features, blog posts, calls‑for‑help and more.</p>
</div>
<button type="submit" onclick="dataLayer.push({'event' : 'GAEvent', 'eventCategory' : 'Homepage', 'eventAction' : 'Subscribe', 'eventLabel' : 'Subcribe to Vanilla updates', 'eventValue' : undefined });" class="p-button--positive">Subscribe</button>
</form>
</div>
</div>
</div>