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
Build Elixir applications with speed and confidence.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #blog-post
- #phoenix_html
- #ai
- #iex
- #graphql
- #elixirconf-us
- #genstage
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #hex
- #security
- #metaprogramming
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.
Error tracking, logs, uptime, and Just Enough APM. Built for developers.
Bringing learning, work and compliance together since 1987.
Producing high quality Elixir screencasts since 2017.
Enabling companies to succeed by building software people love.
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..