Almost all bulma components are implemented, yet not documented here.
GitHub repo here: github.com/fibo/trunx.
HTML code requirements
Trunx is son of awesome Bulma which to work correctly needs a responsive webpage.
Use the HTML5 doctype
<!DOCTYPE html>
Add the responsive viewport meta tag
<meta name="viewport" content="width=device-width, initial-scale=1">
How it works
Trunx React components wrap Bulma CSS classes. For example, import Button
component.
import { Button } from "trunx";
This button
is created by this JSX code
<Button
color="primary"
size="large"
>Push me</Button>
which is equivalent to
<button
className="is-primary is-large"
>Push me</button>
You can also use bulma
helper if some feature or HTML tag is not implemented by Trunx.
import { bulma } from "trunx";
You are <strong className={bulma("has-text-success")}>successful</strong>!
You are successful!
Customization
Use Sass to customize your Bulma build to create your own theme.
npm install sass --save-dev
Create, for example, a _colors.scss file like the following
$azure: hsl(180, 100%, 97%);
$limegreen: hsl(120, 60%, 50%);
$orangered: hsl(16, 100%, 50%);
$skyblue: hsl(197, 71%, 73%);
$steelblue: hsl(207, 44%, 49%);
$body-background-color: $azure;
$primary: $skyblue;
$info: $steelblue;
$success: $limegreen;
$warning: hsl(48, 89%, 60%);
$danger: $orangered;
In your entry Sass file import customizations first and then Bulma.
/* Import custom variables first. */
@import "colors";
/* Import all bulma modules. */
@import "bulma/bulma";