React-bulma-components

React components for Bulma (v0.7.1) framework

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 react-bulma-components or yarn add -E react-bulma-components

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/react-bulma-components.min.css)
import { Columns } from 'react-bulma-components';

// You can also include the js that also bundles the css (do not work with server-side rendering)
import { Columns } from 'react-bulma-components/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 react-bulma-components/src/index.sass and configure webpack to handle sass files
import Columns from 'react-bulma-components/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://couds.github.io/react-bulma-components

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:

• Box (Storybook) (Docs)
• Breadcrumb (Storybook) (Docs)
• Button (Storybook) (Docs)
• Card (Storybook) (Docs)
• Column (Storybook) (Docs)
• Container (Storybook) (Docs)
• Content (Storybook) (Docs)
• Dropdown (Storybook) (Docs)
• Footer (Storybook) (Docs)
• Form (Storybook) (Docs)
• Heading (Title, Subtitle and heading on Bulma) (Storybook) (Docs)
• Hero (Storybook) (Docs)
• Icon (Storybook) (Docs)
• Image (Storybook) (Docs)
• Level (Storybook) (Docs)
• Loader (Storybook)
• Media (Storybook) (Docs)
• Message (Storybook) (Docs)
• Menu (Storybook) (Docs)
• Modal (Storybook) (Docs)
• Navbar (Storybook) (Docs)
• Notification (Storybook) (Docs)
• Pagination (Storybook) (Docs)
• Panel (Storybook) (Docs)
• Progress (Storybook) (Docs)
• Section (Storybook) (Docs)
• Tabs (Storybook) (Docs)
• Table (Storybook) (Docs)
• Tag (Storybook) (Docs)
• Tile (Storybook) (Docs)

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 CRA without eject

Sometimes, you don't want to eject your CRA (Create React App) application. But how to make custom style variables for Bulma? There is a simple and right way to solve it!

First of all, install package node-sass-chokidar (docs):

$ npm install --save node-sass-chokidar

Or, if you use yarn:

$ yarn add -E node-sass-chokidar

For example, we're using dir structure, like this:

├── ...
├── public
│   └── ...
└── src
    ├── scss
    │   ├── _variables.scss     <-- Override Bulma variables here
    │   └── style.scss          <-- Entry styles (main)
    ├── ...
    └── style.css               <-- Output CSS file

Next, import ./src/style.css into your main React app file (if not) ./src/index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

import './style.css'; // <-- This our output CSS file

ReactDOM.render(
  <App/>,
  document.getElementById('root')
);

Don't forget to import _variables.scss into head of style.scss.

And now, just add to scripts section in your ./package.json two commands:

{
  "scripts": {
    // ...
    "build-css": "node-sass-chokidar --include-path ./src/scss --include-path ./node_modules src/scss/ -o src/",
    "watch-css": "npm run build-css && node-sass-chokidar --include-path ./src/scss --include-path ./node_modules src/scss/ -o src/ --watch --recursive"
  }
}

Open console (in your CRA dir), type npm run watch-css or yarn run watch-css and hit enter. Now, node-sass-chokidar will automatically update ./src/style.css, when you make any changes in ./src/scss/style.scss file for you!

This page is open source. Noticed a typo? Or something unclear? Improve this page on GitHub