Let's Build with Hotwire and Rails - Turbo Modals

Welcome to a brand new "Let's Build" tutorial series where I use Rails in the combination of hotwired.dev (https://hotwired.dev) to create components with little to no JavaScript.

If you're brand new to Turbo, I recommend reading another post titled "Digging into Turbo with Ruby on Rails 7", where I cover what it is and how it works.

In this tutorial, we'll add modals to a basic Rails application with the help of Turbo.

👉 Continue reading the written guide here: https://web-crunch.com/posts/hotwire-rails-turbo-modals

======

Bookmarks 00:00 - Introductions 01:54 - Demo walkthrough 04:00 - Create a new app 05:14 - Adding dependencies 06:08 - Add Post scaffold 06:50 - Set root route 07:40 - Boot server for the first time 08:12 - Adjust application layout design 10:23 - Turbofied views 16:06 - Designing the modal form 18:52 - Add plugins to Tailwind configuration 19:29 - First trial run of a modal 21:23 - Add custom animations with Tailwind

======

Hi, I am Andy Leverenz, and I am a product designer and developer. For fun, I design, code, and write. Check out my blog, Web-Crunch https://web-crunch.com, where I publish design and development tutorials with the occasional vlog.

♥️ Check out my new project Rails UI https://railsui.com

♥️ Sponsor me on GitHub https://github.com/sponsors/justalever

☕️ Keep me awake. Buy me a coffee https://www.buymeacoffee.com/webcrunch

📰 One-Click Subscribe: https://www.youtube.com/user/webcrunchblog?sub_confirmation=1

💻 Previously published at: https://web-crunch.com/posts/how-to-use-details-and-summary-tags

💎Ruby on Rails Course: HELLO RAILS https://hellorails.io

💻 Check out the blog: https://web-crunch.com

🦄 Check out my personal site: https://justalever.com

🚀 Links: Weekly Newsletter: https://digest.web-crunch.com/ Twitter: https://twitter.com/webcrunchblog Github: https://github.com/justalever

📘Check out my book on UX Design: "LUXD: Learn User Experience Design" https://web-crunch.com/products/luxd

📙 Check out my FREE book on Tumblr Theming: "Pro Tumblr Theming" https://web-crunch.com/products/ptt ... https://www.youtube.com/watch?v=J5oTwF6Tm2c