How to integrate a WrapBootstrap theme into a Rails App

Or, “How to make your Rails app look awesome”

When a client is on a tight budget, wants to get a site up quickly, and you need it to look great, it’s worth consider using the Twitter Bootstrap/Zurb Foundation Frameworks and a pre-made, professional grade theme. For this particular project, I had my client look at the Bootstrap themes at WrapBootstrap and to select the one he liked the most. The client paid for it and I began the process of installing it into the Rails application I’m building for said client. I didn’t see a guide or blog post anywhere explaining the process, so I thought I’d take a moment and make a few notes in case someone is in need and a search engine brings them this way one day.

The first step in the process is to get a very good understanding of the site layout as a whole. I spent time going through the “live demo” of the theme on WrapBootstrap and getting a good understanding of how the components (Nav Bar, Footer, “About Us”- Whatever…) fit together. As I went through the site I made mental notes of the particular components.

Next, I unzipped the file I purchased, duplicated it in Finder (Just in case I screw something up this first time through and need to reference the original files) and had a look at the internal contents. In my download, images were spread out in multiple locations and nested in subfolders within the IMG folder. This won’t work for a Rails app, so on my Mac with 2 Finder windows opened, I moved ALL images in the uncompressed purchased file over to my Rails app at App/Assets/Images – This way I could be sure that my <% image_tag(‘whatever.png’) %> Rails helpers would work for all images. (**Note: After the rest of my setup, I used these images to fill out the homepage and show the client, but I would not recommend committing all of these images to Git. You won’t use most of them anyway. I’d make sure you have a nice open window of work time, get your app looking the way you want it to, and deleting the unused images from the Images folder before pushing to Git or Heroku. There is absolutely no reason to have 57 or so images in your version control and on your production server that you’ll never use. Don’t forget to precompile assets if you’re using Rails 4!)

After placing the images in the proper folder, I opened the CSS folder in the purchased theme and had a look. I saw that the core “Bootstrap.css”, etc files were already there, so I simply moved all of the files over (“Shift+Down Arrow” on a Mac helps here) to my Stylesheets folder in my Rails app. It should be noted that I’m not using any gems here- Just straight up Bootstrap stylesheets and js files. Do the same thing with the javascript files- With 2 finder windows open, move all of the JS files into app/assets/javascripts. This is easy, right? You want to avoid nesting and have all of the files directly under /assets/css or /js or whatever.

Now it looks like we just bought a bunch of sweet looking static pages. Lets use ‘em in our Rails app. We can do this by deciding which static pages we want in our own app and moving them to our Rails app. I found a great way to do this even easier — Use thoughtbots high_voltage gem and drop your static pages into the /pages folder. Rename them from index.html, about.html, etc to index.html.erb, about.html.erb, etc. The high_voltage gem takes care of the routing for you so you don’t have to worry about it!

Got it? Cool.

Go through the static pages you just moved over and remove the .js and css links coded into those pages — The asset pipeline will take care of including that for us, so we don’t need ‘em.

Finally, I needed to cut up that HTML into something that works well with Rails. I did this by starting at the top, then bottom, working towards the center of the page. Starting at the home page, I took the navigation bar and links and created a _navigation partial. I then did the same thing with the _footer. (It should be noted that as I’m copying the navigation html from the index.html file, then creating a footer partial, I remove the original html and replace it with the _navigation partial I just created- Otherwise we would have 2 navigation bars and 2 footers, or a footer in a footer, and we wind up in a dream within a dream like Inception.) Any written or visual content that is unique to that specific page should stay in that page. Any components that are displayed site-wide (Header, Footer) go into a partial and rendered with a _partial.

Once thats completed, I do the same for my other static pages- I remove the navigation and footer html and replace it with the partials I created. At this point, I add my <%= yield %> tag in the application.html.erb page under the body tag, within a container div. This centers everything nicely in the page. Now everything works well, looks great, and I’m ready to continue building the Rails app out for my clients.

Just remember: Anything that is displayed site-wide goes into a partial and is to be rendered in the Application layout file, and all unique page content gets rendered in the html.erb file for that specific page.

Like this article? I often tweet about Rails stuff written by myself or my friends, so follow me on Twitter or add me on LinkedIn if that’s your thing.


Show your support

Clapping shows how much you appreciated Jesse Waites’s story.