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.

colors

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 designmodo-flatuipro-rails gem.

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.


UPDATE 09/14/2014: See inline comments on a few changes for Flat UI Pro version 1.3.0.

 

Starting Point

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.

Heads up if you’re updating from an earlier (before 1.2.4) version of the designmodo-flatuipro-rails gem. less-rails-bootstrap is a new dependency.

 

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/HTML/UI/less. Or ~/flat-ui-pro-1.2.4/HTML/UI/Flat-UI-Pro-1.2.4/less if you’re working with version 1.2.4.

 

v 1.3.0 Step 1.5: Use bower to finish installing the kit.

Locate the bower.json file that unzipped with the kit, and run the following from the same directory: bower install

In my case, since I unzipped to ~/flat-ui-pro-1.3.0 that meant:

 

Step 2: Install the designmodo-flatuipro-rails gem

Follow the instructions provided and add the gem.

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 1.2 branch.

v1.3.0 update: You’ll want the 1.3.0 branch.

Then run bundle and the install generator:

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.

v1.3.0 update: Be aware newer versions of jquery have changed the syntax for their requires:

If you’re updating a previous Flat UI install and getting errors like jquery.ui.button not found, make sure the old jquery require statements aren’t still included.

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.

Gem version 1.3.0 also has some known issues.

 

Step 3: Check the assets precompile

At this point I recommend doing a test run of the asset precompile.

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.

Your own copy of the demo page can now be found at http://[whatever]/flatuipro_demo/index.

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.