1
Use NPM to install all extensions:
This package gathers all extensions in one package.
npm install bulma-extensions
Documentation
Everything you need to start with Bulma-extensions.
There are several ways to get started with Bulma-extensions. You can either:
Each extension contains a dist folder which includes all available files for integration into your project (example for Calendar extension):
1
Use NPM to install all extensions:
This package gathers 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.
npm install bulma-calendar
3
Use GitHub repository:
git clone git://github.com/Wikiki/bulma-extensions.git
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
1
From NPM
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
.
2
From GitHub repository
sass
folder, create a new folder called extensions
bulma-calendar.sass
bulma-calendar
repository's sass
file (bulma-calendar.sass) into your new file_all.sass
(this is not required, but will help when you add more extensions)@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
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.