{"id":13559359,"url":"https://github.com/Gomah/bulmil","last_synced_at":"2025-04-03T14:32:03.958Z","repository":{"id":44730014,"uuid":"194663647","full_name":"Gomah/bulmil","owner":"Gomah","description":":lipstick: A agnostic UI components library based on Web Components, made with Bulma \u0026 Stencil.","archived":false,"fork":false,"pushed_at":"2024-04-19T09:45:06.000Z","size":16777,"stargazers_count":158,"open_issues_count":4,"forks_count":12,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-03-29T21:03:05.791Z","etag":null,"topics":["bulma","bulmil","stencil-components","stencil-js","stenciljs","stenciljs-components","ui-components","ui-framework","webcom"],"latest_commit_sha":null,"homepage":"https://bulmil.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Gomah.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-07-01T11:54:47.000Z","updated_at":"2025-03-22T15:39:37.000Z","dependencies_parsed_at":"2023-10-17T05:46:15.417Z","dependency_job_id":"ebf489ca-097b-4724-b119-885483d90555","html_url":"https://github.com/Gomah/bulmil","commit_stats":{"total_commits":575,"total_committers":4,"mean_commits":143.75,"dds":"0.18956521739130439","last_synced_commit":"170a3898e137244a36e6802a9a25182fd96ffdc2"},"previous_names":[],"tags_count":190,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gomah%2Fbulmil","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gomah%2Fbulmil/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gomah%2Fbulmil/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gomah%2Fbulmil/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Gomah","download_url":"https://codeload.github.com/Gomah/bulmil/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247018572,"owners_count":20870026,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bulma","bulmil","stencil-components","stencil-js","stenciljs","stenciljs-components","ui-components","ui-framework","webcom"],"created_at":"2024-08-01T13:00:19.883Z","updated_at":"2025-04-03T14:32:03.392Z","avatar_url":"https://github.com/Gomah.png","language":"TypeScript","readme":"![bulmil](https://user-images.githubusercontent.com/2362138/65766959-c721a080-e16f-11e9-9fb9-45a5a2ad0391.jpg)\n\n\u003c!-- Badges --\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D\u0026colorA=16161d\u0026style=flat-square\" alt=\"Built with Stencil\" /\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://bulmil.netlify.com/\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://cdn.jsdelivr.net/gh/storybookjs/brand@master/badge/badge-storybook.svg\"\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://stenciljs.com/docs/style-guide\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/code_style-stencil/stylelint/prettier-5851ff.svg?style=flat-square\" alt=\"Code Style\" /\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://npmjs.com/package/@bulmil/core\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/@bulmil/core/latest.svg?style=flat-square\" alt=\"npm version\" /\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://opensource.org/licenses/MIT\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/License-MIT-black.svg?style=flat-square\" alt=\"License MIT\" /\u003e\n  \u003c/a\u003e\n\n  \u003cbr /\u003e\n\n  \u003ca href=\"https://david-dm.org/gomah/bulmil\"\u003e\n    \u003cimg src=\"https://david-dm.org/gomah/bulmil/status.svg?style=flat-square\" alt=\"dependencies\" /\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://circleci.com/gh/Gomah/bulmil\"\u003e\n    \u003cimg src=\"https://circleci.com/gh/Gomah/bulmil.svg?style=shield\" alt=\"Circle CI\" /\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://npmjs.com/package/@bulmil/core\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/dt/bulmil.svg?style=flat-square\" alt=\"npm downloads\" /\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://packagephobia.now.sh/result?p=@bulmil/core\"\u003e\n    \u003cimg src=\"https://flat.badgen.net/packagephobia/install/@bulmil/core\" alt=\"Package Phobia\" /\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://bundlephobia.com/result?p=@bulmil/core\"\u003e\n    \u003cimg src=\"https://flat.badgen.net/bundlephobia/minzip/@bulmil/core\" alt=\"Bundle Phobia\" /\u003e\n  \u003c/a\u003e\n\n\u003c/p\u003e\n\nBulmil is an agnostic UI library based on Web Components, made with [Bulma.io](https://bulma.io/) \u0026 [Stencil.js](https://stenciljs.com/).\n\nBulmil 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.\n\n:warning: Currently in Alpha, beta will be available once [this issue](https://github.com/Gomah/bulmil/issues/26) is resolved.\n\n## Why Stencil?\n\nStencil is a compiler for building fast web apps using Web Components.\n\nStencil 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.\n\nStencil components are just Web Components, so they work in any major framework or with no framework at all.\n\n## Getting Started\n\n```bash\n# Using npm\nnpm i @bulmil/core\n\n# Using yarn\nyarn add @bulmil/core\n```\n\n---\n\n## Usage\n\n### Without a javascript framework\n\nIntegrating 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:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003clink rel=\"stylesheet\" href=\"https://unpkg.com/@bulmil/core@latest/dist/css/bulmil.min.css\" /\u003e\n    \u003cscript src=\"https://unpkg.com/@bulmil/core@latest/dist/bulmil/bulmil.js\"\u003e\u003c/script\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cbm-button\u003eButton\u003c/bm-button\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nAlternatively, 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.\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003clink rel=\"stylesheet\" href=\"https://unpkg.com/@bulmil/core@latest/dist/css/bulmil.min.css\" /\u003e\n    \u003cscript type=\"module\"\u003e\n      import {\n        applyPolyfills,\n        defineCustomElements,\n      } from 'https://unpkg.com/@bulmil/core@latest/dist/loader/index.es2017.js';\n      applyPolyfills().then(() =\u003e {\n        defineCustomElements(window);\n      });\n    \u003c/script\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cbm-button\u003eButton\u003c/bm-button\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n[Try this example on Codesandbox](https://codesandbox.io/s/bulmil-es-module-i8ce8)\n\n---\n\n### Frameworks\n\nUnfortunately 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/](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.\n\nThe 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.\n\nThere are framework specific bindings for:\n\n- [React](#react)\n- [Vue / Nuxt](#vue)\n- [Svelte](#svelte)\n- [Angular](#angular)\n\nKeep 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](https://custom-elements-everywhere.com/) if your framework has complete support for web components.\n\nThere are also [examples](./examples) for loading and using Bulmil with:\n\n- [HTML](./examples/html)\n- [React](./examples/react)\n- [Next](./examples/next)\n- [Vue](./examples/vue)\n- [Nuxt](./examples/nuxt)\n- [Angular](./examples/angular)\n- [Svelte](./examples/svelte)\n\n---\n\n### React\n\nUnfortunately React has poor [web components support](https://custom-elements-everywhere.com/#react) ... 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.\n\nLet's first load the CSS for the application, the css file includes:\n\n- Bulma base\n- Bulma helpers\n- Other components \u0026 elements not fitting in any components or not implemented yet.\n\nAdd the following to the root of your application:\n\n```tsx\n// Global CSS (includes base \u0026 helpers). ~50KB\n// We recommend to use purgecss to remove the unused css styles from your application.\nimport '@bulmil/core/dist/css/bulmil.min.css';\n```\n\nNow let's install the `@bulmil/react` package by running the following in your terminal:\n\n```bash\n# Using npm\nnpm i @bulmil/react\n\n# Using yarn\nyarn add @bulmil/react\n```\n\nAnd ... we're all done :tada:\n\n### Vue\n\nYou have two options with Vue due to it having perfect [web components support](https://custom-elements-everywhere.com/#vue). You can either follow the instructions [here](https://stenciljs.com/docs/vue) 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.\n\nLet's first load the CSS for the application, the css file includes:\n\n- Bulma base\n- Bulma helpers\n- Other components \u0026 elements not fitting in any components or not implemented yet.\n\nAdd the following to the root of your application:\n\n```tsx\n// Global CSS (includes base \u0026 helpers). ~50KB\n// We recommend to use purgecss to remove the unused css styles from your application.\nimport '@bulmil/core/dist/css/bulmil.min.css';\n```\n\nNow let's install the `@bulmil/vue` package by running the following in your terminal:\n\n```bash\n# Using npm\nnpm i @bulmil/vue\n\n# Using yarn\nyarn add @bulmil/vue\n```\n\nAnd ... we're all done :tada:\n\n### Using Nuxt\n\nCreate a plugin, (e.g plugins/bulmil.ts):\n\n```ts\nimport Vue from 'vue';\n\nimport { applyPolyfills, defineCustomElements } from '@bulmil/core/dist/loader';\n\nVue.config.productionTip = false;\nVue.config.ignoredElements = [/bm-\\w*/];\n\n// Bind the custom elements to the window object\napplyPolyfills().then(() =\u003e {\n  defineCustomElements(window);\n});\n```\n\n```ts\n// nuxt.config.ts\n{\n  plugins: [\n    { src: '~/plugins/bulmil.ts', mode: 'client' },\n  ],\n}\n```\n\nThe components should then be available in any of the Vue components\n\n```tsx\nrender() {\n  return (\n    \u003cdiv\u003e\n      \u003cbm-button\u003eButton\u003c/bm-button\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n### Angular\n\nYou have two options with Angular due to it having perfect [web components support](https://custom-elements-everywhere.com/#angular). 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 inside Angular components so you can feel right at home. Some other advantages for using `@bulmil/angular` include typed + documented components, and additional helpers for extending Bulmil with custom components.\n\nLet's first load the CSS for the application, the css file includes:\n\n- Bulma base\n- Bulma helpers\n- Other components \u0026 elements not fitting in any components or not implemented yet.\n\nAdd the following to the root of your application styles:\n\n```tsx\n// Global CSS (includes base \u0026 helpers). ~50KB\n// We recommend to use purgecss to remove the unused css styles from your application.\nimport '@bulmil/core/dist/css/bulmil.min.css';\n```\n\nNow let's install the `@bulmil/angular` package by running the following in your terminal:\n\n```bash\n# Using npm\nnpm i @bulmil/angular\n\n# Using yarn\nyarn add @bulmil/angular\n```\n\nAnd ... we're all done :tada:\n\n### Svelte\n\nYou have two options with Svelte due to it having perfect [web components support](https://custom-elements-everywhere.com/#svelte). You can either follow the instructions for loading it from the CDN and use the Bulmil web components in their natural form, or you can use the Svelte bindings from the `@bulmil/svelte` package, which wraps all the web components inside Svelte components so you can feel right at home. Some other advantages for using `@bulmil/svelte` include typed + documented components, and additional helpers for extending Bulmil with custom components.\n\nLet's first load the CSS for the application, the css file includes:\n\n- Bulma base\n- Bulma helpers\n- Other components \u0026 elements not fitting in any components or not implemented yet.\n\nAdd the following to the `\u003chead\u003e` element of your HTML file:\n\n```tsx\n// Global CSS (includes base \u0026 helpers). ~50KB\n// We recommend to use purgecss to remove the unused css styles from your application.\nimport '@bulmil/core/dist/css/bulmil.min.css';\n```\n\nNow let's install the `@bulmil/svelte` package by running the following in your terminal:\n\n```bash\n# Using npm\nnpm i @bulmil/svelte\n\n# Using yarn\nyarn add @bulmil/svelte\n```\n\nAnd ... we're all done :tada:\n\n### Ember\n\nWorking with Stencil components in Ember is really easy thanks to the `ember-cli-stencil` addon. It handles:\n\n- Importing the required files into your `vendor.js`\n- Copying the component definitions into your `assets` directory\n- Optionally generating a wrapper component for improved compatibility with older Ember versions\n\nStart off by installing the Ember addon\n\n```bash\nember install ember-cli-stencil\n```\n\nNow, when you build your application, Stencil collections in your dependencies will automatically be discovered and pulled into your application. You can just start using the custom elements in your `hbs` files with no further work needed. For more information, check out the [`ember-cli-stencil` documentation](https://github.com/alexlafroscia/ember-cli-stencil).\n\n---\n\n## Development\n\n1. Clone this repository\n2. Install dependencies using `yarn install` or `npm install`\n3. Start development server using `yarn storybook` or `npm run storybook`\n\n## 📑 License\n\n[MIT License](./LICENSE)\n","funding_links":[],"categories":[":wrench: Stencil Tools","UI Libraries","Ecosystem Highlights"],"sub_categories":["Stencil Component Libraries","Community","Component Libraries \u0026 Widgets"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FGomah%2Fbulmil","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FGomah%2Fbulmil","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FGomah%2Fbulmil/lists"}