-
Notifications
You must be signed in to change notification settings - Fork 29
/
index.html
332 lines (320 loc) · 18.5 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Ralma - Ractive Components for Bulma</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="author" content="Aldi Duzha" />
<meta name="description" content="Stateless Ractive Components for Bulma" />
<meta
name="keywords"
content="ralma, components, ractive, js, plugin, helpers, shortcuts, bulma, widgets"
/>
<link rel="canonical" href="https://aldi.github.io/ralma/" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css" />
<link rel="stylesheet" href="docs/css/styles.css" />
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.11.2/js/all.js"></script>
<script defer src="docs/js/scripts.js"></script>
</head>
<body>
<a href="https://github.com/aldi/ralma"
><img
style="position: absolute; top: 0; left: 0; border: 0"
src="https://camo.githubusercontent.com/c6625ac1f3ee0a12250227cf83ce904423abf351/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f677261795f3664366436642e706e67"
alt="Fork me on GitHub"
data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_left_gray_6d6d6d.png"
/></a>
<div class="column has-text-centered">
<p class="title is-2">Ralma <span class="tag">v0.2.2</span></p>
<p class="subtitle is-4">Ractive Components for Bulma</p>
<p class="subtitle is-6">
This Ractive plugin provides helper shortcuts for most Bulma widgets.<br />
The goal of this plugin is to help you get started quickly and reduce the overly verbose
code that Bulma tends to produce. <br />
It does not attempt to cover everything in Bulma, but rather offer the most common elements
as shortcuts. <br />
Sometimes, when you want something more specific or fancy, you can still use the original
bootstrap markup.
</p>
</div>
<div class="column has-text-centered">
<p>Downloads:</p>
<ul>
<li>Debug: <a href="bin/ralma.js">bin/ralma.js</a></li>
<li>Minified: <a href="bin/ralma.min.js">bin/ralma.min.js</a></li>
</ul>
<p class="subtitle is-5">A typical header would look like this:</p>
</div>
<div class="bd-example highlight-full header-code">
<figure class="highlight">
<pre>
<code class="language-html" data-lang="html"><span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"utf-8"</span><span class="nt">></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"width=device-width, initial-scale=1.0"</span><span class="nt">></span>
<span class="nt"><title></span>Ralma!<span class="nt"></title></span>
<span class="cp"><!-- Bulma CSS --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css"</span><span class="nt">></span>
<span class="cp"><!-- Ractive Framework --></span>
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://cdn.jsdelivr.net/npm/ractive"</span><span class="nt">></script></span>
<span class="cp"><!-- Ralma Plugin --></span>
<span class="nt"><script </span><span class="na">src=</span><span class="s">"ralma.js"</span><span class="nt">></script></span>
<span class="nt"></head></span></code><button class="button is-small bd-copy">Copy</button></pre>
</figure>
</div>
<hr />
<header class="bd-header">
<div class="bd-header-titles" id="columns">
<h1 class="title">Columns</h1>
<p class="subtitle is-4">The power of <strong>Flexbox</strong> in a simple interface</p>
</div>
</header>
<div class="bd-content">
<nav class="bd-links">
<a class="bd-link" href="docs/columns/basics.html">
<h2 class="bd-link-name">
<figure class="bd-link-figure">
<span class="bd-link-icon has-text-star">
<svg
class="svg-inline--fa fa-columns fa-w-16"
aria-hidden="true"
data-prefix="fas"
data-icon="columns"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
data-fa-i2svg=""
>
<path
fill="currentColor"
d="M464 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zM224 416H64V160h160v256zm224 0H288V160h160v256z"
></path>
</svg>
<!-- <i class="fas fa-columns"></i> -->
</span>
</figure>
Basics
</h2>
<p class="bd-link-subtitle">A simple way to build <strong>responsive columns</strong></p>
</a>
<a class="bd-link" href="docs/columns/sizes.html">
<h2 class="bd-link-name">
<figure class="bd-link-figure">
<span class="bd-link-icon has-text-success">
<svg
class="svg-inline--fa fa-expand-arrows-alt fa-w-14"
aria-hidden="true"
data-prefix="fas"
data-icon="expand-arrows-alt"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
data-fa-i2svg=""
>
<path
fill="currentColor"
d="M448.1 344v112c0 13.3-10.7 24-24 24h-112c-21.4 0-32.1-25.9-17-41l36.2-36.2L224 295.6 116.8 402.9 153 439c15.1 15.1 4.4 41-17 41H24c-13.3 0-24-10.7-24-24V344c0-21.4 25.9-32.1 41-17l36.2 36.2L184.5 256 77.2 148.7 41 185c-15.1 15.1-41 4.4-41-17V56c0-13.3 10.7-24 24-24h112c21.4 0 32.1 25.9 17 41l-36.2 36.2L224 216.4l107.3-107.3L295.1 73c-15.1-15.1-4.4-41 17-41h112c13.3 0 24 10.7 24 24v112c0 21.4-25.9 32.1-41 17l-36.2-36.2L263.6 256l107.3 107.3 36.2-36.2c15.1-15.2 41-4.5 41 16.9z"
></path>
</svg>
</span>
</figure>
Sizes
</h2>
<p class="bd-link-subtitle">
Define the <strong>size</strong> of each column <strong>individually</strong>
</p>
</a>
<a class="bd-link" href="docs/columns/responsiveness.html">
<h2 class="bd-link-name">
<figure class="bd-link-figure">
<span class="bd-link-icon has-text-primary">
<svg
class="svg-inline--fa fa-arrows-alt-h fa-w-16"
aria-hidden="true"
data-prefix="fas"
data-icon="arrows-alt-h"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
data-fa-i2svg=""
>
<path
fill="currentColor"
d="M377.941 169.941V216H134.059v-46.059c0-21.382-25.851-32.09-40.971-16.971L7.029 239.029c-9.373 9.373-9.373 24.568 0 33.941l86.059 86.059c15.119 15.119 40.971 4.411 40.971-16.971V296h243.882v46.059c0 21.382 25.851 32.09 40.971 16.971l86.059-86.059c9.373-9.373 9.373-24.568 0-33.941l-86.059-86.059c-15.119-15.12-40.971-4.412-40.971 16.97z"
></path>
</svg>
<!-- <i class="fas fa-arrows-alt-h"></i> -->
</span>
</figure>
Responsiveness
</h2>
<p class="bd-link-subtitle">
Handle <strong>different</strong> column layouts for each <strong>breakpoint</strong>
</p>
</a>
<a class="bd-link" href="docs/columns/nesting.html">
<h2 class="bd-link-name">
<figure class="bd-link-figure">
<span class="bd-link-icon has-text-danger">
<svg
class="svg-inline--fa fa-sitemap fa-w-20"
aria-hidden="true"
data-prefix="fas"
data-icon="sitemap"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 640 512"
data-fa-i2svg=""
>
<path
fill="currentColor"
d="M616 320h-48v-48c0-22.056-17.944-40-40-40H344v-40h48c13.255 0 24-10.745 24-24V24c0-13.255-10.745-24-24-24H248c-13.255 0-24 10.745-24 24v144c0 13.255 10.745 24 24 24h48v40H112c-22.056 0-40 17.944-40 40v48H24c-13.255 0-24 10.745-24 24v144c0 13.255 10.745 24 24 24h144c13.255 0 24-10.745 24-24V344c0-13.255-10.745-24-24-24h-48v-40h176v40h-48c-13.255 0-24 10.745-24 24v144c0 13.255 10.745 24 24 24h144c13.255 0 24-10.745 24-24V344c0-13.255-10.745-24-24-24h-48v-40h176v40h-48c-13.255 0-24 10.745-24 24v144c0 13.255 10.745 24 24 24h144c13.255 0 24-10.745 24-24V344c0-13.255-10.745-24-24-24z"
></path>
</svg>
<!-- <i class="fas fa-sitemap"></i> -->
</span>
</figure>
Nesting
</h2>
<p class="bd-link-subtitle">A simple way to build <strong>responsive columns</strong></p>
</a>
<a class="bd-link" href="docs/columns/gap.html">
<h2 class="bd-link-name">
<figure class="bd-link-figure">
<span class="bd-link-icon has-text-info">
<svg
class="svg-inline--fa fa-pause fa-w-14"
aria-hidden="true"
data-prefix="fas"
data-icon="pause"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
data-fa-i2svg=""
>
<path
fill="currentColor"
d="M144 479H48c-26.5 0-48-21.5-48-48V79c0-26.5 21.5-48 48-48h96c26.5 0 48 21.5 48 48v352c0 26.5-21.5 48-48 48zm304-48V79c0-26.5-21.5-48-48-48h-96c-26.5 0-48 21.5-48 48v352c0 26.5 21.5 48 48 48h96c26.5 0 48-21.5 48-48z"
></path>
</svg>
<!-- <i class="fas fa-pause"></i> -->
</span>
</figure>
Gap
</h2>
<p class="bd-link-subtitle">Customize the <strong>gap</strong> between the columns</p>
</a>
<a class="bd-link" href="docs/columns/options.html">
<h2 class="bd-link-name">
<figure class="bd-link-figure">
<span class="bd-link-icon has-text-grey">
<svg
class="svg-inline--fa fa-cogs fa-w-20"
aria-hidden="true"
data-prefix="fas"
data-icon="cogs"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 640 512"
data-fa-i2svg=""
>
<path
fill="currentColor"
d="M512.1 191l-8.2 14.3c-3 5.3-9.4 7.5-15.1 5.4-11.8-4.4-22.6-10.7-32.1-18.6-4.6-3.8-5.8-10.5-2.8-15.7l8.2-14.3c-6.9-8-12.3-17.3-15.9-27.4h-16.5c-6 0-11.2-4.3-12.2-10.3-2-12-2.1-24.6 0-37.1 1-6 6.2-10.4 12.2-10.4h16.5c3.6-10.1 9-19.4 15.9-27.4l-8.2-14.3c-3-5.2-1.9-11.9 2.8-15.7 9.5-7.9 20.4-14.2 32.1-18.6 5.7-2.1 12.1.1 15.1 5.4l8.2 14.3c10.5-1.9 21.2-1.9 31.7 0L552 6.3c3-5.3 9.4-7.5 15.1-5.4 11.8 4.4 22.6 10.7 32.1 18.6 4.6 3.8 5.8 10.5 2.8 15.7l-8.2 14.3c6.9 8 12.3 17.3 15.9 27.4h16.5c6 0 11.2 4.3 12.2 10.3 2 12 2.1 24.6 0 37.1-1 6-6.2 10.4-12.2 10.4h-16.5c-3.6 10.1-9 19.4-15.9 27.4l8.2 14.3c3 5.2 1.9 11.9-2.8 15.7-9.5 7.9-20.4 14.2-32.1 18.6-5.7 2.1-12.1-.1-15.1-5.4l-8.2-14.3c-10.4 1.9-21.2 1.9-31.7 0zm-10.5-58.8c38.5 29.6 82.4-14.3 52.8-52.8-38.5-29.7-82.4 14.3-52.8 52.8zM386.3 286.1l33.7 16.8c10.1 5.8 14.5 18.1 10.5 29.1-8.9 24.2-26.4 46.4-42.6 65.8-7.4 8.9-20.2 11.1-30.3 5.3l-29.1-16.8c-16 13.7-34.6 24.6-54.9 31.7v33.6c0 11.6-8.3 21.6-19.7 23.6-24.6 4.2-50.4 4.4-75.9 0-11.5-2-20-11.9-20-23.6V418c-20.3-7.2-38.9-18-54.9-31.7L74 403c-10 5.8-22.9 3.6-30.3-5.3-16.2-19.4-33.3-41.6-42.2-65.7-4-10.9.4-23.2 10.5-29.1l33.3-16.8c-3.9-20.9-3.9-42.4 0-63.4L12 205.8c-10.1-5.8-14.6-18.1-10.5-29 8.9-24.2 26-46.4 42.2-65.8 7.4-8.9 20.2-11.1 30.3-5.3l29.1 16.8c16-13.7 34.6-24.6 54.9-31.7V57.1c0-11.5 8.2-21.5 19.6-23.5 24.6-4.2 50.5-4.4 76-.1 11.5 2 20 11.9 20 23.6v33.6c20.3 7.2 38.9 18 54.9 31.7l29.1-16.8c10-5.8 22.9-3.6 30.3 5.3 16.2 19.4 33.2 41.6 42.1 65.8 4 10.9.1 23.2-10 29.1l-33.7 16.8c3.9 21 3.9 42.5 0 63.5zm-117.6 21.1c59.2-77-28.7-164.9-105.7-105.7-59.2 77 28.7 164.9 105.7 105.7zm243.4 182.7l-8.2 14.3c-3 5.3-9.4 7.5-15.1 5.4-11.8-4.4-22.6-10.7-32.1-18.6-4.6-3.8-5.8-10.5-2.8-15.7l8.2-14.3c-6.9-8-12.3-17.3-15.9-27.4h-16.5c-6 0-11.2-4.3-12.2-10.3-2-12-2.1-24.6 0-37.1 1-6 6.2-10.4 12.2-10.4h16.5c3.6-10.1 9-19.4 15.9-27.4l-8.2-14.3c-3-5.2-1.9-11.9 2.8-15.7 9.5-7.9 20.4-14.2 32.1-18.6 5.7-2.1 12.1.1 15.1 5.4l8.2 14.3c10.5-1.9 21.2-1.9 31.7 0l8.2-14.3c3-5.3 9.4-7.5 15.1-5.4 11.8 4.4 22.6 10.7 32.1 18.6 4.6 3.8 5.8 10.5 2.8 15.7l-8.2 14.3c6.9 8 12.3 17.3 15.9 27.4h16.5c6 0 11.2 4.3 12.2 10.3 2 12 2.1 24.6 0 37.1-1 6-6.2 10.4-12.2 10.4h-16.5c-3.6 10.1-9 19.4-15.9 27.4l8.2 14.3c3 5.2 1.9 11.9-2.8 15.7-9.5 7.9-20.4 14.2-32.1 18.6-5.7 2.1-12.1-.1-15.1-5.4l-8.2-14.3c-10.4 1.9-21.2 1.9-31.7 0zM501.6 431c38.5 29.6 82.4-14.3 52.8-52.8-38.5-29.6-82.4 14.3-52.8 52.8z"
></path>
</svg>
<!-- <i class="fas fa-cogs"></i> -->
</span>
</figure>
Options
</h2>
<p class="bd-link-subtitle">Design different <strong>types</strong> of column layouts</p>
</a>
</nav>
</div>
<hr />
<header class="bd-header">
<div class="bd-header-titles" id="elements">
<h1 class="title">Elements</h1>
<p class="subtitle is-4">
Essential interface elements that only require a <strong>single CSS class</strong>
</p>
</div>
</header>
<div class="bd-content">
<nav class="bd-links">
<a class="bd-link" href="docs/elements/button.html">
<h2 class="bd-link-name">
<figure class="bd-link-figure">
<span class="bd-link-icon has-text-success">
<svg
class="svg-inline--fa fa-hand-pointer fa-w-14"
aria-hidden="true"
data-prefix="far"
data-icon="hand-pointer"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
data-fa-i2svg=""
>
<path
fill="currentColor"
d="M358.182 179.361c-19.493-24.768-52.679-31.945-79.872-19.098-15.127-15.687-36.182-22.487-56.595-19.629V67c0-36.944-29.736-67-66.286-67S89.143 30.056 89.143 67v161.129c-19.909-7.41-43.272-5.094-62.083 8.872-29.355 21.795-35.793 63.333-14.55 93.152l109.699 154.001C134.632 501.59 154.741 512 176 512h178.286c30.802 0 57.574-21.5 64.557-51.797l27.429-118.999A67.873 67.873 0 0 0 448 326v-84c0-46.844-46.625-79.273-89.818-62.639zM80.985 279.697l27.126 38.079c8.995 12.626 29.031 6.287 29.031-9.283V67c0-25.12 36.571-25.16 36.571 0v175c0 8.836 7.163 16 16 16h6.857c8.837 0 16-7.164 16-16v-35c0-25.12 36.571-25.16 36.571 0v35c0 8.836 7.163 16 16 16H272c8.837 0 16-7.164 16-16v-21c0-25.12 36.571-25.16 36.571 0v21c0 8.836 7.163 16 16 16h6.857c8.837 0 16-7.164 16-16 0-25.121 36.571-25.16 36.571 0v84c0 1.488-.169 2.977-.502 4.423l-27.43 119.001c-1.978 8.582-9.29 14.576-17.782 14.576H176c-5.769 0-11.263-2.878-14.697-7.697l-109.712-154c-14.406-20.223 14.994-42.818 29.394-22.606zM176.143 400v-96c0-8.837 6.268-16 14-16h6c7.732 0 14 7.163 14 16v96c0 8.837-6.268 16-14 16h-6c-7.733 0-14-7.163-14-16zm75.428 0v-96c0-8.837 6.268-16 14-16h6c7.732 0 14 7.163 14 16v96c0 8.837-6.268 16-14 16h-6c-7.732 0-14-7.163-14-16zM327 400v-96c0-8.837 6.268-16 14-16h6c7.732 0 14 7.163 14 16v96c0 8.837-6.268 16-14 16h-6c-7.732 0-14-7.163-14-16z"
></path>
</svg>
<!-- <i class="far fa-hand-pointer"></i> -->
</span>
</figure>
Button
</h2>
<p class="bd-link-subtitle">
The classic <strong>button</strong>, in different colors, sizes, and states
</p>
</a>
<a class="bd-link" href="docs/elements/content.html">
<h2 class="bd-link-name">
<figure class="bd-link-figure">
<span class="bd-link-icon has-text-primary">
<svg
class="svg-inline--fa fa-align-left fa-w-14"
aria-hidden="true"
data-prefix="fas"
data-icon="align-left"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
data-fa-i2svg=""
>
<path
fill="currentColor"
d="M288 44v40c0 8.837-7.163 16-16 16H16c-8.837 0-16-7.163-16-16V44c0-8.837 7.163-16 16-16h256c8.837 0 16 7.163 16 16zM0 172v40c0 8.837 7.163 16 16 16h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16zm16 312h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm256-200H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16h256c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16z"
></path>
</svg>
</span>
</figure>
Content
</h2>
<p class="bd-link-subtitle">
A single class to handle <strong>WYSIWYG</strong> generated content, where only
<strong>HTML tags</strong> are available
</p>
</a>
</nav>
</div>
<hr />
<!-- FOOTER -->
<div class="hero-foot pb-5">
<div class="container has-text-centered">
<p class="footer-text">
<a href="https://www.aldiduzha.com?utm_source=Github" style="color: grey"
>Designed with <i class="fa fa-heart fa-fw" style="font-size: 10px; color: red"></i> by
Aldi Duzha</a
>
</p>
</div>
</div>
<!-- Clipboard.js -->
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
</body>
</html>