Search code examples
cssruby-on-railsrubytemplatesbootstrap-sass

problem with import bootstrap theme to ruby on rails app


I can't seem to import this bootstrap theme to my rails application.

https://github.com/puikinsh/sufee-admin-dashboard

I am trying to import this template for two days but no luck. It could be easy, but I don´t know what I´m doing wrong :(

I receive this error:

Undefined variable: "$border-color".
Undefined mixin ....

So I have got a problem with variables and mixins at the first time. I tried another template and it works, so I really don´t know what to try next.

Any hint or idea about how to solve this problem would be really appreciated.

Thanks


Solution

  • Porting a template into your Rails application is not hard if you break it down into several imprortant steps:

    • Import styles. From what I can see, your template is using sass along with plain css style files. You can pick one of those and copy the files into your /app/assets/stylesheets folder and importing them in your application.sass. The Undefined variable: "$border-color". points you towards missing variables.scss, which contains all the color variables for your template.
    • See if your template is using any third-party libraries or frameworks. In this particular example, there is a list of them in the repo's "Built With" section of the readme. Go through every single one of them and find gem versions of those libraries and add them to your Gemfile.
    • Copy non third-party Javascript files into your app/assets/javascripts. Require them in pagedown.coffee.erb along with third-party modules. Be sure to keep non third-party code below other modules to preserve functionality of code that relies on those modules.
    • Trim HTML templates into views. Figure out what part of your layout should be preserved for every page and put it into your layout view, break down the rest into controller-specific views.

    There can be a lot of problems, but in general, just try to analyze the errors being thrown and solve them one by one.