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!
I personally like
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
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…
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’d be doing that today taking Buefy’s API as inspiration.
+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.
As far as I know, it works well with LiveView even when you start customizing Tailwind.
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.
Mike in his LiveView course is also using Tailwind.
Mike also has an excellent post on adding Tailwind to your Phoenix v1.4 or v1.5 project.
Tailwind’s “utility first” design has been a game changer for me. I’m no designer, but I find it amounts to an extremely powerful set of CSS conventions that have cut the amount of time I spend fiddling with CSS by 75% easy, while still allowing me to produce less “cookie cutter” UI. For me it occupies a perfect middle point between something like Milligram and Bulma. Personally I don’t think I would use Bootstrap in another project.
(In contrast, I’m not sure I’ve figured out the right way to use Alpine.js, for the reasons I laid out here. It makes certain things really easy, like handling modal close on click out, but any much more than that I want to reach for LV Hooks or Vue, both of which make it easier to keep JS cleanly abstracted. But I haven’t tried using it for CSS transitions, which I think is one of its main selling points).
I’m very happy with using Semantic-UI in combination with LiveView.
It’s really a breeze to add to a project and to customize.
Since it contains nearly no elements that require JavaScript to work, it is very easy to drive from within LiveView as well.
I am using Bulma.