Best CSS Framework for LiveView?

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!

1 Like

I personally like

TailwindCSS + Animate.css + AlpineJS

12 Likes

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

1 Like

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

Its all good

6 Likes

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

4 Likes

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

29 Likes

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

4 Likes

+1 on tailwind…

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

2 Likes

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

2 Likes

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.

4 Likes

+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.

https://fullstackphoenix.com/boilerplates/new

6 Likes

Mike in his LiveView course is also using Tailwind.

3 Likes

Mike also has an excellent post on adding Tailwind to your Phoenix v1.4 or v1.5 project.

6 Likes

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).

3 Likes

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.