-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
81 lines (71 loc) · 6.04 KB
/
index.html
File metadata and controls
81 lines (71 loc) · 6.04 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
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
<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>JS in CSS</title>
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:site" content="https://adir-sl.github.io/JSinCSS">
<meta property="twitter:title" content="https://adir-sl.github.io/JSinCSS">
<meta property="twitter:description" content="Embedding simple JS snippets in CSS files.">
<meta property="twitter:creator" content="@adircode">
<meta name="twitter:image" content="https://adir-sl.github.io/JSinCSS/socialImage.jpg">
<meta property="og:title" content="https://adir-sl.github.io/JSinCSS" />
<meta property="og:description" content="Embedding simple JS snippets in CSS files." />
<meta property="og:image" content="https://adir-sl.github.io/JSinCSS/socialImage.jpg" />
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="text-gray-800 flex flex-col items-center justify-center pt-16 mt-16">
<div class="bg-gray-800 text-yellow-400 p-4 px-12 sticky top-0 w-full overflow-hidden flex flex-grow-0 shadow-md items-center justify-center">
<div class="w-full max-w-2xl overflow-hidden flex flex-grow-0">
<h1 class="text-4xl">JSinCSS</h1>
<div class="flex flex-grow gap-5 ml-16 justify-end items-center">
<a href="https://adir-sl.github.io/JSinCSS/jsincss.js" target="_blank" class="downloadLink bg-yellow-400 text-gray-800 py-3 px-4 rounded-md uppercase font-bold hover:bg-yellow-200">Download</a>
<a href="https://github.com/Adir-SL/JSinCSS" target="_blank" class="border-yellow-400 border-2 py-2.5 px-4 rounded-md uppercase hover:border-yellow-200 hover:text-yellow-200">GitHub</a>
</div>
</div>
</div>
<div class="bg-gray-800 text-yellow-400 p-2 pb-6 flex flex-col items-center justify-center top-0 w-full absolute shadow-md">
<h1 class="text-8xl">JSinCSS</h1>
<p class="text-2xl mb-4">Embedding simple JS snippets<br/>in CSS files.</p>
<div class="flex gap-5 ml-16 justify-end">
<a href="https://adir-sl.github.io/JSinCSS/jsincss.js" target="_blank" class="bg-yellow-400 text-gray-800 py-2 px-4 rounded-md uppercase font-bold hover:bg-yellow-200">Download</a>
<a href="https://github.com/Adir-SL/JSinCSS" target="_blank" class="border-yellow-400 border-2 py-2 px-4 rounded-md uppercase hover:border-yellow-200 hover:text-yellow-200">GitHub</a>
</div>
</div>
<div class="m-12 w-11/12 max-w-2xl">
<h2 class="text-3xl font-medium">Getting started</h2>
The easiest way to get started is by adding the script tag in your document head, like so:
<pre class="bg-gray-800 text-white p-5 rounded-md my-4 overflow-auto"><code><script src="<span class="text-yellow-400">https://adir-sl.github.io/JSinCSS/jsincss.js</span>"></script></code></pre>
After that, you can add to your CSS declaration a new <code class="bg-gray-800 text-white p-1 rounded-md">content</code> property that can hold any JavaScript you'd like to run, for example:
<pre class="bg-gray-800 text-white p-5 rounded-md my-4"><code>button:active {
content: "<span class="text-yellow-400">alert('Works!');</span>";
}</code></pre>
<h2 class="text-3xl font-medium">Keep in mind</h2>
Everything decalred in CSS will run in its appropriate state, meaning <code class="bg-gray-800 text-white p-1 rounded-md">content</code> inside ```button``` will run when the button is loaded and unless told otherwise will only run once.
When declaring <code class="bg-gray-800 text-white p-1 rounded-md">content</code> inside <code class="bg-gray-800 text-white p-1 rounded-md">button:active</code> it will run when the button is clicked and, unless told otherwise, it will run everytime the user clicks that button.
The kind of quotation marks matters! Don't write it backwards or it might break. First the <code class="bg-gray-800 text-white p-1 rounded-md">" "</code> marks and only than the <code class="bg-gray-800 text-white p-1 rounded-md">' '</code> marks, NOT the other way around.
<br/>
<br/>
<h2 class="text-3xl font-medium">Examples</h2>
<iframe height="300" style="width: 100%;" class="rounded-md my-5" scrolling="no" title="Click counter" src="https://codepen.io/Adir-SL/embed/xxdGNxX?defaultTab=result&theme-id=dark" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/Adir-SL/pen/xxdGNxX">
Click counter</a> by Adir (<a href="https://codepen.io/Adir-SL">@Adir-SL</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
<iframe height="300" style="width: 100%;" class="rounded-md my-5" scrolling="no" title="JSinCSS Drag" src="https://codepen.io/Adir-SL/embed/wvJZVWq?defaultTab=result&theme-id=dark" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/Adir-SL/pen/wvJZVWq">
JSinCSS Drag</a> by Adir (<a href="https://codepen.io/Adir-SL">@Adir-SL</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
<iframe height="300" style="width: 100%;" class="rounded-md my-5" scrolling="no" title="Random divs" src="https://codepen.io/Adir-SL/embed/VwbLbZG?defaultTab=result&theme-id=dark" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/Adir-SL/pen/VwbLbZG">
Random divs</a> by Adir (<a href="https://codepen.io/Adir-SL">@Adir-SL</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
<p class="text-right pt-5">This library is maintained by <a href="https://twitter.com/adircode" target="_blank" class="text-yellow-400 font-bold hover:underline">Adir SL</a></p>
</div>
</body>
</html>