Migration from Bulma

A guide for migrating your project from Bulma to Apex.

Similar Philosophy

Both Bulma and Apex are CSS-only frameworks with a similar utility-first philosophy.

Grid Migration

Bulma and Apex both use CSS Grid:

HTML

<!-- Bulma -->
<div class="columns">
  <div class="column">Content</div>
  <div class="column">Content</div>
</div>

<!-- Apex -->
<div class="grid grid-cols-2 gap-4">
  <div>Content</div>
  <div>Content</div>
</div>

Component Classes

Replace Bulma component classes with Apex utility combinations:

HTML

<!-- Bulma Button -->
<button class="button is-primary">Button</button>

<!-- Apex -->
<button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
  Button
</button>

Modifier Classes

Bulma modifiers become responsive variants in Apex:

HTML

<!-- Bulma Responsive -->
<div class="is-hidden-mobile">Content</div>

<!-- Apex -->
<div class="hidden md:block">Content</div>