This repository has been archived by the owner on May 15, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 100
/
resources.html
167 lines (167 loc) · 12.4 KB
/
resources.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
<!DOCTYPE html>
<html lang="en" class="js--off">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta property="og:title" content="Resources - Wikimedia Design Style Guide (WikimediaUI)">
<meta property="og:type" content="website">
<meta property="og:url" content="https://design.wikimedia.org/style-guide/resources.html">
<meta property="og:image" content="https://design.wikimedia.org/style-guide/img/design-style-guide.png">
<link rel="stylesheet" href="css/build/wmui-style-guide.min.css">
<title>Resources – Wikimedia Design Style Guide</title>
<script>
document.documentElement.className = document.documentElement.className.replace(/\bjs--off\b/,'js--on');
</script>
<link rel="dns-prefetch" href="https://piwik.wikimedia.org/">
<link rel="preload" href="fonts/Charter_regular.woff2" as="font" type="font/woff2" crossorigin>
<script src="js/matomo-tracking.min.js"></script>
<script src="js/wikimedia-design-style-guide.min.js" async></script>
</head>
<body class="page--home" vocab="http://schema.org/" typeof="WebPage">
<header id="header" class="header">
<div class="content-box">
<a href="#content" class="is-aural is-focusable">Jump to content</a>
<a href="#nav--main" class="is-aural is-focusable">Jump to navigation</a>
<h1 class="site__title"><a href="./"><span class="site__org">Wikimedia </span><span class="site__project">Design Style Guide</span></a></h1>
<label class="btn--nav-main" for="trigger--nav-main" aria-hidden="true" title="Show main menu">
<i></i> <span>Menu</span>
</label>
<a href="https://github.com/wikimedia/WikimediaUI-Style-Guide" target="_blank" rel="noopener" class="lnk--contribute" title="Fork and contribute on GitHub"><span>Contribute on </span>GitHub</a>
</div>
</header>
<div class="page">
<div class="content-box">
<div class="col col--start">
<input type="checkbox" id="trigger--nav-main" class="trigger--nav-main">
<nav id="nav--main" class="nav nav--main">
<ol>
<li class="nav__item"><a href="index.html">Introduction</a></li>
<li class="nav__item"><a href="design-principles.html">Design principles</a></li>
<li class="nav__item"><a href="visual-style.html">Visual style</a>
</li>
<li class="nav__item"><a href="components/links.html">Components</a></li>
<!-- <li class="nav__item"><a href="patterns.html">Patterns</a></li> -->
<li class="nav__item is-on"><a href="resources.html">Resources</a></li>
</ol>
</nav>
</div>
<div class="col col--end">
<main id="content" class="content">
<div class="cdx-message cdx-message--block cdx-message--warning" aria-live="polite">
<span class="cdx-message__icon"></span>
<div class="cdx-message__content">Wikimedia Design Style Guide will be archived soon. Visit its improved and enhanced successor:<br><a href="https://doc.wikimedia.org/codex/latest/" target="_blank">Codex, Design System for Wikimedia</a>.</div>
</div>
<h2 class="page__title">Resources</h2>
<p>The Wikimedia Design Style Guide does provide principles and guidelines to help answer interaction design questions. </p>
<p>Its resources enable designers and developers from our communities build on top, saving valuable time. The files are provided in format of original software (here Sketch and Adobe Illustrator), and also as copy in an open format for use in license-free software.</p>
<p>Several listed resources are also hot linked from the related sections, all binary files are part of the <a href="https://github.com/wikimedia/WikimediaUI-Style-Guide" title="Fork and contribute on GitHub">GitHub repository</a> in main 'resources' folder. </p>
<p>User-interface resources, which are aligning to the Design Style Guide principles are labelled “WikimediaUI”.</p>
<section id="components" class="resources-table">
<header class="resources-table__head">
<div class="resources-table__cell">
<h2>Components – WikimediaUI theme</h2>
<p>Components are the building blocks for interfaces. </p>
</div>
<span class="resources-table__cell"></span>
<span class="resources-table__cell"></span>
</header>
<ul class="resources-table__body">
<li class="resources-table__cell"><strong>WikimediaUI components overview</strong><br> <br>Sketch library features all WikimediaUI icons and colors as symbols as well and auto-notifications on official updates.</li>
<li class="resources-table__cell"><a class="lnk-resource" href="resources/WikimediaUI-components_overview.sketch" target="_blank" rel="noopener">Download Sketch</a><br> <br><a href="sketch://add-library?url=https%3A%2F%2Fdesign.wikimedia.org%2Fstyle-guide%2Fresources%2FWikimediaUI-components_overview-RSS.xml" rel="noopener">Import as Sketch library (RSS)</a></li>
<li class="resources-table__cell"><a class="lnk-resource" href="resources/WikimediaUI-components_overview.svg" target="_blank" rel="noopener">Download SVG</a></li>
</ul>
<ul class="resources-table__body">
<li class="resources-table__cell"><strong>Codex</strong><br> <br>Codex is the design system for Wikimedia – the successor of the Wikimedia Design Style Guide – and provides a toolkit for building user interfaces.</li>
<li class="resources-table__cell"><a href="https://doc.wikimedia.org/codex/latest/" target="_blank" rel="noopener">Demo & Documentation</a></li>
<li class="resources-table__cell"><a href="https://github.com/wikimedia/codex" target="_blank" rel="noopener">Source Code</a></li>
</ul>
<ul class="resources-table__body">
<li class="resources-table__cell"><strong>OOUI (WikimediaUI theme)</strong><br> <br>OOUI is the legacy user-interface library of Wikimedia Foundation.</li>
<li class="resources-table__cell"><a href="https://doc.wikimedia.org/oojs-ui/master/demos/#widgets-mediawiki-vector-ltr" target="_blank" rel="noopener">Demo</a></li>
<li class="resources-table__cell"><a href="https://www.mediawiki.org/wiki/OOUI" target="_blank" rel="noopener">Documentation</a></li>
</ul>
</section>
<section id="icons" class="resources-table">
<header class="resources-table__head">
<div class="resources-table__cell">
<h2>Icons</h2>
</div>
<span class="resources-table__cell"></span>
<span class="resources-table__cell"></span>
</header>
<ul class="resources-table__body">
<li class="resources-table__cell">Collection of all “WikimediaUI” icons<br>The ZIP file contains all single SVGs, find them also in folder 'resources/WikimediaUI-icons-SVGs'.</li>
<li class="resources-table__cell"><a class="lnk-resource" href="https://www.figma.com/file/1lT9LKOK6wiHLnpraMjP3E/WikimediaUI-%E2%80%93-Icons-and-Colors" target="_blank" rel="noopener" title="Collection of all icons in WikimediaUI Icons and Colors Figma file">Browse Figma</a></li>
<li class="resources-table__cell"><a class="lnk-resource" href="resources/WikimediaUI-icons-SVGs.zip" target="_blank" rel="noopener" title="Collection of all icons as SVGs in ZIP file">Download ZIP</a></li>
</ul>
<ul class="resources-table__body">
<li class="resources-table__cell">Template for <a href="visual-style_icons.html#creating-icons">creating new conforming icons</a><br>Find specific template forms – circular, diagonal, long, square and tall – in folder 'resources/WikimediaUI-icon_template_SVG_shapes'.</li>
<li class="resources-table__cell"><a class="lnk-resource" href="resources/WikimediaUI-icon_template.ai" target="_blank" rel="noopener" title="Adobe Illustrator template file">Download AI</a><br><a class="lnk-resource" href="resources/WikimediaUI-icon_template.sketch" target="_blank" rel="noopener">Download Sketch</a></li>
<li class="resources-table__cell"><a class="lnk-resource" href="resources/WikimediaUI-icon_template.svg" target="_blank" rel="noopener">Download SVG</a></li>
</ul>
</section>
<section id="base-style-variables" class="resources-table">
<header class="resources-table__head">
<div class="resources-table__cell">
<h2>Base style variables</h2>
</div>
<span class="resources-table__cell"></span>
<span class="resources-table__cell"></span>
</header>
<ul class="resources-table__body">
<li class="resources-table__cell">
WikimediaUI Base style sheet variables<br>
<p>For products that are technically bound to other UI libraries or frameworks, we also provide base style variables to implement a “WikimediaUI” look and feel. It includes all generalizable component like complete color palette or best-practice interaction values for animations and transitions. It is for example used for OOUI's main theme.</p>
</li>
<li class="resources-table__cell"><a href="https://phabricator.wikimedia.org/source/wikimedia-ui-base/" target="_blank" rel="noopener">Phabricator repo</a></li>
<li class="resources-table__cell"><a href="https://github.com/wikimedia/wikimedia-ui-base" target="_blank" rel="noopener">GitHub mirror</a></li>
</ul>
</section>
<section id="design-style-guide-imagery" class="resources-table">
<header class="resources-table__head">
<div class="resources-table__cell">
<h2>Design Style Guide imagery</h2>
</div>
<span class="resources-table__cell"></span>
</header>
<ul class="resources-table__body">
<li class="resources-table__cell">Wikimedia Design Style Guide imagery<br>Following the “open to collaboration” principle, we also share the imagery Sketch file, with all creations by <a href="https://www.mediawiki.org/wiki/Design">Design team</a> for this guide.</li>
<li class="resources-table__cell"><a class="lnk-resource" href="resources/Wikimedia_Design_Style_Guide-imagery.sketch" target="_blank" rel="noopener" title="Wikimedia Design Style Guide imagery">Download Sketch</a></li>
</ul>
</section>
<section id="illustrations-building-blocks" class="resources-table">
<header class="resources-table__head">
<div class="resources-table__cell">
<h2>Illustrations building blocks</h2>
</div>
<span class="resources-table__cell"></span>
<span class="resources-table__cell"></span>
</header>
<ul class="resources-table__body">
<li class="resources-table__cell">Wikimedia illustrations building blocks<br>A set of illustrations that can be mixed and matched to communicate core principles or features. </li>
<li class="resources-table__cell"><a class="lnk-resource" href="resources/WikimediaUI_illustrations-building-blocks.sketch" target="_blank" rel="noopener" title="Wikimedia illustrations building blocks Sketch file">Download Sketch</a></li>
<li class="resources-table__cell"><a class="lnk-resource" href="resources/WikimediaUI_illustrations-building-blocks.zip" target="_blank" rel="noopener" title="Wikimedia illustrations building blocks SVGs">Download ZIP of SVGs</a></li>
</ul>
</section>
</main>
</div>
</div>
</div>
<footer id="footer" class="footer">
<div class="content-box">
<ul class="footer__list footer__list--connect">
<li><a href="https://github.com/wikimedia/WikimediaUI-Style-Guide" target="_blank" rel="noopener">Contribute on GitHub</a></li>
<li><a href="https://twitter.com/@WikimediaDesign" title="Follow Wikimedia Product Design team on Twitter">Follow @WikimediaDesign</a></li>
<li><a href="https://lists.wikimedia.org/mailman/listinfo/design" title="Join Wikimedia Design mailing list">Join mailing list</a></li>
</ul>
<p>Text is available under the <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank" rel="noopener" property="license">Creative Commons Attribution-ShareAlike 4.0 International</a>, additional terms may apply. <br>Code is available under the MIT license.</p>
<ul class="footer__list footer__list--policy">
<li><a href="https://wikimediafoundation.org/privacy-policy/">Privacy policy</a></li>
<li><a href="https://design.wikimedia.org/accessibility-statement.html">Accessibility statement</a></li>
</ul>
<p><a href="https://wikimediafoundation.org/" class="lnk--wikimedia-project" property="author" typeof="Organization">A Wikimedia Foundation project</a></p>
<noscript><p><img src="https://piwik.wikimedia.org/piwik.php?idsite=16&rec=1" alt=""></p></noscript>
</div>
</footer>
</body>
</html>