Skip to content
Bulma demo • readable class names

Our Baseline page, now styled with Bulma

Keep the same content from your Baseline page and convert the styling to Bulma. This step focuses on readable class names and clean layout structure.

Jump to Prompt What Happens Next

Bulma vibe

  • Human readable code elements
  • Only styles- no behaviors
  • mMdular and minimalistic
  • Easier to customize than Bootstrap
Columns Cards Messages Readable classes
Layout

When to use Bulma

Choose Bulma when you want readable class names and flexible layout control, while still keeping your page simple to edit with AI. It is a good middle ground between minimal Pico and component-heavy Bootstrap.

Workshop focus

Reminder

Usually, good UX starts with content first. For this workshop, we are intentionally focusing on design, so keep content as-is and improve the visuals.

Quick tip

Bulma quick tip

Start with Bulma's default layout and styles first. If something still needs to change, make one small style update at a time.

If your page feels crowded, keep your content the same and ask AI to add more space between sections and improve button readability. Small spacing changes can make your page look much more polished.

Bulma Update Prompt (copy/paste)

Copy this prompt exactly to convert your Baseline page into a Bulma version. 

Take out the Bootstrap styling and create a new version that uses Bulma styling and icons.
Keep the same topic and content (same sections, same links, same overall message).
Keep accessibility simple: use headings in order, include a skip link, and make sure tabbing clearly shows which link or button is selected.

Make it look like a polished Bulma design, show me what a good Bulma styled page could look like.

Please include whatever is needed in the HTML file so Bulma styling works when I open the page in a browser.
Output a single bulma.html file.

Choose your own page idea (optional)

If you picked your own topic in your Baseline page, keep it simple here too.

  • Keep the same one-page structure
  • Limit it to a few clear sections
  • Focus on readability over decoration
  • Save bigger customizations for example

What happens next

Bulma gives you a readable class-based middle ground between Pico and Bootstrap. Next you will use Customize, then combine your favorite ideas in Example.

  • Bulma takeaway: clean structure with easy-to-read class names
  • Next step: open Customize and choose colors, icons, and UI patterns
  • Final: check out the example to see a customized page with resource links and quick UX/UI + accessibility references.