The Comprehensive Bulma UI Framework for React

January 17, 2019 0 Comments

The Comprehensive Bulma UI Framework for React

 

 

The Comprehensive Bulma UI Framework for React

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

To Install

npm install rbx or yarn add rbx

To Use

import "rbx/index.css";
import React from "react";
import { Columns } from "rbx"; 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>
);

To customize Bulma (including colors), follow the instructions below.

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

Customize Bulma

To override the variables set by Bulma, install Bulma (npm install [email protected]), and follow the Bulma instructions.

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

A minimal example of App.sass might look like:

$primary: #61dafb @import "~rbx/dist/index.sass"

Or, for further customization;

$primary: #61dafb @import "~bulma/bulma.sass" // alternatively, select which parts to include.
@import "~rbx/dist/rbx.sass"

Then, import this file somewhere in 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";

GitHub



Tag cloud