README.md

👟 rbx :: UI Components for React, Based on Bulma

React components based on the Bulma framework. This is a hard fork of react-bulma-components rewritten in its entirety in TypeScript.

This is an implementation of the Bulma Framework Component in React by Jeremy Thomas.

You can find the Storybook stories of all components here

BREAKING CHANGES:

• Dropped support for react < 16.2
• Navbar Menu its now a controlled component. there is a prop to show/hide the mobile menu

To Install

npm install rbx or yarn add -E rbx

To Use

Follow the instructions for creating a _variables.sass for your project, then:

import React from "react";
// You can import from the global component (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 (do not work with server-side rendering)
import { Columns } from "rbx/full";

// [RECOMENDED] Or import only the components you will use (this will reduce the 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 default () => (
  <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>
);

Documentation

You can find the documentation in https://dfee.github.io/rbx

Each component imports their own sass file. Thus, you can reduce your css total file size by only including the styles that you will use. To enable this, please configure your Webpack to handle sass files. You can use the webpack.config.js on the root folder of this repository.

Some components may vary the api/naming convention with the Bulma Docs. Please refer to each stories in the Storybook to see how each component could be used (you can find the source code of the story by using the button "Show info" on the top-right corner of the page).

The following components were ported:

Columns

Item	Storybook	Bulma Documentation
Column	Stories	Documentation

Layout

Item	Storybook	Bulma Documentation
Container	Stories	Documentation
Level	Stories	Documentation
Media	Stories	Documentation
Hero	Stories	Documentation
Section	Stories	Documentation
Footer	Stories	Documentation
Tile	Stories	Documentation

Form

Item	Storybook	Bulma Documentation
Form	Stories	Documentation

Elements

Item	Storybook	Bulma Documentation
Box	Stories	Documentation
Button	Stories	Documentation
Content	Stories	Documentation
Delete	Stories	Documentation
Icon	Stories	Documentation
Image	Stories	Documentation
Notification	Stories	Documentation
Progress	Stories	Documentation
Table	Stories	Documentation
Tag	Stories	Documentation
Title	Stories	Documentation

Components

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

Extras

Item	Storybook	Bulma Documentation
Generic	Stories	N/A
Loader	Stories	N/A

Override Bulma variables

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.sass'

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

@import '~bulma/sass/utilities/_all.sass'

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'),
  },
}

For Gatsby.js v1 you can 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
}

For Gatsby.js v2 you can 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'),
      },
    },
  })
}

Override Bulma variables in Create React App

Create React App 2 now supports automatic SASS compilation, meaning that all you need to do to get Bulma working is follow the instructions provided by the CRA team and 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'

Of course, as per the CRA team's instructions, make sure to import this stylesheet somewhere in your CRA app:

import "./App.sass";