Does anyone know how to use YUI with Rails? If I call,
<link rel="stylesheet" type="text/css" href="http://developer.yahoo.com/yui/build/menu/assets/skins/sam/menu.css">
it works. BUT if I use my own folder and do something like this,
<link rel="stylesheet" type="text/css" href="../../../vendor/yui/build/menu/assets/skins/sam/menu.css">
it does NOT work. These files, css and js, will not communicate with each other if dissected from their folders and placed adjacently under app/assets, the way Rails requires. I don't care about compressing and minimizing anything. I just want it to work.
In your application.html.erb layout
<%=stylesheet_link-tag "vendor/yui/build/menu/assets/skins/sam/menu.css"%>
One more suggestion is that please use app/assets/stylesheets folder put your menu.css there
and simply in your application layout
<%=stylesheet_link-tag "menu.css" %>
My solution was, in application.css,
*= require ../../../vendor/assets/yui/build/reset-fonts-grids/reset-fonts-grids
*= require ../../../vendor/assets/yui/build/menu/assets/skins/sam/menu
In application.js,
//= require ../../../vendor/assets/yui/build/yahoo-dom-event/yahoo-dom-event
//= require ../../../vendor/assets/yui/build/container/container_core
//= require ../../../vendor/assets/yui/build/menu/menu
And finally in application.html.erb, the layout,
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
I had a little trouble with js, enabled only on page refresh. But reinstalling gem 'turbolinks' magically fixed the problem. My files are just as I downloaded from Yahoo, no directory changes, under
/vendor/assets/yui
I hope nobody took my 'Java' sarcasm too seriously )
Related
In my new rails project, I add bootstrap css and javascript; but it doesn't work and class aren't add to pages.
I copy files in app/assets/javascripts and app/assets/stylesheets.
I add this file in application.html.erb like below:
<head>
<title>JiraAjax</title>
<%= stylesheet_link_tag 'application' %>
<%= stylesheet_link_tag 'bootstrap.min' %>
<%= javascript_include_tag 'application' %>
<%= javascript_include_tag 'bootstrap.min' %>
<%= csrf_meta_tags %>
</head>
when I run project, I see both of file in html code in browser, but class aren't preview and doesn't work.
Other css is working, but bootstrap doesn't work.
I added pre-compile line for each file in application.rb, but the problem isn't solve.
app/assets/javascripts/application.js:
//= require jquery
//= require jquery_ujs
//= require bootstrap.min
app/assets/stylesheets/application.css:
*= require_self
*= require bootstrap-rtl.min
It's very strange for me, any one can help me?
You have to watch out for the load order of the assets that you're using. Depending on the specific situation, bootstrap should be loaded either before or after other assets.
Another issue I ran into was having either asset twice, which threw me off.
I'd suggest playing around with the order and making sure you don't have duplicate imports :) What I ended up doing was just hardcoding imports into my html.erb files instead of dealing with the asset-pipeline as a temporary workaround.
I import my own javascript in my application.js like this:
//= require 'overlay'
then I include application in my application.html.erb like this:
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
then I find that in my page I got
<script src="/assets/overlay-4f9aec59c40642be0f9be34f4dac3fdf.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/application-7eb3406005b56099419de90c3e6ea11b.js?body=1" data-turbolinks-track="true"></script>
in /assets/application-7eb3406005b56099419de90c3e6ea11b.js?body=1 also iclude the overlay.js which means overlay.js is included in my page for twice.
such as I write this in overlay.js:
$('#ele').click(function() {console.log 'overlay.js';})
when I click the button, I will get two line overlay.js, how can I solve this?
Put your js file under the folder assets/javascripts
Doing this you don't need to write this
//= require 'overlay' Instead of this write
//= require_tree . in your application.js file. Hope it will work.
I recently attended a hackathon, and we a made a web application in rails. We were all new to rails and were not aware of the bootstrap gem, and thus we hard coded the bootstrap style sheet in the assets folder.
In an effort to learn Rails, further, I'm continuing with the app. I have deleted the .css file, and added the gem to my Gemfile. I've ran bundle install and imported the files using the '#import' command in another CSS file.
When I run the rails server and navigate to my homepage, I get an error:
Sass::SyntaxError in Pages#rootpage
Showing C:/Users/User/Documents/SoapBox/app/views/layouts/application.html.erb where line #6 raised:
File to import not found or unreadable: bootstrap.
Load paths:
C:/Users/Soham/Documents/SoapBox/app/assets/images
C:/Users/Soham/Documents/SoapBox/app/assets/javascripts
C:/Users/Soham/Documents/SoapBox/app/assets/stylesheets
C:/Users/Soham/Documents/SoapBox/vendor/assets/javascripts
C:/Users/Soham/Documents/SoapBox/vendor/assets/stylesheets
C:/RailsInstaller/Ruby1.9.3/lib/ruby/gems/1.9.1/gems/turbolinks-1.3.0/lib/assets/javascripts
C:/RailsInstaller/Ruby1.9.3/lib/ruby/gems/1.9.1/gems/jquery-rails-3.0.4/vendor/assets/javascripts
(in C:/Users/Soham/Documents/SoapBox/app/assets/stylesheets/styles.css.scss:2)
`File to import not found or unreadable: bootstrap`.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='http://fonts.googleapis.com/css?family=Oswald:700,300' rel='stylesheet' type='text/css'>
<%= favicon_link_tag "favicon.png", :type => "image/png", :rel => "icon" %>
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
<%= csrf_meta_tags %>
I don't understand why the error is occurring.
Any help would be much appreciated!
Thanks!
SohamK
I recommend watching this: RailsCast
It mentions installing bootstrap like this:
#commandline
rails g bootstrap:install
If it doesn't work after that then try adding this to your less file.
#css NOT scss
#import "twitter/bootstrap/bootstrap";
Remember, that gem is in less. Importing less files into your scss file will break.
Update:
Since you are already using bootstrap-sass, it shouldn't have any problem. Can you paste the content of your styles.css.scss
Original:
You might need bootstrap-sass instead of bootstrap-rails gem if u want to import it to custom stylesheet.
#Gemfile
group :assets do
gem 'bootstrap-sass'
end
# app/assets/stylesheets/styles.css.scss
#import 'bootstrap';
#import 'bootstrap/responsive';
If you use want to use bootstrap-rails gem, you need to import inside sprocket in application.css
# Gemfile
group :assets do
gem 'bootstrap-rails'
end
# app/assets/stylesheets/application.css
/*
*= require bootstrap
*= require bootstrap/responsive
*/
Although this will not answer your question regarding your error, I much prefer to simply include the Bootstrap File in your 'Vendor' assets folder (in which it is common practice to put anything not coded by you in there like JQuery).
I prefer this because when Twitter-Bootstrap has an update, it is much simpler to just delete the files. Also, it is much nicer to see your CSS files in whatever editor you are using.
Add the extension .scss to application.css. If you deleted it, then add it again.
It should look like this:
#application.css.scss
/*
*
*= require_self
*= require_tree .
*/
#import "bootstrap";
...
It is VERY important to use that import in an .scss file. Otherwise it won't work.
Make sense?
I am reading the "agile web development with rails" book and ran into a problem at the end of chapter 6. Basically, what I have done so far is defined a sass stylesheet (products.css.scss) and linked it to my application in layouts/application.html.erb:
<!DOCTYPE html>
<html>
<head>
<title>Depot</title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
<body class='<%= controller.controller_name %>'>
<%= yield %>
</body>
</html>
but it doesn't load when i run the server and visit the page!
any idea why?
This solved my problem:
bundle exec rake assets:precompile
i just spent an hour figuring out the answer, since been having the exact same issue myself. go to your application.css.sass and make sure it has
/* ...
*= require_self
*= require_tree .
*/
in it. this auto loads all the other .css.sass in apps/assets/stylesheets, then precompiles them into public/assets/stylesheets to be 1 statis css file, and that is being served to your browser.
Have you include that products.css.scss in the application.css manifest file that you are referencing in the layout?
With the asset pipeline enabled, you must include the manifest in the layout and reference all the stylesheets from the manifest.
Hope it helps.
Running the assets precompile command will compile as the user above mentioned... however, that might not be what you want to do unless you want to have to run that everytime you make a change and then add all of this to your SCM repo and then possibly have issues in production.
The real solution to this exact example is that the doesn't have the "products" class in it, so the products.css.scss isn't picked up. See this post which helped me understand this: https://stackoverflow.com/a/10080134
place the depot.css from /public/stylesheets/ to app/assets/stylesheets/
according to the documentation (http://apidock.com/rails/ActionView/Helpers/AssetTagHelper/StylesheetTagHelpers/stylesheet_link_tag) you can set the tag to include all stylesheets in the stylesheets directory with stylesheet_link_tag :all There are also options for caching, recursion, and concatenation.
If you don't want to include everything but just the application.css and your controller's css you could do this:
= stylesheet_link_tag 'application', params[:controller].classify.downcase.pluralize
Im very new to ruby, learning from some tutorials in a book i bought. I'm aware the books going to date quick and i think possibly already has.
I'm trying to get the follow code to load my stylesheets and my js to the page.
<!DOCTYPE html>
<html>
<head>
<title>Depot</title>
<%= stylesheet_link_tag "application" %>
<%= javascript_include_tag :defaults %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
However this is not working, when i load my rails server and locally view my app from the tut, the css and js are both not loading. There is no reference to them in the head. Is this a date way to do it or perhaps something else is wrong? Any help would be appreciated, like i said im totally new and not a dev by trade so go easy on me.
Regards
V
Using rails 1.9.3-p0
First of all I advise you to look for information on asset pipeline for rails 3 ( you can start with Railscast)
To load your js files change
<%= javascript_include_tag :defaults %>
to
<%= javascript_include_tag "application" %>
and your application.js should be sth like
// This is a manifest file that'll be compiled into including all the files listed below.
// Add new JavaScript/Coffee code in separate files in this directory and they'll automatically
// be included in the compiled file accessible from http://example.com/assets/application.js
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// the compiled file.
//
//= require jquery
//= require jquery_ujs
//= require_tree .
the last line loads your js files from assets folder