Tutorial: Adding Bulma to Phoenix 1.6

Hey all,

With Phoenix 1.6 just around the corner, I figured I’d make a tutorial on how to add Bulma to a new Phoenix 1.6 project. By leveraging dart_sass and a new Bulma Hex package I created, I was able to do it without having to involve Node or NPM at all!

I know TailwindCSS is where it is at nowadays, but sometimes it is nice to use a CSS library with more ready-made component classes, especially for quick MVPs. :grinning_face_with_smiling_eyes:

I hope to make another tutorial for Bootstrap in the next coming days, and make a similar :bootstrap package to make it easy to install without needing Node or NPM.

Enjoy!

https://kevinlang.me/posts/bulma-phoenix-1-6/

5 Likes

Very nice tutorial @kevinlang.
A couple of questions.

  1. Is maintaining the bulma hex package manual? May be if there is a version sync with official bulma package - it might be useful.
  2. Thanks in advance for the bootstrap package as well. One question there as well. Does bootstrap javascript needs any special treatment for LiveView like alpinejs? GitHub - surface-ui/surface_bootstrap provides a technique. But, it is using Bootstrap Native and not all components are working at this moment.
  1. It is manual for now, but adding a simple script would be really easy. All it needs to do is get the tgz from NPM and copy over the bulma.scss file and scss/ folder. Plus, for better or for worse, Bulma updates pretty infrequently - there has only been 3 releases this past year.
  2. I haven’t thought about the JS part, that is a very good point. I think the solution would be to have a package.json in the root of the package for the JS part that can be traversed today by ESbuild when you import it in your app.js (this is how phoenix_html works for example) in addition to a root bootstrap.scss file.

With Bootstrap it is definitely tricky with LiveView, and probably beyond the scope of the package I was envisaging - which is to simply be an alternative way to getting assets without using npm. I’ll have to look over the SurfaceBootstrap library. From what I read here, it seems that even with the removal of the JS dependency from Bootstrap, it is still a bit of a hassle to make work with LiveView.

1 Like