How to add Designmodo’s Flat UI Pro to a Rails project

>>> Please Go To The Updated Version of This How-to

This post was originally written July 2013. Both the Flat UI design kit and designmodo-flatui-rails gem have been updated several times since. There are notes throughout where I attempted to keep this post current (last update Jan 28, 2014). However it’s gotten so clutter it’s unreadable so I did a revised version.


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

Starting Point

I’m working on a remote linux server (Webfaction hosted). The Rails app (Rails 3.2.13/nginx 1.4.1/Passenger 4.0.2/Ruby 2.0.0) is already using Twitter Bootstrap.

Update 10/30/13: To use Bootstrap 3, I’ve switched to the bootstrap-on-rails gem. To install, follow the instructions in the README.

Update 1/28/14: The 1.2.4.0 release of the designmodo-flatuipro-rails gem is using the less-rails-bootstrap gem instead of bootstrap-on-rails. If you’re using this latest branch version, you’ll want to make the substitution.

 

Step 1: Purchase the design kit.

Purchase a license from Designmodo. I got the Personal License Flat UI HTML for Coders (v1.1) 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.2/HTML/UI/Flat-UI-Pro-1.2.2/less if you’re working with version 1.2.2.

 

Step 2: Install the designmodo-flatuipro-rails gem

Follow the instructions provided and add the gem.

I added the gem to the assets section of Gemfile.

Make sure you have the jquery-ui-rails gem.

Update 10/30/13:
With Bootstrap 3, you’re going to want to use the 1.2 branch of the designmodo-flatuipro-rails gem.

gem 'designmodo-flatuipro-rails', '~> 1.2.2.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.css and application.js. It’s worth taking a look at those two files to be aware of what’s new. If you have any questions, you can also take a look at the generator’s source on github.

Update 12/10/13: The generator in the 1.2.2.0.branch no longer modifies application.css.

With the licensed Flat UI assets stored with the gem rather than the app, the installation generator will need to be run each the gem is installed. 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.

 

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

Update 7/22/13: The gem now includes a generator that sets up the sample page automatically.

However, if you still want to do this manually, here are the steps.
—-
Turned out to be pretty straightforward to get the sample page live.

(1) Create a very simple controller with a single view.

(2) In app/views/flatuipro/index.html.erb add the <body> of the Flat UI Pro sample index file. Don’t forget to remove the javascript includes at the bottom. If you unzipped your kit into ~/flat-ui-pro, the index file can be found at ~/flat-ui-pro/HTML/UI/index.html.

(3) Update the image paths – replace images/ with /assets/.

(Okay, don’t panic.) If you look at the page now, you’re going to see some broken elements. This is because the gem only copies over the core assets and not the sample code that’s used only by the demo. IMO, this is a good thing since it means less unused potentially conflicting clutter.

(4) Copy over the missing javascript. There is an application.js file included in the kit. Rename(!) and copy this into app/assets/javascripts and add it to the app/assets/javascripts/application.js file.

In application.js:

(Drumroll, please.)

The Flat UI Pro sample page of basic elements can now be found at http://{whatever}/flatuipro/index.html

 

Steps to update the above to version 1.1.3

Since I posted the above, there’s been a new release (v 1.1.3) from Designmodo (release notes) and a corresponding update to the designmodo-flatuipro-rails gem (updated README). Be sure to check out the usage documentation included in the kit on the components.html page. (Great addition.)

It only took a couple simple steps to make the updates.

(1) Download the new version of Flat UI Pro from Designmodo. Once you login, go to the Downloads section of your My Account page. I unzipped the updated kit into ~/flat-ui-pro-1.1.3.

(2) Update the designmodo-flatuipro-rails gem.

(3) Rerun the gem’s install generator to integrate the updated kit’s files.

(4) Check the asset precompile and make sure everything it still a-okay.

(5) If you used Step 4 above to manually set-up the sample page, remove the associated controller, view and js files since we’re going to upgrade to the gem’s demo installer.

Edit app/assets/javascripts/application.js, remove the line //= require flatuidemo.
Edit config/routes.rb, remove the route to flatuipro.

(Yes, I know that’s being a bit obsessive for this example, but think about how many times you’ve gotten tripped up by legacy clutter?)

(6) Use the gem’s generator and create a working copy of the sample page.

The new Flat UI Pro sample page of basic elements can now be found at http://{whatever}/flatuipro_demo/index.html.

—-
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.