How to add SB-admin v2 in Ruby-on-Rails app

Question

I want to use SB Admin v2 Themes in my RoR application. I downloaded it and I don't know what's next to do.

BTW, I have gem bootstrap-sass in my Gemfile.

Answer 1

Some time ago I've developed a gem to add all the assets of the sb-admin-2 theme, here you have it: https://github.com/dreamingechoes/bootstrap_sb_admin_base_v2

Add this line to your application's Gemfile:

gem 'bootstrap_sb_admin_base_v2'

And then execute:

$ bundle

Or install it yourself as:

$ gem install bootstrap_sb_admin_base_v2

Then, add this into your application.js file:

//= require bootstrap_sb_admin_base_v2

and this line into you application.css file:

*= require bootstrap_sb_admin_base_v2

And you're ready to use the HTML structure of the Bootstrap based admin theme SB Admin 2 on your Rails application.

Answer 2

What I did is:

1. Create an admin.html.erb layout with the base markup provided in index.html of the SB Admin 2 template

2. Take a look at the js and css files included in the template and put them in their corresponding dirs in vendor/assets

3. Add the corresponding requiere and import in application.js and application.scss manifests

4. Don't include the assets for Morris charts until you really need them.

5. In the file sb-admin-2.js remove the lines that add acttive css class for the menu.

6. Implement menu using simple-navigation gem. It would look something like

   # encoding: utf-8
   
   SimpleNavigation::Configuration.run do |navigation|
     navigation.items do |primary|
       primary.item :dashboard, 'Inicio', admin_path, link_html: {icon_class: 'dashboard'}
       primary.item :clients, t_title('routes.clients'), admin_clients_path, link_html: { link_active: current_page?(admin_clients_path), icon_class: 'users' } do | clients |
         clients.item :clients_new, t_title('routes.new'), new_admin_client_path
       end
     end
   end
   
   SimpleNavigation.register_renderer admin_sidebar: Sb2AdminSidebarRenderer
   SimpleNavigation.config.selected_class = 'active'
   

7. Not last but somewhere between the steps above you'd create partials for side menu, navbar top, etc.