forked from wikimedia/WikimediaUI-Style-Guide
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
126 lines (126 loc) · 7.76 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
<!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">
<meta property="og:title" content="Wikimedia Design Style Guide (WikimediaUI)">
<meta property="og:type" content="website">
<meta property="og:url" content="https://design.wikimedia.org/style-guide">
<meta property="og:image" content="https://design.wikimedia.org/style-guide/img/design-principles/content-first.png">
<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>
<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 user experience design, user research, engineering, information architecture, human-computer interaction and visual design.
</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>
<p><a href="https://wikimediafoundation.org/wiki/Privacy_policy">Privacy policy</a></p>
<noscript><p><img src="https://piwik.wikimedia.org/piwik.php?idsite=16&rec=1" alt=""></p></noscript>
</div>
</footer>
</body>
</html>