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!
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? 
Popular in Guides/Tuts
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Enabling companies to succeed by building software people love.
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
- #javascript
- #code-sync
- #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
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance
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.
Real-time error tracking, performance insights, and observability for devs.
Practical resources that improve the lives of professional developers.
Producing high quality Elixir screencasts since 2017.
Enabling companies to succeed by building software people love.
Courses that'll move you from confusion to "Aha, now I get it!"