You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
Copy file name to clipboardExpand all lines: README.md
+39-20Lines changed: 39 additions & 20 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -19,8 +19,26 @@ With Rails UI, you can easily bring professional-grade design to your Ruby on Ra
19
19
20
20
## Installation
21
21
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.
23
36
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`.
24
42
25
43
```ruby
26
44
# Gemfile
@@ -45,21 +63,23 @@ After installing Rails UI, run your server using the `bin/dev` command and proce
45
63
46
64
Use Rails UI for brand **new** Ruby on Rails applications for best results.
47
65
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.
49
67
50
68
### Selecting a theme
51
69
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.
55
71
56
72
### Adding pages
57
73
58
74
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.
59
75
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.
61
79
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.
63
83
64
84
## Updates
65
85
@@ -86,16 +106,16 @@ Installing Rails UI is a quick process that goes something like this:
86
106
1. Install the gem
87
107
2. Run the installer `rails railsui:install`
88
108
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!
93
112
94
113
### Dependencies included by default
95
114
96
115
#### Gems
97
116
98
117
We keep the gem list simple because Rails UI focuses less on core application logic.
@@ -106,8 +126,6 @@ We keep the gem list simple because Rails UI focuses less on core application lo
106
126
107
127
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.
108
128
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
-
111
129
It's recommended to stick with one library of icons and one variant for better consistency.
112
130
113
131
### Installation detail
@@ -130,7 +148,7 @@ We added the `first_name` and `last_name` attributes for use with the handy [nam
130
148
131
149
Rails UI has some opinionated defaults when it comes to assets and JavaScript. Importmaps aren't our preference, so we use a custom approach.
132
150
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.
134
152
135
153
#### Add ActiveStorage and ActionText support
136
154
@@ -159,6 +177,8 @@ No. Well, kind of, but mostly this is a hybrid Rails engine not like other engin
159
177
160
178
**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.
161
179
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
+
162
182
</details>
163
183
164
184
<details>
@@ -170,7 +190,7 @@ Once configured Rails UI will:
170
190
- Install dependencies and any necessary assets.
171
191
- 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.
172
192
- 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.
174
194
- After installing the Rails UI gem and running the installer, you may configure your application preferences.
175
195
</details>
176
196
@@ -186,16 +206,15 @@ We're just hitting ground with Rails UI so expect to see additional components a
186
206
187
207
While we are kicking the tires with an alpha version of Rails UI it is free and clear to try out but not redistribute.
188
208
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.
190
212
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.
192
213
</details>
193
214
194
215
## Updates
195
216
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.
0 commit comments