Installation
--
-
npm i -S bulma-block-list
- @import "node_modules/bulma-block-list/src/block-list";
after importing Bulma.
-
Bulma Block List
+A Bulma extension
How to use
-Create a ul and give it the class 'block-list' then use the modifyers to style as needed. Only some of the colours are displayed below but the scss loops through the entire Bulma $colors map.
-
+
+
+
+
+
+
+ Upgrading to v1
+
+ To be compatible with Bulma, version 1 of Bulma Block List
+ requires
+ dart sass.
+
+
+
+
+
+ Installation
+
+ npm i -S bulma-block-list
+ -
+
@import
+ "node_modules/bulma-block-list/src/block-list";
+ after importing Bulma.
+
+
+
+
+
+
+ How to use
+
+ Create a ul and give it the class 'block-list' then use the
+ modifyers to style as needed. Only some of the colours are
+ displayed below but the scss loops through the entire Bulma
+ $colors map.
+
+
+
+
<ul class="block-list is-small is-outlined is-success is-centered">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>
-
-
-
- Alignment
-
-
- is-left (default)
-
- - Item one
- - Item two
- - Item three
-
-
-
- is-centered
-
- - Item one
- - Item two
- - Item three
-
-
-
- is-right
-
- - Item one
- - Item two
- - Item three
-
-
+
+
Alignment
+is-left (default)
+-
+
- Item one +
- Item two +
- Item three +
is-centered
+-
+
- Item one +
- Item two +
- Item three +
is-right
+-
+
- Item one +
- Item two +
- Item three +
Sizes
-is-small
--
-
- Item one -
- Item two -
- Item three -
is-normal
--
-
- Item one -
- Item two -
- Item three -
is-large
--
-
- Item one -
- Item two -
- Item three -
Sizes
+is-small
+-
+
- Item one +
- Item two +
- Item three +
is-normal
+-
+
- Item one +
- Item two +
- Item three +
is-large
+-
+
- Item one +
- Item two +
- Item three +
Colours
-is-primary
--
-
- Item one -
- Item two -
- Item three -
is-info
--
-
- Item one -
- Item two -
- Item three -
is-dark
--
-
- Item one -
- Item two -
- Item three -
Colours
+is-primary
+-
+
- Item one +
- Item two +
- Item three +
is-info
+-
+
- Item one +
- Item two +
- Item three +
is-dark
+-
+
- Item one +
- Item two +
- Item three +
Outlined
-is-outlined
--
-
- Item one -
- Item two -
- Item three -
is-outlined is-primary
--
-
- Item one -
- Item two -
- Item three -
is-outlined is-dark
--
-
- Item one -
- Item two -
- Item three -
Outlined
+is-outlined
+-
+
- Item one +
- Item two +
- Item three +
is-outlined is-primary
+-
+
- Item one +
- Item two +
- Item three +
is-outlined is-danger
+-
+
- Item one +
- Item two +
- Item three +
Has Radius
-has-radius is-primary
--
-
- Item one -
- Item two -
- Item three -
has-radius is-info
--
-
- Item one -
- Item two -
- Item three -
has-radius is-dark
--
-
- Item one -
- Item two -
- Item three -
Has Radius
+has-radius is-primary
+-
+
- Item one +
- Item two +
- Item three +
has-radius is-info
+-
+
- Item one +
- Item two +
- Item three +
has-radius is-dark
+-
+
- Item one +
- Item two +
- Item three +
Is Highlighted
-In v0.4 you can highlight the all list items or individual list items
-li.is-highlighted
--
-
- Item one -
- Item two -
- Item three -
is-highlighted is-info
--
-
- Item one -
- Item two -
- Item three -
is-highlighted is-danger has-radius
--
-
- Item one -
- Item two -
- Item three -
Is Highlighted
++ In v0.4 you can highlight the all list items or individual list + items +
+li.is-highlighted
+-
+
- Item one +
- Item two +
- Item three +
is-highlighted is-info
+-
+
- Item one +
- Item two +
- Item three +
is-highlighted is-danger has-radius
+-
+
- Item one +
- Item two +
- Item three +
Has Icon
-In v0.5 you can add icons
-
+
+ Has Icon
+ In v0.5 you can add icons
+
+
<li class="has-icon">
<span class="icon">
<i class="fas fa-plane"></i>
@@ -226,134 +277,152 @@ How to use
<span class="icon">
<i class="fas fa-plane"></i>
</span>
-</li>
-
-
-
- li.has-icon
-
-
+
li.has-icon
+-
+
- + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Donec at erat eu massa sodales auctor. + +
- - + Item Three - -
li.has-icon.is-right
--
-
li.has-icon.is-right
+-
+
Combining styles
--
-
Combining styles
+-
+
- + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Donec at erat eu massa sodales auctor. + +
- - + Item Three - -
List Item Overrides
-In v0.3 you can override the classes on a list item
-li.is-large
--
-
- Item one -
- Item two -
- Item three -
li.is-primary
--
-
- Item one -
- Item two -
- Item three -
li.is-primary.is-outlined
--
-
- Item one -
- Item two -
- Item three -
+ List Item Overrides +
+In v0.3 you can override the classes on a list item
+li.is-large
+-
+
- Item one +
- Item two +
- Item three +
li.is-primary
+-
+
- Item one +
- Item two +
- Item three +
li.is-primary.is-outlined
+-
+
- Item one +
- Item two +
- Item three +
Combinations
-is-small is-outlined is-success is-centered
--
-
- Item one -
- Item two -
- Item three -
is-large is-warning is-right has-radius
--
-
- Item one -
- Item two -
- Item three -
ul.is-danger.is-centered
-li.is-highlighted.is-large
--
-
- Item one -
- Item two -
- Item three -
Combinations
++ is-small is-outlined is-success is-centered +
+-
+
- Item one +
- Item two +
- Item three +
is-large is-warning is-right has-radius
+-
+
- Item one +
- Item two +
- Item three +
ul.is-danger.is-centered
+li.is-highlighted.is-large
+-
+
- Item one +
- Item two +
- Item three +