forked from shekar73/designpatterns
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
62 lines (62 loc) · 3.6 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
---
title: "About"
layout: general
---
<div class="pl-hero">
<div class="container">
<h1 class="text-center"><b>!!</b> UI Design Library</h1>
<h3 class="text-center">An open source UI style guide, pattern library, and Bootstrap theme.</h3>
<div class="row">
<div class="col-sm-12 text-center">
<div style="margin-top: 30px; margin-bottom: 15px;">
<a href="{{site.versions[0].url}}/index.html" class="btn btn-lg btn-default">View Library</a>
<a href="{{site.versions[0].url}}/resources.html" class="btn btn-lg btn-primary">Download </a>
<div class="small" style="opacity: .5; margin-top: 30px; color: #fff;">Current version: {{site.version}}</div>
<div class="small" style="color: #fff;">
<span style="opacity: .5;">Other versions:</span>
{% for v in site.versions %}
{% if v.name != site.version %}
<a href="{{v.url}}" style="color: #fff;">{{v.name}}</a>
{% endif %}
{% endfor %}
</div>
</div>
</div>
</div>
</div>
<div class="pl-hero-background"></div>
</div>
<div class="pl-about">
<div class="container panel-body">
<div class="row">
<div class="col-sm-6 pl-padded-col">
<h3>What is this?</h3>
<p>An open source UI style guide, pattern library, and Bootstrap theme. Our docs are packed full of usability guidelines, examples, and source code.</p>
</div>
<div class="col-sm-6 pl-padded-col">
<h3>How can I use it?</h3>
<p>Once downloaded from the link above or via Bower, you can use either the minified CSS build or the source LESS files in your own build system. <a href="{{site.repository.url}}/blob/gh-pages/howto.md">View our how-to guide</a> <i class="icon icon-external-link"></i></p>
</div>
</div>
<div class="row">
<div class="col-sm-6 pl-padded-col">
<h3>Who is it for?</h3>
<p>This is intended for designers and developers working on NMAAHC related projects. But, since it's open source, anyone can take advantage of it. If it's useful to you, use it.</p>
</div>
<div class="col-sm-6 pl-padded-col">
<h3>Why make it?</h3>
<p>We have a lot of web projects at the NMAAHC. These design guidelines and resources aim to create a unified experience across all projects at the NMAAHC, both internal and external. THIS interface is easy to understand and manipulate with the basic understanding of HTML and CSS, does not require the inspector tool to view the code, and further explains the interface elements.</p>
</div>
</div>
<div class="row">
<div class="col-sm-6 pl-padded-col">
<h3>Not using Bootstrap?</h3>
<p>That's fine! A lot of our projects use Bootstrap, but not all of them. The usability guidelines and some resources (like LESS variables or icons) could still be useful.</p>
</div>
<div class="col-sm-6 pl-padded-col">
<h3>Want to contribute?</h3>
<p>We want your help! Visit our <a href="{{site.repository.url}}">Github repository</a> <i class="icon icon-external-link"></i> for contribution guidelines. If you have improvements or bug fixes, let us know!</p>
</div>
</div>
</div>
</div>