kevinlang
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. 
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!
First Post!
cvkmohan
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.
- 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 · GitHub provides a technique. But, it is using Bootstrap Native and not all components are working at this moment.
Most Liked
kevinlang
- It is manual for now, but adding a simple script would be really easy. All it needs to do is get the
tgzfrom NPM and copy over thebulma.scssfile andscss/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.jsonin the root of the package for the JS part that can be traversed today by ESbuild when you import it in yourapp.js(this is howphoenix_htmlworks for example) in addition to a rootbootstrap.scssfile.
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.
henriquefernandez
When you import bulma using this package, you are importing this file: https://github.com/kevinlang/bulma-elixir/blob/master/bulma.sass
So if you want to use this specific sass file, you should do:
@import "sass/utilities/_all"
And not import bulma
03juan
I’ll try that out tomorrow, obrigado Henrique.
What happens if another package in the path also has the same folder structure? 
Last Post!
kevinlang
Popular in Guides/Tuts
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
We build reliable cloud platforms for business-critical systems.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #elixirconf-us
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #metaprogramming
- #security
- #hex
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking, logs, uptime, and Just Enough APM. Built for developers.
Develop your skills with books, videos, and courses.
Enabling companies to succeed by building software people love.
The deployment platform built for Elixir: PaaS ease, VPS control.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"