pdap-design-system 1.0.5 → 1.1.0
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +100 -13
- package/bin/pdap-design-system-cli.js +23 -0
- package/dist/css/global-styles.css +2133 -0
- package/dist/images/acronym.svg +16 -0
- package/dist/images/favicon.png +0 -0
- package/dist/images/icons/automation.svg +50 -0
- package/dist/images/icons/community.svg +38 -0
- package/dist/images/icons/scrapers.svg +64 -0
- package/dist/images/icons/sources.svg +43 -0
- package/dist/images/icons/standard.svg +38 -0
- package/dist/images/lockup.svg +68 -0
- package/dist/images/logo.svg +8 -0
- package/dist/images/webclip.gif +0 -0
- package/package.json +76 -20
- package/system/README.md +1 -0
- package/system/css/global-styles.css +2 -2
- package/CONTRIBUTING.md +0 -4
- package/system/demo.html +0 -185
- package/system/js/nav.js +0 -12
package/system/demo.html
DELETED
|
@@ -1,185 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="utf-8">
|
|
5
|
-
<title>PDAP design system</title>
|
|
6
|
-
<meta content="width=device-width, initial-scale=1" name="viewport">
|
|
7
|
-
<meta name="description" content="Design system for the Police Data Accessibility Project and its services.">
|
|
8
|
-
<meta name="keywords" content="design, system, design system">
|
|
9
|
-
<link href="css/normalize.css" rel="stylesheet" type="text/css">
|
|
10
|
-
<link href="css/global-styles.css" rel="stylesheet" type="text/css">
|
|
11
|
-
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
|
|
12
|
-
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script>
|
|
13
|
-
<script type="text/javascript">WebFont.load({ google: { families: ["Libre Franklin:100,200,300,regular,500,600,700,800,900,100italic,200italic,300italic,italic,500italic,600italic,700italic,800italic,900italic"] }});</script>
|
|
14
|
-
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
15
|
-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
16
|
-
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,400;0,600;0,900;1,400;1,600;1,900&display=swap" rel="stylesheet">
|
|
17
|
-
<!-- [if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript"></script><![endif] -->
|
|
18
|
-
<!-- Global site tag (gtag.js) - Google Analytics -->
|
|
19
|
-
<script async src="https://www.googletagmanager.com/gtag/js?id=G-REKS6B95BL"></script>
|
|
20
|
-
<script>
|
|
21
|
-
window.dataLayer = window.dataLayer || [];
|
|
22
|
-
function gtag(){dataLayer.push(arguments);}
|
|
23
|
-
gtag('js', new Date());
|
|
24
|
-
gtag('config', 'G-REKS6B95BL');
|
|
25
|
-
</script>
|
|
26
|
-
<!-- Google ads tag (gtag.js) -->
|
|
27
|
-
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-11016541790"></script>
|
|
28
|
-
<script>
|
|
29
|
-
window.dataLayer = window.dataLayer || [];
|
|
30
|
-
function gtag(){dataLayer.push(arguments);}
|
|
31
|
-
gtag('js', new Date());
|
|
32
|
-
gtag('config', 'AW-11016541790');
|
|
33
|
-
</script>
|
|
34
|
-
<!-- Event snippet for newsletter signup conversion page
|
|
35
|
-
In your html page, add the snippet and call gtag_report_conversion when someone clicks on the chosen link or button. -->
|
|
36
|
-
<script>
|
|
37
|
-
function gtag_report_conversion(url) {
|
|
38
|
-
var callback = function () {
|
|
39
|
-
if (typeof(url) != 'undefined') {
|
|
40
|
-
window.location = url;
|
|
41
|
-
}
|
|
42
|
-
};
|
|
43
|
-
gtag('event', 'conversion', {
|
|
44
|
-
'send_to': 'AW-11016541790/BTkiCN2cyoEYEN6sjIUp',
|
|
45
|
-
'event_callback': callback
|
|
46
|
-
});
|
|
47
|
-
return false;
|
|
48
|
-
}
|
|
49
|
-
</script>
|
|
50
|
-
<link href="images/favicon.png" rel="shortcut icon" type="image/x-icon">
|
|
51
|
-
<link href="images/webclip.gif" rel="apple-touch-icon">
|
|
52
|
-
</head>
|
|
53
|
-
<body>
|
|
54
|
-
<div data-collapse="medium" data-animation="default" data-duration="400" role="banner" class="navbar nav">
|
|
55
|
-
<a href="index.html" aria-current="page" class="brand nav-brand current"><img src="images/lockup.svg" loading="lazy" width="250" alt="Police Data Accessibility Project Logo" class="logo"></a>
|
|
56
|
-
<div class="nav-container-last">
|
|
57
|
-
<div class="nav-container container">
|
|
58
|
-
<div class="menu-button nav-button">
|
|
59
|
-
<div class="nav-menu-icon"><i class="fa fa-bars"></i></div>
|
|
60
|
-
</div>
|
|
61
|
-
</div>
|
|
62
|
-
</div>
|
|
63
|
-
<nav role="navigation" class="nav-menu">
|
|
64
|
-
<a href="index.html" class="nav-link">Home</a>
|
|
65
|
-
<a href="demo.html" aria-current="page" class="nav-link current">Current page</a>
|
|
66
|
-
<a href="donate.html" class="nav-link">Page</a>
|
|
67
|
-
</nav>
|
|
68
|
-
</div>
|
|
69
|
-
<div class="section">
|
|
70
|
-
<div class="container">
|
|
71
|
-
<h1 class="shout">Shout</h1>
|
|
72
|
-
<p>For big messages, saying big things.</p>
|
|
73
|
-
<h1>Heading 1</h1>
|
|
74
|
-
<p>This is a paragraph. There's a max line length, so that things stay readable at unexpected screen and font sizes. The text is large to encourage brevity and readability.</p>
|
|
75
|
-
<h2>Heading 2</h2>
|
|
76
|
-
<p>Another paragraph.</p>
|
|
77
|
-
<h3>Heading 3</h3>
|
|
78
|
-
<p>This paragraph has <code><code></code> in it.</p>
|
|
79
|
-
<h4>Heading 4</h4>
|
|
80
|
-
<div>
|
|
81
|
-
<pre><code>This is a whole code block!
|
|
82
|
-
It has many lines.</code></pre>
|
|
83
|
-
</div>
|
|
84
|
-
<h5>Heading <code>code</code> 5</h5>
|
|
85
|
-
<p>Another paragraph.</p>
|
|
86
|
-
<h6>Heading 6</h6>
|
|
87
|
-
<div class="small">
|
|
88
|
-
<p>Another paragraph, inside a div with class "small".</p>
|
|
89
|
-
</div>
|
|
90
|
-
</div>
|
|
91
|
-
</div>
|
|
92
|
-
<div class="section">
|
|
93
|
-
<div class="container small">
|
|
94
|
-
<h3>Testimonials</h3>
|
|
95
|
-
<div class="boxed">
|
|
96
|
-
<p class="quote">“PDAP's work was invaluable in helping us find and access data we otherwise wouldn't have been able to.”</p>
|
|
97
|
-
<p class="citation">—Dr. Jesse Wozniak, Director of Law & Public Policy at the <a href="https://apa-pgh.org/">Alliance for Police Accountability</a></p>
|
|
98
|
-
</div>
|
|
99
|
-
</div>
|
|
100
|
-
</div>
|
|
101
|
-
<div class="section">
|
|
102
|
-
<div class="container">
|
|
103
|
-
<div class="layout-grid grid-2">
|
|
104
|
-
<div class="shout-box grid-span-2">
|
|
105
|
-
<h1 class="shout">This is a grid layout.<br></h1>
|
|
106
|
-
<p class="bottom-0">The grid is our main tool for layout. The div containing this paragraph and the header above it spans multiple grid columns.</p>
|
|
107
|
-
</div>
|
|
108
|
-
<div>
|
|
109
|
-
<h3>This doesn't span columns.</h3>
|
|
110
|
-
<p>Here's a button though!</p>
|
|
111
|
-
<a href="https://airtable.com/shrbFfWk6fjzGnNsk"><div class="button">Normal button.</div></a>
|
|
112
|
-
</div>
|
|
113
|
-
<div>
|
|
114
|
-
<h3>Neither does this.</h3>
|
|
115
|
-
<p>This is a deprioritized button.</p>
|
|
116
|
-
<a href="https://airtable.com/shrS4PAZTYVT1zSq8"><div class="button button-outline">Outline button.</div></a>
|
|
117
|
-
</div>
|
|
118
|
-
</div>
|
|
119
|
-
<div class="layout-grid grid-3">
|
|
120
|
-
<h2 class="grid-span-3 top-45 bottom-0">More grids</h2>
|
|
121
|
-
<div>
|
|
122
|
-
<p>For some applications, we will need custom grids.</p>
|
|
123
|
-
</div>
|
|
124
|
-
<div>
|
|
125
|
-
<p>Instead of <code>grid-3</code>, make a new custom grid class with the right column widths.</p>
|
|
126
|
-
</div>
|
|
127
|
-
<div>
|
|
128
|
-
<p>You may want to override the spacing, too!</p>
|
|
129
|
-
</div>
|
|
130
|
-
</div>
|
|
131
|
-
</div>
|
|
132
|
-
</div>
|
|
133
|
-
<div class="section">
|
|
134
|
-
<div class="container">
|
|
135
|
-
<div class="form">
|
|
136
|
-
<h3>Here's a little form.</h3>
|
|
137
|
-
<p class="small">We could use more styles for these.</p>
|
|
138
|
-
<form action="https://buttondown.email/api/emails/embed-subscribe/pdap" method="post" target="popupwindow" onsubmit="window.open('https://buttondown.email/pdap', 'popupwindow')" style="max-width:500px;">
|
|
139
|
-
<input type="email" class="input input-text" maxlength="256" name="email" id="bd-email" placeholder="Placeholder..."/>
|
|
140
|
-
<input type="submit" class="button" value="Get Updates"/>
|
|
141
|
-
</form>
|
|
142
|
-
</div>
|
|
143
|
-
</div>
|
|
144
|
-
</div>
|
|
145
|
-
<div class="section">
|
|
146
|
-
<div class="container">
|
|
147
|
-
<div class="layout-grid grid-2 top-45">
|
|
148
|
-
<h2 class="grid-span-2">How do you make nice tiles with icons?</h2>
|
|
149
|
-
<div>
|
|
150
|
-
<img class="tile-icon" src="images/icons/automation.svg">
|
|
151
|
-
<h3>Good question.</h3>
|
|
152
|
-
<p>Here's how you do it! These are custom SVG icons.</p>
|
|
153
|
-
</div>
|
|
154
|
-
<div>
|
|
155
|
-
<img class="tile-icon" src="images/icons/standard.svg">
|
|
156
|
-
<h3>This is another tile.</h3>
|
|
157
|
-
<p><i class="fa fa-info-circle"></i> Here's how to do a <a href="https://fontawesome.com/">fontawesome</a> icon.</p>
|
|
158
|
-
</div>
|
|
159
|
-
</div>
|
|
160
|
-
</div>
|
|
161
|
-
</div>
|
|
162
|
-
<div class="section">
|
|
163
|
-
<div class="airtable-box">
|
|
164
|
-
<div class="container">
|
|
165
|
-
<p><a href="https://airtable.com/shrUAtA8qYasEaepI">Always link to the source</a> of an embed.</p>
|
|
166
|
-
</div>
|
|
167
|
-
<iframe class="airtable-embed" src="https://airtable.com/embed/shrUAtA8qYasEaepI?backgroundColor=gray&viewControls=on" frameborder="0" onmousewheel="scroll" width="100%" height="750" style="background: transparent; border: 1px solid #512a4f;"></iframe>
|
|
168
|
-
</div>
|
|
169
|
-
</div>
|
|
170
|
-
<div class="footer section">
|
|
171
|
-
<div class="container">
|
|
172
|
-
<div class="footer-actions">
|
|
173
|
-
<a href="https://github.com/orgs/Police-Data-Accessibility-Project" class="button button-footer">GitHub</a>
|
|
174
|
-
<a href="https://discord.gg/wMqex8nKZJ" class="button button-footer">Discord</a>
|
|
175
|
-
<a href="https://www.linkedin.com/company/pdap" class="button button-footer">LinkedIn</a>
|
|
176
|
-
</div>
|
|
177
|
-
<p class="footer-p">© 2023 Police Data Accessibility Project<br></p>
|
|
178
|
-
<p class="footer-p">PDAP is a non-profit. EIN: 85-4207132. <a href="https://docs.pdap.io/meta/policy/pdap-privacy-policy" alt="Privacy Policy">Privacy Policy</a>. <a href="mailto:contact@pdap.io">contact@pdap.io</a><br><br></p>
|
|
179
|
-
<p class="footer-p"><a href="https://www.guidestar.org/profile/85-4207132" target="_blank"><img src="https://widgets.guidestar.org/gximage2?o=9973356&l=v4" /></a><img src="images/acronym.svg" loading="lazy" width="150" alt="" class="footer-logo"></p>
|
|
180
|
-
</div>
|
|
181
|
-
</div>
|
|
182
|
-
<script src="js/nav.js" type="text/javascript"></script>
|
|
183
|
-
<!-- [if lte IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script><![endif] -->
|
|
184
|
-
</body>
|
|
185
|
-
</html>
|
package/system/js/nav.js
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
document.addEventListener("DOMContentLoaded", function() {
|
|
2
|
-
var menuButton = document.querySelector(".menu-button");
|
|
3
|
-
var navMenu = document.querySelector(".nav-menu");
|
|
4
|
-
|
|
5
|
-
menuButton.addEventListener("click", function() {
|
|
6
|
-
if (navMenu.style.display === "none" || navMenu.style.display === "") {
|
|
7
|
-
navMenu.style.display = "block";
|
|
8
|
-
} else {
|
|
9
|
-
navMenu.style.display = "none";
|
|
10
|
-
}
|
|
11
|
-
});
|
|
12
|
-
});
|