Bulmil
:lipstick: A agnostic UI components library based on Web Components, made with Bulma & Stencil.
Install / Use
/learn @Gomah/BulmilREADME
Bulmil is an agnostic UI library based on Web Components, made with Bulma.io & Stencil.js.
Bulmil was created as a proof of concept to introduce an easy way to consume common reusable web components for use with various modern application frameworks (Angular, Vue, React, Ember) or simply with pure Javascript.
:warning: Currently in Alpha, beta will be available once this issue is resolved.
Why Stencil?
Stencil is a compiler for building fast web apps using Web Components.
Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than run-time tool. Stencil takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that run in any browser supporting the Custom Elements v1 spec.
Stencil components are just Web Components, so they work in any major framework or with no framework at all.
Getting Started
# Using npm
npm i @bulmil/core
# Using yarn
yarn add @bulmil/core
Usage
Without a javascript framework
Integrating a component built with Stencil to a project without a JavaScript framework is straight forward. If you're using a simple HTML page, you can add your component via a script tag. For example, if we published a component to npm, we could load the component through a CDN like this:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://unpkg.com/@bulmil/core@latest/dist/css/bulmil.min.css" />
<script src="https://unpkg.com/@bulmil/core@latest/dist/bulmil/bulmil.js"></script>
</head>
<body>
<bm-button>Button</bm-button>
</body>
</html>
Alternatively, if you wanted to take advantage of ES Modules, you could include the components using an import statement. Note that in this scenario applyPolyfills is needed if you are targeting Edge or IE11.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://unpkg.com/@bulmil/core@latest/dist/css/bulmil.min.css" />
<script type="module">
import {
applyPolyfills,
defineCustomElements,
} from 'https://unpkg.com/@bulmil/core@latest/dist/loader/index.es2017.js';
applyPolyfills().then(() => {
defineCustomElements(window);
});
</script>
</head>
<body>
<bm-button>Button</bm-button>
</body>
</html>
Try this example on Codesandbox
Frameworks
Unfortunately the experience of integrating web components into existing applications can be tricky at times. More about this can be read at https://custom-elements-everywhere.com/. In order to accommodate the various issues the Stencil team has created new output target plugins to make the process simpler.
The plugins add additional output targets for each framework binding that is included. This output target will emit a native angular/react/vue library, just like if your components were originally written using any of these frameworks.
There are framework specific bindings for:
Keep in mind, that at its core Bulmil is still simply web components. Even if your framework is not mentioned in the list above, it most likely still supports Bulmil natively. You can check here if your framework has complete support for web components.
There are also examples for loading and using Bulmil with:
React
Unfortunately React has poor web components support ... but we have you covered with our @bulmil/react package, which wraps all the Bulmil web components inside React components so it feels natural to interact with, and it removes all the limitations of working with web components inside React.
Let's first load the CSS for the application, the css file includes:
- Bulma base
- Bulma helpers
- Other components & elements not fitting in any components or not implemented yet.
Add the following to the root of your application:
// Global CSS (includes base & helpers). ~50KB
// We recommend to use purgecss to remove the unused css styles from your application.
import '@bulmil/core/dist/css/bulmil.min.css';
Now let's install the @bulmil/react package by running the following in your terminal:
# Using npm
npm i @bulmil/react
# Using yarn
yarn add @bulmil/react
And ... we're all done :tada:
Vue
You have two options with Vue due to it having perfect web components support. You can either follow the instructions here for loading the web components in their natural form, or you can use the Vue bindings from the @bulmil/vue package, which wraps all the web components inside Vue components so you can feel right at home. Some other advantages for using @bulmil/vue include typed + documented components, and additional helpers for extending Bulmil with custom components.
Let's first load the CSS for the application, the css file includes:
- Bulma base
- Bulma helpers
- Other components & elements not fitting in any components or not implemented yet.
Add the following to the root of your application:
// Global CSS (includes base & helpers). ~50KB
// We recommend to use purgecss to remove the unused css styles from your application.
import '@bulmil/core/dist/css/bulmil.min.css';
Now let's install the @bulmil/vue package by running the following in your terminal:
# Using npm
npm i @bulmil/vue
# Using yarn
yarn add @bulmil/vue
And ... we're all done :tada:
Using Nuxt
Create a plugin, (e.g plugins/bulmil.ts):
import Vue from 'vue';
import { applyPolyfills, defineCustomElements } from '@bulmil/core/dist/loader';
Vue.config.productionTip = false;
Vue.config.ignoredElements = [/bm-\w*/];
// Bind the custom elements to the window object
applyPolyfills().then(() => {
defineCustomElements(window);
});
// nuxt.config.ts
{
plugins: [
{ src: '~/plugins/bulmil.ts', mode: 'client' },
],
}
The components should then be available in any of the Vue components
render() {
return (
<div>
<bm-button>Button</bm-button>
</div>
)
}
Angular
You have two options with Angular due to it having perfect web components support. You can either follow the instructions here for loading the web components in their natural form, or you can use the Angular bindings from the @bulmil/angular package, which wraps all the web components ins
Related Skills
node-connect
350.8kDiagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps
frontend-design
110.4kCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
openai-whisper-api
350.8kTranscribe audio via OpenAI Audio Transcriptions API (Whisper).
qqbot-media
350.8kQQBot 富媒体收发能力。使用 <qqmedia> 标签，系统根据文件扩展名自动识别类型（图片/语音/视频/文件）。
