Tutorial: Adding Bulma to Phoenix 1.6

Learning Resources Guides/Tuts/Tips/Info
, ,
1

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
2

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.
3
  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
4

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.

5

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
6

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
7

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

8

@kevinlang It looks like your tutorial is offline.
Any chance you could either:

  • Reactivate that website; or
  • Copy the text from it into the README.md on the Github Repo; or
  • Paste it here for others to use?

At the very least, what’s the format for importing it into CSS/SCSS/SASS? @import "bulma" doesn’t seem to work. Any hints?

Also, if you want someone to do some of the grunt work of adding the docs, updating the version to latest and re-releasing, I’m happy to take up the slack.

Thanks in advance.

9

@kevinlang The link to your tutorial seems to be stale. I get a timeout when trying to access it. Could you repost it somehow. Thanks

10

@CharlesIrvine

This link should work: https://kevinlang.me/bulma-phoenix-1-6/

1 Like