Stateless Code | Fix Devise Views to Work with Tailwind and Turbo @StatelessCode | Uploaded November 2022 | Updated October 2024, 4 hours ago.
The default Devise views are beyond hideous with the out-of-the-box configuration of Tailwind. Our goal in this video isn't to get the views to a state of pixel perfect, but merely to iterate and make them minimally viable.
The easiest and most impactful improvement is to simply nest the Devise views within a div tag. This solves most of the positioning problems.
After that we add in some basic button and link styling. It quickly becomes evident that there will be a lot of repeated classes if we just copy-and-paste all of these Tailwind classes into every element. In our statelesscode.com series, we made the mistake of prematurely using Tailwind directives.
Ruby on Rails allows us a middle ground that gets all of the particular Tailwind classes we need into our HTML output, without needing to constantly rebuild our application. With the use of Rails helpers, we can get all the atomic level Tailwind classes we need into our HTML output (so they can be manipulate by Stimulus if needed) while allowing us to refactor out repeated classes.
We also modify the "Cancel my account" button markup to use the correct pattern for Turbo so that a user doesn't accidentally misclick and delete their account.
This video covers:
00:00:12 Introduction
00:03:06 Paste page source body into Tailwind Play and fix visual structure of sessions/new by enclosing in a div tag
00:06:17 Iterate on styling of content on sessions/new page
00:10:54 Apply style to first visible link in links partial
00:13:12 Refactor repeated link classes into helper methods using test-driven development and apply to the other Devise views
00:36:14 Add tw_ to the beginning of the helper methods
00:37:39 Move Tailwind helpers into separate files and namespace. (Needed to restart dev server for it to take effect)
00:39:19 Modify Cancel my account button to work with Turbo
00:43:21 Add button variant for cancel button
00:47:59 Apply cancel button variant and link styles to remaining pages
00:50:22 Add alert button variant for Cancel my account action and apply to view
00:54:28 Run RuboCop, fix offenses, and add exception for output safety to join_classes method
00:58:50 Commit, push, update project
#ruby #rails7 #rails #rubyonrails #rubygems #codecast #screencast #github #opensource #minitest #TDD #agile #NerdDice #DnD #roleplaying #softwaredevelopment #learntocode #tailwind #postgresql #rubocop #devise #turbo #controllers #views
See other related StatelessCode videos:
- Getting Started with Rails 7 11: Use a Scaffold Generator to Quickly Produce a Resource youtu.be/fKr2UqYUrDk
- StatelessCode.com WordPress series youtube.com/playlist?list=PL9kkbu1kLUeP-gmlEjJQKrFXZu2TdSEek
This video is CC0 - No rights reserved. (YouTube doesn't allow this option when publishing.) All code is released under the UNLICENSE. Stateless Code denies the concept of "intellectual property". Copying is not stealing.
The default Devise views are beyond hideous with the out-of-the-box configuration of Tailwind. Our goal in this video isn't to get the views to a state of pixel perfect, but merely to iterate and make them minimally viable.
The easiest and most impactful improvement is to simply nest the Devise views within a div tag. This solves most of the positioning problems.
After that we add in some basic button and link styling. It quickly becomes evident that there will be a lot of repeated classes if we just copy-and-paste all of these Tailwind classes into every element. In our statelesscode.com series, we made the mistake of prematurely using Tailwind directives.
Ruby on Rails allows us a middle ground that gets all of the particular Tailwind classes we need into our HTML output, without needing to constantly rebuild our application. With the use of Rails helpers, we can get all the atomic level Tailwind classes we need into our HTML output (so they can be manipulate by Stimulus if needed) while allowing us to refactor out repeated classes.
We also modify the "Cancel my account" button markup to use the correct pattern for Turbo so that a user doesn't accidentally misclick and delete their account.
This video covers:
00:00:12 Introduction
00:03:06 Paste page source body into Tailwind Play and fix visual structure of sessions/new by enclosing in a div tag
00:06:17 Iterate on styling of content on sessions/new page
00:10:54 Apply style to first visible link in links partial
00:13:12 Refactor repeated link classes into helper methods using test-driven development and apply to the other Devise views
00:36:14 Add tw_ to the beginning of the helper methods
00:37:39 Move Tailwind helpers into separate files and namespace. (Needed to restart dev server for it to take effect)
00:39:19 Modify Cancel my account button to work with Turbo
00:43:21 Add button variant for cancel button
00:47:59 Apply cancel button variant and link styles to remaining pages
00:50:22 Add alert button variant for Cancel my account action and apply to view
00:54:28 Run RuboCop, fix offenses, and add exception for output safety to join_classes method
00:58:50 Commit, push, update project
#ruby #rails7 #rails #rubyonrails #rubygems #codecast #screencast #github #opensource #minitest #TDD #agile #NerdDice #DnD #roleplaying #softwaredevelopment #learntocode #tailwind #postgresql #rubocop #devise #turbo #controllers #views
See other related StatelessCode videos:
- Getting Started with Rails 7 11: Use a Scaffold Generator to Quickly Produce a Resource youtu.be/fKr2UqYUrDk
- StatelessCode.com WordPress series youtube.com/playlist?list=PL9kkbu1kLUeP-gmlEjJQKrFXZu2TdSEek
This video is CC0 - No rights reserved. (YouTube doesn't allow this option when publishing.) All code is released under the UNLICENSE. Stateless Code denies the concept of "intellectual property". Copying is not stealing.
