How to Inline CSS Styles in Email Mailers Using premailer-rails
Did you know you can inline CSS in Ruby on Rail's mailers using the premailer-rails gem? You just need to drop it in & it'll just work! You can also use postcss-css-variables to calculate the value of CSS Variables, so they'll fallback perfectly in older email clients such as Outlook. # Sources ➡ postcss-css-variables: https://github.com/MadLittleMods/postcss-css-variables ➡ premailer-rails: https://github.com/fphilipe/premailer-rails ➡ Source Code: https://github.com/MikeRogers0-YouTube/premailer-rails-demo # Chapters 0:00 - What are we going to do? 0:10 - Expedited WAF 0:35 - Why Inline CSS Styles? 1:18 - What is the current mailer setup 2:20 - Adding premailer-rails 3:19 - Using postcss-css-variables for CSS Variables 5:15 - Easy plain text emails 5:51 - Thank You # Episode Sponsor Today episode was sponsored by https://elements.heroku.com/addons/expeditedwaf # Follow Me Online ➡ Blog: https://mikerogers.io/ ➡ Twitter: https://twitter.com/MikeRogers0 ➡ GitHub: https://github.com/mikerogers0 ➡ YouTube: https://www.youtube.com/c/MikeRogers0 ➡ BuyMeACoffee: https://www.buymeacoffee.com/MikeRogers0 ➡ Dev.to: https://dev.to/mikerogers0 #RubyOnRails #EmailMailers #AwesomeRubyGems
Did you know you can inline CSS in Ruby on Rail's mailers using the premailer-rails gem? You just need to drop it in & it'll just work! You can also use postcss-css-variables to calculate the value of CSS Variables, so they'll fallback perfectly in older email clients such as Outlook. # Sources ➡ postcss-css-variables: https://github.com/MadLittleMods/postcss-css-variables ➡ premailer-rails: https://github.com/fphilipe/premailer-rails ➡ Source Code: https://github.com/MikeRogers0-YouTube/premailer-rails-demo # Chapters 0:00 - What are we going to do? 0:10 - Expedited WAF 0:35 - Why Inline CSS Styles? 1:18 - What is the current mailer setup 2:20 - Adding premailer-rails 3:19 - Using postcss-css-variables for CSS Variables 5:15 - Easy plain text emails 5:51 - Thank You # Episode Sponsor Today episode was sponsored by https://elements.heroku.com/addons/expeditedwaf # Follow Me Online ➡ Blog: https://mikerogers.io/ ➡ Twitter: https://twitter.com/MikeRogers0 ➡ GitHub: https://github.com/mikerogers0 ➡ YouTube: https://www.youtube.com/c/MikeRogers0 ➡ BuyMeACoffee: https://www.buymeacoffee.com/MikeRogers0 ➡ Dev.to: https://dev.to/mikerogers0 #RubyOnRails #EmailMailers #AwesomeRubyGems