Bulma-Extensions

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

Use npm to install the global Bulma-extensions package (which includes all the extensions)
Use npm to install Bulma-extension individually
Use the GitHub repository to get the latest development version

Each extension contains a dist folder which includes all available files for integration into your project (example for Calendar extension):

You can find npm package information related to a specific extension by clicking on the npm tag in the top right of each documentation page.

Use NPM to install all extensions:

This package gathers all extensions in one package.

npm install bulma-extensions

Use NPM to install extension individually:

Using this method you can install only wanted extensions.

This is an example to integrate the calendar extension.

npm install bulma-calendar

Use GitHub repository:

To integrate all extensions use following command.

git clone git://github.com/Wikiki/bulma-extensions.git

To integrate the calendar extension use following command.

git clone git://github.com/Wikiki/bulma-calendar.git

Once installed the integration process depends on the way you installed the package and your project configuration.

You will find examples below based on most projects' common configurations

Bulma must be included first before you include bulma-extensions

From NPM

This is an example to integrate the calendar extension.

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

@import 'bulma';
@import '~bulma-calendar';

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

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 named bulma-calendar.sass
Copy the code from the bulma-calendar repository's sass file (bulma-calendar.sass) 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 Calendar extension
@import 'bulma-calendar.sass'

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

@charset "utf-8"

// Import Bulma core
@import 'bulma.sass'

// Import Extensions
@import "sass/extensions/_all"

JavaScript integration

This is an example to integrate the calendar extension from NPM.

Open your application's main JavaScript file and add the following line:

import bulmaCalendar from '/node_modules/bulma-extensions/bulma-calendar/dist/bulma-calendar.min.js';

Or integrate the JavaScript file in your HTML source:

<script src="/node_modules/bulma-extensions/bulma-calendar/dist/bulma-calendar.min.js"></script>

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 the following options

--jsFormat to choose the output format (umd by default)
--babelTarget 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 use the following shortcut

gulp

Are you looking for a specific extension that you feel is missing but you did not find it?

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