Best CSS Framework for LiveView?

I personally like

TailwindCSS + Animate.css + AlpineJS

Any CSS framework you like to use with plain HTML. Doesn’t really make any difference what one you choose.

I would be careful with using JS frameworks in conjunction with LiveView, because they may end-up “fighting” for the dom.

Its all good

https://github.com/phoenixframework/phoenix_live_view/issues/809#issuecomment-637671803

Bootstrap uses JS for modals and tooltips (among other things). I’m not sure if this works well with LiveView.

Bootstrap can be used without the JS part. I have used it many times without including JS, because I hate to use JS for stuff I can do with pure css.

Bulma is good for many things because it doesn’t use any JavaScript. https://bulma.io

Let me clarify how I use them

TailwindCSS - general CSS utility framework, used for styling

Animate.CSS - to do simple fade-in/fade-out for content that’s controlled by LiveView (just to make it less jarring)

AlpineJS - For simple interactions not involving data (ex: dropdowns, drawer menus, sidebar menu)

LiveView - Any interactions involving data

I have only been playing with it in side-projects, but this would be my approach as well: TailwindCSS + AlpineJS.

Caleb, the creator of AlpineJS, created it specifically for use with LiveWire, which is a LiveView “clone” for PHP. According to Caleb, AlpineJS and LiveWire “just works” with no DOM conflicts - and as of 0.13.3, LiveView should be 100% compatible with AlpineJS. (For more details, see the issue linked by @praveenperera

+1 on tailwind…

used bulma in the past, guess it’s also pretty great..