This Ractive plugin provides helper shortcuts for most Bulma widgets. The goal of this plugin is to help you get started quickly and reduce the overly verbose code that Bulma tends to produce. It does not attempt to cover everything in Bulma, but rather offer the most common elements as shortcuts. Sometimes, when you want something more specific or fancy, you can still use the original Bulma markup.
npm install @aldi/ralmaimport Ractive from 'ractive';
import { registerRalma } from '@aldi/ralma';
registerRalma(Ractive);Package-based projects require Node 22 or newer and Ractive 1.4.4 or newer. Components use Bulma 1.x classes; load Bulma CSS separately.
registerRalma skips names already present on Ractive.components; pass { overwrite: true } to
replace them, or { warnOnCollision: true } to log the ones it skipped.
Or download the browser bundle, which registers every component against window.Ractive on load:
Debug: bin/ralma.js
Minified: bin/ralma.min.js
The documentation site covers all 61 components, installation, registration options, link safety, and focused examples. Run it locally with:
npm run docs:install
npm run docs:devA typical header would look like this:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Ralma!</title>
<!-- Bulma CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1/css/bulma.min.css" />
<!-- Ractive Framework -->
<script src="https://cdn.jsdelivr.net/npm/ractive"></script>
<!-- Ralma Plugin -->
<script src="ralma.min.js"></script>
</head>Code released under the MIT license.