index.html 8.68 KB
Newer Older
Thomas Randolph's avatar
Thomas Randolph committed
1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Are Web Components A Thing Yet?</title>

	<style>
Alex Russell's avatar
Alex Russell committed
10
11
		:root {
			--spacing: 4rem;
Thomas Randolph's avatar
Thomas Randolph committed
12
			--user-width: 20rem;
Alex Russell's avatar
Alex Russell committed
13
14
15
		}

		html {
16
			box-sizing: border-box;
Thomas Randolph's avatar
Thomas Randolph committed
17
18
19
20
21
			font-family: sans-serif;
			font-size: 10px;
			line-height: 15px;
		}

Alex Russell's avatar
Alex Russell committed
22
		html * {
23
24
25
			box-sizing: inherit;
		}

Alex Russell's avatar
Alex Russell committed
26
		body {
27
28
29
30
31
32
			font-size: 1rem;
			margin: 0;
			padding: 0;
		}

		body > div:first-of-type{
33
			display: grid;
Thomas Randolph's avatar
Thomas Randolph committed
34
			font-size: 10rem;
35
			height: calc( 100vh - 6rem );
36
			line-height: 12rem;
37
38
			place-items: center;
			width: 100%;
39
40
		}

Alex Russell's avatar
Alex Russell committed
41
		body > span {
42
			display: inline-block;
43
44
			font-size: 5rem;
			line-height: 6rem;
45
46
			text-align: center;
			width: 100%;
47
48
		}

Alex Russell's avatar
Alex Russell committed
49
		body > h2 {
50
51
52
53
54
			font-size: 5rem;
			line-height: 6rem;
			text-align: center;
		}

Alex Russell's avatar
Alex Russell committed
55
56
		main {
			padding: var(--spacing);
57
			display: grid;
Alex Russell's avatar
Alex Russell committed
58
			gap: var(--spacing);
Thomas Randolph's avatar
Thomas Randolph committed
59
			grid-template-columns: repeat( auto-fit, minmax( var( --user-width ), 1fr ) );
Thomas Randolph's avatar
Thomas Randolph committed
60
			margin: auto;
Thomas Randolph's avatar
Thomas Randolph committed
61
62
			max-width: calc( ( 5 * var( --user-width ) ) + ( 6 * var( --spacing ) ) );
			width: 80vw;
63
64
65
66
67
68
		}

		wc-user{
			display: inline-grid;
			grid-template-rows: 80% 20%;
			height: 300px;
Thomas Randolph's avatar
Thomas Randolph committed
69
70
			place-items: center;
		}
71
72
73
74
75
76
77
78
79
80

		wc-user img{
			max-width: 100%;
			max-height: 100%;
		}

		wc-user h3{
			font-size: 3rem;
			line-height: 4rem;
			margin: 0;
Thomas Randolph's avatar
Thomas Randolph committed
81
			text-align: center;
82
83
84
85
86
87
88
89
90
91
92
		}

		footer{
			border-top: 1px dashed gray;
			font-size: 2rem;
			line-height: 2.5rem;
			margin-top: 1.5rem;
			padding: 2rem;
			text-align: center;
			width: 100%;
		}
Thomas Randolph's avatar
Thomas Randolph committed
93
94
95
	</style>
</head>
<body>
96
97
98
99
100
101
	<div>
		Yes.
	</div>
	<span></span>
	<h2>Web Components are in use by:</h2>
	<main>
Alex Russell's avatar
Alex Russell committed
102
		<!--
Thomas Randolph's avatar
Thomas Randolph committed
103
			These are specialbois that stay in the top 5 because... well because name recognition, basically
Alex Russell's avatar
Alex Russell committed
104
		-->
105
		<wc-user company="amazon">
Alex Russell's avatar
Alex Russell committed
106
107
108
109
			<img src="images/amazon.png"
					 alt="The Amazon 'A' logo"
					 title="The Amazon 'A' logo"
					 decoding="async" loading="lazy" />
110
111
			<h3>Amazon</h3>
		</wc-user>
112
		<!-- No, don't put your company here -->
113
		<wc-user company="apple">
Alex Russell's avatar
Alex Russell committed
114
115
116
117
			<img src="images/apple.svg"
					 alt="The Apple logo"
					 title="The Apple logo"
					 decoding="async" loading="lazy" />
118
119
			<h3>Apple</h3>
		</wc-user>
120
121
122
123
124
125
126
127
		<!-- Not yet... -->
		<wc-user company="github">
			<img src="images/gh.svg"
					 alt="The GitHub logo"
					 title="The GitHub logo"
					 decoding="async" loading="lazy" />
			<h3>GitHub</h3>
		</wc-user>
128
		<!-- A little more... -->
129
		<wc-user company="google">
Alex Russell's avatar
Alex Russell committed
130
131
132
133
			<img src="images/google.png"
					 alt="The multi-colored Google logo"
					 title="The multi-colored Google logo"
					 decoding="async" loading="lazy" />
134
135
			<h3>Google</h3>
		</wc-user>
136
		<!-- Just one more -->
137
		<wc-user company="microsoft">
Alex Russell's avatar
Alex Russell committed
138
139
140
141
			<img src="images/msft.svg"
					 alt="The Microsoft logo"
					 title="The Microsoft logo"
					 decoding="async" loading="lazy" />
142
143
			<h3>Microsoft</h3>
		</wc-user>
Thomas Randolph's avatar
Thomas Randolph committed
144
145
146
		<!--
		TODO: CSS Tricks, Caniuse
		-->
147
		<!-- Okay, now you can put your company here (in alphabetical order)-->
148
		<wc-user company="adobe">
Alex Russell's avatar
Alex Russell committed
149
150
151
152
153
154
			<img src="images/adobe.svg"
					 alt="The Adobe logo"
					 title="The Adobe logo"
					 decoding="async" loading="lazy" />
			<h3>Adobe</h3>
		</wc-user>
155
		<wc-user company="alaska-airlines">
156
157
158
159
160
161
			<img src="images/alaska-airlines.svg"
					 alt="The Alaska Airlines logo"
					 title="The Alaska Airlines logo"
					 decoding="async" loading="lazy" />
			<h3>Alaska Airlines</h3>
		</wc-user>
162
163
164
165
166
167
168
		<wc-user company="bbva">
			<img src="images/bbva.svg"
					 alt="The BBVA logo"
					 title="The BBVA logo"
					 decoding="async" loading="lazy" />
			<h3>BBVA</h3>
		</wc-user>
169
		<wc-user company="blizzard">
Thomas Randolph's avatar
Thomas Randolph committed
170
171
172
			<img src="images/blizzard.svg"
					 alt="The Blizzard Entertainment logo"
					 title="The Blizzard Entertainment logo"
Alex Russell's avatar
Alex Russell committed
173
					 decoding="async" loading="lazy" />
Thomas Randolph's avatar
Thomas Randolph committed
174
175
			<h3>Blizzard</h3>
		</wc-user>
176
		<wc-user company="byu">
Thomas Randolph's avatar
Thomas Randolph committed
177
178
179
180
181
			<img src="images/byu.svg"
					 alt="The BYU logo"
					 title="The BYU logo"
					 decoding="async" loading="lazy" />
			<h3>BYU</h3>
Alex Russell's avatar
Alex Russell committed
182
		</wc-user>
183
		<wc-user company="comcast">
Alex Russell's avatar
Alex Russell committed
184
185
186
187
188
189
			<img src="images/comcast.svg"
					 alt="The Comcast logo"
					 title="The Comcast logo"
					 decoding="async" loading="lazy" />
			<h3>Comcast</h3>
		</wc-user>
190
		<wc-user company="ea">
Alex Russell's avatar
Alex Russell committed
191
192
193
194
195
196
			<img src="images/ea.svg"
					 alt="The Electronic Arts logo"
					 title="The Electronic Arts logo"
					 decoding="async" loading="lazy" />
			<h3>EA</h3>
		</wc-user>
197
		<wc-user company="esri">
Thomas Randolph's avatar
Thomas Randolph committed
198
199
200
			<img src="images/esri.svg"
					 alt="The ESRI logo"
					 title="The ESRI logo"
Alex Russell's avatar
Alex Russell committed
201
					 decoding="async" loading="lazy" />
Thomas Randolph's avatar
Thomas Randolph committed
202
203
			<h3>ESRI</h3>
		</wc-user>
204
		<wc-user company="ford">
Thomas Randolph's avatar
Thomas Randolph committed
205
206
207
208
209
			<img src="images/ford.svg"
					 alt="The Ford logo"
					 title="The Ford logo"
					 decoding="async" loading="lazy" />
			<h3>Ford Motors</h3>
Alex Russell's avatar
Alex Russell committed
210
		</wc-user>
211
		<wc-user company="ge">
Alex Russell's avatar
Alex Russell committed
212
213
214
215
216
217
			<img src="images/ge.svg"
					 alt="The GE logo"
					 title="The GE logo"
					 decoding="async" loading="lazy" />
			<h3>GE</h3>
		</wc-user>
218
		<wc-user company="gitlab">
Thomas Randolph's avatar
Thomas Randolph committed
219
220
221
			<img src="images/gitlab.svg"
					 alt="The GitLab logo"
					 title="The GitLab logo"
Alex Russell's avatar
Alex Russell committed
222
					 decoding="async" loading="lazy" />
Thomas Randolph's avatar
Thomas Randolph committed
223
			<h3>GitLab</h3>
Alex Russell's avatar
Alex Russell committed
224
		</wc-user>
225
		<wc-user company="gm">
Thomas Randolph's avatar
Thomas Randolph committed
226
227
228
			<img src="images/gm.svg"
					 alt="The General Motors logo"
					 title="The General Motors logo"
Alex Russell's avatar
Alex Russell committed
229
					 decoding="async" loading="lazy" />
Thomas Randolph's avatar
Thomas Randolph committed
230
			<h3>General Motors</h3>
Alex Russell's avatar
Alex Russell committed
231
		</wc-user>
232
233
234
235
236
237
238
		<wc-user company="guidecom">
			<img src="images/guidecom.svg"
					 alt="The GuideCom logo"
					 title="The GuideCom logo"
					 decoding="async" loading="lazy" />
			<h3>GuideCom</h3>
		</wc-user>
239
		<wc-user company="ibm">
Alex Russell's avatar
Alex Russell committed
240
241
242
243
244
245
			<img src="images/ibm.svg"
					 alt="The IBM logo"
					 title="The IBM logo"
					 decoding="async" loading="lazy" />
			<h3>IBM</h3>
		</wc-user>
246
		<wc-user company="infragistics">
Thomas Randolph's avatar
Thomas Randolph committed
247
248
249
			<img src="images/infragistics.svg"
					 alt="The Infragistics logo"
					 title="The Infragistics logo"
Alex Russell's avatar
Alex Russell committed
250
					 decoding="async" loading="lazy" />
Thomas Randolph's avatar
Thomas Randolph committed
251
			<h3>Infragistics</h3>
Alex Russell's avatar
Alex Russell committed
252
		</wc-user>
253
		<wc-user company="ing">
Thomas Randolph's avatar
Thomas Randolph committed
254
255
256
			<img src="images/ing.svg"
					 alt="The ING Bank logo"
					 title="The ING Bank logo"
Alex Russell's avatar
Alex Russell committed
257
					 decoding="async" loading="lazy" />
Thomas Randolph's avatar
Thomas Randolph committed
258
			<h3>ING</h3>
Alex Russell's avatar
Alex Russell committed
259
		</wc-user>
260
		<wc-user company="internet-archive">
Thomas Randolph's avatar
Thomas Randolph committed
261
262
263
			<img src="images/internet_archive.svg"
					 alt="The Internet Archive logo"
					 title="The Internet Archive logo"
Alex Russell's avatar
Alex Russell committed
264
					 decoding="async" loading="lazy" />
Thomas Randolph's avatar
Thomas Randolph committed
265
			<h3>The Internet Archive</h3>
Alex Russell's avatar
Alex Russell committed
266
		</wc-user>
267
		<wc-user company="ionic">
Alex Russell's avatar
Alex Russell committed
268
269
270
271
272
273
			<img src="images/ionic.svg"
					 alt="The Ionic logo"
					 title="The Ionic logo"
					 decoding="async" loading="lazy" />
			<h3>Ionic</h3>
		</wc-user>
274
		<wc-user company="nasa">
Thomas Randolph's avatar
Thomas Randolph committed
275
276
277
			<img src="images/nasa.svg"
					 alt="The NASA logo"
					 title="The NASA logo"
Alex Russell's avatar
Alex Russell committed
278
					 decoding="async" loading="lazy" />
Thomas Randolph's avatar
Thomas Randolph committed
279
			<h3>NASA</h3>
Alex Russell's avatar
Alex Russell committed
280
		</wc-user>
281
		<wc-user company="netlify">
Alex Russell's avatar
Alex Russell committed
282
283
284
285
286
287
			<img src="images/netlify.svg"
					 alt="The Netlify logo"
					 title="The Netlify logo"
					 decoding="async" loading="lazy" />
			<h3>Netlify</h3>
		</wc-user>
288
		<wc-user company="nintendo">
Thomas Randolph's avatar
Thomas Randolph committed
289
290
291
			<img src="images/nintendo.svg"
					 alt="The Nintendo gray logo"
					 title="The Nintendo gray logo"
Alex Russell's avatar
Alex Russell committed
292
					 decoding="async" loading="lazy" />
Thomas Randolph's avatar
Thomas Randolph committed
293
			<h3>Nintendo</h3>
Alex Russell's avatar
Alex Russell committed
294
		</wc-user>
295
		<wc-user company="psu">
Thomas Randolph's avatar
Thomas Randolph committed
296
297
298
			<img src="images/penn_state.svg"
					 alt="The Penn State logo"
					 title="The Penn State logo"
Alex Russell's avatar
Alex Russell committed
299
					 decoding="async" loading="lazy" />
Thomas Randolph's avatar
Thomas Randolph committed
300
			<h3>Penn State</h3>
Alex Russell's avatar
Alex Russell committed
301
		</wc-user>
302
		<wc-user company="redhat">
Thomas Randolph's avatar
Thomas Randolph committed
303
304
305
			<img src="images/redhat.svg"
					 alt="The RedHat logo"
					 title="The RedHat logo"
Alex Russell's avatar
Alex Russell committed
306
					 decoding="async" loading="lazy" />
Thomas Randolph's avatar
Thomas Randolph committed
307
			<h3>RedHat</h3>
Alex Russell's avatar
Alex Russell committed
308
		</wc-user>
309
		<wc-user company="salesforce">
Thomas Randolph's avatar
Thomas Randolph committed
310
311
312
			<img src="images/salesforce.svg"
					 alt="The Salesforce logo"
					 title="The Salesforce logo"
Alex Russell's avatar
Alex Russell committed
313
					 decoding="async" loading="lazy" />
Thomas Randolph's avatar
Thomas Randolph committed
314
			<h3>Salesforce</h3>
Alex Russell's avatar
Alex Russell committed
315
		</wc-user>
316
		<wc-user company="sap">
Thomas Randolph's avatar
Thomas Randolph committed
317
318
319
			<img src="images/sap.svg"
					 alt="The SAP logo"
					 title="The SAP logo"
Alex Russell's avatar
Alex Russell committed
320
					 decoding="async" loading="lazy" />
Thomas Randolph's avatar
Thomas Randolph committed
321
322
			<h3>SAP</h3>
		</wc-user>
323
		<wc-user company="spacex">
Thomas Randolph's avatar
Thomas Randolph committed
324
325
326
327
328
329
			<img src="images/spacex.svg"
					 alt="The SpaceX logo"
					 title="The SpaceX logo"
					 decoding="async" loading="lazy" />
			<h3>SpaceX</h3>
		</wc-user>
330
		<wc-user company="ubisoft">
Thomas Randolph's avatar
Thomas Randolph committed
331
332
333
334
335
			<img src="images/ubisoft.svg"
					 alt="The Ubisoft logo"
					 title="The Ubisoft logo"
					 decoding="async" loading="lazy" />
			<h3>Ubisoft</h3>
Alex Russell's avatar
Alex Russell committed
336
		</wc-user>
337
		<wc-user company="vaadin">
338
339
340
341
342
343
			<img src="images/vaadin.svg"
					 alt="The Vaadin logo"
					 title="The Vaadin logo"
					 decoding="async" loading="lazy" />
			<h3>Vaadin</h3>
		</wc-user>
344
345
	</main>
	<footer>
Alex Russell's avatar
Alex Russell committed
346
347
348
		<a href="https://commons.wikimedia.org/wiki/Main_Page">Logos from the Wikimedia Commons project</a>
		<br>
		<br>
349
350
		<a href="https://gitlab.com/rockerest/arewebcomponentsathingyet.com/-/blob/main/index.html">Edit this page</a>
	</footer>
Thomas Randolph's avatar
Thomas Randolph committed
351
</body>
352
</html>