Configuration
After installing Rails UI and running the installer, you can proceed to configure your install.
Configuration is a simple process that first prompts you for an application name, support email and chosen theme based off Tailwind CSS.
Enter general details, select a template, change brand colors(optional), and install any pages you want (optional). You'll then be off to the races!
What happens during installation?
When you run the Rails UI installer and theme installer generators the following happens:
- Generate a custom configuration yaml file
railsui.yml
that's required to theme your new app.
- Install dependencies and any necessary assets.
- Generate a custom tailored design system for repeatable web elements. Think of this as a system for providing design direction when creating new features. This includes typography, font elements, and SVG icons.
- Optionally install one-off templates (i.e. About us, Pricing, etc...). Use these as a starting point.
Select a template
Each template includes a preview to get a feel for the design and layout.
When installed it packs a punch and comes with components, pages, mailers, and custom color schemes by default. You can customize it at any time since it's integrated inside your app.
Templates are based on real-world use cases and niches. We source most ideas from the SaaS (software as a service) space given that Ruby on Rails is a great framework to leverage for that use case.
We'll add more templates as time goes on to grow Rails UI into a larger library.
The free version of Rails UI will have only free templates. If you sign up for a premium subscription you'll get access to all templates and components within the Rails UI library going forward.
Brand colors
Every template comes with brand colors by default. We make use of a primary and secondary palette in addition to the Tailwind CSS default color library. This is handy because setting colors in one place makes any template quickly adapt to your brand colors. There's no need to go find and replace Tailwind CSS utility classes to compensate.
At any time you can modify the primary and secondary color palettes using the color pickers in the configuration form. We recommend leveraging a tool to help with the different shades and tints you may need. Try this tool for help.
Pages
Each template ships with support for 20+ pages. This number will rise as time presses on and templates mature.
Installing pages
Every page is opt-in, meaning you can add any variation as necessary, including all at once.
Installing a page is a breeze. Simply toggle the switch to the on position, save the form, and your app will reboot with the new page added to app/views/page
. We've even included some placeholder routing for easier previewing, giving you full control over the installation process.
Installed pages end up in a folder called page
inside app/views/page
. There, you can copy the template for your viewing as necessary. It won't be overwritten if the template remains inside the app/views/page
directory.
Deleting pages
Deleting a page is as easy as 1-2-3. Whether you prefer the Rails UI configuration form or within your code, click the trash can button next to the page you want to remove. Your app will reboot once it's done.
Customizing pages
Pages installed to app/views/page
may be customized at any time. Because these are mostly static pages, we assume you will likely customize them. We recommend creating new views for this purpose. You can refer to the generated page code and copy and paste it elsewhere.
Keep in mind, as long as the page template remains inside the app/views/page
directory, it won't be overwritten. This is also true for future updates to Rails UI, where some pages might be changed.