-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
48 lines (35 loc) · 1.49 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
<!doctype html>
<meta charset=utf-8>
<link rel=stylesheet href="😎.css">
<body class=🎁>
<header class=👒>
<h1>😎.css</h1>
</header>
<main class=👗>
<p>😎.css is the CSS framework that will have you asking "oh god why?", and "is my text editor really this broken?"</p>
<p>It's a CSS framework where all the classnames are emojis. 😍</p>
<h2>Layout</h2>
<h3>Container</h3>
<p>You should wrap all your content with a container class of 🎁.</p>
<code><body class=🎁>...</body></code>
<h3>Header</h3>
<p>Use 👒 to mark the header of your page. This gives you a nice dark grey background and some padding.</p>
<code><header class=👒>...</header></code>
<h3>Main</h3>
<p>Use 👗 to mark the main part of your page. This will set some lovely minimum height to ensure your pages aren't too short.</p>
<code><main class=👗>...</main></code>
<h3>Footer</h3>
<p>Use 👠 for the footer of your page. This will get you some cool grey background and text.</p>
<code><footer class=👠>...</footer></code>
<h2>Helper Classes</h2>
<h3>Links</h3>
<p>Use 🔗 to add some snazzy styling to links.</p>
<code><a href=... class=🔗>some link<a></code>
<h3>Hiding content</h3>
<p>Use 🙈 to hide content with <code>display: none;</code></p>
</main>
<footer class=👠>
<p>Probably best not to use this in production.</p>
<p>Source available on <a href="https://github.com/richardtowers/emoji.css" class=🔗>GitHub</a>.</p>
</footer>
</body>