README.md

👟 rbx – The Comprehensive Bulma UI Framework for React

rbx is a comprehensive library of React components for Bulma 0.7.2.

🔥 All components have exhaustive storybook examples.

🙃 I'll wait, go check them out!

To Install

npm install rbx [email protected] or yarn add rbx [email protected]

To Use

Follow the instructions below for adding sass support to your webpack configuration, and then:

import React from "react";
import { Columns } from "rbx";
/**
 * Alternatively, you can import only the components you need
 */
import { Columns } from "rbx/grid/columns";

export const MyPage = () => (
  <Columns>
    <Columns.Column>First Column</Columns.Column>
    <Columns.Column>Second Column</Columns.Column>
    <Columns.Column>Third Column</Columns.Column>
    <Columns.Column>Fourth Column</Columns.Column>
  </Columns>
);

Library

All components support ref-forwarding, and are able to render as any other React Component Type you want to provide, by using the special prop as. For example, to render a Button component as a react-router Link:

import { Button } from "rbx";
import { Link } from "react-router-dom";

export const goHomeLink = (
  <Button as={Link} to="/home" color="primary" text>
    Go home
  </Button>
);

For styling, each component imports its own sass file. Thus, you can reduce your css total file size by only including the styles that you will use. To enable this, configure your Webpack to handle sass files.

While some components may slightly differ from the Bulma API, these changes are usually minimal.

Base

Item	Storybook	Bulma Documentation
Generic	Stories	N/A

Components

Item	Storybook	Bulma Documentation
Breadcrumb	Stories	Documentation
Card	Stories	Documentation
Dropdown	Stories	Documentation
Level	Stories	Documentation
List	Stories	Documentation
Media	Stories	Documentation
Menu	Stories	Documentation
Message	Stories	Documentation
Modal	Stories	Documentation
Navbar	Stories	Documentation
Pagination	Stories	Documentation
Panel	Stories	Documentation
Tabs	Stories	Documentation

Elements

Item	Storybook	Bulma Documentation
Box	Stories	Documentation
Button	Stories	Documentation
Container	Stories	Documentation
Content	Stories	Documentation
Form	Stories	Documentation
Icon	Stories	Documentation
Image	Stories	Documentation
Notification	Stories	Documentation
Other	Stories	N/A
Progress	Stories	Documentation
Table	Stories	Documentation
Tag	Stories	Documentation
Title	Stories	Documentation

Grid

Item	Storybook	Bulma Documentation
Columns	Stories	Documentation
Tiles	Stories	Documentation

Layout

Item	Storybook	Bulma Documentation
Footer	Stories	Documentation
Hero	Stories	Documentation
Section	Stories	Documentation

Styling

SASS Support

To override the variables set by Bulma, follow the Bulma instructions.

You will also need to import rbx/index.sass as it contains any pertinent bug fixes for Bulma.

A minimal example of style.sass might look like:

$primary: #61dafb

@import "~bulma/bulma.sass"
@import "../src/index.sass"

Then, import this file into the root of your project.

Create React App

Create React App 2 supports SASS compilation out of the box.

To get started, please follow the official instructions to enable this feature.

Then, create a SASS file in your project (as described above):

Finally, import this stylesheet somewhere in your CRA app.

import "./App.sass";

Etc.

This library was hard-forked from react-bulma-components and has been rewritten in its entirety from scratch.

If you're coming from that library, expect some breaking changes - largely due to stylistic interpretations of the Bulma API and a propensity to keep the React component names semantic. In addition, there were many additions and bug fixes required to bring this library into compliance with the latest release of Bulma.