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/

9 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

Hi @kevinlang . Thanks for the tutorial and packages. I have a problem where @import "bulma"; works fine but if I try to customise my bulma payload to only load specific assets, such as @import "bulma/sass/utilities/_all.sass"; I see this error in the logs:

Error: Can't find stylesheet to import.
  ╷
5 │ @import "bulma/sass/utilities/_all.sass";
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  css/app.scss 5:9  root stylesheet

Any idea what’s going on here? I checked my code against your repo and everything seems fine.

When you import bulma using this package, you are importing this file: bulma-elixir/bulma.sass at master · kevinlang/bulma-elixir · GitHub

So if you want to use this specific sass file, you should do:

@import "sass/utilities/_all"

And not import bulma

1 Like

I’ll try that out tomorrow, obrigado Henrique.

What happens if another package in the path also has the same folder structure? :thinking:

1 Like

I think that if we put import "./sass" with the “./”, it will search in the relative path, otherwise we get an error.