Style Permutations Screenshot Kit for Rails Apps

Make 2023 the year you add dark mode to your Rails app. Or add user-controlled color choices. Or add another funky theming option for some power users.

The secret sauce? A way to spit out screenshots of every style permutation for quick inspection. And a way to get into an interactive console to swap colors and switch to dark mode at a single command.

Imagine how slick you'd feel with such a setup!

--

In this package, you get a few files to customize a Bullet Train-based Rails app with these screenshot-ing and theming abilities.

Set it up in a brand new Bullet Train app (honestly a few minutes to set up), see how everything's cooked up, and take out the parts you need for your own Rails app. 💥💥💥

Say you charge $100/hour. This app will pay itself in .79 hours of work. That's less than 79 minutes of work (including padding of estimates). Even 10x engineers will save money with this done-for-you code bundle.

Imagine how spiffy your app will be with additional style choices. Imagine how good it'll feel to know that all your styles combinations are solid. No rock left unturned. No permutation left unscrutinized. Imagine what your app users will say when they unlocked that special theme you created. Instant "purple cow". Viral with word-of-mouth.

--

You get:

• A README with instructions on how to upgrade a Bullet Trains app with the code in the package's files. You'll be able to demo the setup in a few minutes.
• A rake task called theme:screenshot_permutations that runs a system test with SCREENSHOT_THEME=1 (otherwise the test is normally skipped).
• A way to set your own theme permutations. By default we change from light and dark mode, mobile and desktop, blue and purple primary colors, and top and left navigation.
• Instructions on storing theme settings in the Membership model.
• Handy helpers to interactively change the theme in a headful, interactive browser window with a pry/magictest console. Helpers like theme_to({ color: :purple }) or toggle_dark_mode or hide_scrollbars.
• A templated way to program navigating inside your app, fill forms, toggle stuff, and 📸snap📸, take a screenshot of that for future inspection in every permutation (it uses Capybara to orchestrate what happens inside the browser).
• Pre-configured file names for each permutation and an easy way to update the theme.
• That feeling of Omakase for those of us of that persuasion.

--

Screenshots, you ask?

Here's a sampler, 6 of the 16 permutations generated from the demo. Imagine all the permutations you could create!

desktop-dashboard-dark-menu-top-blue.png

--

desktop-dashboard-dark-menu-left-purple.png

--

desktop-dashboard-light-menu-left-blue.png

--

desktop-dashboard-light-menu-top-purple.png

--

mobile-dashboard-dark-menu-top-purple.png

--

mobile-dashboard-light-menu-left-blue.png

--

Files included:

README.md
app/controllers/account/application_controller.rb
lib/tasks/theme_tasks.rake
test/system/theme_test.rb
tailwind.config.js
LICENSE

--

FAQ:

Is this a gem I can just install?

Sorry, not a gem. It's files to plug into a Bullet Train Rails app so you can see how everything is hooked up, so you can learn the trick and do it in your own app.

Bullet Train is a starter app that's free and open-source, right?

Yes. No need to pay for the Bullet Train part. Bullet Train is an open-source project, made by Andrew Culver. Disclaimer: I've been contracting for Andrew to work on the project.

I read somewhere that you were creating a drop-in theme for Bullet Train, and this was an offshoot of that project. Is that the story?

You're exactly right. They say it's never the product, it's what you built to create the product that people buy. We'll see! If you'd like an alternative, drop-in replacement for Bullet Train's default theme, check out the Transmission Theme (full of style permutations, of course), coming out very soon.