-
Notifications
You must be signed in to change notification settings - Fork 69
/
index.html
110 lines (89 loc) · 4.97 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The Ushahidi Platform Pattern Library</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="shortcut icon" type="image/ico" href="../../favicon.ico" />
<!--<link href='http://fonts.googleapis.com/css?family=Lato:400,900,400italic,900italic' rel='stylesheet' type='text/css'>-->
<link href='../../fonts/Lato/css/fonts.css' rel='stylesheet' type='text/css'>
<link href="assets/css/style.css" rel="stylesheet" type="text/css" />
</head>
<body class="pl ltr-namespace landing-page">
<div class="wrapper">
<header class="pl-page-header">
<h3>
<a href="index.html">
<img src="assets/img/ushahidi-logo.svg" alt="Ushahidi Logo">
Ushahidi Platform Pattern Library
</a>
</h3>
<nav class="pl-nav">
<ul>
<li class="active"><a href="index.html">Home</a></li>
<li><a href="assets/html/1_basics/">Basics</a></li>
<li><a href="assets/html/2_fragments/">Fragments</a></li>
<li><a href="assets/html/3_modules/">Modules</a></li>
<li><a href="assets/html/4_blocks/">Blocks</a></li>
<li><a href="assets/html/5_layouts/">Layouts</a></li>
</ul>
</nav>
</header>
<section class="pl-pattern">
<div class="pl-pattern-description">
<h2>
The Ushahidi Platform Pattern Library
</h2>
<div class="pl-divider"></div>
</div>
<div class="container maxed">
<p>
This pattern library serves many purposes. Among them:
</p>
<h3>It defines our design system.</h3>
<p>
By defining our visual design in a front-end context, we are less likely to have any discrepencies between graphic design and what has been coded.
</p>
<h3>It's a central repository for front-end code.</h3>
<p>
This repository (or forked and updated versions) will be able to be pulled into the final app. Since everything is coming from one place, there will not be any reduncies and we will not need to worry about keeping things up to date.
</p>
<h3>It serves as front-end documentation.</h3>
<p>
Our front-end guidelines explain <em>how</em> our code is written. The pattern library itself defines <em>what</em> each pattern is and provides code samples where you can copy & their HTML. Ideally, one could use this pattern library as a palette in which they could pick and choose patterns to create a page with.
</p>
</div>
</section>
<section class="pl-pattern">
<div class="pl-pattern-description">
<h2>Who is this for?</h2>
<div class="pl-divider"></div>
</div>
<div class="container maxed">
<p>
This Pattern Library is for anyone interested in creating a custom design for their Ushahidi Platform installation. For details on how to use this Pattern Library with the Ushahidi Platform, read the <a href="assets/html/front-end-guidelines/how-to-use.html">How to Apply to Platform</a> section.
</p>
</div>
</section>
<section class="pl-pattern">
<div class="pl-pattern-description">
<h2>
Front-End Guidelines
</h2>
<div class="pl-divider"></div>
</div>
<div class="container maxed">
<p>
These guidelines will walk you through how to get set-up with the front-end build of the platform. They have useful links for documentation and external resources, and provide guidelines for keeping our code consistent and maintainable.
</p>
<a class="button" href="assets/html/front-end-guidelines/introduction.html" role="button">View Guidelines</a>
</div>
</section>
</div><!--end wrapper-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="assets/js/app.js"></script>
</body>
</html>