How to add Designmodo’s Flat UI Pro to a Rails project [Revised]
Sometimes I run across a design that makes me smile. Like the first time I saw Designmodo’s Flat UI sample page. I just had to try it out.
Using the free version was easy with a small static PHP-based site. Just unzip and FTP the assets over. With Rails I decided to splurge and spend $39 for the Flat UI Pro version and use the
The following are the steps I took to add this into a simple Rails app and get the example page up and running.
(Not an affiliate, just a fan. And thanks to @reflection for creating a gem.)
This following is an revised version of an earlier blog post. Since I wrote the original post, there have been significant gem updates so a rewrite was in order. If you’re still on Rails 3.2, Bootstrap 2 or an older version of the Designmodo Flat UI design kit, the original post can be found here.
I’m working on a linux server (Webfaction hosted). The Rails app is
(Rails 4.0.2/nginx 1.4.1/Passenger 4.0.2/Ruby 2.0.0) and has Twitter Bootstrap added using the less-rails-bootstrap gem.
Step 1: Purchase the design kit.
Purchase a license from Designmodo. I got the Personal License Flat UI HTML for Coders to get started.
Unzip the download into a directory such as
~/flat-ui-pro. Be sure to put this somewhere handy but out of the way and not under the Rails project’s home. It works better with the gem’s generator if you leave the organization of the files in the downloaded directories alone.
Make sure the
HTML sub-directory is directly under
~/flat-ui-pro. For example, the less files are located in
~/flat-ui-pro-1.2.4/HTML/UI/Flat-UI-Pro-1.2.4/less if you’re working with version 1.2.4.
Step 2: Install the
gem 'designmodo-flatuipro-rails', '~> 184.108.40.206.branch'
You’ll need the
jquery-ui-rails gem for all of the features to work. As the designmodo-flatuipro-rails gem’s README explains, if you’re working with Bootstrap 3, you need the
bundle and the install generator:
rails generate flatuipro:install ~/flat-ui-pro
The generator copies the downloaded licensed Flat UI assets over to the gem. It also updates
application.js. If you have any questions, you can also take a look at the generator’s source on github.
//= require jquery
//= require jquery.ui.button
//= require jquery.ui.datepicker
//= require jquery.ui.slider
//= require jquery.ui.spinner
//= require jquery.ui.tooltip
//= require jquery.ui.effect
//= require flatuipro
//= require jquery_ujs
//= require twitter/bootstrap
//= require turbolinks
//= require_tree .
With the licensed Flat UI assets stored with the gem rather than the app, the installation generator will need to be run each time the gem is installed or the design kit is updated. Like when moving from the development environment to production. The install generator has been written to run multiple times without making a mess so it could be made part of a Capistrano deployment script, for example.
Be aware @reflection has noted gem version 1.2.5 comes with some known issues.
Step 3: Check the assets precompile
At this point I recommend doing a test run of the asset precompile.
rake assets:clean RAILS_ENV=production
rake assets:precompile RAILS_ENV=production
rake assets:clean RAILS_ENV=production
For example, if you forgot to add the
gem 'jquery-ui-rails' you get the error
couldn't find file 'jquery.ui.datepicker'.
Before you move on, don’t forget to clean out the precompiled assets so you don’t have any confusion later about what’s being picked up in the pipeline. (In general a good habit to get into when you’re working in the development environment.) (Don’t ask me how I know about that one … ugh.)
Step 4: Flat UI Pro Sample Page Set-up
The designmodo-flatuipro-rails gem nicely provides a generator that sets up the sample page automatically.
rails generate flatuipro:demo
Your own copy of the demo page can now be found at
If you’re rather set-up the demo manually, there are some instruction in the previous version of this post.
Notes and Additional Resources
Gist by @ericwindham with an example of deploying to production with Capistrano.
Did you find this useful? Please post a comment and let me know. And of course if you have a correction or see an easier way to handle something.