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!
Where Next?
Trending in Questions
Other Trending Topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Practical resources that improve the lives of professional developers.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #library
- #deployment
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #elixirconf
- #channels
- #exunit
- #code-sync
- #discussion
- #podcasts
- #javascript
- #onsite
- #dialyzer
- #docker
- #authentication
- #ai
- #umbrella
- #full-time-contract
- #elixirconf-us
- #podcasts-by-brainlid
- #blog-post
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #graphql
- #genstage
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #elixirconf-eu
- #processes
- #security
- #api
- #forms
- #performance
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Elixir, Erlang & BEAM conferences from Code Sync. Next: ElixirConf EU 2027
Bringing learning, work and compliance together since 1987.
**Building the future of software with AI, trust, and human connection.**
The deployment platform built for Elixir: PaaS ease, VPS control.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"
Showing Posts 1 to 10- Show Best Posts
- Show All (oldest first)
- Show All (newest first)
praveenperera
I personally like
TailwindCSS + Animate.css + AlpineJS
Exadra37
Any CSS framework you like to use with plain HTML. Doesn’t really make any difference what one you choose.
Exadra37
I would be careful with using JS frameworks in conjunction with LiveView, because they may end-up “fighting” for the dom.
praveenperera
Its all good
https://github.com/phoenixframework/phoenix_live_view/issues/809#issuecomment-637671803
AndyL
Bootstrap uses JS for modals and tooltips (among other things). I’m not sure if this works well with LiveView.
Exadra37
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.
wanton7
Bulma is good for many things because it doesn’t use any JavaScript. https://bulma.io
praveenperera
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
trarbr
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
outlog
+1 on tailwind…
used bulma in the past, guess it’s also pretty great..