How to implement a boostrap template into rails

Question

I'm a relatively new ruby programmer and i'm looking to implement this boostrap template:

https://github.com/almasaeed2010/AdminLTE/

into a rails application but im not exactly sure how to go about it. I noticed it uses LESS but i believe rails uses SASS so are there some conversions im going to have to do? It'd be nice if someone could give me a brief number of steps on how to make this work in rails.

Answer 1

I just had to solve this problem myself this morning. Admin LTE is awesome, enjoy:

Install the Gem:

(From the project documentation on GitHub)

Add the gem to your application's Gemfile :

gem 'adminlte-rails'

Then run bundle to install the Gem:

$ bundle

Alternatively, you can install it with the gem command:

$ gem install adminlte-rails

---

Integrate Into Your Project:

Finally, in order to integrate the theme with the other stylesheets of your project, add the following to your app/assets/javascripts/application.js :

//= require bootstrap.min
//= require admin-lte

And add the following to your app/assets/stylesheets/application.css :

*= require bootstrap
*= require font-awesome
*= require ionicons
*= require admin-lte

After that, you should be able to style your Project using all of the classes installed via the AdminLTE template. Let me know if you run into any other snags, I'll be working with the theme extensively while putting together a dashboard app as a front-end for a larger project.

Answer 2

If you prefer to install AdminLTE (and Font Awesome) via Bower , follow the instructions below:

I assume you have installed Bower. Otherwise, see Install Bower .

Create .bowerrc as follows:

{
  "directory": "vendor/assets/bower_components"
}

Run bower init command to create bower.json . You can hit the Enter key to every questions.

Add vendor/assets/bower_components to your .gitignore if you manage your source code with Git.

Install AdminLTE and Font Awesome:

$ bower install admin-lte font-awesome --save

Add following lines to app/assets/javascripts/application.js :

//= require admin-lte/bootstrap/js/bootstrap
//= require admin-lte

Insert following lines into app/assets/stylesheets/application.css before the last line:

 *= require admin-lte/bootstrap/css/bootstrap
 *= require admin-lte
 *= require font-awesome

[UPDATE]

You need to read the following article in order to use font-awesome installed by Bower in production mode.

https://github.com/platanus/guides/blob/master/setup/fontawesome-bower-rails.md

Answer 3

In general, according to this post by Ivan Storck you could use one of the following appraoches

1. Download from Source
2. Use a Ruby Gem Including a Rails Engine (described by @devynspencer)
3. Use Bower and Configure Rails (described by @Tsutomo)
4. Use the Bower-Rails gem (rake style)
5. Use Rails-Assets.org (bundler style)

Approach 4 and 5 are more up-to-date than Gem version (No. 2) and cleaner than using two systems (No. 3) to manage dependencies. (Just my opinion and @1.44mb has different opinion in the following comment.)

I changed from gem version to Rails-Assets.org and needed minimum changes in application.js and application.css.scss . However, I needed to add skin-blue.css to one of my assets path and application.css.scss file.

Please do read the post by Ivan Storck and see the respective links to learn more.

• rails-assets
• bower-rails

Answer 4

If you are using Twitter Bootstrap 3.1+, there is now an offical sass port of the project. See: https://github.com/twbs/bootstrap-sass