Getting Started

Install Ralma and register the component tags

Ralma expects Bulma CSS and a Ractive application.

Requirements

Load Bulma >= 1.0.0 and Ractive >= 1.4.4 before rendering components. Use Node >= 22 for package-based projects.

1

Install the package:

npm install @aldi/ralma

2

Register all components once:

import Ractive from 'ractive';
import { registerRalma } from '@aldi/ralma';

registerRalma(Ractive);

new Ractive({
  target: '#app',
  template: '<button primary>Save</button>'
});

3

Or load the browser bundle in static pages:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1/css/bulma.min.css" />
<script src="https://cdn.jsdelivr.net/npm/ractive"></script>
<script src="/path/to/ralma.min.js"></script>

First Component

Use registered tags directly in a Ractive template:

<button primary large>Primary button</button>
<button outlined>Secondary action</button>
<button href="/docs/getting-started">As link</button>

Browse Component Examples

See the supported tags grouped by Bulma section.

Explore Components