pdap-design-system 1.0.6 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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/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
|
-
});
|