Getting started with Trunx

Trunx is an open source collection of React components built on top of Bulma

GitHub repo here: github.com/fibo/trunx.

Almost all bulma components are implemented, yet not documented here.

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!

Many Trunx components accept a className prop which will be appended to Bulma classes in order to customize the component style.

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";