在Rails 4 App中使用Themeforest中的Canvas主题

Question

I'm trying to build a Rails 4 app using the Canvas theme from Themeforest and it's kickin' me arse.

I've searched several ways to put the CSS/JS in the right folders and I even had success with it, using this tutorial . Yeah!

When I try to use the same method with the Canvas theme, all hell breaks loose. The theme comes with the following:

Canvas-Theme/

 - css/
    - fonts/
        - (a bunch of custom fonts)
    - animate.css
    - bootstrap.css
    - calendar.css
    - camera.css
    - colors.css
    - colors.php
    - dark.css
    - font-icons.css
    - fonts.css
    - magnific-popup.css
    - nivo-slider.css
    - responsive.css
    - vmap.css
 - images/
    - (a bunch of images)
 - js/
    - canvas.slider.fade.js
    - events-data.js
    - functions.js
    - jquery.calendario.js
    - jquery.camera.js
    - jquery.elastic.js
    - jquery.gmap.js
    - jquery.js
    - jquery.mousewheel.min.js
    - jquery.nivo.js
    - jquery.vmap.js
    - plugins.js

 - (tons of HTML templates)
 - style.css
 - style.less

In my Rails app, I'm using the default install (except mysql) which includes the following gems:

gem 'rails', '4.1.7'
# Use mysql as the database for Active Record
gem 'mysql2'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 4.0.3'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .js.coffee assets and views
gem 'coffee-rails', '~> 4.0.0'
# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer',  platforms: :ruby

# Use jquery as the JavaScript library
gem 'jquery-rails'
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.0'
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', '~> 0.4.0',          group: :doc

# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use unicorn as the app server
# gem 'unicorn'

# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development

# Use debugger
# gem 'debugger', group: [:development, :test]

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin]

I droped all the CSS files under

app/assets/stylesheets/ 

and all the JS in

app/assets/javascript/

I also created a fonts folder and put the included fonts in there

app/assets/fonts/

Here is my application.js:

//= require jquery
//= require turbolinks
//= require_tree .

Here is my application.css

*= require_tree .
*= require_self

Now, there was that one 'style.css' file in the root of the Canvas-Theme folder that I've dropped in the stylesheets folder. Not sure if that was the right thing to do.

After all of that, I copy and pasted one of the HTML files into my index.html.erb files and I'm basically getting a blank screen. I know I need to change the paths for the images but I should at least see something.

A couple questions,

• Do I get rid of the 'jquery.js' file that came with the theme because Rails is including it already?
• Should I use the bootstrap gem instead of the included 'bootstrap.css'?

Need to get passed this tomfoolery!

Answer 1

Fixed. So it turns out that it's how I'm ordering my JavaScript. I ended up changing my appilcation.js file to this:

//= require jquery
//= require turbolinks
//= require_tree .
//= require functions

I moved the 'functions.js' file to the vendors/assets/javascript folder so it would be included last after the tree was included. Seems to be doing the trick. Moral of the story, be mindful of CSS/JS order. But you knew that but who am I talking to because I've basically just commenting on my own thread. Well, I'm out.

Answer 2

Thank you @Craigfoo, your solution helped me to go further. To enable the slider to work I didn't change the appilcation.js but I moved the functions.js file to the vendors/assets/javascript folder and changed the views/layouts/application.html.erb

<!DOCTYPE html>
<html>
<head>
  <title>Canvas</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
<body>

  <%= yield %>
  <%= javascript_include_tag 'functions', 'data-turbolinks-track' => true %>

</body>
</html>

I needed to precompile. Add in config/initializers/assets.rb the line:

Rails.application.config.assets.precompile += %w( functions.js )