Plugin development.

[rajibahmed]

This is an idea for plugin development and keeping the core light.

Overview of the problem

This is about the Bulma CSS framework

I have used bulma since it's first released. It does the job done really nicely and really enjoy the declarative approach, makes reading html a breeze.

Proposal

We should be able to extend bulma via npm. For example bulma does not provide plugin that includes javascript. We can create a standard or contract that will let us easily plug new functionality.

publish new plugins to npm with fixed naming convention will make it easier to find.

colors will let you change the color scheme

bulma-colors-default
bulma-colors-metarialui

plugins will include css or js extensions to add new feature.

bulma-plugin-{js}-dropdown
bulma-plugin-{vue}-datepicker
bulma-plugin-{react}-selectize 

This is not a full formed idea. Just to start a conversation, how to have a sustainable modular approach for growth of bulma.

[VizuaaLOG]

There should maybe a 'base' library that others can extend. Maybe just a Bulma object with some helper methods like addClass, removeClass etc. Although due to Bulma's requirement on Flexbox element.classList may be supported on all browsers that support flexbox?

I was actually thinking about building a vanilla JS library for the Bulma components/elements that need some JS magic, like the mobile nav toggle and notifications.

What helper methods do you think would be useful in the base package, that other packages can then use?

We may also be able to implement an extend feature whereby you can add functionality to the Bulma base library so that you can do things like this.addClass(elem, class)?

So an idea of the API might be:

// This is my-bulma-plugin.js
class Notification {
    constructor(myNotificationSelector) {
        // ....
    }
}

Bulma.extend('Notification', Notification);

An end user can then do something like the following:

// app.js
// Bulma libs loaded
let notification = new Bulma.Notification('.notification');

// We can now interact with the notification object.

Edit The base Bulma lib may be able to interpret a tag such as data-bulma="notification that it can then use to automatically create a new Notification instance, without needing the user to write any JS if they do not want to. We can then use other data- tags for config or to mark other elements such as the delete button.

Edit 2 Getting a bit excited about this ;). Created a quick Codepen to illustrate what I was thinking about the extend feature. By no means this is a bullet proof implementation, I'm sure people will find problems.

Edit 3 I think the above solution is actually almost 'okay'. Looking at an example from PouchDB's plugin method they use a similar approach.

[VizuaaLOG]

Just a quick update on this. I have started to put together some JS plugins for Bulma components. You can find the project here. I'm always quickly implementing the JS functionality in projects, so thought I would have a crack at creating a JS plugin for all the components that would benefit from some JS magic.

Currently, it's only the notification element but it's a start ;).

Feedback and contributions are very welcome! This is a very early stage of development, so I wouldn't yet use these for production unless you like living dangerously!