Create Visual Magic with Bootstrap Gem

If prediction pundits are to be believed, 2016 is going to be year of visual. After all, we are bombarded with so much data every day that we ignore most of it, unless it catches our fancy. And visual is a sure shot way to catch an eye. But more often than not, we spend so much time polishing our application and trying to make it look aesthetic that when it comes to market, it has already become an old commodity. So what is the way out? Do we need to spend so much time working on the design element of our application or bring it to the market looking like an old hag of an app? What if you could have your cake and eat it too? With Ruby on Rails, not only you could bring your application to the market faster, you could work magic with its design with the help of Bootstrap gem. Bootstrap (formerly Twitter Bootstrap) provides CSS style-sheets and JavaScript code for the visual design of websites. It is a framework for front-end or browser-based development, similar to how Ruby on Rails is a framework for server-side or back-end development. Bootstrap is a framework that makes it easy for a developer to create a nice design for an application or a website. For a website or an application, there are few common components like widgets, lists, forms, typography, etc., and with Bootstrap which comes with predefined CSS classes, they can be designed easily and without much fuss. The framework also comes with JavaScript, making it easier to create scroll spies, accordions, modals and popovers. The bootstrap gem also has a solid, thorough and easy to understand documentation providing example codes for most, if not all of the components that Bootstrap provides.

Installation:

Ruby on Rails:

gem ‘bootstrap-sass’, ‘~> 3.3.6 —->Need to add,easy to drop assests pipeline gem ‘sass-rails’, ‘>= 3.2’ —-> Default Gem in Rails Application bundle install

File extension is very important. File extension has .scss or .sass.In New application default extension for application is .css we have to rename that file extension.

Default: app/assets/stylesheets/application.css *= require_self *= require_tree. Rename: app/assets/stylesheets/application.scss

After changing the extension have to remove require statement and add bootstrap import file inside the application.scss

@import “bootstrap-sprockets”; @import “bootstrap”; Before bootstrap have to import bootstrap-sprockets. In application.js have to add the bootstrap require javascript //= require jquery //= require bootstrap-sprockets bootstrap-sprockets provides individual Bootstrap Javascript files (For Ex: alert.js,dropdown.js,combobox.js) $(document).ready(function(){ $(‘.dropdown-toggle’).dropdown(); });

This is the javascript for dropdown The best part about Ruby on Rails is that for most common issues, it can provide you a solution. With Bootstrap gem, you have at your fingertips to implement some of the best visual and make your application look wonderful without having to sacrifice too much time. When it comes to saving time, no other programming language saves time like Ruby on Rails. So, if you are time pressed but would still like to create an amazing app, go for Ruby on Rails. And if you are on a lookout for a Ruby on Rails development company, RailsCarma is a great bet, even if we say so ourselves. Railscarma has been implementing Ruby on Rails from its nascent stages for development, training, deploying and contributing back to the Rails Community and provide best Ruby on Rails Development Services. RailsCarma provide end to end Ruby on Rails services including, consulting, architecture, building, management and extension to companies around the globe. You can also hire Ruby on Rails developers with an easy to hire process. Contact Us to know more. Read About More Gems :

• Resque Gem : For Background Processes In ROR
• How To Install and Use Ruby-Prof Gem
• Trending Topics Using Twitter Gem
• Delayed Job Gem for CSV