bulma-tailwind 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +67 -0
- package/dist/bulma-tailwind.css +3352 -0
- package/package.json +32 -0
- package/src/bulma-tailwind.css +45 -0
- package/src/components/breadcrumb.css +48 -0
- package/src/components/card.css +17 -0
- package/src/components/dropdown.css +31 -0
- package/src/components/menu.css +20 -0
- package/src/components/message.css +76 -0
- package/src/components/modal.css +26 -0
- package/src/components/navbar.css +20 -0
- package/src/components/pagination.css +40 -0
- package/src/components/panel.css +31 -0
- package/src/components/tabs.css +38 -0
- package/src/elements/box.css +6 -0
- package/src/elements/button.css +169 -0
- package/src/elements/content.css +61 -0
- package/src/elements/delete.css +39 -0
- package/src/elements/icon.css +18 -0
- package/src/elements/image.css +46 -0
- package/src/elements/notification.css +98 -0
- package/src/elements/progress.css +59 -0
- package/src/elements/table.css +129 -0
- package/src/elements/tag.css +120 -0
- package/src/elements/title.css +21 -0
- package/src/example/components.html +341 -0
- package/src/example/dist/bulma-tailwind.css +3352 -0
- package/src/example/elements.html +605 -0
- package/src/example/form.html +262 -0
- package/src/example/index.html +146 -0
- package/src/example/layout.html +193 -0
- package/src/example/misc.html +164 -0
- package/src/footer.css +5 -0
- package/src/form/checkbox-radio.css +8 -0
- package/src/form/file.css +44 -0
- package/src/form/general.css +129 -0
- package/src/form/input.css +9 -0
- package/src/form/select.css +39 -0
- package/src/form/textarea.css +315 -0
- package/src/layout/columns.css +25 -0
- package/src/layout/container.css +12 -0
- package/src/layout/hero.css +8 -0
- package/src/layout/level.css +31 -0
- package/src/layout/section.css +11 -0
- package/src/media-object.css +8 -0
- package/src/theme.css +39 -0
|
@@ -0,0 +1,262 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Forms - Bulma Tailwind</title>
|
|
7
|
+
<link rel="stylesheet" href="./dist/bulma-tailwind.css">
|
|
8
|
+
<style>
|
|
9
|
+
body { background: #fafafa; font-family: system-ui; margin: 0; padding: 2rem; }
|
|
10
|
+
.demo-section {
|
|
11
|
+
background: white;
|
|
12
|
+
border-radius: 12px;
|
|
13
|
+
padding: 1.5rem;
|
|
14
|
+
margin-bottom: 2rem;
|
|
15
|
+
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
|
16
|
+
}
|
|
17
|
+
.demo-title {
|
|
18
|
+
font-size: 1.5rem;
|
|
19
|
+
font-weight: bold;
|
|
20
|
+
margin-bottom: 1rem;
|
|
21
|
+
border-left: 4px solid #48c78e;
|
|
22
|
+
padding-left: 1rem;
|
|
23
|
+
display: flex;
|
|
24
|
+
justify-content: space-between;
|
|
25
|
+
align-items: center;
|
|
26
|
+
}
|
|
27
|
+
.copy-btn {
|
|
28
|
+
padding: 0.5rem 1rem;
|
|
29
|
+
background: #48c78e;
|
|
30
|
+
color: white;
|
|
31
|
+
border: none;
|
|
32
|
+
border-radius: 6px;
|
|
33
|
+
cursor: pointer;
|
|
34
|
+
font-size: 0.875rem;
|
|
35
|
+
transition: background 0.2s;
|
|
36
|
+
}
|
|
37
|
+
.copy-btn:hover {
|
|
38
|
+
background: #3abb81;
|
|
39
|
+
}
|
|
40
|
+
.copy-btn.copied {
|
|
41
|
+
background: #00d1b2;
|
|
42
|
+
}
|
|
43
|
+
.code-container {
|
|
44
|
+
display: none;
|
|
45
|
+
background: #f5f5f5;
|
|
46
|
+
padding: 1rem;
|
|
47
|
+
border-radius: 6px;
|
|
48
|
+
margin-top: 1rem;
|
|
49
|
+
overflow-x: auto;
|
|
50
|
+
}
|
|
51
|
+
.code-container pre {
|
|
52
|
+
margin: 0;
|
|
53
|
+
font-family: 'Courier New', monospace;
|
|
54
|
+
font-size: 0.875rem;
|
|
55
|
+
}
|
|
56
|
+
</style>
|
|
57
|
+
</head>
|
|
58
|
+
<body>
|
|
59
|
+
<div style="max-width: 800px; margin: 0 auto;">
|
|
60
|
+
<a href="index.html" class="button is-link is-small">← Back to home</a>
|
|
61
|
+
<h1 class="title is-1">Forms</h1>
|
|
62
|
+
|
|
63
|
+
<div class="demo-section" id="section-1">
|
|
64
|
+
<div class="demo-title">
|
|
65
|
+
<span>Basic Fields (.field, .label, .control)</span>
|
|
66
|
+
<button class="copy-btn" onclick="copyCode('section-1')">Copy code</button>
|
|
67
|
+
</div>
|
|
68
|
+
<div class="field">
|
|
69
|
+
<label class="label">Name</label>
|
|
70
|
+
<div class="control"><input class="input" type="text" placeholder="Your name"></div>
|
|
71
|
+
<p class="help is-primary">This is help text</p>
|
|
72
|
+
</div>
|
|
73
|
+
<div class="field">
|
|
74
|
+
<label class="label">Email</label>
|
|
75
|
+
<div class="control has-icons-left"><input class="input" type="email" placeholder="Email"><span class="icon is-small">✉️</span></div>
|
|
76
|
+
</div>
|
|
77
|
+
<div class="code-container" id="code-section-1">
|
|
78
|
+
<pre><div class="field">
|
|
79
|
+
<label class="label">Name</label>
|
|
80
|
+
<div class="control">
|
|
81
|
+
<input class="input" type="text" placeholder="Your name">
|
|
82
|
+
</div>
|
|
83
|
+
<p class="help is-primary">This is help text</p>
|
|
84
|
+
</div>
|
|
85
|
+
<div class="field">
|
|
86
|
+
<label class="label">Email</label>
|
|
87
|
+
<div class="control has-icons-left">
|
|
88
|
+
<input class="input" type="email" placeholder="Email">
|
|
89
|
+
<span class="icon is-small">✉️</span>
|
|
90
|
+
</div>
|
|
91
|
+
</div></pre>
|
|
92
|
+
</div>
|
|
93
|
+
</div>
|
|
94
|
+
|
|
95
|
+
<div class="demo-section" id="section-2">
|
|
96
|
+
<div class="demo-title">
|
|
97
|
+
<span>Textarea</span>
|
|
98
|
+
<button class="copy-btn" onclick="copyCode('section-2')">Copy code</button>
|
|
99
|
+
</div>
|
|
100
|
+
<div class="field"><label class="label">Comments</label><div class="control"><textarea class="textarea" placeholder="Write here..."></textarea></div></div>
|
|
101
|
+
<div class="field"><textarea class="textarea is-small" placeholder="Small"></textarea></div>
|
|
102
|
+
<div class="code-container" id="code-section-2">
|
|
103
|
+
<pre><div class="field">
|
|
104
|
+
<label class="label">Comments</label>
|
|
105
|
+
<div class="control">
|
|
106
|
+
<textarea class="textarea" placeholder="Write here..."></textarea>
|
|
107
|
+
</div>
|
|
108
|
+
</div>
|
|
109
|
+
<div class="field">
|
|
110
|
+
<textarea class="textarea is-small" placeholder="Small"></textarea>
|
|
111
|
+
</div></pre>
|
|
112
|
+
</div>
|
|
113
|
+
</div>
|
|
114
|
+
|
|
115
|
+
<div class="demo-section" id="section-3">
|
|
116
|
+
<div class="demo-title">
|
|
117
|
+
<span>Select</span>
|
|
118
|
+
<button class="copy-btn" onclick="copyCode('section-3')">Copy code</button>
|
|
119
|
+
</div>
|
|
120
|
+
<div class="field"><div class="select"><select><option>Option 1</option><option>Option 2</option></select></div></div>
|
|
121
|
+
<div class="field"><div class="select is-primary"><select><option>Primary select</option></select></div></div>
|
|
122
|
+
<div class="code-container" id="code-section-3">
|
|
123
|
+
<pre><div class="field">
|
|
124
|
+
<div class="select">
|
|
125
|
+
<select>
|
|
126
|
+
<option>Option 1</option>
|
|
127
|
+
<option>Option 2</option>
|
|
128
|
+
</select>
|
|
129
|
+
</div>
|
|
130
|
+
</div>
|
|
131
|
+
<div class="field">
|
|
132
|
+
<div class="select is-primary">
|
|
133
|
+
<select><option>Primary select</option></select>
|
|
134
|
+
</div>
|
|
135
|
+
</div></pre>
|
|
136
|
+
</div>
|
|
137
|
+
</div>
|
|
138
|
+
|
|
139
|
+
<div class="demo-section" id="section-4">
|
|
140
|
+
<div class="demo-title">
|
|
141
|
+
<span>Checkbox and Radio</span>
|
|
142
|
+
<button class="copy-btn" onclick="copyCode('section-4')">Copy code</button>
|
|
143
|
+
</div>
|
|
144
|
+
<div class="field"><label class="checkbox"><input type="checkbox"> I accept terms</label></div>
|
|
145
|
+
<div class="field"><label class="radio"><input type="radio" name="gender"> Male</label><label class="radio"><input type="radio" name="gender"> Female</label></div>
|
|
146
|
+
<div class="code-container" id="code-section-4">
|
|
147
|
+
<pre><div class="field">
|
|
148
|
+
<label class="checkbox">
|
|
149
|
+
<input type="checkbox"> I accept terms
|
|
150
|
+
</label>
|
|
151
|
+
</div>
|
|
152
|
+
<div class="field">
|
|
153
|
+
<label class="radio">
|
|
154
|
+
<input type="radio" name="gender"> Male
|
|
155
|
+
</label>
|
|
156
|
+
<label class="radio">
|
|
157
|
+
<input type="radio" name="gender"> Female
|
|
158
|
+
</label>
|
|
159
|
+
</div></pre>
|
|
160
|
+
</div>
|
|
161
|
+
</div>
|
|
162
|
+
|
|
163
|
+
<div class="demo-section" id="section-5">
|
|
164
|
+
<div class="demo-title">
|
|
165
|
+
<span>File (.file)</span>
|
|
166
|
+
<button class="copy-btn" onclick="copyCode('section-5')">Copy code</button>
|
|
167
|
+
</div>
|
|
168
|
+
<div class="file"><label class="file-label"><input class="file-input" type="file"><span class="file-cta">Choose file</span><span class="file-name">No file selected</span></label></div>
|
|
169
|
+
<div class="file is-primary is-small"><label class="file-label"><input class="file-input" type="file"><span class="file-cta">Upload</span><span class="file-name">avatar.png</span></label></div>
|
|
170
|
+
<div class="code-container" id="code-section-5">
|
|
171
|
+
<pre><div class="file">
|
|
172
|
+
<label class="file-label">
|
|
173
|
+
<input class="file-input" type="file">
|
|
174
|
+
<span class="file-cta">Choose file</span>
|
|
175
|
+
<span class="file-name">No file selected</span>
|
|
176
|
+
</label>
|
|
177
|
+
</div>
|
|
178
|
+
<div class="file is-primary is-small">
|
|
179
|
+
<label class="file-label">
|
|
180
|
+
<input class="file-input" type="file">
|
|
181
|
+
<span class="file-cta">Upload</span>
|
|
182
|
+
<span class="file-name">avatar.png</span>
|
|
183
|
+
</label>
|
|
184
|
+
</div></pre>
|
|
185
|
+
</div>
|
|
186
|
+
</div>
|
|
187
|
+
|
|
188
|
+
<div class="demo-section" id="section-6">
|
|
189
|
+
<div class="demo-title">
|
|
190
|
+
<span>Groups and Addons</span>
|
|
191
|
+
<button class="copy-btn" onclick="copyCode('section-6')">Copy code</button>
|
|
192
|
+
</div>
|
|
193
|
+
<div class="field is-grouped"><div class="control"><input class="input" placeholder="Search"></div><div class="control"><button class="button is-primary">Search</button></div></div>
|
|
194
|
+
<div class="field has-addons"><div class="control"><input class="input" placeholder="Amount"></div><div class="control"><button class="button">+</button></div></div>
|
|
195
|
+
<div class="code-container" id="code-section-6">
|
|
196
|
+
<pre><div class="field is-grouped">
|
|
197
|
+
<div class="control">
|
|
198
|
+
<input class="input" placeholder="Search">
|
|
199
|
+
</div>
|
|
200
|
+
<div class="control">
|
|
201
|
+
<button class="button is-primary">Search</button>
|
|
202
|
+
</div>
|
|
203
|
+
</div>
|
|
204
|
+
<div class="field has-addons">
|
|
205
|
+
<div class="control">
|
|
206
|
+
<input class="input" placeholder="Amount">
|
|
207
|
+
</div>
|
|
208
|
+
<div class="control">
|
|
209
|
+
<button class="button">+</button>
|
|
210
|
+
</div>
|
|
211
|
+
</div></pre>
|
|
212
|
+
</div>
|
|
213
|
+
</div>
|
|
214
|
+
|
|
215
|
+
<div class="demo-section" id="section-7">
|
|
216
|
+
<div class="demo-title">
|
|
217
|
+
<span>Loading States and Icons</span>
|
|
218
|
+
<button class="copy-btn" onclick="copyCode('section-7')">Copy code</button>
|
|
219
|
+
</div>
|
|
220
|
+
<div class="field"><div class="control is-loading"><input class="input" value="Loading..."></div></div>
|
|
221
|
+
<div class="field"><div class="control has-icons-right"><input class="input is-danger" value="Error"><span class="icon">⚠️</span></div></div>
|
|
222
|
+
<div class="code-container" id="code-section-7">
|
|
223
|
+
<pre><div class="field">
|
|
224
|
+
<div class="control is-loading">
|
|
225
|
+
<input class="input" value="Loading...">
|
|
226
|
+
</div>
|
|
227
|
+
</div>
|
|
228
|
+
<div class="field">
|
|
229
|
+
<div class="control has-icons-right">
|
|
230
|
+
<input class="input is-danger" value="Error">
|
|
231
|
+
<span class="icon">⚠️</span>
|
|
232
|
+
</div>
|
|
233
|
+
</div></pre>
|
|
234
|
+
</div>
|
|
235
|
+
</div>
|
|
236
|
+
</div>
|
|
237
|
+
|
|
238
|
+
<script>
|
|
239
|
+
function copyCode(sectionId) {
|
|
240
|
+
const codeElement = document.getElementById('code-' + sectionId);
|
|
241
|
+
const button = event.target;
|
|
242
|
+
const originalText = button.textContent;
|
|
243
|
+
|
|
244
|
+
// Toggle code visibility
|
|
245
|
+
if (codeElement.style.display === 'none' || codeElement.style.display === '') {
|
|
246
|
+
codeElement.style.display = 'block';
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
// Copy to clipboard
|
|
250
|
+
const textToCopy = codeElement.querySelector('pre').textContent;
|
|
251
|
+
navigator.clipboard.writeText(textToCopy).then(() => {
|
|
252
|
+
button.textContent = 'Copied!';
|
|
253
|
+
button.classList.add('copied');
|
|
254
|
+
setTimeout(() => {
|
|
255
|
+
button.textContent = originalText;
|
|
256
|
+
button.classList.remove('copied');
|
|
257
|
+
}, 2000);
|
|
258
|
+
});
|
|
259
|
+
}
|
|
260
|
+
</script>
|
|
261
|
+
</body>
|
|
262
|
+
</html>
|
|
@@ -0,0 +1,146 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Bulma Tailwind - Visual Documentation</title>
|
|
7
|
+
<link rel="stylesheet" href="../dist/bulma-tailwind.css">
|
|
8
|
+
<style>
|
|
9
|
+
body {
|
|
10
|
+
font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
|
|
11
|
+
background: #fafafa;
|
|
12
|
+
margin: 0;
|
|
13
|
+
padding: 0;
|
|
14
|
+
}
|
|
15
|
+
.docs-container {
|
|
16
|
+
max-width: 1200px;
|
|
17
|
+
margin: 0 auto;
|
|
18
|
+
padding: 2rem 1rem;
|
|
19
|
+
}
|
|
20
|
+
.docs-header {
|
|
21
|
+
text-align: center;
|
|
22
|
+
margin-bottom: 3rem;
|
|
23
|
+
}
|
|
24
|
+
.docs-header h1 {
|
|
25
|
+
font-size: 2.5rem;
|
|
26
|
+
margin-bottom: 0.5rem;
|
|
27
|
+
}
|
|
28
|
+
.docs-header p {
|
|
29
|
+
font-size: 1.2rem;
|
|
30
|
+
color: #4a4a4a;
|
|
31
|
+
}
|
|
32
|
+
.card-grid {
|
|
33
|
+
display: grid;
|
|
34
|
+
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
35
|
+
gap: 1.5rem;
|
|
36
|
+
}
|
|
37
|
+
.demo-card {
|
|
38
|
+
background: white;
|
|
39
|
+
border-radius: 12px;
|
|
40
|
+
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
41
|
+
overflow: hidden;
|
|
42
|
+
transition: transform 0.2s;
|
|
43
|
+
}
|
|
44
|
+
.demo-card:hover {
|
|
45
|
+
transform: translateY(-4px);
|
|
46
|
+
}
|
|
47
|
+
.demo-card-header {
|
|
48
|
+
background: #00d1b2;
|
|
49
|
+
color: white;
|
|
50
|
+
padding: 1rem;
|
|
51
|
+
font-size: 1.25rem;
|
|
52
|
+
font-weight: bold;
|
|
53
|
+
}
|
|
54
|
+
.demo-card-body {
|
|
55
|
+
padding: 1.5rem;
|
|
56
|
+
min-height: 85px;
|
|
57
|
+
display: flex;
|
|
58
|
+
align-items: center;
|
|
59
|
+
justify-content: center;
|
|
60
|
+
}
|
|
61
|
+
.demo-card-footer {
|
|
62
|
+
background: #f5f5f5;
|
|
63
|
+
padding: 0.75rem 1.5rem;
|
|
64
|
+
border-top: 1px solid #dbdbdb;
|
|
65
|
+
}
|
|
66
|
+
.demo-card-footer a {
|
|
67
|
+
color: #3273dc;
|
|
68
|
+
text-decoration: none;
|
|
69
|
+
font-weight: 500;
|
|
70
|
+
}
|
|
71
|
+
.footer {
|
|
72
|
+
margin-top: 3rem;
|
|
73
|
+
text-align: center;
|
|
74
|
+
color: #7a7a7a;
|
|
75
|
+
padding: 2rem;
|
|
76
|
+
border-top: 1px solid #dbdbdb;
|
|
77
|
+
}
|
|
78
|
+
</style>
|
|
79
|
+
</head>
|
|
80
|
+
<body>
|
|
81
|
+
<div class="docs-container">
|
|
82
|
+
<div class="docs-header">
|
|
83
|
+
<h1 class="title is-1">Bulma Tailwind</h1>
|
|
84
|
+
<p>Bulma classes implemented with Tailwind CSS v4</p>
|
|
85
|
+
<p>Mini visual documentation of all components</p>
|
|
86
|
+
</div>
|
|
87
|
+
|
|
88
|
+
<div class="card-grid">
|
|
89
|
+
<div class="demo-card">
|
|
90
|
+
<div class="demo-card-header">🎨 Elements</div>
|
|
91
|
+
<div class="demo-card-body">
|
|
92
|
+
Buttons, boxes, titles, notifications, tables, tags, icons, images, progress bars...
|
|
93
|
+
</div>
|
|
94
|
+
<div class="demo-card-footer">
|
|
95
|
+
<a href="elements.html">View examples →</a>
|
|
96
|
+
</div>
|
|
97
|
+
</div>
|
|
98
|
+
|
|
99
|
+
<div class="demo-card">
|
|
100
|
+
<div class="demo-card-header">🧩 Components</div>
|
|
101
|
+
<div class="demo-card-body">
|
|
102
|
+
Cards, modals, menus, tabs, breadcrumbs, pagination, messages, dropdowns, navbar, panel...
|
|
103
|
+
</div>
|
|
104
|
+
<div class="demo-card-footer">
|
|
105
|
+
<a href="components.html">View examples →</a>
|
|
106
|
+
</div>
|
|
107
|
+
</div>
|
|
108
|
+
|
|
109
|
+
<div class="demo-card">
|
|
110
|
+
<div class="demo-card-header">📝 Forms</div>
|
|
111
|
+
<div class="demo-card-body">
|
|
112
|
+
Inputs, textareas, selects, checkboxes, radios, file uploads, fields with icons, sizes...
|
|
113
|
+
</div>
|
|
114
|
+
<div class="demo-card-footer">
|
|
115
|
+
<a href="form.html">View examples →</a>
|
|
116
|
+
</div>
|
|
117
|
+
</div>
|
|
118
|
+
|
|
119
|
+
<div class="demo-card">
|
|
120
|
+
<div class="demo-card-header">📐 Layout</div>
|
|
121
|
+
<div class="demo-card-body">
|
|
122
|
+
Column system (grid), container, hero, sections, levels...
|
|
123
|
+
</div>
|
|
124
|
+
<div class="demo-card-footer">
|
|
125
|
+
<a href="layout.html">View examples →</a>
|
|
126
|
+
</div>
|
|
127
|
+
</div>
|
|
128
|
+
|
|
129
|
+
<div class="demo-card">
|
|
130
|
+
<div class="demo-card-header">🖼️ Others</div>
|
|
131
|
+
<div class="demo-card-body">
|
|
132
|
+
Media object (multimedia content) and footer.
|
|
133
|
+
</div>
|
|
134
|
+
<div class="demo-card-footer">
|
|
135
|
+
<a href="misc.html">View examples →</a>
|
|
136
|
+
</div>
|
|
137
|
+
</div>
|
|
138
|
+
</div>
|
|
139
|
+
|
|
140
|
+
<div class="footer">
|
|
141
|
+
<p>Bulma Tailwind - Use Bulma classes with Tailwind CSS v4 engine</p>
|
|
142
|
+
<p><a href="https://github.com/ajomuch92/bulma-tailwind" style="color:#3273dc;">GitHub</a></p>
|
|
143
|
+
</div>
|
|
144
|
+
</div>
|
|
145
|
+
</body>
|
|
146
|
+
</html>
|
|
@@ -0,0 +1,193 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Layout - Bulma Tailwind</title>
|
|
7
|
+
<link rel="stylesheet" href="./dist/bulma-tailwind.css">
|
|
8
|
+
<style>
|
|
9
|
+
body { background: #fafafa; font-family: system-ui; margin: 0; }
|
|
10
|
+
.demo-block { background: #eef3fc; border: 1px solid #cbd5e0; padding: 1rem; text-align: center; border-radius: 6px; margin: 0.5rem 0; }
|
|
11
|
+
.hero-example { background: #00d1b2; color: white; }
|
|
12
|
+
.demo-section {
|
|
13
|
+
background: white;
|
|
14
|
+
padding: 1.5rem;
|
|
15
|
+
margin-bottom: 2rem;
|
|
16
|
+
border-radius: 12px;
|
|
17
|
+
}
|
|
18
|
+
.copy-btn {
|
|
19
|
+
padding: 0.5rem 1rem;
|
|
20
|
+
background: #3273dc;
|
|
21
|
+
color: white;
|
|
22
|
+
border: none;
|
|
23
|
+
border-radius: 6px;
|
|
24
|
+
cursor: pointer;
|
|
25
|
+
font-size: 0.875rem;
|
|
26
|
+
transition: background 0.2s;
|
|
27
|
+
float: right;
|
|
28
|
+
}
|
|
29
|
+
.copy-btn:hover {
|
|
30
|
+
background: #2366d1;
|
|
31
|
+
}
|
|
32
|
+
.copy-btn.copied {
|
|
33
|
+
background: #48c78e;
|
|
34
|
+
}
|
|
35
|
+
.code-container {
|
|
36
|
+
display: none;
|
|
37
|
+
background: #f5f5f5;
|
|
38
|
+
padding: 1rem;
|
|
39
|
+
border-radius: 6px;
|
|
40
|
+
margin-top: 1rem;
|
|
41
|
+
overflow-x: auto;
|
|
42
|
+
clear: both;
|
|
43
|
+
}
|
|
44
|
+
.code-container pre {
|
|
45
|
+
margin: 0;
|
|
46
|
+
font-family: 'Courier New', monospace;
|
|
47
|
+
font-size: 0.875rem;
|
|
48
|
+
}
|
|
49
|
+
</style>
|
|
50
|
+
</head>
|
|
51
|
+
<body>
|
|
52
|
+
<div style="max-width: 1200px; margin: 0 auto; padding: 2rem;">
|
|
53
|
+
<a href="index.html" class="button is-link is-small">← Back to home</a>
|
|
54
|
+
<h1 class="title is-1">Layout</h1>
|
|
55
|
+
|
|
56
|
+
<!-- Columns (grid) -->
|
|
57
|
+
<div class="demo-section" id="section-1">
|
|
58
|
+
<h2 class="title is-4">Columns (.columns / .column) <button class="copy-btn" onclick="copyCode('section-1')">Copy code</button></h2>
|
|
59
|
+
<div class="columns">
|
|
60
|
+
<div class="column"><div class="demo-block">Column 1</div></div>
|
|
61
|
+
<div class="column"><div class="demo-block">Column 2</div></div>
|
|
62
|
+
<div class="column"><div class="demo-block">Column 3</div></div>
|
|
63
|
+
</div>
|
|
64
|
+
<div class="columns">
|
|
65
|
+
<div class="column is-3"><div class="demo-block">is-3</div></div>
|
|
66
|
+
<div class="column is-6"><div class="demo-block">is-6</div></div>
|
|
67
|
+
<div class="column is-3"><div class="demo-block">is-3</div></div>
|
|
68
|
+
</div>
|
|
69
|
+
<div class="columns is-multiline">
|
|
70
|
+
<div class="column is-4"><div class="demo-block">4</div></div><div class="column is-4"><div class="demo-block">4</div></div><div class="column is-4"><div class="demo-block">4</div></div>
|
|
71
|
+
</div>
|
|
72
|
+
<div class="code-container" id="code-section-1">
|
|
73
|
+
<pre><div class="columns">
|
|
74
|
+
<div class="column"><div class="demo-block">Column 1</div></div>
|
|
75
|
+
<div class="column"><div class="demo-block">Column 2</div></div>
|
|
76
|
+
<div class="column"><div class="demo-block">Column 3</div></div>
|
|
77
|
+
</div>
|
|
78
|
+
<div class="columns">
|
|
79
|
+
<div class="column is-3"><div class="demo-block">is-3</div></div>
|
|
80
|
+
<div class="column is-6"><div class="demo-block">is-6</div></div>
|
|
81
|
+
<div class="column is-3"><div class="demo-block">is-3</div></div>
|
|
82
|
+
</div>
|
|
83
|
+
<div class="columns is-multiline">
|
|
84
|
+
<div class="column is-4"><div class="demo-block">4</div></div>
|
|
85
|
+
<div class="column is-4"><div class="demo-block">4</div></div>
|
|
86
|
+
<div class="column is-4"><div class="demo-block">4</div></div>
|
|
87
|
+
</div></pre>
|
|
88
|
+
</div>
|
|
89
|
+
</div>
|
|
90
|
+
|
|
91
|
+
<!-- Container -->
|
|
92
|
+
<div class="demo-section" id="section-2">
|
|
93
|
+
<h2 class="title is-4">Container (.container) <button class="copy-btn" onclick="copyCode('section-2')">Copy code</button></h2>
|
|
94
|
+
<div class="container" style="background: #f0f0f0; padding: 1rem;">This content is centered with automatic margins.</div>
|
|
95
|
+
<div class="code-container" id="code-section-2">
|
|
96
|
+
<pre><div class="container">
|
|
97
|
+
This content is centered with automatic margins.
|
|
98
|
+
</div></pre>
|
|
99
|
+
</div>
|
|
100
|
+
</div>
|
|
101
|
+
|
|
102
|
+
<!-- Hero -->
|
|
103
|
+
<div class="demo-section" id="section-3">
|
|
104
|
+
<h2 class="title is-4">Hero (.hero) <button class="copy-btn" onclick="copyCode('section-3')">Copy code</button></h2>
|
|
105
|
+
<div class="hero hero-example"><div class="hero-body"><h1 class="title">Main Hero</h1><p class="subtitle">Hero subtitle</p></div></div>
|
|
106
|
+
<div class="hero is-medium hero-example" style="background: #485fc7;"><div class="hero-body"><h2 class="title">Medium Hero</h2></div></div>
|
|
107
|
+
<div class="code-container" id="code-section-3">
|
|
108
|
+
<pre><div class="hero">
|
|
109
|
+
<div class="hero-body">
|
|
110
|
+
<h1 class="title">Main Hero</h1>
|
|
111
|
+
<p class="subtitle">Hero subtitle</p>
|
|
112
|
+
</div>
|
|
113
|
+
</div>
|
|
114
|
+
<div class="hero is-medium">
|
|
115
|
+
<div class="hero-body">
|
|
116
|
+
<h2 class="title">Medium Hero</h2>
|
|
117
|
+
</div>
|
|
118
|
+
</div></pre>
|
|
119
|
+
</div>
|
|
120
|
+
</div>
|
|
121
|
+
|
|
122
|
+
<!-- Section -->
|
|
123
|
+
<div class="demo-section" id="section-4">
|
|
124
|
+
<h2 class="title is-4">Section (.section) <button class="copy-btn" onclick="copyCode('section-4')">Copy code</button></h2>
|
|
125
|
+
<div class="section" style="background: #f9f9f9; border: 1px solid #ddd;">Normal section (3rem vertical padding)</div>
|
|
126
|
+
<div class="section is-medium" style="background: #efefef; margin-top: 1rem;">Medium section</div>
|
|
127
|
+
<div class="code-container" id="code-section-4">
|
|
128
|
+
<pre><div class="section">
|
|
129
|
+
Normal section (3rem vertical padding)
|
|
130
|
+
</div>
|
|
131
|
+
<div class="section is-medium">
|
|
132
|
+
Medium section
|
|
133
|
+
</div></pre>
|
|
134
|
+
</div>
|
|
135
|
+
</div>
|
|
136
|
+
|
|
137
|
+
<!-- Level -->
|
|
138
|
+
<div class="demo-section" id="section-5">
|
|
139
|
+
<h2 class="title is-4">Level (.level) <button class="copy-btn" onclick="copyCode('section-5')">Copy code</button></h2>
|
|
140
|
+
<div class="level">
|
|
141
|
+
<div class="level-left"><div class="level-item"><strong>Left</strong></div></div>
|
|
142
|
+
<div class="level-right"><div class="level-item"><button class="button is-primary">Action</button></div></div>
|
|
143
|
+
</div>
|
|
144
|
+
<div class="level is-mobile">
|
|
145
|
+
<div class="level-item">Item 1</div>
|
|
146
|
+
<div class="level-item">Item 2</div>
|
|
147
|
+
<div class="level-item">Item 3</div>
|
|
148
|
+
</div>
|
|
149
|
+
<div class="code-container" id="code-section-5">
|
|
150
|
+
<pre><div class="level">
|
|
151
|
+
<div class="level-left">
|
|
152
|
+
<div class="level-item"><strong>Left</strong></div>
|
|
153
|
+
</div>
|
|
154
|
+
<div class="level-right">
|
|
155
|
+
<div class="level-item">
|
|
156
|
+
<button class="button is-primary">Action</button>
|
|
157
|
+
</div>
|
|
158
|
+
</div>
|
|
159
|
+
</div>
|
|
160
|
+
<div class="level is-mobile">
|
|
161
|
+
<div class="level-item">Item 1</div>
|
|
162
|
+
<div class="level-item">Item 2</div>
|
|
163
|
+
<div class="level-item">Item 3</div>
|
|
164
|
+
</div></pre>
|
|
165
|
+
</div>
|
|
166
|
+
</div>
|
|
167
|
+
</div>
|
|
168
|
+
|
|
169
|
+
<script>
|
|
170
|
+
function copyCode(sectionId) {
|
|
171
|
+
const codeElement = document.getElementById('code-' + sectionId);
|
|
172
|
+
const button = event.target;
|
|
173
|
+
const originalText = button.textContent;
|
|
174
|
+
|
|
175
|
+
// Toggle code visibility
|
|
176
|
+
if (codeElement.style.display === 'none' || codeElement.style.display === '') {
|
|
177
|
+
codeElement.style.display = 'block';
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
// Copy to clipboard
|
|
181
|
+
const textToCopy = codeElement.querySelector('pre').textContent;
|
|
182
|
+
navigator.clipboard.writeText(textToCopy).then(() => {
|
|
183
|
+
button.textContent = 'Copied!';
|
|
184
|
+
button.classList.add('copied');
|
|
185
|
+
setTimeout(() => {
|
|
186
|
+
button.textContent = originalText;
|
|
187
|
+
button.classList.remove('copied');
|
|
188
|
+
}, 2000);
|
|
189
|
+
});
|
|
190
|
+
}
|
|
191
|
+
</script>
|
|
192
|
+
</body>
|
|
193
|
+
</html>
|