bulma-block-list
Version:
A simple scss package extending Bulma with block style list elements
434 lines (424 loc) • 15.3 kB
HTML
<html>
<head>
<title>Bulma Block List</title>
<meta
name="description"
content="Documentation and examples for Bulma Block List, a Bulma extension"
/>
<link rel="stylesheet" href="docs.css" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5/css/all.min.css"
/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div classs="container">
<section class="hero is-primary is-medium">
<div class="hero-body">
<h1 class="title">Bulma Block List</h1>
<p class="subtitle">A Bulma extension</p>
</div>
</section>
<section class="section">
<div class="columns is-multiline" markdown="0">
<div class="column is-12 has-text-right">
<a
href="https://github.com/chrisrhymes/bulma-block-list/stargazers"
>
<img
src="https://img.shields.io/github/stars/chrisrhymes/bulma-block-list?style=social"
alt="GitHub Stars"
/>
</a>
<a
href="https://github.com/chrisrhymes/bulma-block-list/network/members"
>
<img
alt="GitHub forks"
src="https://img.shields.io/github/forks/chrisrhymes/bulma-block-list?label=fork&style=social"
/>
</a>
<img
alt="npm"
src="https://img.shields.io/npm/dw/bulma-block-list"
/>
</div>
<div class="column is-12">
<div class="content">
<h2>Upgrading to v1</h2>
<p>
To be compatible with Bulma, version 1 of Bulma Block List
requires
<a
href="https://bulma.io/documentation/start/migrating-to-v1/#what-changes"
>dart sass</a
>.
</p>
</div>
</div>
<div class="column is-12">
<div class="content">
<h2 id="installation">Installation</h2>
<ul>
<li><code>npm i -S bulma-block-list</code></li>
<li>
<code
>@import
"node_modules/bulma-block-list/src/block-list";</code
>
after importing Bulma.
</li>
</ul>
</div>
</div>
<div class="column is-12">
<div class="content">
<h2 id="how-to-use">How to use</h2>
<p>
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.
</p>
</div>
<div class="highlight highlight-text-html-basic">
<pre>
<<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>>
<<span class="pl-ent">li</span>>Item one</<span class="pl-ent">li</span>>
<<span class="pl-ent">li</span>>Item two</<span class="pl-ent">li</span>>
<<span class="pl-ent">li</span>>Item three</<span class="pl-ent">li</span>>
</<span class="pl-ent">ul</span>></pre>
</div>
</div>
<div class="column is-12">
<p class="title is-4" id="alignment">Alignment</p>
</div>
<div class="column is-4">
<p class="title is-5">is-left (default)</p>
<ul class="block-list is-left is-light">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>
</div>
<div class="column is-4">
<p class="title is-5">is-centered</p>
<ul class="block-list is-centered is-light">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>
</div>
<div class="column is-4">
<p class="title is-5">is-right</p>
<ul class="block-list is-right is-light">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>
</div>
<div class="column is-12">
<p class="title is-4" id="sizes">Sizes</p>
</div>
<div class="column is-4">
<p class="title is-5">is-small</p>
<ul class="block-list is-small is-light">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>
</div>
<div class="column is-4">
<p class="title is-5">is-normal</p>
<ul class="block-list is-normal is-light">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>
</div>
<div class="column is-4">
<p class="title is-5">is-large</p>
<ul class="block-list is-large is-light">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>
</div>
<div class="column is-12">
<p class="title is-4" id="colours">Colours</p>
</div>
<div class="column is-4">
<p class="title is-5">is-primary</p>
<ul class="block-list is-primary">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>
</div>
<div class="column is-4">
<p class="title is-5">is-info</p>
<ul class="block-list is-info">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>
</div>
<div class="column is-4">
<p class="title is-5">is-dark</p>
<ul class="block-list is-dark">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>
</div>
<div class="column is-12">
<p class="title is-4" id="outlined">Outlined</p>
</div>
<div class="column is-4">
<p class="title is-5">is-outlined</p>
<ul class="block-list is-outlined">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>
</div>
<div class="column is-4">
<p class="title is-5">is-outlined is-primary</p>
<ul class="block-list is-outlined is-primary">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>
</div>
<div class="column is-4">
<p class="title is-5">is-outlined is-danger</p>
<ul class="block-list is-outlined is-danger">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>
</div>
<div class="column is-12">
<p class="title is-4" id="has-radius">Has Radius</p>
</div>
<div class="column is-4">
<p class="title is-5">has-radius is-primary</p>
<ul class="block-list has-radius is-primary">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>
</div>
<div class="column is-4">
<p class="title is-5">has-radius is-info</p>
<ul class="block-list has-radius is-info">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>
</div>
<div class="column is-4">
<p class="title is-5">has-radius is-dark</p>
<ul class="block-list has-radius is-dark">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>
</div>
<div class="column is-12">
<p class="title is-4" id="highlighted">Is Highlighted</p>
<p>
In v0.4 you can highlight the all list items or individual list
items
</p>
</div>
<div class="column is-4">
<p class="title is-5">li.is-highlighted</p>
<ul class="block-list">
<li>Item one</li>
<li class="is-highlighted">Item two</li>
<li>Item three</li>
</ul>
</div>
<div class="column is-4">
<p class="title is-5">is-highlighted is-info</p>
<ul class="block-list is-highlighted is-info">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>
</div>
<div class="column is-4">
<p class="title is-5">is-highlighted is-danger has-radius</p>
<ul class="block-list is-highlighted is-danger has-radius">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>
</div>
<div class="column is-12">
<p class="title is-4" id="has-icon">Has Icon</p>
<p>In v0.5 you can add icons</p>
<div class="highlight highlight-text-html-basic">
<pre>
<li class="has-icon">
<span class="icon">
<i class="fas fa-plane"></i>
</span>
<span>Item one</span>
</li>
// .is-right
<li class="has-icon is-right">
<span>Item one</span>
<span class="icon">
<i class="fas fa-plane"></i>
</span>
</li></pre
>
</div>
</div>
<div class="column is-4">
<p class="title is-5">li.has-icon</p>
<ul class="block-list is-light">
<li class="has-icon">
<span class="icon">
<i class="fas fa-plane"></i>
</span>
<span>Item one</span>
</li>
<li class="has-icon">
<span class="icon">
<i class="fas fa-paper-plane"></i>
</span>
<span
>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec at erat eu massa sodales auctor.</span
>
</li>
<li>
<span class="icon">
<i class="fas fa-plane"></i>
</span>
<span>Item Three</span>
</li>
</ul>
</div>
<div class="column is-4">
<p class="title is-5">li.has-icon.is-right</p>
<ul class="block-list is-light">
<li class="has-icon is-right">
<span>Item one</span>
<span class="icon">
<i class="fas fa-plane"></i>
</span>
</li>
<li class="has-icon is-right">
<span
>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec at erat eu massa sodales auctor.</span
>
<span class="icon">
<i class="fas fa-paper-plane"></i>
</span>
</li>
<li class="has-icon is-right">
<span>Item Three</span>
<span class="icon">
<i class="fas fa-plane"></i>
</span>
</li>
</ul>
</div>
<div class="column is-4">
<p class="title is-5">Combining styles</p>
<ul class="block-list has-radius is-light">
<li class="has-icon">
<span class="icon">
<i class="fas fa-plane"></i>
</span>
<span>Item one</span>
</li>
<li class="has-icon is-highlighted is-primary">
<span class="icon">
<i class="fas fa-paper-plane"></i>
</span>
<span
>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec at erat eu massa sodales auctor.</span
>
</li>
<li>
<span class="icon">
<i class="fas fa-plane"></i>
</span>
<span>Item Three</span>
</li>
</ul>
</div>
<div class="column is-12">
<p class="title is-4" id="list-item-overrides">
List Item Overrides
</p>
<p>In v0.3 you can override the classes on a list item</p>
</div>
<div class="column is-4">
<p class="title is-5">li.is-large</p>
<ul class="block-list is-light">
<li>Item one</li>
<li class="is-large">Item two</li>
<li>Item three</li>
</ul>
</div>
<div class="column is-4">
<p class="title is-5">li.is-primary</p>
<ul class="block-list">
<li>Item one</li>
<li class="is-primary">Item two</li>
<li>Item three</li>
</ul>
</div>
<div class="column is-4">
<p class="title is-5">li.is-primary.is-outlined</p>
<ul class="block-list is-light">
<li>Item one</li>
<li class="is-primary is-outlined">Item two</li>
<li>Item three</li>
</ul>
</div>
<div class="column is-12">
<p class="title is-4" id="combinations">Combinations</p>
</div>
<div class="column is-4">
<p class="title is-5">
is-small is-outlined is-success is-centered
</p>
<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>
</div>
<div class="column is-4">
<p class="title is-5">is-large is-warning is-right has-radius</p>
<ul class="block-list is-large is-warning is-right has-radius">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>
</div>
<div class="column is-4">
<p class="title is-5">ul.is-danger.is-centered</p>
<p class="subtitle">li.is-highlighted.is-large</p>
<ul class="block-list is-centered is-danger">
<li>Item one</li>
<li class="is-danger is-highlighted is-large">Item two</li>
<li>Item three</li>
</ul>
</div>
</div>
</section>
</div>
</body>
</html>