rails with bootstrap

February 8, 2013 by arunyadav4u 6 Comments

Bootstrap is one of the most talked about project of twitter on github . It is a total html5 and css3 compliant solution for your UI . Basically, It is a kind of reverse engineering for a UI developer. Let me put up it in simple words. When a UI designer, design a site, he write css and keep adding on them as need arises . So he first write classes for managing overall layout, then for navigation, button forms etc. Bootstrap do it all for you in a single file bootstrap.css. But, here you need to be aware of the different class of css, you can use in particular condition, say different css for layout or Navigation etc. They are quite simple to figure it out from bootstrap online documentation. Bootstrap also provides a no of  plugin written with jquery to work seamlessly, with its css and without much work.

Let me first list the url where you can find different bootstrap resources :

=> List of all opensource projects of twitter hosted on github

http://twitter.github.com/

=> Download Page

You can download bootstrap from below link. It have download bootstrap and download bootstrap source. You will just need bootstrap css and js file for your application, but I suggest you to download it with the source as it will also contain examples and demo along with the required js and css files. If you downlaod with source the js and css file will be available in /doc/assets/js and /doc/assets/css folder respectively.

http://getbootstrap.com/getting-started/

The, bootstrap downloaded from here, will contain everything offered by bootstrap, But say you need only tooltip and popover plugin and do not want a huge bootstrap.min.js or bootstrap.js (both file are same, but first one is minified so, it is of smaller size) to be render. In such case you can customize the js and css file before downloading at below link,

http://getbootstrap.com/customize/

Here, you can also see the css variables, which show you the default settings like @bodyBackground, @linkcolor etc. Well, the bodycolour by default set to white. You want to set it to orange. Strange, you can’t customize these variables here. Don’t worry we will do it later on by writing custom css to override bootstrap default css. personally, I never customize bootstrap from above link, but download the original source and later on do customization in code whenever needed.

NOTE :  If you have downloaded the bootstrap with source, in docs/assets/js folder you will find js files of individual components, like tooltip, popover etc. The individual css component are present in less folder of downloaded source. So, If you are more concerned about load time of your page, keep adding the required component as need arises, instead of including bootstrap.min.js or bootstrap.min.css file itself. But the component js file or the css files in less folder  is not minified, better minified it before including as it will reduce the file size considerably. online tools is available there for minification of js and css files.

=> classes used in creating Layouts

Layout can be classified into two categories : fixed and fluid. The fixed layout is static and measure width, height etc in terms of pixle, while fluid layout measure in terms of percent. Fluid layout adept itself to different screen size. I always prefer fluid layout. Sample code for layout design is available here.

http://getbootstrap.com/getting-started/#examples

You can see that, You can create a layout with few classes. Those classes are as below

Fixed Layout classes -> container, row, span2 span6 etc, offset2 offset4 etc

Fluid Layout classes -> container-fluid, row-fluid, span2 span6 etc, offset2 offset4 etc

=> classes used in creating different component

Now, your layout is ready and you want to create other components like navbar, footer, sidebar etc. But, what class I should use. Well the sample code of every component and its classes is available at the below link

http://getbootstrap.com/components/

=> Basic classes, images and icons

Now, you want to beautify the content of your site. You can find detail of classes related to links, text, list, images etc at the below link

http://getbootstrap.com/components/#glyphicons

NOTE :  Bookmark, these links or just http://getbootstrap.com/components , above are just different tabs of this site.

So, now I assume that, You have your bootstrap’s css and js file to design your whole site and You know about different classes you may need to build it or atleast you know the place from where you can figure out the things which fullfill your need. Great…we will now apply these things to our rails project. Lets call it bootstrap_demo.

$ rails new bootstrap_demo

$ cd bootstrap_demo/

$ rails generate controller bootstrap_demos index

$ rails s

load index page in browser at http://localhost:3000/bootstrap_demos . You will get routes not found error. well add the routes as below in /config/routes.rb file

resources :bootstrap_demos

Reload the Page…. Well You get simple page with message BootstrapDemos#index. Fine, Let us now decide on layout of our site. So this is the spec.

-> Navigation at the top and Footer at bottom

-> Body have two column. Left column for side bar navigation and right column for main content

-> Main content layout will varies for each page.

Top two requirement is consistent through out the site. Let us Put this layout in application.html.erb file. This html file will look like this.

Now reload the page http://localhost:3000/bootstrap_demos

No css reflected, page look colorless and without any style. It is expected as we have not yet added bootstrap css to our application. copy the bootstrap.min.js or bootstrap.css file from your downloaded folder(present in bootstrap/css folder if downloaded compiled version and in doc/assets/css if downloaded with source code) to the app/assets/javascript and app/assets/stylesheet folder of your application. Now rails3 will automatically load this file. If you are working in some other framework or if bootstrap file is not loaded, you need to link it explicitly in the <head> tag as you may be doing it for other files  as below

<link href=”css/bootstrap.min.css” rel=”stylesheet”>  assuming the path is css/bootstrap.min.css relative to the html file

Let us assume that the bootstrap.min.js file is linked properly in head. So refresh the page again….and here you can see all the css reflected with the page looking as below.

So, you can see that, we have our layout structured through application.html.erb file with top navigation bar, two column for content, and three column footer. Here, you should note that, use and nesting of container-fluid, row-fluid, span4 span12 etc and offset class. You can nest them within one other to make as many block as you wish.

container-fluid  -> It will define the container or box for you. You can create a single container for whole application or multiple box. I have use three container-fluid, one for top nav, one for body content and one for footer

row-fluid  -> It will define no of racks or row in your box, each roe occupy the whole space of the container, within which it is placed.

span4 -> It define, blocks within a row. span4 means, the div with this class will occupy 4 part of the row, a row-fluid consist of 12 part.

span8 -> it means the div with this class will occupy 8/12 of whole width of row-fluid

offset1 -> offset define gap between two blocks, see it use in footer

NOTE:

-> In any row the sum of number used against span and offset should not increase 12
-> The well class, I have used in application.html.erb has nothing to do with layout, it just make a DIV to rise with light background colour. I have used it to make the blocks we have created get visible to you as we do not have any real content there. Use, it if you want your div to rise
So, our layout is ready, Let us add custom content to our index page of bootstrap_demo controller. index.html.erb will look like this

Refresh the page and Now it will look like this, with two new column created for the main content one for article and the other for image

Wao…we have achieved so much without writing single line of css. What about bootstrap jquery plugin. Let us try tool-tip plugin form bootstrap. This will show some tip about the link when user hover over it

NOTE : bootstrap plugin is build over jquery, So You must include jquery.js also when including bootstrap.js.

copy the jquery.js and bootstrap.js from the downloaded bootstrap to your app/assets/javascript folder. Now modify, your index.html.erb as below. bootstrap documentation on its implementation is available here

Now refresh the Page. It will look like this, and when you hover over a link it will show the tip about that link

APPLYING THEMES :

The bootstrap we have downloaded comes with default themes i,e background colour, link colour etc. We can customize them as per our need. But what if, something suits our need without customization or we need to customize on smaller extent. Well bootswatch provides a no of themes for bootstrap. List of all the themes is available here . Download the themes you liked and just replace the bootstrap.css file in your application with the bootstrap.css available in the downloaded theme. say , I downloaded, bootstrap.min.css for amelia and replaced the existing bootstrap.min.css in my app/assets/stylesheet folder with it. Refresh the page….wao now the site looking much colourful.

CUSTOMIZING BOOTSTRAP CSS

coming soon……

for time being refer it at below link to get some idea

http://stackoverflow.com/questions/10451317/twitter-bootstrap-customization-best-practices

References:
http://bootstrapthemes.quora.com/25-Awseome-Twitter-Bootstrap-Themes-For-Better-Bootstrap-Designs   # contain free demo templates

http://www.sitepoint.com/beyond-bootstrap-foundation-frameworks-never-heard/ # alternative framework to bootstrap