Startup Framework on Rails

CodingRoney Banerjee • June 25, 2014 • 4 minutes READ

Startup Framework is simply great to start building web sites and applications. Ruby on Rails is a great platform and framework on which a lot of web applications are built these days. Together, they can fit well and make really quick applications with a great UI/UX in a very short turnaround time. I felt the need to bring them together.

Thus I built a ruby gem called designmodo-startup_framework-rails.

In this article, I will demonstrate how to get your application up and running using the Startup Framework Samples on Rails in under 5 minutes.

Creating the Rails Application

To get started, you need to create a new rails application unless you already have one. In case you already have one, then you can jump to the “Editing the Gemfile section,” otherwise execute this at command prompt.

$ rails new startupfw-rails

This will, as we all know, create a folder with the name `startupfw-rails` and create a skeleton with a basic empty rails application. We will modify the gemfile to make our application ready for Startup Framework.

Editing the Gemfile

You need to add a few entries to your Gemfile. They are as follows: As a part of the pre-requisites of the gem, we need to have jquery-ui, less-rails, less-rails-bootstrap and twitter-bootstrap-rails. We will be adding these gems to our gemfile. I have left out any version dependencies, so you can actually use any version you like. The only dependency from Startup Framework perspective is that you need to use Bootstrap v3.0 as a minimum. Here goes an excerpt from the Gemfile. You may add this at any point in your Gemfile.

gem 'therubyracer', platforms: :ruby
gem 'less-rails'
gem 'less-rails-bootstrap'
gem 'jquery-ui-rails'
gem 'twitter-bootstrap-rails', :git => 'git://github.com/seyhunak/twitter-bootstrap-rails.git', :branch=>'bootstrap3'
gem 'designmodo-startup_framework-rails', '~> 1.1.3.10'

As you can see, we have included the `therubyracer`, a javascript engine which enables us to compile less files. We have also included `less-rails`, which compiles the less to css for us. The `less-rails-bootstrap` and the `twitter-bootstrap-rails` are gems to include bootstrap css files to your application. The final one is `designmodo-startup_framework-rails v1.1.3.10` is the gem which will integrate Startup Framework into your rails application.

After editing the Gemfile, you need to run bundle install to install the missing gems

$ bundle install

Installing Startup Framework

I usually work with a lot of clients and they all have their own licenses of the Startup Framework. Thus I have been a little paranoid about this installation. I make sure that the entire installation can be done in such manner that the Startup Framework sources or artifacts never actually leave your system. Neither they will be copied to your SCM system nor should they be provisioned to your staging or production server. I am writing an article on local asset compilation for rails which complements this gem in such manner that licensed products like Startup Framework or Flat UI Pro doesn’t need to be copied over to the the production server.

There are two main options that you may consider while installing the Startup Framework. First, you might not already be using a reasonably famous gem called [designmodo-flatuipro-rails](https://github.com/reflection/designmodo-flatuipro-rails). In case you are and you want to retain that, I have built an option to do exactly that. Otherwise you may just execute this at your home directory or rails root of your application.

$ rails generate startup_framework:install /Users/roney/downloads/StartupFramework

The location `/Users/roney/downloads/StartupFramework` is the location where I downloaded and exploded my copy of Startup Framework. If you are already aware of the contents of Startup Framework, you might already double check that the location that you point to should contain two folders, Developer and Designer along with a Readme.txt. The installer will give an error if you point to any other directory.

Once you run the installer, it will copy over the assets to the gem and copy over a few template stylesheets and javascripts over to your application.

Your rails application is now ready to use and fully integrated with Startup Framework. That’s how easy it is. How of course you may ask, how do I start using it? Well, that’s what the next section is all about. We will generate rails files for you for the specified samples of Startup Framework. Its called the Demo Generation.

Generating Demo Files

Once the installation is successful, you may come over to this part. This part, although optional gets you kick-started into getting to see the samples of the Startup Framework as a part of your rails framework.

**Remember that, as of this version, only one sample works at a time.**

Lets say you want to generate a rails view for the sample-12.

$ rails generate startup_framework:demo 12

As easy as that. After this, all you do is

$ rails server

And then navigate to `https://localhost:3000/startup_framework_demo/index12`. Remember to replace the number 12 with the sample number that you chose to generate. It should look like this on your browser.

[Rails App]

You can do this for all the samples. In case you want to create your own view, you need to follow the guide on Github [designmodo-startup_framework-rails].

Issues and Contact

In case you have any issues regarding this implementation, tweet me @roneyban. Happy Rails!