We use cookies on this site to enhance your user experience

By clicking the Accept button, you agree to us doing so. More info on our cookie policy

Bulma Blade UI

Published: Feb 13, 2021 by C.S. Rhymes

I would like to introduce a new Laravel package I have been working on for a little while called Bulma Blade UI. It offers a set of reusable Blade components with the Bulma html structure and CSS classes, as well as basic authentication views for use with Laravel Fortify, ready to go with minimal setup.

Bulma Blade UI

A bit of personal history

I’ll admit it, it took me a long time to get my head around the benefits of using Blade components when they were introduced. I was so used to writing lots of html and using Blade includes when I needed to. If I didn’t write all of the html every time it felt like I was cheating and not being a true developer.

The syntax was also a bit strange to me, with the <x-component></x-component> style tags compared to the standard Blade style tags, such as @include().

Seeing is believing

But I recently saw how a co-worker had used components in their project and it made the view so much cleaner and readable by using components. Instead of massive chunks of repeating html, there was a single line for a component.

Before

<div class="field">
    <label class="label" for="username">Username</label>
    <div class="control">
        <input id="username" name="username" type="text" class="input " value="myusername">
    </div>
</div>

After

<x-bbui::input label="Username" name="username" value="myusername"></x-bbui::input>

I owe a big thank you to my colleague for this wake up call!

I could now see the potential for how components could drastically increase my productivity, by writing less, as well as making views much leaner and easier to read.

Bulma Blade UI

Tailwind is a massively popular frontend framework and there is an excellent component package called Blade UI Kit. I have nothing bad to say against Tailwind and I can see why so many developers love using it, but I personally prefer to use Bulma.

I searched for “Bulma Fortify” and found there were a few packages that offered authentication views for Bulma and Laravel, but there didn’t seem to be a package that contained reusable Bulma components. Initially I was just going to create form input components, but then I thought it would be useful to add some additional components too, such as cards, messages and notifications.

Once I had all of these components I then used them to build some Laravel authentication views in the package too.

Initial release

I have now released the Laravel package on GitHub as an alpha release. It has a set of unit tests and I have tested it myself in a new project but now I am looking for other developers to try out the package and give some feedback and raise any issues they have with the package.

If you are a developer that uses Bulma and Laravel then I would appreciate your feedback and let me know how it can be improved!

laravel components bulma

Latest Posts

Five book blurb writing observations
Five book blurb writing observations

Amazon KDP gives you a basic text editor for your book’s blurb, but here are five observations that I have made from researching other books. All of the examples are taken from Mystery books in the Amazon UK store.

Creating a Kindle formatted book from Google Docs
Creating a Kindle formatted book from Google Docs

I have seen a few posts on Threads recently asking what software people use to format their books. This is one option out of many, but I thought I would share my current workflow to give authors an insight into the pros and cons.

Hosting a Laravel app with AWS Beanstalk
Hosting a Laravel app with AWS Beanstalk

There are lots of possible hosting solutions available for Laravel, from Forge, to Vapor to the new Laravel Cloud. I’ll start out by saying that these other solutions are much easier to get up and running than beanstalk, but I thought I’d share some of the “fun” I had getting it up and running.

How NOT to make a website

Unlooked for Tales - a collection of short stories

By C.S. Rhymes

Free on Apple Books and Google Play Books

Nigel's Intranet Adventure

Nigel's Intranet Adventure

By C.S. Rhymes

From £0.99 or read for free on Kindle Unlimited!