Bulma-extensions

Set of missing Bulma.io functionalities in form of extensions.


Getting started #


There are several ways to get started with Bulma-extensions. You can either:

  1. use npm to install the global Bulma-extensions package (it includes all the extensions)
  2. use npm to install Bulma-extension individually
  3. use the GitHub repository to get the latest development version
You can find npm package informations related to a specific extension by clicking on the npm tag in the top right of each documentation page.

1

Use NPM to install all extensions:

This package gather all extensions in one package.

npm install bulma-extensions

2

Use NPM to install extension individually:

Using this method you can install only wanted extensions.

This is an example to integrate the checkradio extension.
npm install bulma-checkradio

3

Use GitHub repository:

To integrate all extensions use following command.
git clone git://github.com/Wikiki/bulma-extensions.git
To integrate the checkradio extension use following command.
git clone git://github.com/Wikiki/bulma-checkradio.git

Integration #


Once installed the integration process depends on the way you installed the package and your project configuration.
You will find below some example based on most commons projects configurations

Whatever the way you installed the extension you'll have to clone Bulma package in order to be able to use them.

1

From NPM

This is an example to integrate the checkradio extension.

Open you application's main sass file and add the following line:

@import 'bulma';
@import '~bulma-checkradio';

Now, you can just build the bulma project with npm run build, and the output will be available in the css folder.

2

From GitHub repository

  • Clone the bulma repo following Bulma's documentation
  • Under the sass folder, create a new folder called extensions
  • In this new folder, create a new file bulma-checkradio.sass
  • Copy the code from the bulma-checkradio's' repository bulma-checkradio.sass file into your new file
  • In the same folder create a new file _all.sass (this is not required, but will help when you add more extensions)
  • In this file add this code:
    @charset "utf-8"
    @import 'bulma.sass';
    @import 'bulma-checkradio.sass'
  • Open your main application's sass file and add the following line:

    @import "sass/extensions/_all"

Development #

Each extension now integrates Gulp and Rollup to automate build tasks and JavaScript code transpilation.

Compile SASS to CSS

gulp build:styles

Compile and Transpile JavaScript

You can use option --jsFormat to choose the output format (iife by default), --babelTarger to choose which browser to target (latest 2 versions by default)

gulp build:scripts --jsFormat umd --babelTarget "latest 2 versions"

Build the whole project

gulp build

or the following shorcut

gulp

Need an extension ? #

You are looking for a specific extension but you did not find it yet ?

Don't hesitate to send me a request by opening and issue on my GitHub repository.