kevinlang

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. :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/

Most Liked

kevinlang

kevinlang

  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.

henriquefernandez

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

03juan

I’ll try that out tomorrow, obrigado Henrique.

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

Where Next?

Popular in Guides/Tuts Top

wfgilman
I’m writing up this quick “How to” because what I thought was going to be an easy implementation of a Plug to validate a webhook request ...
New
ben-pr-p
https://github.com/ben-pr-p/elixir-phoenix-parcel-example Hey all! I put together a starter-pack / instructions to set up Phoenix with t...
New
njwest
Greetings: I just wrote a step-by-step guide on building a Phoenix 1.3 JWT Auth API with Guardian JWTs and Comeonin password hashing. I ...
New
anuragg
Hi everyone! I’m the founder of Render, a new cloud provider with native support for Elixir. When we launched Elixir support the most po...
New
kuon
I have a page with a large state that is loaded from DB, let’s call that “data”. I have a root live view that load “data” on mount and r...
New
alejandroErik
POST IN CONSTRUCTION Process for compile erlang otp 20 with odbc-unix for Oracle connections on Solaris 11.3 for 64 bits: Introductio...
New
AstonJ
..or as and when you can think of one :icon_cool: This thread my also be of interest: What took you way too long to figure out? :003:
New
niku
I write an article Parameterized testing with ExUnit.The key concept is using ExUnit.Case.register_test/4 such as ExUnit.start() defmod...
New
magnetic
Hey :waving_hand:t3: Elixir community, I’ve been learning Elixir, and working on some side projects. My editor of choice is VSCode, and ...
New
niku
I have published an elixir project with using Travis CI. I would like to share some tips & thoughts that I was getting through this ...
New

Other popular topics Top

Darmani72
If I have a post route which an argument: post /my_post_route/:my_param1, MyController.my_post_handler How would get the post params ...
New
skosch
To my knowledge, put_in, Map.update etc. all have the one limitation of not automatically creating intermediate keys when needed (for exa...
New
Patoshizzle
After calling mix ecto.create I get this error: 17:00:32.162 [error] GenServer #PID<0.412.0> terminating ** (Postgrex.Error) FATAL...
New
JeremM34
Hello, how can I check the Phoenix version ? Thanks !
New
AngeloChecked
What learn first? Rust or Elixir Hi Elixir community! I’m here because i want learn a new language. I’m a junior developer and mainly i ...
New
Emily
I have VueJS GUIs with the project generated using Webpack. I have Elixir modules that will need to be used by the VueJS GUIs. I forese...
New
shijith.k
I am trying to start a new phoenix project with elixir 1.9, but mix phx.new does not work. It says that ** (Mix) The task "phx.new" could...
New
axelson
This post is a wiki (feel free to hit the edit button near the bottom right of this post to add your own changes!) This post collects co...
239 47930 226
New
openscript
Hello! Sorry for this astonishing simple question, but I’m really stuck. I try to set up the intellij-elixir plugin, but I don’t know ho...
New
lanycrost
Hi everyone! I need implement if…else if…else condition from my elixir code, and anymore of this control flow structures not work proper...
New

We're in Beta

About us Mission Statement