Instructions for using Bulma with Phoenix 1.7?

Phoenix Forum Questions / Help
,
1

I would like to use Bulma with Phoenix 1.7. I tried to follow the directions here, but those directions seem seriously out-of-date.

Right now, it seems that the Bulma class definitions aren’t being found since the rendered html has no styling at all.

Can someone provide a pointer or two to get me going?

2 Likes
2

I recently did that. Not sure if this will be helpful for you but I can send you the commit that made it happen

I did install dart-sass btw. Let me know if it helps or you have any questions, I can write in detail once I’m back home. I intend to start a new project with Phoenix 1.7 tomorrow any way so I might as well document it too.

1 Like
3

Thanks a lot for sharing. I took a very brief look just now. There is a little more to it than I thought. I’ll dig in later. Plus, I don’t know if I want to get rid of Tailwind; I just wanted to add Bulma. I don’t know. I might not be making sense. I have good Elixir experience, but I’m new to Phoenix/LiveView/Tailwind. And I’m mostly clueless about sass. Thanks, again.

4

Wow. I just took a look at your Covid App. Very inspiring!

1 Like
5

Thank you :slight_smile: … The main branch is incomplete (and hopefully WIP)… the ClojureScript and Tailwind branches work but the data processing is slow. I intend to update this as soon as my hand heals from the injury I had last month.

6

Interesting. I guess if you want both to coexist then you could check if looking into the green highlights and not the deletes help in some way. I’ll be definitely interested to know how it goes.

7

Did you get Bulma integrated into 1.7? If so, would you mind sharing notes on what you did? Thanks

1 Like
8

Yes I did. The commit I touches that very roughly. I will convert it into a basic blog post or something and share here. I think I saw another post here today on this topic

I’ll jot something down here in an hour or two (right now, I am outside and that commit is the only note I have readily shareable)

Also I see the new Phoenix version (1.7.2) has an option to opt out of tailwind. This should have less work to update Bulma, and the 1.6 articles would be more applicable, right?

9

Nice! Building Bulma locally gets you a lot of customization options. The one part that still missing would be translating the ‘core_components.ex’ file into Bulma. It does seem like a lot of work though.

1 Like
10

I was just trying to do this during the weekend, gave up for now. I think it will require doing it the hard way first to understand the pain points and abstraction opportunities and then attempting it.