-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
390 lines (386 loc) · 23.1 KB
/
index.html
File metadata and controls
390 lines (386 loc) · 23.1 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
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
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>mc.css examples</title>
<link rel="stylesheet" href="styles/index.css">
<link rel="stylesheet" href="demo.css">
</head>
<body>
<main>
<h1>mc.css</h1>
<span>mc.css lets you use Minecraft's design system in pure CSS, with extra features included with React.</span>
<i>This demo has a lot of HD images from ccleaf (items), it is very WIP and not specifically built for mobile
connections.</i>
<h3>Install it via NPM (css & react)</h3>
<code>npm install @klashdevelopment/mc.css</code>
<h3>or use a CDN for css:</h3>
<code>https://unpkg.com/@klashdevelopment/mc.css/styles/index.css</code>
<br>
<h2>Reccomended icons (mcicons)</h2>
<code>npm install @klashdevelopment/mcicons</code>
<code>import MCIcons from "@klashdevelopment/mcicons";<br><br>MCIcons.interface['...'].high_url</code>
<br><br><br><br><br><br>
<h1>Containers</h1>
<span>Dynamically sized with 3 sizes</span>
<code><b>REACT: </b> <Container size? className? contentClassName? ...>...</Container></code>
<code style="white-space: preserve;"><b>HTML:</b>
<div class="mc-container sm/md/lg">
<div class="mc-header"></div>
<div class="mc-content">
...
</div>
<div class="mc-footer"></div>
</div></code>
<div class="docs-item">
<div class="mc-container sm">
<div class="mc-header"></div>
<div class="mc-content mc-text-sm">
Small sized container with 16px font size
</div>
<div class="mc-footer"></div>
</div>
<div class="mc-container md">
<div class="mc-header"></div>
<div class="mc-content mc-text-md">
Medium sized container with <br> multiple lines of text and 20px font size
</div>
<div class="mc-footer"></div>
</div>
<div class="mc-container lg">
<div class="mc-header"></div>
<div class="mc-content mc-text-lg">
Largest size of container with 24px font size
</div>
<div class="mc-footer"></div>
</div>
</div>
<br><br>
<h1>Arrow Buttons</h1>
<span>Arrow Buttons are directional & navigational buttons.</span>
<code><b>REACT:</b> <ArrowButton direction? size? onClick? className? .../></code>
<code><b>HTML:</b> <div class="mc-button-arrow" data-direction="up/down/left/right" data-size="sm/md/lg"></div></code>
<div class="docs-item row">
<div class="mc-button-arrow" data-direction="up" data-size="lg"></div>
<div class="mc-button-arrow" data-direction="down" data-size="lg"></div>
<div class="mc-button-arrow" data-direction="left" data-size="lg"></div>
<div class="mc-button-arrow" data-direction="right" data-size="lg"></div>
</div>
<div class="docs-item row">
<div class="mc-button-arrow" data-direction="up" data-size="md"></div>
<div class="mc-button-arrow" data-direction="down" data-size="md"></div>
<div class="mc-button-arrow" data-direction="left" data-size="md"></div>
<div class="mc-button-arrow" data-direction="right" data-size="md"></div>
</div>
<div class="docs-item row">
<div class="mc-button-arrow" data-direction="up" data-size="sm"></div>
<div class="mc-button-arrow" data-direction="down" data-size="sm"></div>
<div class="mc-button-arrow" data-direction="left" data-size="sm"></div>
<div class="mc-button-arrow" data-direction="right" data-size="sm"></div>
</div>
<code><b>REACT:</b> Not yet implemented</code>
<code><b>HTML:</b> <div class="mc-button-last" data-size="sm/md/lg"></div></code>
<code><b>HTML:</b> <div class="mc-button-next" data-size="sm/md/lg"></div></code>
<div class="docs-item row">
<div class="mc-button-last" data-size="lg"></div>
<div class="mc-button-next" data-size="lg"></div>
</div>
<div class="docs-item row">
<div class="mc-button-last" data-size="md"></div>
<div class="mc-button-next" data-size="md"></div>
</div>
<div class="docs-item row">
<div class="mc-button-last" data-size="sm"></div>
<div class="mc-button-next" data-size="sm"></div>
</div>
<br><br>
<h1>Badges</h1>
<span>Badges let you display an icon over one of many backgrounds.</span>
<code><b>REACT:</b> <Badge badge className? onClick? ...>...</Badge></code>
<code><b>HTML:</b> <div class="mc-badge" data-badge="badge_name"><img src="..." /></div></code>
<span>Click a badge to get it's badge_name. You may also set a --custom-badge-image and use badge "custom"</span>
<div class="docs-grid">
<div class="mc-badge" data-badge="crafter_slot" onclick="alert(this.dataset.badge)">
<img src="https://mcicons.ccleaf.com/assets/10.%20Items/1.%20Swords/Diamond_Sword.png" height="16">
</div>
<div class="mc-badge" data-badge="effect_ambient" onclick="alert(this.dataset.badge)">
<img src="https://mcicons.ccleaf.com/assets/10.%20Items/1.%20Swords/Diamond_Sword.png" height="16">
</div>
<div class="mc-badge" data-badge="effect_small" onclick="alert(this.dataset.badge)">
<img src="https://mcicons.ccleaf.com/assets/10.%20Items/1.%20Swords/Diamond_Sword.png" height="16">
</div>
<div class="mc-badge" data-badge="effect" onclick="alert(this.dataset.badge)">
<img src="https://mcicons.ccleaf.com/assets/10.%20Items/1.%20Swords/Diamond_Sword.png" height="16">
</div>
<div class="mc-badge" data-badge="gold_challenge" onclick="alert(this.dataset.badge)">
<img src="https://mcicons.ccleaf.com/assets/10.%20Items/1.%20Swords/Diamond_Sword.png" height="16">
</div>
<div class="mc-badge" data-badge="gray_challenge" onclick="alert(this.dataset.badge)">
<img src="https://mcicons.ccleaf.com/assets/10.%20Items/1.%20Swords/Diamond_Sword.png" height="16">
</div>
<div class="mc-badge" data-badge="gold_goal" onclick="alert(this.dataset.badge)">
<img src="https://mcicons.ccleaf.com/assets/10.%20Items/1.%20Swords/Diamond_Sword.png" height="16">
</div>
<div class="mc-badge" data-badge="gray_goal" onclick="alert(this.dataset.badge)">
<img src="https://mcicons.ccleaf.com/assets/10.%20Items/1.%20Swords/Diamond_Sword.png" height="16">
</div>
<div class="mc-badge" data-badge="inventory_slot" onclick="alert(this.dataset.badge)">
<img src="https://mcicons.ccleaf.com/assets/10.%20Items/1.%20Swords/Diamond_Sword.png" height="16">
</div>
<div class="mc-badge" data-badge="item_slot" onclick="alert(this.dataset.badge)">
<img src="https://mcicons.ccleaf.com/assets/10.%20Items/1.%20Swords/Diamond_Sword.png" height="16">
</div>
<div class="mc-badge" data-badge="recipe_slot" onclick="alert(this.dataset.badge)">
<img src="https://mcicons.ccleaf.com/assets/10.%20Items/1.%20Swords/Diamond_Sword.png" height="16">
</div>
<div class="mc-badge" data-badge="slot_shadow" onclick="alert(this.dataset.badge)">
<img src="https://mcicons.ccleaf.com/assets/10.%20Items/1.%20Swords/Diamond_Sword.png" height="16">
</div>
<div class="mc-badge" data-badge="slot" onclick="alert(this.dataset.badge)">
<img src="https://mcicons.ccleaf.com/assets/10.%20Items/1.%20Swords/Diamond_Sword.png" height="16">
</div>
</div>
<br><br>
<h1>Tabbed Windows</h1>
<span>These are used to show a window with tabs, like the recipe book or Creative inventory.</span>
<b>Tab functionality must be manually added with click events on tabs.</b>
<i>The interactivity in this demo simply switches the 'active' class.</i>
<span>The mc-tw-left/right/etc items can have flex properties like justify-content and align-items.</span>
<code><b>REACT:</b> <TabbedWindow tabsLeft? tabsRight? tabsTop? tabsBottom? className? ...> (Any div, Window, or Container) </TabbedWindow></code>
<code><b>REACT TIPS:</b> className={tabbedWindow,tabsLeft,tabsRight,tabsTop,tabsBottom,content}|string</code>
<code><b>REACT TABS:</b> <Tab className? active? onClick? ...>...</Tab></code>
<code style="white-space: preserve;"><b>HTML:</b> <div class="mc-tabbed-window">
<div class="mc-tw-left">...</div>
<div class="mc-tw-center">
<div class="mc-tw-top">...</div>
...(window, container, or div)...
<div class="mc-tw-bottom">...</div>
</div>
<div class="mc-tw-right">...</div>
</div></code>
<code><b>HTML TABS:</b> <div class="mc-tw-tab">...</div></code>
<div class="docs-item">
<div class="mc-tabbed-window">
<div class="mc-tw-left">
<div class="mc-tw-tab" onclick="this.classList.toggle('active')">
<img src="https://mcicons.ccleaf.com/assets/10.%20Items/1.%20Swords/Diamond_Sword.png" />
</div>
<div class="mc-tw-tab active" onclick="this.classList.toggle('active')">
<img src="https://mcicons.ccleaf.com/assets/10.%20Items/1.%20Swords/Diamond_Sword.png" />
</div>
</div>
<div class="mc-tw-center">
<div class="mc-tw-top">
<div class="mc-tw-tab" onclick="this.classList.toggle('active')">
<img src="https://mcicons.ccleaf.com/assets/10.%20Items/1.%20Swords/Diamond_Sword.png" />
</div>
<div class="mc-tw-tab active" onclick="this.classList.toggle('active')">
<img src="https://mcicons.ccleaf.com/assets/10.%20Items/1.%20Swords/Diamond_Sword.png" />
</div>
</div>
<div class="mc-window">
<div class="mc-window-title">Optional Title</div>
<div class="mc-window-content">These inner windows literally are just the scrollable windows
from below. They can theoretically be containers <b>if you want</b>, but the container needs
to be large enough to fit all tabs. <br><br>To add functionality, you can dynamically change
the window's content when you click the tabs. Tabs can have an 'active' class to indicate if
they are dark or light gray.</div>
</div>
<div class="mc-tw-bottom">
<div class="mc-tw-tab" onclick="this.classList.toggle('active')">
<img src="https://mcicons.ccleaf.com/assets/10.%20Items/1.%20Swords/Diamond_Sword.png" />
</div>
<div class="mc-tw-tab active" onclick="this.classList.toggle('active')">
<img src="https://mcicons.ccleaf.com/assets/10.%20Items/1.%20Swords/Diamond_Sword.png" />
</div>
</div>
</div>
<div class="mc-tw-right">
<div class="mc-tw-tab" onclick="this.classList.toggle('active')">
<img src="https://mcicons.ccleaf.com/assets/10.%20Items/1.%20Swords/Diamond_Sword.png" />
</div>
<div class="mc-tw-tab active" onclick="this.classList.toggle('active')">
<img src="https://mcicons.ccleaf.com/assets/10.%20Items/1.%20Swords/Diamond_Sword.png" />
</div>
</div>
</div>
</div>
<br><br>
<h1>Tooltip windows</h1>
<span>These are used to show an object looking like item tooltips.</span>
<b>They are not functional element tooltips unless you're using the React component, which has seperate
documentation.</b>
<span>If you are moving it, <i><b>wrap it inside an absolute div</b></i> and move the outer div</span>
<code><b>REACT:</b> <Tooltip className? contentClassName? ...>...</Tooltip></code>
<code style="white-space: preserve;"><b>HTML:</b> <div class="mc-tooltip">
<div class="mc-tooltip-header"></div>
<div class="mc-tooltip-content">
...
</div>
<div class="mc-tooltip-footer"></div>
</div></code>
<div class="docs-item">
<div class="mc-tooltip">
<div class="mc-tooltip-header"></div>
<div class="mc-tooltip-content mc-text-shadow">
Mace
<br><br>
<span style="color:#AAAAAA;">When in Main Hand:</span>
<br>
<span style="color:#00AA00;margin-left:8px;">7 Attack Damage</span>
<br>
<span style="color:#00AA00;margin-left:8px;">1.6 Attack Speed</span>
<br>
<span>Durability: 249/250</span>
</div>
<div class="mc-tooltip-footer"></div>
</div>
</div>
<br><br>
<h1>Scrollable windows</h1>
<span>Stuck to one size as of right now (not mobile-friendly), dynamic windows coming soon.</span>
<span>If you need to use dynamic sizes use a Container with a custom scrollable div.</span>
<span>Optional window titles can contain one or multiple items.</span>
<code><b>REACT:</b> <Window className? contentClassName? title? ...>...</Window></code>
<code style="white-space: preserve;"><b>HTML:</b> <div class="mc-window">
<!-- optional --> <div class="mc-window-title">...</div>
<div class="mc-window-content">
...
</div>
</div></code>
<div class="docs-item">
<div class="mc-window">
<div class="mc-window-title">
<span>Diamond Sword</span>
<div>
<div class="mc-button-square" data-size="sm"><img
src="https://mcicons.ccleaf.com/assets/60.%20Interface/5.%20UI/Cancel.png"
style="--image-size:18px;" /></div>
</div>
</div>
<div class="mc-window-content">
A <img src="https://mcicons.ccleaf.com/assets/10.%20Items/1.%20Swords/Diamond_Sword.png"
height="16" /> <b>diamond sword</b> is a variant of sword that is crafted from <img
src="https://mcicons.ccleaf.com/assets/10.%20Items/11.%20Materials/Diamond.png" height="16" />
diamonds. It is the second-highest
tier of sword, dealing more damage than an <img
src="https://mcicons.ccleaf.com/assets/10.%20Items/1.%20Swords/Iron_Sword.png" height="16" />
iron sword and having higher durability. It can be
upgraded into a <img
src="https://mcicons.ccleaf.com/assets/10.%20Items/1.%20Swords/Netherite_Sword.png"
height="16" /> netherite sword using a <img
src="https://mcicons.ccleaf.com/assets/20.%20Blocks/33.%20Workplaces/Smithing_Table.png"
height="16" /> smithing table.
<br>
<br>
A sword can also be used to destroy certain blocks <i>50% quicker</i>, sometimes much quicker than
with fists. Using a sword to destroy any block that doesn't break instantly by hand decreases its
durability by 2; this includes <img
src="https://mcicons.ccleaf.com/assets/10.%20Items/13.%20Farmables/Bamboo.png" height="16" />
bamboo, despite that the sword is the fastest tool for breaking it.
<br>
<br>
In Creative mode, swords are unable to break blocks. However, they can still break placed entities
such as <img src="https://mcicons.ccleaf.com/assets/10.%20Items/26.%20Redstone/Minecart.png"
height="16" /> minecarts, <img
src="https://mcicons.ccleaf.com/assets/10.%20Items/21.%20Decoration/Painting.png" height="16" />
paintings, <img src="https://mcicons.ccleaf.com/assets/10.%20Items/21.%20Decoration/Item_Frame.png"
height="16" /> item frames, and <img
src="https://mcicons.ccleaf.com/assets/10.%20Items/36.%20Other/Armor_Stand.png" height="16" />
armor stands.
<br>
<br>
A diamond sword can be repaired in an anvil by adding <img
src="https://mcicons.ccleaf.com/assets/10.%20Items/11.%20Materials/Diamond.png" height="16" />
diamonds, with each repair diamond restoring
25% the sword's maximum durability, rounded down. Two diamond swords can also be combined in an
<img src="https://mcicons.ccleaf.com/assets/20.%20Blocks/33.%20Workplaces/Anvil.png" height="16" />
anvil. Both methods preserve the diamond sword's <img
src="https://mcicons.ccleaf.com/assets/10.%20Items/36.%20Other/Enchanted_Book.png"
height="16" /> enchantments.
</div>
</div>
<div class="mc-window">
<div class="mc-window-content">
This window contains no title, meaning it is slightly wider and shorter than the one with a title.
This is due to the fact that it uses the advancement window pane instead of the blank GUI window
pane.
<br>
<br>
Again, these containers are not dynamic and are fixed to one size at the current moment. Eventually,
this will be changed to allow dynamic sizes.
<br>
<br>
The window remains scrollable and has the same content. Both of these windows can be size changed by
changing the CSS properties <code>width</code> and <code>height</code> to a 160:83 number ratio.
</div>
</div>
</div>
<br><br>
<h1>Buttons</h1>
<span>Size is dynamic, one to two lines only</span>
<code><b>REACT:</b> <Button className? onClick? disabled? ...>...</Button></code>
<code><b>HTML:</b> <div class="mc-button" disabled?>...</div></code>
<div class="docs-item">
<div class="mc-button">A regular button</div>
<div class="mc-button" disabled>A disabled button</div>
<div class="mc-button"><img
src="https://mcicons.ccleaf.com/assets/60.%20Interface/30.%20Icons/Icon_Mouse.png"
height="24">Button with an icon</div>
</div>
<span>Square buttons for icons can also be made:</span>
<code><b>REACT:</b> <SquareButton className? onClick? disabled? size? ...>...</SquareButton></code>
<code><b>HTML:</b> <div class="mc-button-square" data-size="sm/md/lg"disabled?>...</div></code>
<div class="docs-item row end">
<div class="mc-button-square" data-size="sm"><img
src="https://mcicons.ccleaf.com/assets/10.%20Items/1.%20Swords/Netherite_Sword.png"></div>
<div class="mc-button-square" data-size="md"><img
src="https://mcicons.ccleaf.com/assets/10.%20Items/1.%20Swords/Netherite_Sword.png"></div>
<div class="mc-button-square" data-size="lg"><img
src="https://mcicons.ccleaf.com/assets/10.%20Items/1.%20Swords/Netherite_Sword.png"></div>
</div>
<div class="docs-item row">
<div class="mc-button-square" data-size="sm" disabled><img
src="https://mcicons.ccleaf.com/assets/10.%20Items/1.%20Swords/Diamond_Sword.png"></div>
<div class="mc-button-square" data-size="md" disabled><img
src="https://mcicons.ccleaf.com/assets/10.%20Items/1.%20Swords/Diamond_Sword.png"></div>
<div class="mc-button-square" data-size="lg" disabled><img
src="https://mcicons.ccleaf.com/assets/10.%20Items/1.%20Swords/Diamond_Sword.png"></div>
</div>
<br><br>
<h1>Text Inputs</h1>
<span>Size can be changed with CSS</span>
<code><b>REACT:</b> <Input className? value? onChange? type? placeholder? ... /></code>
<code style="white-space: preserve;"><b>HTML:</b> <div class="mc-input">
<div class="mc-input-inner">
<input ...>
</div>
</div></code>
<div class="docs-item">
<div class="mc-input">
<div class="mc-input-inner">
<input type="text" placeholder="Input with placeholder">
</div>
</div>
<div class="mc-input">
<div class="mc-input-inner">
<input type="text" value="Input with default">
</div>
</div>
</div>
<br><br>
<h1>Text Formatting</h1>
<span>These classes provide proper letter spacing, font size, and fonts.</span>
<code><b>REACT:</b> <Typography className? size? shadow? ...>...</Typography></code>
<code><b>HTML:</b> <span class="mc-text-sm/md/lg">...</span></code>
<span>Text shadows can be added with the <code>mc-text-shadow</code> class.</span>
<div class="docs-item">
<span class="mc-text-sm">A text object (small).</span>
<span class="mc-text-md">A text object (medium).</span>
<span class="mc-text-lg">A text object (large).</span>
<span class="mc-text-lg mc-text-shadow">With a shadow (large).</span>
</div>
</main>
</body>
</html>