-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
295 lines (270 loc) · 13.7 KB
/
index.html
File metadata and controls
295 lines (270 loc) · 13.7 KB
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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Codepills | Easy to display code pills by AllanCodes</title>
<link href="https://cdn.jsdelivr.net/npm/@mdi/font/css/materialdesignicons.min.css" rel="stylesheet">
<!-- Google fonts Roboto just for the example page -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<!-- use prism for showing code snippets , love you prism -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-okaidia.min.css" />
<link rel="stylesheet" href="/example/style.css">
</head>
<body>
<div class="page-wrap">
<div class="sidebar">
<div class="sticky">
<p>Quick links</p>
<ul>
<li><a href="#intro">Introduction</a></li>
<li><a href="#optionsTitle">Config / Options</a></li>
<li><a href="#exampleSpecificTitle">Specify Output</a></li>
<li><a href="#exampleRoundedTitle">Rounded Items</a></li>
<li><a href="#exampleSpacingTitle">Spacing Options</a></li>
<li><a href="#exampleAlignTitle">Alignment Options</a></li>
<li><a href="#exampleIconsEnabledTitle">Icon Visibility </a></li>
<li><a href="#exampleOutlineTitle">Outline</a></li>
<li><a href="#exampleLinkTitle">Links</a></li>
<li><a href="#exampleTextTitle">Text</a></li>
<li><a href="#exampleRandomTitle">Random</a></li>
<li><a href="#exampleAnimationsTitle">Animation - Fade </a></li>
<li><a href="#exampleGradientTitle">Gradients</a></li>
</ul>
</div>
</div>
<div class="main-content">
<section class="intro" id="intro" aria-labelledby="pageTitle">
<h1 id="pageTitle">CodePills:</h1>
<p>A super simple way of displaying tech 'brands' in pill form. <br>
Made to look good and be customisable.</p>
</section>
<section arira-labelledby="exampleDefaultTitle">
<h2 id="exampleDefaultTitle">Default:</h2>
<p>With no arguments, Codepills will output all available pills with no styling attached.</p>
<p><b>Example:</b></p>
<pre aria-label="Code example: An example of calling createBrandPills function"><code class="lang-js">createBrandPills()</code></pre>
<p><b>Generates:</b></p>
<div id="example1"></div>
</section>
<section aria-labelledby="optionsTitle">
<h2 id="optionsTitle">Options and Config</h2>
<p>Configuring pills is simple, the createBrandPills function takes three arguments.
<ul>
<li>1. HTMLElement you wish the Pills to be inserted into.</li>
<li>2. ( Optional ) - An array of brand names you'd like to display</li>
<li>3. ( Optional ) - Options to configure CodePills with a variety of options!</li>
</ul>
</p>
<pre aria-label="basic usage example of pills"><code class="lang-js">createBrandPills(ArrayOfBrands, OptionsObject)</code></pre>
<h3>ArrayOfBrands</h3>
<p>The first argument for createBrandPills is an array of strings. The strings should each be a brand name. For example "html5" or "css". <br></p>
<pre><code class="lang-js">const arrayofBrands = ['vuejs','digitalocean','vite','gatsby','tailwindcss','netlify','php']</code></pre>
<p class="note">
<i class="mdi mdi-information"></i>
If an empty array is passed as the first argument, createBrandPills will return the full list of Pills. Useful for debugging.</p>
<hr class="divider">
<h3>OptionsObject</h3>
<p>The second argument, is an Object with the following <b>OPTIONAL</b> attributes</p>.
<p>By combining options together, you can truly customise CodePills to your project. </p>
<table class="configTable" cellspacing="0">
<thead>
<tr>
<th>Property</td>
<th>Description</td>
<th>Type</td>
<th>Default</th>
<th>Supported Values</td>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#exampleRoundedTitle" title="jump to rounded">Rounded</a></td>
<td>Apply rounded corners to the pills</td>
<td>Boolean</td>
<td>false</td>
<td>true,false</td>
</tr>
<tr>
<td><a href="#exampleSpacingTitle" title="jump to spacing">Spacing</a></td>
<td>Set the margin around each item</td>
<td>String</td>
<td>'small'</td>
<td>'small', 'medium', 'large'</td>
</tr>
<tr>
<td><a href="#exampleAlignTitle" title="jump to Alignment">Alignment</a></td>
<td>Set the alignment of the items</td>
<td>String</td>
<td>'left'</td>
<td>'left', 'center', 'centre', 'large'</td>
</tr>
<tr>
<td><a href="#exampleIconsEnabledTitle" title="jump to IconsEnabled">IconsEnabled</a></td>
<td>Display icons in the pills?</td>
<td>Boolean</td>
<td>true</td>
<td>true, false</td>
</tr>
<tr>
<td><a href="#exampleOutlineTitle" title="jump to Outline">Outline</a></td>
<td>Display Outlined Styling</td>
<td>Boolean</td>
<td>false</td>
<td>true, false</td>
</tr>
<tr>
<td><a href="#exampleLinksTitle" title="jump to Links">Links</a></td>
<td>Enable linking to brand homepage, if exists</td>
<td>Boolean</td>
<td>false</td>
<td>true, false</td>
</tr>
<tr>
<td><a href="#exampleTextTitle" title="jump to Text">Text</a></td>
<td>Enable Human Readable text in the pill.</td>
<td>Boolean</td>
<td>true</td>
<td>true, false</td>
</tr>
<tr>
<td><a href="#exampleRandomTitle" title="jump to Random">Random</a></td>
<td>Enable Random Sorting On Items</td>
<td>Boolean</td>
<td>false</td>
<td>true, false</td>
</tr>
<tr>
<td><a href="#exampleAnimationsTitle" title="jump to Animations">Animation</a></td>
<td>Pass a string to enable animations on creation</td>
<td>String</td>
<td>null</td>
<td>'fade'</td>
</tr>
<tr>
<td><a href="#exampleGradientTitle" title="jump to Gradient">Gradient</a></td>
<td>Enable gradients on items</td>
<td>Boolean</td>
<td>false</td>
<td>true, false</td>
</tr>
</tbody>
</table>
</section>
<section arira-labelledby="exampleSpecificTitle">
<h2 id="exampleSpecificTitle">Specific list:</h2>
<p>Passing in an array of strings to Codepills will generate pills based on that array.</p>
<p><b>Example:</b></p>
<pre><code class="lang-js">const exampleBrands = ['vuejs', 'digitalocean', 'vite', 'gatsby', 'tailwindcss', 'netlify', 'php']
createBrandPills(HTMLElement, exampleBrands)</code></pre>
<p><b>Generates:</b></p>
<div id="example2"></div>
</section>
<section arira-labelledby="exampleRoundedTitle">
<h2 id="exampleRoundedTitle">Rounded list:</h2>
<p>You may enable, rounding, by passing the second argument as true. Default is false.</p>
<p><b>Example:</b></p>
<pre><code class="lang-js">createBrandPills([], {rounded: true})</code></pre>
<p><b>Generates:</b></p>
<div id="example3"></div>
</section>
<section arira-labelledby="exampleSpacingTitle">
<h2 id="exampleSpacingTitle">Spacing Example:</h2>
<p>Spacing changes the spacing between each item. It may be 'small', 'medium', or 'large'</p>
<p><b>Example:</b></p>
<pre><code class="lang-js">createBrandPills(HTMLElement, [],{ spacing: 'large'})</code></pre>
<p><b>Generates:</b></p>
<div id="example4"></div>
</section>
<section arira-labelledby="exampleAlignTitle">
<h2 id="exampleAlignTitle">Alignment Example:</h2>
<p>Alignment changes the alignment of the container for the pills. <br>
It may be 'left', 'center', 'centre', or 'right'
</p>
<p class="note">
<i class="mdi mdi-information"></i>
These examples, all use a predefined array of brand names, to simplify the demo.
</p>
<p><b>Example 1:</b></p>
<pre><code class="lang-js">createBrandPills(HTMLElement, exampleArrayBrands,{ alignment: 'left'})</code></pre>
<p><b>Generates:</b></p>
<div id="example5"></div>
<hr class="divider">
<p><b>Example 2:</b></p>
<pre><code class="lang-js">createBrandPills(HTMLElement, exampleArrayBrands,{ alignment: 'centre'})</code></pre>
<p><b>Generates:</b></p>
<div id="example6"></div>
<hr class="divider">
<p><b>Example 3:</b></p>
<pre><code class="lang-js">createBrandPills(HTMLElement, exampleArrayBrands,{ alignment: 'right'})</code></pre>
<p><b>Generates:</b></p>
<div id="example7"></div>
</section>
<section arira-labelledby="exampleIconsEnabledTitle">
<h2 id="exampleIconsEnabledTitle">IconsEnabled Example:</h2>
<p>You can enable or disable the icons, by setting the IconsEnabled attribute.</p>
<p><b>Example:</b></p>
<pre><code class="lang-js">createBrandPills(HTMLElement, [], { iconsEnabled: false})</code></pre>
<p><b>Generates:</b></p>
<div id="example8"></div>
</section>
<section arira-labelledby="exampleOutlineTitle">
<h2 id="exampleOutlineTitle">Outline Example:</h2>
<p>You can enable or outlines, by setting the outline attribute.</p>
<p><b>Example:</b></p>
<pre><code class="lang-js">createBrandPills(HTMLElement, [], { outline: true})</code></pre>
<p><b>Generates:</b></p>
<div id="example9"></div>
</section>
<section arira-labelledby="exampleLinkTitle">
<h2 id="exampleLinkTitle">Link Example:</h2>
<p>You can enable or disable links. <br> If available. They will open in a new tab.</p>
<p><b>Example:</b></p>
<pre><code class="lang-js">createBrandPills(HTMLElement, [], { links: true})</code></pre>
<p><b>Generates:</b></p>
<div id="example10"></div>
</section>
<section arira-labelledby="exampleTextTitle">
<h2 id="exampleTextTitle">Text Example:</h2>
<p>You can enable or text. If disabled, text will not show in the pip.</p>
<p class="note">
<i class="mdi mdi-information"></i>
If you disable text and also disable Icons - text will be output to ensure items are not empty.
</p>
<p><b>Example:</b></p>
<pre><code class="lang-js">createBrandPills(HTMLElement, [], { text: false})</code></pre>
<p><b>Generates:</b></p>
<div id="example11"></div>
</section>
<section arira-labelledby="exampleRandomTitle">
<h2 id="exampleRandomTitle">Random Example:</h2>
<p>Enabling Random will shuffle the Pills in a random order.</p>
<p><b>Example:</b></p>
<pre><code class="lang-js">createBrandPills(HTMLElement, [], { random: true})</code></pre>
<p><b>Generates:</b></p>
<div id="example12"></div>
</section>
<section arira-labelledby="exampleAnimationsTitle">
<h2 id="exampleAnimationsTitle">Animations Example: - Fade</h2>
<p>Setting the value to a valid Animation type ( found in attribute table ) will apply that animation to the items.</p>
<button id="example13Button">Click Me To Animate!</button>
<p><b>Example:</b></p>
<pre><code class="lang-js">createBrandPills(HTMLElement, [], { animation: 'fade'})</code></pre>
<p><b>Generates:</b></p>
<div id="example13"></div>
</section>
<section arira-labelledby="exampleGradientTitle">
<h2 id="exampleGradientTitle">Gradient Example</h2>
<p>Enabling gradients will add a subtle gradient to each pill</p>
<p><b>Example:</b></p>
<pre><code class="lang-js">createBrandPills(HTMLElement, [], { gradient: true})</code></pre>
<p><b>Generates:</b></p>
<div id="example14"></div>
</section>
</div>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script type="module" src="/example/index.js"></script>
</html>