-
Notifications
You must be signed in to change notification settings - Fork 9
/
Copy pathindex.html
338 lines (286 loc) · 10.9 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
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
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
<!DOCTYPE html>
<html lang="en">
<head>
<title>Houdini Spellbook</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono:400,400i|IBM+Plex+Sans:400,400i,600,600i" rel="stylesheet">
<link rel="stylesheet" href="/shared/css/style.css">
<link href="https://fonts.googleapis.com/css?family=Bungee+Shade&text=CSHoudin" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Black+Ops+One&text=Worklets" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Megrim&text=CustomProperties" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Finger+Paint&text=PAINT" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Faster+One&text=AnimationAPI" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Fredericka+the+Great&text=LayoutAPI" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nixie+One&text=TypedOM" rel="stylesheet">
<script type="module">
import '/shared/app.js';
</script>
</head>
<style>
:root {
--arrow-height: 10vh;
}
/* Styling */
.intro {
--banner-color: var(--black);
color: var(--grey);
}
.intro .title {
font-family: 'Bungee Shade', cursive;
}
.worklets {
--banner-color: var(--worklets);
color: var(--black);
}
.worklets .title {
font-family: 'Black Ops One', cursive;
}
.typed {
--banner-color: var(--typed);
color: var(--black);
}
.typed .title {
font-family: 'Nixie One', cursive;
}
.props {
--banner-color: var(--props);
color: var(--grey);
}
.props .title {
font-family: 'Megrim', cursive;
}
.paint {
--banner-color: var(--paint);
color: var(--grey);
}
.paint .title {
font-family: 'Finger Paint', cursive;
text-transform: uppercase;
}
.animation {
--banner-color: var(--animation);
}
.animation .title {
font-family: 'Faster One', cursive;
font-weight: normal;
}
.layout {
--banner-color: var(--layout);
color: var(--grey);
}
.layout .title {
font-family: 'Fredericka the Great', cursive;
font-weight: normal;
}
.more {
--banner-color: #ddd;
}
.resources {
--banner-color: #ccc;
margin-bottom: -1em;
}
.more .title,
.resources .title {
font-weight: normal;
color: var(--black);
}
/* Quote */
.quote {
border: 2px dashed var(--black);
padding: .5em;
max-width: 60ch;
margin: 1em auto;
font-size: 1.25em;
text-align: center;
margin-top: 3.5em;
}
.quote--image {
margin: 0 auto;
text-align: center;
display: block;
margin-bottom: 1em;
}
.quote--cite {
display: block;
text-align: right;
}
@media (min-width: 35.375em) {
.quote {
display: grid;
grid-template-columns: 275px 1fr;
grid-gap: 1em;
text-align: left;
}
.quote--image {
margin-bottom: 0;
}
}
.body {
margin-bottom: calc(var(--arrow-height) + 1em);
text-align: justify;
}
/* Big Pull */
.big-pull {
font-size: calc(1em + 2vw);
line-height: 1.25;
text-align: right;
right: 0;
position: relative;
display: flex;
flex-direction: row-reverse;
font-weight: bold;
border-right: .25em solid var(--black);
padding: .25em;
}
.big-pull--content {
max-width: 90%;
}
.big-pull--offset {
/*color: var(--grey);*/
/*background-color: var(--black);*/
font-style: italic;
text-decoration: underline;
/*padding: 0 .25em;*/
}
@media (min-width: 64.6875em) {
.big-pull {
font-size: 2.85rem;
}
}
.ready-embed {
width: 100%;
height: 50vh;
min-height: 400px;
margin-top: 1em;
border: 2px dashed var(--black);
padding: .5em;
}
.demo-warning {
margin-bottom: 0;
padding-bottom: 0;
text-transform: uppercase;
margin-top: 1em;
}
.terms-and-condition {
margin-top: 0;
font-size: .8em;
line-height: 1.1;
}
</style>
<body class="home">
<header class="banner intro">
<div class="banner--inner">
<div class="container">
<h1 class="title">CSS Houdini</h1>
</div>
</div>
</header>
<div class="quote">
<img class="quote--image" src="https://cdn.glitch.com/4603210b-4e8e-4be7-bcd5-01e701ff1a62%2Fmagic.gif?1526736042746" alt="Fingers over face, magic">
<blockquote class="quote--blockquote">
<p>
The objective of the <em>CSS-TAG Houdini Task Force</em> (CSS Houdini) is to jointly develop features that explain the “magic” of Styling and Layout on the web.
</p>
<cite class="quote--cite"><a href="https://github.com/w3c/css-houdini-drafts/wiki">CSS Houdini</a></cite>
</blockquote>
</div>
<section class="body container">
<p>What this means is that we'll finally be able to <strong>Extend CSS via JavaScript</strong>. This is important because it's currently not possible to <em>extend</em> CSS with JavaScript, only write JavaScript that mimics CSS. Actually polyfilling CSS, or introducing new features (like CSS Grid), is hard-to-impossible to do, doubly so in a way that's not terrible for performance. CSS Houdini will let authors <em>tap in to the actual CSS engine</em>, finally allowing us to extend CSS, and do so at CSS speeds</p>
<blockquote class="big-pull">
<p class="big-pull--content">Much like Service Workers are a low-level JavaScript API for the browser's cache, <span class="big-pull--offset">Houdini introduces low-level JavaScript APIs for the browser's render engines</span></p>
</blockquote>
<p>This is <em>awesome</em>, and is going to give us a lot of power, but unfortunately, it's not quite ready yet</p>
<iframe class="ready-embed" src="https://ishoudinireadyyet.com/" frameborder="0"></iframe>
<h4 class="blink demo-warning">Proceed With Caution</h4>
<p class="terms-and-condition">The demos presented are, <em>at best</em>, based off of working drafts that are still in flux. No compatible implementations exist. What little actually works only really does so in Chrome Canary with Experimental Web Platform Features enabled (<code>chrome://flags/#enable-experimental-web-platform-features</code>). These demos will likely break if not viewed there. Syntax and semantics are likely to change. In fact, in the course of a year, one API has gone through 4ish incompatible API changes. Some of the examples provided are speculative based on previous and current working implementations and may not reflect final syntax. Terms and conditions apply. Not redeemable for cash. Your mileage may vary.</p>
<p><strong>Cool?!</strong> Let's get started! Follow the links below to learn more about some of the key Houdini APIs and concepts, including live code you can play with! When you're all done, check out some of the additional resources to learn more!</p>
</section>
<section class="banner worklets">
<div class="banner--inner">
<div class="container">
<h2 class="title"><a href="/worklets">Worklets</a></h2>
<p>itty bitty web<em>ish</em> workers, Worklets are the foundation to how render engines can be extended</p>
</div>
</div>
</section>
<section class="banner typed">
<div class="banner--inner">
<div class="container">
<h2 class="title"><a href="/typed-om">Typed OM</a></h2>
<p>aka CSSOM v2, the Typed OM gives shape and structure to CSS values that previously were simple strings</p>
</div>
</div>
</section>
<section class="banner props">
<div class="banner--inner">
<div class="container">
<h2 class="title"><a href="/custom-properties">Custom Properties</a></h2>
<p>Make snozzberries taste like snozzberries; Custom Properties give shape, structure, and constraints to CSS Variables</p>
</div>
</div>
</section>
<section class="banner paint">
<div class="banner--inner">
<div class="container">
<h2 class="title"><a href="/paint">Paint API</a></h2>
<p>Bob Ross in your CSS; the Paint API provides a 2D Canvas-like drawing context wherever you can use images in CSS</p>
</div>
</div>
</section>
<section class="banner animation">
<div class="banner--inner">
<div class="container">
<h2 class="title"><a href="/animation">Animation API</a></h2>
<p>Yo dawg, I heard you like parallax; the Animation API allows animation effects to be tied to user input in a preferment way</p>
</div>
</div>
</section>
<section class="banner layout">
<div class="banner--inner">
<div class="container">
<h2 class="title"><a href="/layout">Layout API</a></h2>
<p>Think Tetris; literally create your own display properties, defining your own layout! Masonry, here we come!</p>
</div>
</div>
</section>
<!--
<section class="banner more">
<div class="banner--inner">
<div class="container">
<h3 class="title">More Houdini</h3>
</div>
</div>
</section>
-->
<section class="banner resources">
<div class="banner--inner">
<div class="container">
<h3 class="title"><a href="/resources">Resources</a></h3>
<p>Read, watch, chat, play, and learn more about Houdini</p>
</div>
</div>
</section>
<footer class="body-footer">
<nav class="container">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/worklets">Worklets</a></li>
<li><a href="/typed-om">Typed OM</a></li>
<li><a href="/custom-properties">Custom Properties</a></li>
<li><a href="/paint">Paint API</a></li>
<li><a href="/animation">Animation API</a></li>
<li><a href="/layout">Layout API</a></li>
<!-- <li><a href="/more">More Houdini</a></li> -->
<li><a href="/resources">Resources</a></li>
</ul>
</nav>
<div class="container"><p class="me">Made with 💖 by <a href="https://snugug.com" target="_blank">Sam Richard</a> (<a href="https://twitter.com/snugug" target="_blank">@snugug</a>)</p></div>
<!-- include the Glitch button to show what the webpage is about and
to make it easier for folks to view source and remix -->
<div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
<script src="https://button.glitch.me/button.js"></script>
</footer>
</body>
</html>