Choosing Between Bulma’s Built‑In Modal and a Custom CSS‑Only Modal

Decide: Built‑In Bulma Modal or CSS‑Only Modal?

When adding a modal to a Bulma‑based site, you can either use the library’s .modal component or build a modal from scratch with pure CSS. The decision hinges on three constraints:

• Bundle size – Do you want to keep the CSS lean or can you afford the full Bulma bundle?
• Accessibility – Is the project required to pass WCAG 2.1 AA or higher?
• Customization depth – Will you need custom animations, styling, or a different overlay behavior?

Option Comparison

Feature	Bulma Modal	Custom CSS‑Only Modal
Accessibility support	Keyboard navigation (Esc, Tab), role="dialog", aria-modal="true" built‑in; focus trap via JS	Requires manual role, aria-modal, focus‑trap logic; not guaranteed
Animation	Default fade‑in/out; adjustable via CSS variables	Full control with CSS transitions or keyframes; must write from scratch
Overlay style	Darkened backdrop with .modal-background	Custom overlay via position:fixed and background styles
Responsive handling	Auto‑adjusts to viewport; no extra media queries needed	Requires explicit media queries if desired
Bundle impact	Includes all Bulma CSS (≈30 KB gzipped)	Only the modal CSS you write (≈2 KB)
JavaScript requirement	Toggle .is‑active via JS (or data-action helpers)	No JS; uses :checked or :target pseudo‑classes
Customizability	Overrides via CSS variables or custom classes	Full freedom; no library constraints

Trade‑Off Summary

• Bulma Modal is the safest route for accessibility, consistent styling, and quick integration. It does add the full Bulma CSS bundle, which may be overkill if you only need a modal.
• Custom CSS‑Only keeps the bundle small and offers maximum styling freedom, but you must invest time in accessibility, focus management, and responsive design.

Concrete Implementation & Validation

1. Bulma Modal Example

<!-- Bulma 0.9.x CSS – include via CDN or local file -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">

<button id="openBtn" class="button is-primary">Open Modal</button>

<div id="myModal" class="modal">
  <div class="modal-background"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">Example Modal</p>
      <button class="delete" aria-label="close"></button>
    </header>
    <section class="modal-card-body">
      Modal content goes here.
    </section>
    <footer class="modal-card-foot">
      <button class="button is-success">Save changes</button>
      <button class="button">Cancel</button>
    </footer>
  </div>
</div>

<script>
  const modal = document.getElementById('myModal');
  const openBtn = document.getElementById('openBtn');
  const closeBtn = modal.querySelector('.delete');

  openBtn.addEventListener('click', () => modal.classList.add('is-active'));
  closeBtn.addEventListener('click', () => modal.classList.remove('is-active'));
  // Close on background click
  modal.querySelector('.modal-background').addEventListener('click', () => modal.classList.remove('is-active'));
</script>

Run this in a browser, click Open Modal, and verify:

• The overlay appears with a dark background.
• Pressing Esc closes the modal (Bulma’s built‑in JS handles this).
• Tabbing cycles through focusable elements inside the modal.
• Screen readers announce the dialog role and title.

2. Custom CSS‑Only Modal Example

<!-- Minimal CSS – no Bulma – use a local stylesheet or