Skip to content

Commit d8a9897

Browse files
NatuworkguyNatuworkguy
authored
Update how_to_use.md
1 parent 2c806b7 commit d8a9897

File tree

1 file changed

+123
-36
lines changed

1 file changed

+123
-36
lines changed

‎how_to_use.md‎

Lines changed: 123 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,43 @@
11
# 🛠️ How to Use UltraHTML
22

3-
Welcome, dev! 🎉
4-
This guide will show you how to drop UltraHTML into your project and get fancy buttons, tabs, chips, and popups — fast.
3+
Welcome, dev! 🎉
4+
This guide shows how to drop UltraHTML into your project and get fancy buttons, tabs, chips, dropdowns, modals, switches, and popups — fast.
55

66
---
77

8-
## 📦 1. Include the Files and initialize UltraHTML
8+
## 📦 1. Include the Files & Initialize UltraHTML
99

10-
No builds, no bundlers — just link the files directly.
10+
No builds. No bundlers. Just drop and go:
1111

1212
```html
1313
<link rel="stylesheet" href="dist/ultra.css" />
1414
<script src="dist/ultra.js" onload="Ultra.init()" defer></script>
15-
````
15+
```
16+
17+
Make sure the JS loads after the DOM (`defer` or place it at the end of `<body>`).
18+
19+
---
20+
21+
## 🧪 2. Quick Test Page
22+
23+
Save this to `test.html` and open it in your browser:
24+
25+
```html
26+
<!DOCTYPE html>
27+
<html>
28+
<head>
29+
<link rel="stylesheet" href="dist/ultra.css" />
30+
</head>
31+
<body>
32+
<button class="ultra-button button-wave">Wave!</button>
33+
<div class="ultra-chip">Chip!</div>
34+
35+
<script src="dist/ultra.js" onload="Ultra.init()" defer></script>
36+
</body>
37+
</html>
38+
```
1639

17-
Make sure `ultra.js` is loaded after the DOM (`defer` or load it at the bottom).
40+
Boom 💥 — you're Ultra now.
1841

1942
---
2043

@@ -24,6 +47,7 @@ Make sure `ultra.js` is loaded after the DOM (`defer` or load it at the bottom).
2447

2548
```html
2649
<button class="ultra-button button-wave">Click Me</button>
50+
<button class="ultra-button big-button">Big Button</button>
2751
```
2852

2953
* `.button-wave` = animated ripple
@@ -41,7 +65,7 @@ Make sure `ultra.js` is loaded after the DOM (`defer` or load it at the bottom).
4165
</div>
4266
```
4367

44-
* `.tab-active` = shows as selected
68+
* `.tab-active` = currently selected tab
4569
* `.tab-disabled` = unclickable
4670

4771
---
@@ -50,63 +74,126 @@ Make sure `ultra.js` is loaded after the DOM (`defer` or load it at the bottom).
5074

5175
```html
5276
<div class="ultra-chip">Dismiss Me</div>
53-
<div class="ultra-chip chip-permanent">You Can’t Dismiss Me</div>
77+
<div class="ultra-chip chip-permanent">Can't Dismiss</div>
5478
```
5579

56-
* Click to dismiss (unless `.chip-permanent`)
80+
* Click to dismiss (unless it has `.chip-permanent`)
5781

5882
---
5983

60-
### 💬 Popup Messages
84+
### 💬 Popups
6185

6286
```html
6387
<button onclick="Ultra.popupmsg('Hello there!')">Toast Me</button>
6488
```
6589

66-
* Dismisses on click or after 10s
67-
* Use `Ultra.popupmsg(html, true)` for rich HTML content
90+
* Auto-dismisses after 10s
91+
* Use `Ultra.popupmsg(html, true)` for HTML content
6892

6993
---
7094

71-
## 🎨 4. Customizing Styles
95+
### 🪟 Modals
7296

73-
UltraHTML uses **CSS variables**. Change them globally:
97+
```html
98+
<button onclick="Ultra.modal({ head: 'Modal Title', text: 'Important info here' })">
99+
Show Modal
100+
</button>
101+
```
74102

75-
```css
76-
:root {
77-
--btn-default-color: #ff6600;
78-
--tab-select-color: #ff3333;
79-
}
103+
* Modal with a title + text
104+
* More advanced options coming soon™️
105+
106+
---
107+
108+
### 🧠 Context Menu
109+
110+
```html
111+
<div class="ultra-context-menu">
112+
<div class="item" onclick="alert('📝 Edit clicked')">📝 Edit</div>
113+
<div class="item" onclick="alert('❌ Delete clicked')">❌ Delete</div>
114+
<div class="item" onclick="alert('🔗 Copy Link clicked')">🔗 Copy Link</div>
115+
</div>
80116
```
81117

82-
Or override them per-component with custom classes.
118+
* Appears on right-click (automatically)
119+
* Add your custom items using `.item`
83120

84121
---
85122

86-
## 📱 5. Mobile Friendly
123+
### 🪜 Sections
87124

88-
UltraHTML adapts for smaller screens out of the box — especially popup and tab elements. No extra config needed.
125+
```html
126+
<section class="ultra-section">This is a section</section>
127+
```
128+
129+
* Auto-styled container
130+
* Great for grouping UI
89131

90132
---
91133

92-
## 🧪 6. Quick Test Page
134+
### 🔽 Dropdowns
93135

94-
Create an HTML file like this:
136+
```html
137+
<div class="ultra-dropdown">
138+
<button class="ultra-dropdown-btn">Choose Option</button>
139+
<div class="ultra-dropdown-content">
140+
<a href="#">Option A</a>
141+
<a href="#">Option B</a>
142+
</div>
143+
</div>
144+
```
145+
146+
* Styled dropdowns that just work™
147+
148+
---
149+
150+
### 🔘 Switches
95151

96152
```html
97-
<!DOCTYPE html>
98-
<html>
99-
<head>
100-
<link rel="stylesheet" href="dist/ultra.css">
101-
</head>
102-
<body>
153+
<label class="ultra-switch">
154+
<input type="checkbox" class="ultra-switch-input" />
155+
<span class="ultra-switch-slider"></span>
156+
</label>
157+
```
103158

104-
<button class="ultra-button button-wave">Wave!</button>
105-
<div class="ultra-chip">Chip!</div>
159+
* Disabled version:
106160

107-
<script src="dist/ultra.js" onload="Ultra.init()" defer></script>
108-
</body>
109-
</html>
161+
```html
162+
<label class="ultra-switch" disabled>
163+
<input type="checkbox" class="ultra-switch-input" disabled />
164+
<span class="ultra-switch-slider"></span>
165+
</label>
166+
```
167+
168+
---
169+
170+
## 🎨 4. Customizing Styles
171+
172+
UltraHTML uses CSS variables for full theme control:
173+
174+
```css
175+
:root {
176+
--btn-default-color: #ff6600;
177+
--tab-select-color: #ff3333;
178+
--chip-default-bg: #eee;
179+
}
110180
```
111181

112-
Open in your browser and boom — you're Ultra.
182+
Override globally with `:root` or per-element with custom classes.
183+
184+
---
185+
186+
## 📱 5. Mobile-Friendly
187+
188+
UltraHTML is responsive out of the box:
189+
✔️ Tabs, modals, popups, and dropdowns scale smoothly
190+
✔️ No extra config needed
191+
192+
---
193+
194+
## 🧠 Final Tips
195+
196+
* Use `defer` or `onload="Ultra.init()"` to avoid race conditions
197+
* Mix and match components freely
198+
* Minimal dependencies = maximal performance
199+
* Style it your way with CSS vars

0 commit comments

Comments
 (0)