Best CSS Framework for LiveView?

AndyL

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!

25 comments

/phoenix #css #liveview

1 9255 25

2021-05-31 19:43:09 UTC

Showing Posts 25 to 16

Show Best Posts
Show All (oldest first)
Show All (newest first)

jrrrome

I used to use Bulma as well. It was hard to believe when people told me I could build an entire site without touching css using Tailwind, but it’s absolutely true. Amazing project.

Post #26

hubertlepicki

Yes, but when making this choice you have to look into the question “is it going to work well with my JS/nojs/backend thing”.

When it comes to “best CSS framework” for LiveViews, I will re-iterate what the others said above: the ones that do not require or rely on JavaScript at all will be probably “best”. The same when you choose CSS framework for say Angular, and the CSS you chose has nice modals but only with jQuery support, you should expect some extra work to be done, or some extra figuring out how to do the same thing jQuery bindings do on your own. Same with LiveView. Pure CSS framework with no requirement for JavaScript to get full funcionality would be my preference.

Post #25

unsek

What’s the best CSS framework for React? Vue? That’s a difficult question to answer and frankly doesn’t really ask anything, because CSS frameworks aren’t gauged by that metric. Instead they’re evaluated based on the job you’re trying to accomplish. That’s the whole shtick with frameworks.

Post #24

andreaseriksson

Yes, I am working on Guardian (for api) and Pow is also coming.

Post #23

mahaqmi

just found out about it. And it’s amazing. Can you do with pow/guardian. As a noob, I have a problem using phx_gen_auth for rest api (without html). Pow have a specific guide to use with API when I was exploring the library

Post #22

bigbassroller

Is there anything that Bootstrap is missing from Tailwind?

I’ve been using Bootstrap for eight years and have become very fluent in using as a utility CSS framework, like practitioners of Tailwind.

The only thing that seems missing is the quality of components in TailwindUI and mindshare.

I would use TailwindUI but it has a license that prohibits using them in your own website builder application. Ive been working towards making one my whole career, so not using TailwindUI unless its to copy them into Bootstrap components, so I can use in my website builder application.

Post #21

kamranhossain

I am using Bulma.

Post #20

Qqwy

TypeCheck Core Team

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.

Post #19

tfwright

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

Post #18