What is the best CSS Framework to use with LiveView? Especially when it comes to things like modals, tooltips, responsive/adaptive designs, dismissable alerts, collapsible sidebars, accordions, drag-n-drop, carousels, etc. Thanks in advance!

[image] AndyL: 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, side…

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 co…

+1 on tailwind… used bulma in the past, guess it’s also pretty great..

This is great! I’ve been writing my own dropdown, sidebar, etc JS implementations from scratch, so AlpineJS is a welcome edition!

Also if you use Surface with LiveView there are a couple of Bulma components just released… http://surface-demo.msaraiva.io/uicomponents It is a WIP but you can see the source of the components and use that pattern to easily make more components. If I wasn’t mired in backend work past few weeks I…

+1 for Tailwind CSS It lets you easily create UIs that adapt to different screen sizes only using the provided classes. I rewrote from scratch some pages I had done with Bulma in less time than it took me to assemble and fine tune them with the Bulma components. And I am no frontend developper. A…

I have been running a Phoenix boilerplate generator for a few weeks and 80+% picks Tailwind and Alpine. (Now I have it preselected but didn’t from the start). Now Im considering skipping Bootstrap as an option just to make it easier for myself. https://fullstackphoenix.com/boilerplates/new

Elixir Programming Language Forum

Best CSS Framework for LiveView?

Questions & Help Questions

Sanjibukai July 15, 2020, 10:10am 16

Mike in his LiveView course is also using Tailwind.