Rails + Bootstrap

A faster way to good looking persistence

In todays fast paced world time is a luxury. You’ll be expected to get more and more done in smaller timeframes, thanks in part to the increasing power of technology. However you must choose the right tool. When it comes to creating a database backed website I’ve found few solutions more streamlined and mature than Ruby on Rails. Complement this with Twitter Bootstrap for design and you can create an appealing functional website with almost no coding required.

Before starting your rails journey you’ll need a couple of things. You can run over to http://railsinstaller.org/en to pick up an all-in-one installer for the full ruby on rails package for your platform of choice. You will also need a competent text editor with a file browsing view. I recommend Sublime Text.

Once everything is installed you can proceed to the command line to create your new app.

> rails new your_app_name

> cd your_app_name

> rails server

At this point you can open a web browser to http://localhost:3000 and see the default rails page. Not much fun yet, but lets go ahead replace it with our own home page. Before typing any more command you’ll need to press Ctrl-C to kill the server. You could also open a second command prompt window to run commands, but many times you’ll need to stop and restart your server if you change any files in the config directory.

> rails g controller home index

This will create quite a few new files, but the one we are interested in is the index.html.erb. That will be the new home page.

We need to set it as the default home page by adding a line in config/routes.rb

root ‘home#index’

Start your server up again and you should see the contents of your index.html.erb in your browser!

Interesting but not to attractive. Lets add the bootstrap framework and a layout to go with it.

In your Gemfile add

gem ‘rails_layout’

gem ‘bootstrap-sass’

Install with bundle and then generate the layout

> bundle

> rails g layout:install bootstrap3

Re-visit the home page :-) You now have an attractive site ready for responsive mobile viewing.

Now for the creating the database and the interface to populate it. We are going to tap into the all powerful scaffold command. I’m going to use it to model a contact list, which will include the four most basic field types.

> rails g scaffold Contact name:string age:integer family:boolean notes:text

This one generates a whole bunch of stuff! First off we need to get rid of the app/assets/stylesheets/scaffolds.css.scss file which will interfere with our bootstrap styling. Also, you may have noticed a file with a date in front of it. 2014…etc. this is your database migration file. It can be found in db/migrate.

We will now use this file to create our database.

> rake db:migrate

Done! Thats all thats needed. Now lets see our database in action. Make sure the server is running and navigate to /contacts. (Rails is really smart about pluralizing words) You now have a fully functioning interface that can Create Read Update and Delete contacts. (CRUD)

The interface works but it looks a bit cramped even though we have bootstrap doing our styles. You can investigate by going to app/views/contacts/index.html.erb. You will notice its generating a table. If you go to the bootstrap site you will find that tables can be easily be styled simply by adding the table class.

<table class=”table”>

Next we can add some flair to our links. Boostrap can make a link into a button using the btn btn-default class. Since ruby is being used to generate the links it will require a different syntax.

link_to ‘Show’, contact, class:’btn btn-default’

From here you can shop around the bootstrap site to find cool visual elements to add to your new app.

It is here that I will leave you to explore and learn on your own. Good luck!