bulma-clean-theme 1.0.0.beta.1 → 1.0.0

Sign up to get free protection for your applications and to get access to all the features.
@@ -1,428 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <title>Bulma Block List</title>
5
- <link rel="stylesheet" href="docs.css" />
6
- <link
7
- rel="stylesheet"
8
- href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5/css/all.min.css"
9
- />
10
- </head>
11
- <body>
12
- <div classs="container">
13
- <section class="hero is-primary is-medium">
14
- <div class="hero-body">
15
- <h1 class="title">Bulma Block List</h1>
16
- <p class="subtitle">A Bulma extension</p>
17
- </div>
18
- </section>
19
- <section class="section">
20
- <div class="columns is-multiline" markdown="0">
21
- <div class="column is-12 has-text-right">
22
- <a
23
- href="https://github.com/chrisrhymes/bulma-block-list/stargazers"
24
- >
25
- <img
26
- src="https://img.shields.io/github/stars/chrisrhymes/bulma-block-list?style=social"
27
- alt="GitHub Stars"
28
- />
29
- </a>
30
- <a
31
- href="https://github.com/chrisrhymes/bulma-block-list/network/members"
32
- >
33
- <img
34
- alt="GitHub forks"
35
- src="https://img.shields.io/github/forks/chrisrhymes/bulma-block-list?label=fork&style=social"
36
- />
37
- </a>
38
- <img
39
- alt="npm"
40
- src="https://img.shields.io/npm/dw/bulma-block-list"
41
- />
42
- </div>
43
- <div class="column is-12">
44
- <div class="content">
45
- <h2>Upgrading to v1</h2>
46
- <p>
47
- To be compatible with Bulma, version 1 of Bulma Block List
48
- requires
49
- <a
50
- href="https://bulma.io/documentation/start/migrating-to-v1/#what-changes"
51
- >dart sass</a
52
- >.
53
- </p>
54
- </div>
55
- </div>
56
- <div class="column is-12">
57
- <div class="content">
58
- <h2 id="installation">Installation</h2>
59
- <ul>
60
- <li><code>npm i -S bulma-block-list</code></li>
61
- <li>
62
- <code
63
- >@import
64
- "node_modules/bulma-block-list/src/block-list";</code
65
- >
66
- after importing Bulma.
67
- </li>
68
- </ul>
69
- </div>
70
- </div>
71
- <div class="column is-12">
72
- <div class="content">
73
- <h2 id="how-to-use">How to use</h2>
74
- <p>
75
- Create a ul and give it the class 'block-list' then use the
76
- modifyers to style as needed. Only some of the colours are
77
- displayed below but the scss loops through the entire Bulma
78
- $colors map.
79
- </p>
80
- </div>
81
- <div class="highlight highlight-text-html-basic">
82
- <pre>
83
- &lt;<span class="pl-ent">ul</span> <span class="pl-e">class</span>=<span class="pl-s"><span class="pl-pds">"</span>block-list is-small is-outlined is-success is-centered<span class="pl-pds">"</span></span>&gt;
84
- &lt;<span class="pl-ent">li</span>&gt;Item one&lt;/<span class="pl-ent">li</span>&gt;
85
- &lt;<span class="pl-ent">li</span>&gt;Item two&lt;/<span class="pl-ent">li</span>&gt;
86
- &lt;<span class="pl-ent">li</span>&gt;Item three&lt;/<span class="pl-ent">li</span>&gt;
87
- &lt;/<span class="pl-ent">ul</span>&gt;</pre>
88
- </div>
89
- </div>
90
- <div class="column is-12">
91
- <p class="title is-4" id="alignment">Alignment</p>
92
- </div>
93
- <div class="column is-4">
94
- <p class="title is-5">is-left (default)</p>
95
- <ul class="block-list is-left is-light">
96
- <li>Item one</li>
97
- <li>Item two</li>
98
- <li>Item three</li>
99
- </ul>
100
- </div>
101
- <div class="column is-4">
102
- <p class="title is-5">is-centered</p>
103
- <ul class="block-list is-centered is-light">
104
- <li>Item one</li>
105
- <li>Item two</li>
106
- <li>Item three</li>
107
- </ul>
108
- </div>
109
- <div class="column is-4">
110
- <p class="title is-5">is-right</p>
111
- <ul class="block-list is-right is-light">
112
- <li>Item one</li>
113
- <li>Item two</li>
114
- <li>Item three</li>
115
- </ul>
116
- </div>
117
-
118
- <div class="column is-12">
119
- <p class="title is-4" id="sizes">Sizes</p>
120
- </div>
121
- <div class="column is-4">
122
- <p class="title is-5">is-small</p>
123
- <ul class="block-list is-small is-light">
124
- <li>Item one</li>
125
- <li>Item two</li>
126
- <li>Item three</li>
127
- </ul>
128
- </div>
129
- <div class="column is-4">
130
- <p class="title is-5">is-normal</p>
131
- <ul class="block-list is-normal is-light">
132
- <li>Item one</li>
133
- <li>Item two</li>
134
- <li>Item three</li>
135
- </ul>
136
- </div>
137
- <div class="column is-4">
138
- <p class="title is-5">is-large</p>
139
- <ul class="block-list is-large is-light">
140
- <li>Item one</li>
141
- <li>Item two</li>
142
- <li>Item three</li>
143
- </ul>
144
- </div>
145
-
146
- <div class="column is-12">
147
- <p class="title is-4" id="colours">Colours</p>
148
- </div>
149
- <div class="column is-4">
150
- <p class="title is-5">is-primary</p>
151
- <ul class="block-list is-primary">
152
- <li>Item one</li>
153
- <li>Item two</li>
154
- <li>Item three</li>
155
- </ul>
156
- </div>
157
- <div class="column is-4">
158
- <p class="title is-5">is-info</p>
159
- <ul class="block-list is-info">
160
- <li>Item one</li>
161
- <li>Item two</li>
162
- <li>Item three</li>
163
- </ul>
164
- </div>
165
- <div class="column is-4">
166
- <p class="title is-5">is-dark</p>
167
- <ul class="block-list is-dark">
168
- <li>Item one</li>
169
- <li>Item two</li>
170
- <li>Item three</li>
171
- </ul>
172
- </div>
173
-
174
- <div class="column is-12">
175
- <p class="title is-4" id="outlined">Outlined</p>
176
- </div>
177
- <div class="column is-4">
178
- <p class="title is-5">is-outlined</p>
179
- <ul class="block-list is-outlined">
180
- <li>Item one</li>
181
- <li>Item two</li>
182
- <li>Item three</li>
183
- </ul>
184
- </div>
185
- <div class="column is-4">
186
- <p class="title is-5">is-outlined is-primary</p>
187
- <ul class="block-list is-outlined is-primary">
188
- <li>Item one</li>
189
- <li>Item two</li>
190
- <li>Item three</li>
191
- </ul>
192
- </div>
193
- <div class="column is-4">
194
- <p class="title is-5">is-outlined is-danger</p>
195
- <ul class="block-list is-outlined is-danger">
196
- <li>Item one</li>
197
- <li>Item two</li>
198
- <li>Item three</li>
199
- </ul>
200
- </div>
201
-
202
- <div class="column is-12">
203
- <p class="title is-4" id="has-radius">Has Radius</p>
204
- </div>
205
- <div class="column is-4">
206
- <p class="title is-5">has-radius is-primary</p>
207
- <ul class="block-list has-radius is-primary">
208
- <li>Item one</li>
209
- <li>Item two</li>
210
- <li>Item three</li>
211
- </ul>
212
- </div>
213
- <div class="column is-4">
214
- <p class="title is-5">has-radius is-info</p>
215
- <ul class="block-list has-radius is-info">
216
- <li>Item one</li>
217
- <li>Item two</li>
218
- <li>Item three</li>
219
- </ul>
220
- </div>
221
- <div class="column is-4">
222
- <p class="title is-5">has-radius is-dark</p>
223
- <ul class="block-list has-radius is-dark">
224
- <li>Item one</li>
225
- <li>Item two</li>
226
- <li>Item three</li>
227
- </ul>
228
- </div>
229
-
230
- <div class="column is-12">
231
- <p class="title is-4" id="highlighted">Is Highlighted</p>
232
- <p>
233
- In v0.4 you can highlight the all list items or individual list
234
- items
235
- </p>
236
- </div>
237
- <div class="column is-4">
238
- <p class="title is-5">li.is-highlighted</p>
239
- <ul class="block-list">
240
- <li>Item one</li>
241
- <li class="is-highlighted">Item two</li>
242
- <li>Item three</li>
243
- </ul>
244
- </div>
245
- <div class="column is-4">
246
- <p class="title is-5">is-highlighted is-info</p>
247
- <ul class="block-list is-highlighted is-info">
248
- <li>Item one</li>
249
- <li>Item two</li>
250
- <li>Item three</li>
251
- </ul>
252
- </div>
253
- <div class="column is-4">
254
- <p class="title is-5">is-highlighted is-danger has-radius</p>
255
- <ul class="block-list is-highlighted is-danger has-radius">
256
- <li>Item one</li>
257
- <li>Item two</li>
258
- <li>Item three</li>
259
- </ul>
260
- </div>
261
-
262
- <div class="column is-12">
263
- <p class="title is-4" id="has-icon">Has Icon</p>
264
- <p>In v0.5 you can add icons</p>
265
- <div class="highlight highlight-text-html-basic">
266
- <pre>
267
- &lt;li class="has-icon"&gt;
268
- &lt;span class="icon"&gt;
269
- &lt;i class="fas fa-plane"&gt;&lt;/i&gt;
270
- &lt;/span&gt;
271
- &lt;span&gt;Item one&lt;/span&gt;
272
- &lt;/li&gt;
273
-
274
- // .is-right
275
- &lt;li class="has-icon is-right"&gt;
276
- &lt;span&gt;Item one&lt;/span&gt;
277
- &lt;span class="icon"&gt;
278
- &lt;i class="fas fa-plane"&gt;&lt;/i&gt;
279
- &lt;/span&gt;
280
- &lt;/li&gt;</pre
281
- >
282
- </div>
283
- </div>
284
- <div class="column is-4">
285
- <p class="title is-5">li.has-icon</p>
286
- <ul class="block-list is-light">
287
- <li class="has-icon">
288
- <span class="icon">
289
- <i class="fas fa-plane"></i>
290
- </span>
291
- <span>Item one</span>
292
- </li>
293
- <li class="has-icon">
294
- <span class="icon">
295
- <i class="fas fa-paper-plane"></i>
296
- </span>
297
- <span
298
- >Lorem ipsum dolor sit amet, consectetur adipiscing elit.
299
- Donec at erat eu massa sodales auctor.</span
300
- >
301
- </li>
302
- <li>
303
- <span class="icon">
304
- <i class="fas fa-plane"></i>
305
- </span>
306
- <span>Item Three</span>
307
- </li>
308
- </ul>
309
- </div>
310
- <div class="column is-4">
311
- <p class="title is-5">li.has-icon.is-right</p>
312
- <ul class="block-list is-light">
313
- <li class="has-icon is-right">
314
- <span>Item one</span>
315
- <span class="icon">
316
- <i class="fas fa-plane"></i>
317
- </span>
318
- </li>
319
- <li class="has-icon is-right">
320
- <span
321
- >Lorem ipsum dolor sit amet, consectetur adipiscing elit.
322
- Donec at erat eu massa sodales auctor.</span
323
- >
324
- <span class="icon">
325
- <i class="fas fa-paper-plane"></i>
326
- </span>
327
- </li>
328
- <li class="has-icon is-right">
329
- <span>Item Three</span>
330
- <span class="icon">
331
- <i class="fas fa-plane"></i>
332
- </span>
333
- </li>
334
- </ul>
335
- </div>
336
- <div class="column is-4">
337
- <p class="title is-5">Combining styles</p>
338
- <ul class="block-list has-radius is-light">
339
- <li class="has-icon">
340
- <span class="icon">
341
- <i class="fas fa-plane"></i>
342
- </span>
343
- <span>Item one</span>
344
- </li>
345
- <li class="has-icon is-highlighted is-primary">
346
- <span class="icon">
347
- <i class="fas fa-paper-plane"></i>
348
- </span>
349
- <span
350
- >Lorem ipsum dolor sit amet, consectetur adipiscing elit.
351
- Donec at erat eu massa sodales auctor.</span
352
- >
353
- </li>
354
- <li>
355
- <span class="icon">
356
- <i class="fas fa-plane"></i>
357
- </span>
358
- <span>Item Three</span>
359
- </li>
360
- </ul>
361
- </div>
362
-
363
- <div class="column is-12">
364
- <p class="title is-4" id="list-item-overrides">
365
- List Item Overrides
366
- </p>
367
- <p>In v0.3 you can override the classes on a list item</p>
368
- </div>
369
- <div class="column is-4">
370
- <p class="title is-5">li.is-large</p>
371
- <ul class="block-list is-light">
372
- <li>Item one</li>
373
- <li class="is-large">Item two</li>
374
- <li>Item three</li>
375
- </ul>
376
- </div>
377
- <div class="column is-4">
378
- <p class="title is-5">li.is-primary</p>
379
- <ul class="block-list">
380
- <li>Item one</li>
381
- <li class="is-primary">Item two</li>
382
- <li>Item three</li>
383
- </ul>
384
- </div>
385
- <div class="column is-4">
386
- <p class="title is-5">li.is-primary.is-outlined</p>
387
- <ul class="block-list is-light">
388
- <li>Item one</li>
389
- <li class="is-primary is-outlined">Item two</li>
390
- <li>Item three</li>
391
- </ul>
392
- </div>
393
-
394
- <div class="column is-12">
395
- <p class="title is-4" id="combinations">Combinations</p>
396
- </div>
397
- <div class="column is-4">
398
- <p class="title is-5">
399
- is-small is-outlined is-success is-centered
400
- </p>
401
- <ul class="block-list is-small is-outlined is-success is-centered">
402
- <li>Item one</li>
403
- <li>Item two</li>
404
- <li>Item three</li>
405
- </ul>
406
- </div>
407
- <div class="column is-4">
408
- <p class="title is-5">is-large is-warning is-right has-radius</p>
409
- <ul class="block-list is-large is-warning is-right has-radius">
410
- <li>Item one</li>
411
- <li>Item two</li>
412
- <li>Item three</li>
413
- </ul>
414
- </div>
415
- <div class="column is-4">
416
- <p class="title is-5">ul.is-danger.is-centered</p>
417
- <p class="subtitle">li.is-highlighted.is-large</p>
418
- <ul class="block-list is-centered is-danger">
419
- <li>Item one</li>
420
- <li class="is-danger is-highlighted is-large">Item two</li>
421
- <li>Item three</li>
422
- </ul>
423
- </div>
424
- </div>
425
- </section>
426
- </div>
427
- </body>
428
- </html>
@@ -1,27 +0,0 @@
1
- {
2
- "name": "bulma-block-list",
3
- "version": "1.0.0",
4
- "description": "A simple scss package extending Bulma with block style list elements",
5
- "homepage": "https://github.com/chrisrhymes/bulma-block-list#readme",
6
- "bugs": {
7
- "url": "https://github.com/chrisrhymes/bulma-block-list/issues"
8
- },
9
- "main": "src/block-list.scss",
10
- "scripts": {
11
- "dev": "sass --load-path=node_modules src/docs.scss docs/docs.css"
12
- },
13
- "keywords": [
14
- "Bulma",
15
- "List",
16
- "BlockList",
17
- "Unordered List"
18
- ],
19
- "author": "chrisrhymes",
20
- "license": "MIT",
21
- "dependencies": {
22
- "bulma": "^1.0.0"
23
- },
24
- "devDependencies": {
25
- "sass": "^1.75.0"
26
- }
27
- }
@@ -1,5 +0,0 @@
1
- @charset "utf-8";
2
-
3
- @use "bulma/sass";
4
-
5
- @import "block-list";