Hey there, I am currently trying to integrate a free CSS/HTML/JavaScript template into my Rails project. You can download the template from here. The template consists of an index page, a single CSS file, and two JavaScript files.
To implement this template, I placed the home.html markup in /app/view/layouts/application.html.erb, the CSS file in assets/stylesheets/application.css, images in assets/images/, and the JavaScript files in assets/javascripts/ directory.
I also made sure to add the necessary scripts to the precompile list in config/initializers/assets.rb by including:
Rails.application.config.assets.precompile += %w( admin.js admin.css jquery-1.8.0.min.js jquery.flexslider-min.js function.js )I ran rake assets:precompile just for good measure, even though I'm not sure if it makes any difference.
Unfortunately, after implementing the template, I noticed that it wasn't rendering properly. There were errors related to JavaScript showing up in the development console. However, I expected at least the top portion, including the navigation section, to load correctly as most styling should be handled by the CSS.
https://i.sstatic.net/XMcUV.png
UPDATE
After adding the correct script tags, the previous errors were resolved. But now, I encountered an error stating 'carouFredSel is not a function'. I checked the order of my scripts against the source and they seem to match. Although I found a library with a similar name, it's not included in this template (as verified by the source code). Here's the current output:
https://i.sstatic.net/eWu2B.png
Here's the HTML head section:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0" />
<link rel="shortcut icon" type="image/x-icon" href="css/images/favicon.ico" />
<link href='//fonts.googleapis.com/css?family=Ubuntu:400,500,700' rel='stylesheet' type='text/css' />
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_link_tag 'flexslider', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag('jquery-1.8.0.min') %>
<%= javascript_include_tag('jquery.flexslider-min') %>
<%= javascript_include_tag('functions') %>
</head>