forked from wikimedia/WikimediaUI-Style-Guide
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
130 lines (130 loc) · 7.58 KB
/
index.html
File metadata and controls
130 lines (130 loc) · 7.58 KB
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
<!DOCTYPE html>
<!--[if lte IE 8 ]><html lang="en" class="js-off lte-ie8"><![endif]-->
<!--[if IE 9 ]> <html lang="en" class="js-off ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html lang="en" class="js-off">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<link rel="stylesheet" href="css/build/wmui-style-guide.min.css">
<title>Wikimedia Design Style Guide (WikimediaUI) – provided by Wikimedia Foundation Design Team</title>
<script>
document.documentElement.className = document.documentElement.className.replace(/\bjs-off\b/,'js-on'); // no BEM notation thx to IE
</script>
<!--[if lt IE 9]>
<script>window.html5={'shivCSS':false};</script>
<script src="js/vendor/ie/html5shiv-3.7.3.min.js"></script>
<script src="js/vendor/ie/respond-1.4.2.min.js"></script>
<![endif]-->
<link rel="preload" href="fonts/Charter_regular.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="fonts/Lato_regular.woff2" as="font" type="font/woff2" crossorigin>
<script src="js/fonts-loader.js" async></script>
<script>
var _paq = _paq || [];
_paq.push(['setDomains', ['*.design.wikimedia.org.']]);
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
function embedTrackingCode() {
var u='https://piwik.wikimedia.org/';
_paq.push(['setTrackerUrl', u+'piwik.php']);
_paq.push(['setSiteId', '16']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.defer=true; g.async=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
}
if (window.addEventListener) {
window.addEventListener('load', embedTrackingCode, false);
} else if (window.attachEvent) {
window.attachEvent('onload',embedTrackingCode);
} else {
embedTrackingCode();
}
</script>
</head>
<body class="page--home">
<header id="header" class="header" role="banner">
<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" 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" role="navigation">
<ol>
<li class="nav__item is-on"><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>
<ul class="nav__sub-items">
<li class="nav__sub-item"><a href="visual-style.html">Principles</a></li>
<li class="nav__sub-item"><a href="visual-style_colors.html">Colors</a></li>
<li class="nav__sub-item"><a href="visual-style_typography.html">Typography</a></li>
<li class="nav__sub-item"><a href="visual-style_icons.html">Icons</a></li>
<li class="nav__sub-item"><a href="visual-style_imagery.html">Imagery</a></li>
<li class="nav__sub-item"><a href="visual-style_illustrations.html">Illustrations</a></li>
</ul>
</li>
<!-- <li class="nav__item"><a href="components.html">Components</a></li>
<li class="nav__item"><a href="patterns.html">Patterns</a></li>
<li class="nav__item"><a href="resources.html">Resources</a></li> -->
</ol>
</nav>
</div>
<div class="col col--end">
<main id="content" class="content" role="main">
<h1 class="page__title">Introduction</h1>
<p>Wikimedia Design Style Guide ensures consistency in how our products look and behave. Its guidelines enable interactions between our diverse communities and users. </p>
<p>The Style Guide features unique focus areas like accessibility, internationalization, and localization. </p>
<p>It aims to help designers and developers with their <a href="https://www.wikimedia.org/" target="_blank" rel="noopener">Wikimedia</a> projects, as part of the <a href="https://wikimediafoundation.org/" target="_blank" rel="noopener" title="Wikimedia Foundation website">Foundation</a> or in a volunteer capacity. </p>
<p>Our interfaces are our brand. Our visual design principles drive the aesthetics of our products. </p>
<section id="process">
<h2>Our Process</h2>
<p>Wikimedia Foundation Design Team maintains the Style Guide. <br>Our multi-disciplinary team focuses on
<ul>
<li>user experience design,</li>
<li>user research,</li>
<li>engineering,</li>
<li>information architecture,</li>
<li>human-computer interaction,</li>
<li>visual design and</li>
<li>usability.</li>
</ul>
<p>Our process involves following our <a href="design-principles.html">primary design principles</a> to provide solutions for visual identity, user interface components, and patterns. </p>
<p>We encourage collaboration and participation in evolving the Wikimedia Design Style Guide. </p>
</section>
<section id="how-to-participate">
<h2>How to participate</h2>
<p>You can engage in many ways:</p>
<ul>
<li><strong>Request a change or an addition</strong><br><a href="https://phabricator.wikimedia.org/maniphest/task/edit/form/1/?projects=wikimediaui_style_guide" target="_blank" rel="noopener">Raise a ticket on our workboard</a> to request a change to the Style Guide</li>
<li><strong>Provide feedback</strong><br>Get in touch with us on <a href="https://meta.wikimedia.org/wiki/IRC/Channels#wikimedia-design" target="_blank" rel="noopener">IRC</a></li>
<li><strong>Follow us</strong><br>Follow <a href="https://twitter.com/WikimediaUX" target="_blank" rel="noopener">@WikimediaUX on Twitter</a></li>
<li><strong>Contribute</strong><br>Read <a href="https://github.com/wikimedia/WikimediaUI-Style-Guide/blob/master/CONTRIBUTING.md" target="_blank" rel="noopener">contributing guidelines on Github</a></li>
<li><strong>Play around</strong><br><a href="https://github.com/wikimedia/WikimediaUI-Style-Guide/archive/master.zip" target="_blank" rel="noopener">Download Wikimedia Design Style Guide</a></li>
</ul>
</section>
</main>
</div>
</div>
</div>
<footer id="footer" class="footer">
<div class="content-box">
<ul class="footer__list">
<li><a href="https://github.com/wikimedia/WikimediaUI-Style-Guide">Contribute on GitHub</a></li>
<li><a href="https://twitter.com/@WikimediaUX" title="Follow Wikimedia User Experience team account on Twitter">Follow @WikimediaUX</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">Creative Commons Attribution-ShareAlike 4.0 International</a>, additional terms may apply. <br>Code is available under the MIT license.</p>
<p><a href="https://wikimediafoundation.org/" class="lnk--wikimedia-project">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>