Skip to content

Commit 02884c0

Browse files
committed
Introduce 'Shepherd' Theme & Shift Rails UI to Tailwind CSS-First
This update is a breaking change that also introduces a new theme. I removed Bootstrap support and the very first theme "Retriever" for now. Effort will be made to translate that theme into Tailwind CSS in the near future. The change brings for a simplified take at building both themes and components that are integrated to your Rails application. Two custom color palettes "primary" and "secondary" are now configurable within the Rails UI configuration giving you more control over the theme without needing to find and replace classes.
1 parent 7634f87 commit 02884c0

797 files changed

Lines changed: 29547 additions & 22599 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

README.md

Lines changed: 39 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,26 @@ With Rails UI, you can easily bring professional-grade design to your Ruby on Ra
1919

2020
## Installation
2121

22-
Before installing the gem, ensure both your node and [yarn](https://yarnpkg.com/) versions are up to date for best results. Using something like [nvm](https://github.com/nvm-sh/nvm) helps with node versions. I like to use [homebrew](https://brew.sh/) for yarn and periodically run `brew upgrade yarn`.
22+
> [!IMPORTANT]
23+
> Rails UI is for fresh Rails installs. Adding it to your existing app _could_ work but we assume a blank slate.
24+
25+
At this time Rails UI does not support installation alongside something like Jumpstart Pro or Bulletrain which serve their own front-ends.
26+
27+
#### Create a new vanilla app
28+
29+
```
30+
rails new my_app
31+
```
32+
33+
- We recommend **not** configuring any front-end dependencies on the fly by passing options.
34+
35+
- Passing options like `--css`, `-c`, `--javascript`, `-j` are not necessary as the Rails UI installer takes care of this automatically.
2336

37+
- Other options are fair game such as tests, database type, etc...
38+
39+
**Pre-requisites**
40+
41+
Before installing the gem, ensure both your node and [yarn](https://yarnpkg.com/) versions are up to date for best results. Using something like [nvm](https://github.com/nvm-sh/nvm) helps with node versions. I like to use [homebrew](https://brew.sh/) for yarn and periodically run `brew upgrade yarn`.
2442

2543
```ruby
2644
# Gemfile
@@ -45,21 +63,23 @@ After installing Rails UI, run your server using the `bin/dev` command and proce
4563

4664
Use Rails UI for brand **new** Ruby on Rails applications for best results.
4765

48-
Configuration is a simple process that first prompts you for an application name and preferred CSS framework—following install of a CSS framework; you can choose a theme. Rails UI currently ships with support for Bootstrap and Tailwind CSS.
66+
Configuration is a simple process that first prompts you for an application name, support email, and theme. Rails UI currently ships with support for Tailwind CSS.
4967

5068
### Selecting a theme
5169

52-
After configuring your Rails UI install, you will see a series of themes. Choose your preferred theme and click "Save changes." Rails UI installs any assets, dependencies, and code related to the theme.
53-
54-
Note: The theme list will grow as Rails UI does.
70+
After configuring your Rails UI install, you will see a series of themes (more to come!). Choose your preferred theme and submit the form. Rails UI installs any assets, dependencies, and code related to the theme.
5571

5672
### Adding pages
5773

5874
Because we take a theme-first approach to design with Rails UI, you can install pre-designed one-off pages. **Pages are a work in progress**, and each theme will have multiple available for install.
5975

60-
## Design system
76+
## Integrated design system
77+
78+
After you configure Rails UI, you can preview the design system. There you will find a collection of components and best practices for real-world usage of your Rails UI theme.
6179

62-
After you configure Rails UI, you can preview the design system. There you will find a collection of components and best practices for real-world usage of your Rails UI theme. Use this as a guide to add a new design to your application, but please don't take it as gosple. Design is less rigid than programming and often needs a little tweaking as you go. My goal is to give you a hell of a good head start.
80+
Use this as a guide to add a new design to your application, but please don't take it as gosple.
81+
82+
Design is less rigid than programming and often needs a little tweaking as you go. My goal is to give you a hell of a good head start.
6383

6484
## Updates
6585

@@ -86,16 +106,16 @@ Installing Rails UI is a quick process that goes something like this:
86106
1. Install the gem
87107
2. Run the installer `rails railsui:install`
88108
3. Boot your server and load the Rails UI landing page and click "Configure app"
89-
4. Choose an application name, support email, and CSS framework ([Bootstrap](https://getbootstrap.com), [Tailwind](https://tailwindcss.com)) and save your changes.
90-
5. Choose a theme based on the previously chosen CSS framework
91-
6. Optionally install pre-designed pages bundled with your chosen theme.
92-
7. 🏄‍♀️ Done!
109+
4. Set a application name, support email and choose a theme.
110+
5. Optionally install pre-designed pages bundled with your chosen theme.
111+
6. 🏄‍♀️ Done!
93112

94113
### Dependencies included by default
95114

96115
#### Gems
97116

98117
We keep the gem list simple because Rails UI focuses less on core application logic.
118+
99119
- [inline_svg](https://github.com/jamesmartin/inline_svg)
100120
- [devise](https://github.com/heartcombo/devise)
101121
- [name_of_person](https://github.com/basecamp/name_of_person)
@@ -106,8 +126,6 @@ We keep the gem list simple because Rails UI focuses less on core application lo
106126

107127
For all Rails UI applications we leverage [heroicons](https://heroicons.com/). These icons cover a lot of basis and come in multiple variants which is useful for different design problems.
108128

109-
If you select Bootstrap as your CSS framework that comes with [Bootstrap Icons](https://icons.getbootstrap.com/) as an additional set of icons to leverage.
110-
111129
It's recommended to stick with one library of icons and one variant for better consistency.
112130

113131
### Installation detail
@@ -130,7 +148,7 @@ We added the `first_name` and `last_name` attributes for use with the handy [nam
130148

131149
Rails UI has some opinionated defaults when it comes to assets and JavaScript. Importmaps aren't our preference, so we use a custom approach.
132150

133-
[esbuild](https://esbuild.github.io/) is the default JavaScript build engine. Depending on your chosen CSS framework, we include those dependencies as well. Rails UI currently supports Bootstrap and Tailwind CSS.
151+
[esbuild](https://esbuild.github.io/) is the default JavaScript build engine. Depending on your chosen CSS framework, we include those dependencies as well. Rails UI currently supports Tailwind CSS.
134152

135153
#### Add ActiveStorage and ActionText support
136154

@@ -159,6 +177,8 @@ No. Well, kind of, but mostly this is a hybrid Rails engine not like other engin
159177

160178
**Rails UI is meant for brand new Rails applications.** You'll want to use it on the "first run" so you can establish the foundation for assets and design patterns early on. To use Rails UI you need to choose a theme (more themes coming soon) that will act as the basis for future design elements.
161179

180+
At this time Rails UI does not integrate directly with application templates like Jumpstart Pro or Bulletrain. Most templates come with some form of their own front-end and that leads to too many conflicts.
181+
162182
</details>
163183

164184
<details>
@@ -170,7 +190,7 @@ Once configured Rails UI will:
170190
- Install dependencies and any necessary assets.
171191
- 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.
172192
- Optionally install one-off templates (i.e. About us, Pricing, etc...). Use these as a starting point.
173-
- Install scaffold templates that follow the theme and CSS framework you chose.
193+
- Install scaffold templates that follow the theme you chose.
174194
- After installing the Rails UI gem and running the installer, you may configure your application preferences.
175195
</details>
176196

@@ -186,16 +206,15 @@ We're just hitting ground with Rails UI so expect to see additional components a
186206

187207
While we are kicking the tires with an alpha version of Rails UI it is free and clear to try out but not redistribute.
188208

189-
Our _evenutal_ license model will be a non-exclusive one in which essentially means you don't have permission to modify or share Rails UI but you can use it freely in your projects.
209+
Our _evenutal_ license model will be a non-exclusive one in which essentially means you don't have permission to modify or share Rails UI as your own product but you can use it freely in your projects.
210+
211+
Eventually, when the official premium version drops there will be a private space to access ongoing updates via git. New themes and more will be a part of that in an ongoing fashion.
190212

191-
Eventually, when the official first release drops, an ongoing subscription is required in order to ship new themes and updates in an ongoing fashion.
192213
</details>
193214

194215
## Updates
195216

196-
Rails UI ships as a gem. Future releases are available to clone/pull from a private git-hosted group of which you will have access to with an active subscription.
197-
198-
If you subscription lapses you can still use Rails UI but you lose access to ongoing updates and additional themes to choose from.
217+
Rails UI ships as a gem. Future releases are available to clone/pull from a private git-hosted group of which you will have access if you purchase the premium version.
199218

200219
## Become an early supporter ❤️
201220

0 commit comments

Comments
 (0)