Unofficial javascript extension to the awesome Bulma CSS framework.

  • By Thomas Erbe
  • Last update: Dec 30, 2022
  • Comments: 17

BulmaJS

npm GitHub tag (latest SemVer) Build Status Reviewed by Hound GitHub license

This is an unofficial JavaScript extension for the Bulma CSS framework.

BulmaJS is still in development, you can keep track of current, pending, completed and planned tasks on the official Trello board.

tl;dr GIMME THE DOCS! Well here you go.

Bulma is an excellent CSS framework and the perfect alternative to Bootstrap. One of the great things about Bulma is that it's JUST CSS; there is no JavaScript included. This makes it super lightweight. Some components do require JavaScript however, and that is where BulmaJS comes in!

BulmaJS is written in ES6 and provides a plugin based system for adding interaction to the CSS components. BulmaJS is an ongoing project. As new components are added to Bulma, if they require JavaScript then they will also be added to BulmaJS. We are not limited to the core components though. If you have a plugin you would like incorporated, please submit a PR. If you have written a CSS extension to Bulma and would like some JS written, please submit an issue and we may write the JS functionality for you.

Contributing

If you would like to contribute a plugin, fix a bug or fix some horrible typo in the docs, then please submit a PR if you can! Alternatively, create an issue. Please note, while the code base doesn't follow any strict style, try to ensure your PRs follow the general convention that you see. There may be times the convention isn't followed, so if you see this submit an issue/PR and slap me on the wrist :). Any PR/issue at this time will not be rejected but may have some alteration to the code.

If you are submitting a plugin, please also submit the relevant documentation.

Github

https://github.com/VizuaaLOG/BulmaJS

Comments(17)

  • 1

    Additional plugin ideas

    These are some ideas for additional plugins. These ideas are inspired from other similar libraries/frameworks.

    • Tag input Would provide an input field that users can use to type in 'tags'. Would make use of the Bulma input and tag components. (thanks to @chistel)

    If anyone has other ideas for plugins, please leave a comment. If it would suit this project well then I'll include it in the above list.

  • 2

    [Feature request] Panel tabs

    BulmaJS already supports generic tabs: https://bulmajs.tomerbe.co.uk/docs/0.10/2-core-components/tabs/

    But this won't work and can't be used with panel-tabs used in panel

  • 3

    Alert plugin improvements

    Hi,

    I think the alert plugin is a little too opiniated. It would be great if we could customize it a little bit more.

    For instance :

    • Being able not to have a header
    • Being able to add extra classes to the elements of the modal (buttons, etc)
    • Being able to prevent the modal from closing on onConfirm() and onCancel() events
    • Being able to target the button that was clicked on onConfirm() and onCancel() events

    What I suggest is adding a few more options. Maybe an object for the buttons ?

    confirm: {
  'text': 'Confirm',
  'classes': 'is-link'
}

cancel: {
  'text': 'Cancel',
  'classes': 'is-danger'
}

    To prevent the modal from being destroyed on onConfirm() and onCancel(), I suggest adding two more options :

    destroyOnCancel: true|false // defaulted to true
destroyOnConfirm: true|false // defaulted to true

    To target the button that was clicked on onConfirm() and onCancel() events, I suggest adding the event as a parameter on the 'click' event listener callback of the cancel and confim buttons. Like so:

    confirmButton.addEventListener('click', e => {
  this.onConfirm(e);
  this.destroyOnConfirm && this.destroy(); // related to previous suggestion
});

cancelButton.addEventListener('click', e => {
  this.onCancel(e);
  this.destroyOnCancel && this.destroy(); // related to previous suggestion
});

    I have some of these features already coded, I can submit a PR if you're OK with the suggestions.

    Waiting for your feedback, thanks !

  • 4

    Navbar Burger missing is-active class

    I think it would be an improvement to add the is-active class to the burger button - currently, it only applies the is-active class to the navbar-menu. If you would like I can work on a merge request.

    https://bulma.io/documentation/components/navbar/#navbar-burger

  • 5

    Dropdown menu in navbar

    It seems there is support for standalone Dropdown (Bulma, BulmaJS) but not Dropdown menu (Bulma) from the Navbar (which is very different).

    So would it be possible to support Dropdown menu in navbar?

    Versions

    bulma 0.9.0
bulmajs 0.11.0
  • 6

    Example of importing selected components

    Hi, thanks for developing this. This is a newbie question, but I am trying to create a bulma.js that includes just the dropdown, file, and navbar components.

    I read the [https://bulmajs.tomerbe.co.uk/docs/0.10/1-getting-started/2-installation/](documentation here).

    I downloaded the project locally, ran npm install, and then edited src/bulma.js as follows:

    
/* eslint no-unused-vars: 0 */

import Bulma from './core';
// import { Notification } from './plugins/notification';
import { Navbar } from './plugins/navbar';
// import { Message } from './plugins/message';
import { Dropdown } from './plugins/dropdown';
// import { Modal } from './plugins/modal';
// import { Alert } from './plugins/alert';
import { File } from './plugins/file';
// import { Tabs } from './plugins/tabs';

export default Bulma

    Now I want to generate a new version of bulma.js in dist, but I don't know what command to use.

    I would appreciate any help you can provide.

  • 7

    Object doesn't support property or method 'forEach'

    Versions BulmaJS: Browser: IE11 Operating system: windows 10

    Describe the bug Object doesn't support property or method 'forEach' check screen shot

    Screenshots If applicable, add screenshots to help explain your problem. image

  • 8

    SyntaxError: 'import' and 'export' may appear only with 'sourceType: module'

    Versions BulmaJS: 0.7.0 Browser: Chrome Operating system: Mac

    Describe the bug After npm install, I cannot get the ES6 import to work. I get:

    SyntaxError: 'import' and 'export' may appear only with 'sourceType: module'

    I'm using browserify, babel and gulp:

            .transform('babelify')
        .bundle()
        .pipe(source('app.js')) // Readable Stream -> Stream Of Vinyl Files
        .pipe(buffer()) // Vinyl Files -> Buffered Vinyl Files
        .pipe(sourcemaps.init())
        .pipe(uglify().on('error', function (e) {
            console.log(e);
        }))
        .pipe(rename({extname: '.min.js'}))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('dist/'));

    with the following config:

    "babelify",
        {
          "presets": [
            [
              "@babel/preset-env",
              {
                "modules": "commonjs",
                "targets": {
                  "browsers": [
                    "last 2 versions",
                    "safari >= 7"
                  ]
                }
              }
            ]
          ],
          "plugins": [
            "transform-class-properties",
            "@babel/plugin-proposal-object-rest-spread"
          ],
          "sourceMaps": true
        }

    Note: import * as _ from 'underscore' does not throw this error, which led me to believe there may be an error with the package exports?

  • 9

    NPM package is 0.3.1, missing 0.4

    Hello, your NPM package seems to be out of sync and does not contain the 0.4.0 version. Found this out when I tried to include tabs but tabs key could not be found.

    https://www.npmjs.com/package/@vizuaalog/bulmajs

  • 10

    Great job !!!

    Nice to see that you are moving forward with the idea .... I can add a comment .. not to pollute the global Object space. Rather .. wrap as function and return. Let the users to decide how they want implement it.

    I would say put that into an example or documentation ....

    https://github.com/VizuaaLOG/BulmaJS/blob/6a16f5bf82b58b2171f3d4643c6d040d245f6cbb/src/notification.js#L206

  • 11

    Window is not defined when using nextjs

    Versions BulmaJS: 0.12.1 Browser: Brave 0.12.1 and Google Chrome 87.0.4280.77 (iOS) Operating system: Linux, KDE Neon

    Describe the bug When importing BulmaJS in a Next.js application the page doesn't render with the error message written in the title.

    To Reproduce Steps to reproduce the behavior:

    1. Add the following import to the top of the component import Bulma from '@vizuaalog/bulmajs';
    2. Run yarn dev or npm run dev or next dev
    3. Load in localhost:3000

    Expected behavior I expected BulmaJS to load without any issues.

    Screenshots image image

    Not sure if this is something related to Next.js as I haven't tried with another framework or even vanilla html.

  • 12

    Bump decode-uri-component from 0.2.0 to 0.2.2

    Bumps decode-uri-component from 0.2.0 to 0.2.2.

    Release notes

    Sourced from decode-uri-component's releases.

    v0.2.2

    • Prevent overwriting previously decoded tokens 980e0bf

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2

    v0.2.1

    • Switch to GitHub workflows 76abc93
    • Fix issue where decode throws - fixes #6 746ca5d
    • Update license (#1) 486d7e2
    • Tidelift tasks a650457
    • Meta tweaks 66e1c28

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 13

    Bump loader-utils from 1.4.0 to 1.4.2

    Bumps loader-utils from 1.4.0 to 1.4.2.

    Release notes

    Sourced from loader-utils's releases.

    v1.4.2

    1.4.2 (2022-11-11)

    Bug Fixes

    v1.4.1

    1.4.1 (2022-11-07)

    Bug Fixes

    Changelog

    Sourced from loader-utils's changelog.

    1.4.2 (2022-11-11)

    Bug Fixes

    1.4.1 (2022-11-07)

    Bug Fixes

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 14

    Bump minimatch from 3.0.4 to 3.1.2

    Bumps minimatch from 3.0.4 to 3.1.2.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 15

    Bump terser from 4.8.0 to 4.8.1

    Bumps terser from 4.8.0 to 4.8.1.

    Changelog

    Sourced from terser's changelog.

    v4.8.1 (backport)

    • Security fix for RegExps that should not be evaluated (regexp DDOS)
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 16

    CDN to allow more accessibility regarding installation

    Is your feature request related to a problem? Please describe. While there's the ES5 way which isn't recommended, my project is not made with Node stuff yet I have started to rewrite the frontend to use Bulma.

    Describe the solution you'd like Having BulmaJS hosted on a CDN (eg: cdnjs), where it can be easily be installed by people by putting a script link(?) in the HTML head tag.

  • 17

    Multiple Dropdowns

    Describe the solution you'd like

    If I have multiple dropdowns, which you open/close by click (not by mouseover), then it would be great to have some kind of option to close every other dropdown when you open another dropdown.

Popular Tag

Related