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.
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.
Very nice tutorial @kevinlang.
A couple of questions.
Is maintaining the bulma hex package manual? May be if there is a version sync with official bulma package - it might be useful.
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.
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.
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: