Migrating to Bootstrap v3
My first task in GSoC was to update TSP to the latest version of Bootstrap. TSP was built on Bootstrap 2 using the twitter-bootstrap-rails gem with LESS. Though the latest version of Bootstrap is v4, but currently it is in Beta phase, so we will be updating to Bootstrap v3.
Bootstrap makes front-end web development faster and easier. It’s made for folks of all skill levels, devices of all shapes, and projects of all sizes. There has been a lot changes made in the Bootstrap v3, many new classes have been introduced and some of the classes of Bootstrap v2 have been modified or removed. What’s new in v3.0
Twitter Bootstrap Rails gem
One of the ways to use Bootstrap in Rails is using twitter-bootstrap-rails gem. With the help of this gem you can use the Bootstap stylesheets in two ways by using the plain CSS or with LESS. It is very easy to integrate this gem in you rails project. To use it with LESS you have to include the following gems
gem "therubyracer" gem "less-rails" gem "twitter-bootstrap-rails"
Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themeable and extendable. For more information visit lesscss.org
To use it with plain CSS you just have to include the twitter-bootstrap-rails gem. For more details on How to use this gem click here.
Steps to Update to Bootstrap 3 from Bootstrap 2
When using bootstrap with the help of twitter-bootstrap gem
Update the twitter-boostrap-rails gem to the latest version (here it is 3.2.2) with
bundle udpate twitter-boostrap-railsthis will also update the dependencies for the gem.
If you are using LESS do
rails generate bootstrap:install lessto generate the boostrap includes
The latest version of boostrap only generates the bootstrap_and_overrides.css.less file for the stylesheets directory, you can define any overrides for the classes in this file.
Updating the Bootstrap classes
To view the major style changes click here
Also there are various classes that have been removed in v3. For those classes you can use their equivalents or create your own with the classes in v3.
Special thanks to Björn Geuken for helping me in this task.