Some Message Content
- First
- Second
🌸 Hibiki HTML + Bulma Components
Hibiki HTML wrappers for the excellent Bulma UI Library!
This page is 100% written in Hibiki HTML using Bulma components (and some additional Hibiki components to render markdown and highlight/format HTML). It is served as static HTML (no backend server), and the source is available at Github.
You should know the Bulma UI basics. Because Hibiki HTML is HTML you can continue to use any regular bulma structures like columns, color helpers, and layout without any modification. So why use these wrappers?
Create a standard Hibiki App, and then import the Hibiki HTML Bulma library:
<script src="https://cdn.hibikihtml.com/hibiki/v0.3.4/hibiki-prod.min.js"></script>
<template hibiki>
<import-library lib="hibiki/bulma@v0.1.0" prefix="b"></import-library>
...
</template>
Hibiki HTML components are customized by setting attributes, adding handlers, or adding children tags. All of these components use Hibiki HTML's automerge functionality to allow you to further customize the internal structure of the component.
Automerge -- consider the <b‑button> control. At its simpliest it just
outputs a single div: <div class="button">...</div>
. If you
set a class
or style
on the <b‑button>
component it will add merge those classes and styles to that base button div.
<b-button class="is-primary">Test</b-button>
<b-button style="font-style: italic;">Test</b-button>
<button class="button is-primary">Test</button>
<button class="button" style="font-style: italic;">Test</button>
Automerge copies regular attributes as well. To set a 'placeholder', 'maxlength' or override <input>'s type, you can set attributes on the <b-input> tag and they will be set on the raw <input> tag.
<b-input control type="password" placeholder="Name"></b-input>
<div class="control">
<input class="input" type="password" placeholder="Name">
</div>
Automerge Namespaces --
But what about a more complex case where we have a button wrapped in a "control" div
wrapped in a "field" div, with an icon? These components all have
automerge namespaces set up so field:class
will target
the "field" div, and icon:style
will target the icon span.
The automerge namespaces are documented with the controls.
<b-button field field:class="is-narrow"
icon="fa fa-home" icon:style="color: green">
Test
</b-button>
<div class="field is-narrow">
<div class="control">
<button class="button">
<span class="icon" automerge="icon">
<i class="fa fa-home" style="color: green"></i>
</span>
Test
</button>
</div>
</div>
<b-card title="Card Layout" header:class="has-background-info-light">
<p>Some Card Text</p>
</b-card>
<div title="Card Layout" class="card">
<div class="card-header has-background-info-light">
<p class="card-header-title">Card Layout</p>
</div>
<div class="card-content">
<p>Some Card Text</p>
</div>
</div>
For the most part, these input controls mimic the functionality of the base input controls (automerge targets the base <input>). See the basic input 1-way and 2-way data binding here in the Input Controls Hibiki Reference Docs.
To add input specific attributes you just add them to the "b-" control. e.g. if you add 'placeholder' or 'maxlength' to the <b-input> control it will set the raw <input>'s placeholder attribute because of automerge. Remember to close all of these tags. HTML allows raw <input> tags to not close, but <b-input> is a custom tag and must be closed.
Some Card Text
Some Card Text
Some Message Content
Some Message Content
Some card content
Footer linkSome Content for the Modal
CloseHere are some complex form examples mostly replicated from the Bulma Form Examples. There is also a new tag <b-hfield> that wraps some of the boilerplate of creating Bulma horitzonal fields (see 3rd example below).
Here are some complex form examples mostly replicated from the Bulma Form Examples. There is also a new tag <b-hfield> that wraps some of the boilerplate of creating Bulma horitzonal fields (see 3rd example below).