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