Building Plus Ultra: How Antigravity Helped Me Bring Material Design to Bulma CSS 🎨

Source: Dev.to

Overview

Hey everyone 👋

Today I want to share something I’ve been working on that combines two things I love: clean CSS frameworks and Material Design aesthetics. I just launched Plus Ultra, an open‑source CSS library that brings Material Design components to Bulma CSS while keeping all the flexbox goodness that makes Bulma so powerful.

And here’s the kicker: I built most of it using Google Antigravity, which turned out to be an absolute beast for frontend work. If you’re wondering whether Antigravity is any good for UI development, let me tell you—it’s incredible.

Let’s start! 🤙

---

What is Plus Ultra and why did I build it?

• Bulma is one of my favorite CSS frameworks. It’s lightweight, pure CSS (no JavaScript), based on flexbox, and incredibly easy to use.

• Problem: Its default aesthetic is pretty basic. The components work great, but they look… well, vanilla.

• Material Design is gorgeous. Google’s design system is polished, modern, and has that clean “premium” feel.

• Problem: Most Material Design implementations (e.g., Material‑UI) are tied to specific JavaScript frameworks, which defeats the purpose of Bulma’s simplicity.

Solution: Combine the best of both worlds—Bulma’s flexbox power and simplicity with Material Design’s visual polish. That’s Plus Ultra.

---

Features (Pure CSS / Sass)

• Material buttons – proper elevation, CSS‑only ripple effects, Material color schemes
• Material cards – signature shadow system and hover states
• Material form inputs – floating labels and Material‑style validation
• Material navigation components – following Material guidelines
• Material modals & dialogs – proper transitions and backdrops

The key is that Plus Ultra is built on top of Bulma, not instead of it. You still get all of Bulma’s flexbox utilities, grid system, and helper classes; Plus Ultra simply makes everything look like Material Design.

The name comes from one of my all‑time favorite anime series: My Hero Academia 😄

---

Tech Stack

Core

• Bulma CSS – foundation (obviously)
• Sass/SCSS – for all Material Design styling
• Pure CSS – animations & transitions
• No JavaScript dependencies – keeping Bulma’s philosophy

Build Tools

• pnpm – package management
• Sass compiler – builds the final CSS

Material Design System

• Follows Google’s Material Design 3 guidelines
• Custom color system matching Material palettes
• Elevation system with proper shadows
• Material motion & transitions

The beauty is that it’s just CSS. No complicated build process, no JavaScript runtime, no framework lock‑in. Install it, import it, and your Bulma components instantly look like Material Design.

---

Development with Google Antigravity

I could have built Plus Ultra the old‑fashioned way—manually writing Sass, testing in the browser, iterating on designs. Instead, I used Google Antigravity, and it transformed the entire development process.

Why Antigravity shines for frontend work

Concrete Examples

Example 1 – Material Cards

Task: “Create a Material Design card component that works with Bulma’s .card class.”

Antigravity’s actions:

• Analyzed Bulma’s existing card structure.
• Added Material elevation (box‑shadow) with proper values.
• Implemented hover state with elevation increase.
• Applied border‑radius matching Material specs.
• Created transition animations for smooth hover effects.
• Ensured responsive behavior on mobile.

Result: The component was production‑ready on the first attempt; I only tweaked spacing.

---

Example 2 – Floating Label Inputs

Task: “Implement Material Design floating labels for Bulma form inputs.”

Challenges:

• Label starts inside the input.
• On focus/filled, label floats up & shrinks.
• Smooth transitions, color changes, accessibility.

Antigravity’s output:

• Wrote the necessary CSS logic.
• Generated test cases showing:
  • Empty input (label inside)
  • Focused input (label floating)
  • Filled input (label stays floating)
  • Error state (red accent)
  • Success state (green accent)
• Visually validated each state before delivering the final component.

---

Example 3 – Material Color System

Task: “Implement Material Design color palette with Sass variables compatible with Bulma’s color system.”

Antigravity’s actions:

• Created Sass maps for Material palettes (primary, secondary, error, etc.).
• Integrated them with Bulma’s existing color variables.
• Generated utility classes (.has-background-primary, .has-text-secondary, …).
• Ensured proper contrast ratios for accessibility.
• Produced documentation listing all available colors.

What would have taken me hours was done in minutes.

---

Planning Mode

I used Planning mode extensively for Plus Ultra. Before implementing each component, the agent would produce a plan outlining:

1. Which Material Design specs it would follow.
2. How it would integrate with existing Bulma classes.
3. What Sass variables and mixins it would create.
4. What the final output would look like.

This structured approach kept the project organized and ensured consistency across all components.

---

That’s Plus Ultra in a nutshell. If you’re interested in trying it out, check out the repository, install via pnpm, import the CSS, and enjoy Material Design on top of Bulma—no JavaScript required. Happy coding! 🚀

Overview

I could review the plan, suggest adjustments (e.g., “use Bulma’s existing spacing variables instead of creating new ones”), and then approve. This ensured consistency across all components.

---

Takeaways from Building Plus Ultra with Antigravity

Antigravity shines for:

• Component‑based UI development
• Design‑system implementation
• CSS/Sass architecture
• Responsive design work
• Visual consistency across components
• Rapid prototyping & iteration

The visual feedback loop is critical.
Material Design knowledge is built‑in.
Planning mode prevents inconsistency.

Current Status

Plus Ultra is in early development. The foundation is there—core Material components on top of Bulma—but there’s still work to do.

What’s working now

• Material buttons with elevation and states
• Material cards with proper shadows
• Basic floating‑label inputs
• Material color‑palette integration
• Foundation Sass architecture

What’s coming next

• Complete form component library
• Material navigation components
• Modal and dialog components
• Material tables and lists
• Comprehensive documentation
• Live demo site
• npm package for easy installation

I’m building this in the open under Domenico Tenace Open Labs, so anyone can follow along, contribute, or use what’s already there.
And yes, I’ll continue using Antigravity for development—it’s simply too effective not to.

---

Why Open Source?

The best tools I use every day are open source:

• Bulma is open source.
• Material Design specs are open.
• The entire web is built on open technologies.

Plus Ultra stands on the shoulders of giants. The least I can do is give back to the ecosystem that’s given me so much.

If other developers find it useful → awesome.
If someone wants to contribute improvements → even better.
If it helps people build better‑looking websites with Bulma → that’s the whole point.

---

Community Questions

If you use Bulma

1. Would a Material Design version interest you?
2. What components would be most valuable?
3. What design systems would you like to see integrated with Bulma?

If you use Material Design

1. Do you prefer React‑based Material UI or pure CSS solutions?
2. What features are non‑negotiable in a Material Design implementation?

If you’ve used Antigravity for frontend

1. How has your experience been with UI development?
2. Did you find the browser integration as useful as I did?
3. What tricks or workflows have you discovered?

If you’re considering trying Antigravity

1. What questions do you have about using it for frontend work?
2. What kinds of projects are you thinking about building?

Drop a comment below! I’m genuinely curious to hear if others are using Antigravity for frontend work and what your experiences have been. The tool is still new, and community knowledge sharing helps everyone.

---

Final Thoughts

Building Plus Ultra has been a blast, and Antigravity made the process significantly faster and more enjoyable than traditional development would have been.

• The combination of Bulma’s simplicity and Material Design’s aesthetics feels like a natural fit.
• Having an AI assistant that understands both design systems, can write clean Sass, and can visually validate the results is incredibly powerful.

If you’re doing frontend work and haven’t tried Antigravity yet, I highly recommend giving it a shot. The browser integration alone makes it worth exploring.

If you’re a Bulma user looking for a Material Design aesthetic, keep an eye on Plus Ultra—we’re just getting started.

• Check out the repo, star it if you’re interested, and feel free to contribute or provide feedback.
• This is a community project; the more input we get, the better it becomes.

Happy coding! ✨

---

Connect with Me

Hi 👋🏻

• 🌲 Linktree: https://linktr.ee/domenicotenace
• GitHub: https://github.com/Domenico-Tenace-Open-Labs
• Follow me on dev.to for more articles

Domenico Tenace

• Passionate about the IT world and everything related to it ✌🏻
• Open‑source enthusiast 🦠

If you like my content or want to support my work, you can make a small donation. I would be grateful 🥹