Refreshing Shipyrd with Bulma

Simple.css was a great way to start building Shipyrd, it kept the focus on the product. The Simple.css framework gives you barely enough CSS to create something clean and functional with traditional semantic HTML markup. There's no build pipeline, config files, packaging, extensions, etc. It's just simple styling applied to your various standard HTML tags. For example, here's what links, buttons, and article tags look like out of the box for you. Clean, simple, and we can build from there.

For the very first version of Shipyrd, I utilized Simple.css and then a very basic 63-line file of CSS. Within that CSS file, it's setting some of the colors and tweaking the color of the button text, that's it. And with that, it got me to this very rough first version of Shipyrd. While it's not going to win any design awards, it's fairly easy to bring a concept to life and be quickly usable.

This is essentially an <article> tag, with a <kbd>(production/staging) tag, a progress bar, and then a button. I loved the simplicity and it forces you to pick the right HTML, the majority of the time. The button in the example is an <aside> tag, meaning that it contains content that's related to the article or essentially a sidebar. With most CSS frameworks, this ends up being something like a nested set of flex boxes or columns with some additional alignment classes being applied, instead with Simple.css it was as simple as:

<article>
  <aside>
    <button>Compare changes</button>
  </aside>
</article>

But then, as Shipyrd grew, I wanted to add an additional context menu next to each destination. Which I could have shoved next to the existing button, but Shipyrd had taken shape as a product, and it was time to pick up a new tool. Enter Bulma.

Bulma is the next logical step in my mind before picking up Tailwind or even Bootstrap. Sure, there are other options but you can still run without a build process, and you can even customize and export your theme directly from the docs site. The upgrade in your HTML markup is also fairly straightforward and there are some simple concepts around the class naming. The columns also work like columns. Here's the PR if you're interested in what the upgrade process looked like.

With the upgrade in place, you can see we now have the additional context menu for each destination along with some other additions. Most of the core concepts and layout are still there, which actually go all the way back to the Balsamiq mockups.

If you're using Kamal and haven't had a chance to check out Shipyrd, I'd love your feedback. You can self-host Shipyrd as an accessory with Kamal(it's open source) or if you don't want to deal with hosting it there's now a hosted version of Shipyrd available.