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 or yarn add rbx

To Use

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

import React from "react";
/**
 * You can import directly from rbx
 * (you will need to include the css file dist/rbx.min.css)
 */
import { Columns } from "rbx";

/**
 * You can also include the js that also bundles the css
 * (does not work with server-side rendering)
 */
import { Columns } from "rbx/lib/columns";

/**
 * [RECOMENDED] Or import only the components you will use
 * (this will reduce your total bundle size)
 * If you use this approach and want to use the global Bulma styles,
 * import rbx/src/index.sass and configure webpack to handle sass files
 */
import Columns from "rbx/lib/components/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

Overriding Bulma variables

General

To override the variables set by Bulma you will need to create a sass file like this one (_variable.sass):

@import "~bulma/sass/utilities/initial-variables"

// ADD HERE variables you want to override
$primary: #f4f4f4

@import "~bulma/sass/utilities/_all"

It may be necessary, depending on your project setup, to create this file, even if you do not intend on overriding default styles.

After that you will need to add an alias pointing to the file to your webpack configuration

resolve {
  // Other resolve props
  alias: {
    // Other aliases
    '_variables.sass': path.resolve(__dirname, 'relative/path/from/webpack/config/to/your/_variables.sass'),
  },
}

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 with the following code:

// Any Bulma variables I want to override go here...
$family-sans-serif: 'Overpass', sans-serif

@import '~rbx/src/index.module.sass'

Finally, import this stylesheet somewhere in your CRA app.

import "./App.sass";

Gatsby.js v1

Add a modifyWebpackConfig export to your gatsby-node.js file:

exports.modifyWebpackConfig = ({config, env}) => {
  config.merge({
    resolve: {
      alias: {
        '_variables.sass': path.resolve(__dirname, 'relative/path/from/webpack/config/to/your/_variables.sass')
      }
    }
  })
  return config
}

Gatsby.js v2

Add a onCreateWebpackConfig export to your gatsby-node.js file:

const path = require('path')

exports.onCreateWebpackConfig = ({
  stage,
  getConfig,
  rules,
  loaders,
  actions,
}) => {
  actions.setWebpackConfig({
    resolve: {
      alias: {
        '_variables.sass': path.resolve(__dirname, 'relative/path/from/webpack/config/to/your/_variables.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.