I would like to create a mobile version of my rails 5.0.0.1 application using jquery mobile.
As a starter I found useful instruction written in a web page by Scott W. Bradley and in a railscasts episode.
However when I insert the jquery mobile js file in app/assets/javascripts and the jquery mobile css file in app/assets/stylesheets my application gets broken: css rules are not respected, redirects fails, javascripts do not work, colours are blurred, buttons do not work.
So I thought to add the jquery mobile files in a dedicated folder /app/assets/jquerymobile and I edited /app/views_mobile/layouts/application.html.erb adding in the head the following lines of code:
<%= stylesheet_link_tag '/app/assets/jquerymobile/jquerymobile.css' %>
<%= javascript_include_tag '/app/assets/jquerymobile/jquerymobile.js' %>
However the files are not loaded, the mobile behaves as if the jquerymobile.css and jquerymobile.js files do not exist. My goal is to keep separated jquery mobile from the desktop version and load the files in case of request from mobile. However I would like to know what breaks the application, since the mobile version with the complete asset pipeline would inherit the problem.
To esclude css and js files from the asset pipeline it is necessary to add the following entries at the very end to application.css and application.js:
*= stub jquerymobile
//= stub jquerymobile
Then it is necessary to add the following lines of code in /config/initializers/assets.rb:
Rails.application.config.assets.precompile += %w( jquerymobile.css )
Rails.application.config.assets.precompile += %w( jquerymobile.js )
At this point it is possible to include the above css and js files using stylesheet_link_tag and javascript_include_tag in the head of the /app/views_mobile/layouts/application.html.erb file as follows:
<%= stylesheet_link_tag 'jquerymobile.css' %>
<%= javascript_include_tag 'jquerymobile.js' %>
See also this gist.
Related
I have a clients.css and jobs.css in the assets/stylesheets location.
Each has a respective controller. Jobs was created with a scaffold after clients. The scaffolds.scss file is blank.
application.css is blank
When I code a change such as body{color:black} in the jobs.css, it changes the clients/index.html.erb view and the jobs/index.html.erb view.
What could be the reason for this? I would like to have separate .css files for jobs and clients..
From the documentation:
Sprockets concatenates all JavaScript files into one master .js file
and all CSS files into one master .css file.
What this means, of course, is that when you make a change to jobs.css, you'll see the same css being applied to every matching element throughout your application. All of those separate .css files are there to help you keep things organized from a human perspective, rather than from the perspective of your application.
You might want to just come up with different IDs and classes depending on your page (like #body_client and #body_job) to differentiate them, but you can see how this naming convention could get unwieldy as your app grows.
Having separate assets is possible, but not without some pain.
In application.js, remove:
//= require_tree
In application.css, remove:
*= require_tree
In application.html.erb, add the following:
<%= stylesheet_link_tag "application", params[:controller], :media => "all" %>
<%= javascript_include_tag "application", params[:controller] %>
Create a new initializer file at config/initializers/assets.rb and add the following code:
%w( clients_controller jobs_controller ).each do |controller|
Rails.application.config.assets.precompile += ["#{controller}.js.coffee", "#{controller}.css"]
end
That should get you set up with separate per page assets. Check the original blog post for more details.
So, I'm learning to build Rails app, I've written the controller and everything looks fine, then moved to get the views.
As usual I downloaded a template and started to move it into my app (normal html template from html5up.net).
All JS files I've put them in app/assets/javascripts.
All CSS files I've put them in the app/assets/stylesheets.
and in the app/views/layouts/application.html.erb I've included them all using the javascript_include_tag and stylesheet_link_tag
so everything in theory should be fine.
In my routes file I got those 2 lines:
resources :users
root 'users#new'
When I start the server and go to the root route localhost:3000 everything is rendered smoothly and with awesome style, however if I try to access the very same page but from it's original route localhost:3000/users/new somewhy the html I get doesn't include images and scripts, and the style is messed up (probably because no images/js), same goes for other pages from the users controller.
I tried putting the js/css files in public folder and linking to them but it gives exact same results.
Any idea what's going wrong and how to fix it?
I'm using Rails 4.2.1
Rather than including each of the stylesheets / javascripts directly, reference them within application.css and application.js respectively. This will add them to the asset pipeline - making the application run faster amongst other things (http://guides.rubyonrails.org/asset_pipeline.html).
So instead of referencing the scripts directly in application.html.erb, just ensure application.html.erb has these to lines in the head section:
<%= stylesheet_link_tag "application", media: "all" %>
<%= javascript_include_tag "application" %>
Then check that application.css exists in app/assets/stylesheets and that it includes this line:
*= require_tree .
This tells it to include every .css file that is within the assets/stylesheets directory (alternatively reference each file individually with a require statement)
Similarly, ensure app/assests/javascripts/application.js includes:
//= require require_tree .
And that the javascript files are in app/assets/javascripts
Put all the images in app/assets/images
Change all the references to the images in CSS files from
url("images/example.png")
to
url(image_path("example.jpg"))
or
image-url("example.png")
And you should be good to go... the rails helpers should handle the relative path issues that it looks like you've been experiencing.
I know it's kinda old, but forgot to post the answer for this.
The problem was in the view html codes, the <%= stylesheet_link_tag "application", media: "all" %> was inside a <noscript> tags so they didn't work.
I'm fairly new to Rails (and web development in general) and I'm trying to add the Get Shit Done UI Kit (GSD) to my existing Rails-Bootstrap app (with Bootstrap already installed using the bootstrap-rails gem).
These are the files that come with this particular kit:
x_get_shit_done
--assets
---css
-----demo.css
-----get-shit-done.css
-----gsdk-base.css
-----gsdk-checkbox-radio-switch.css
-----gsdk-sliders.css
---img
---js
-----custom.js
-----get-shit-done.js
-----gsdk-bootstrapswitch.js
-----gsdk-checkbox.js
-----gsdk-radio.js
-----jquery-ui-1.10.4.custom.min.js
--bootstrap3
--index.html
This is how the stylesheets are called in the example template:
<link href="bootstrap3/css/bootstrap.css" rel="stylesheet" />
<link href="assets/css/get-shit-done.css" rel="stylesheet" />
<link href="assets/css/demo.css" rel="stylesheet" />
But in my Rails apps, stylesheets/JS are called like so:
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
I understand that there is some magic that Rails provides for adding stylesheets to projects this way, but I don't quite understand how that magic applies to adding new custom stylesheets.
And additionally, all CSS files in my app (following a tutorial) are Sass (.css.scss), all HTML files are embedded Ruby (.html.erb), and Bootstrap is already installed using the bootstrap-rails gem.
Do I need to somehow convert the CSS files with UI kit to Sass? There's no gem for GSD so it seems necessary to add all of the styles manually, which is what I think is throwing me off here.
Thanks for your patience with this nooby's question :)
First of all read about Rails' Asset Pipeline and you find the answers for all your questions.
In your case, you need to put css files to vendor/asssets/stylesheets and js files to vendor/assets/javascripts. Then add them with require to application.css and application.js.
application.css:
*= require_directory get_shit_done # this is vendor/assets/stylesheets/get_shit_done
*= require_tree .
*= require_self
application.js:
//= require_directory get_shit_done
//= require_tree .
After this all css and js files will be loaded to <head> automatically.
Then, you check index.html and change your application.html.erb according to it: add <meta>'s, some basic div's, such as div.container in Bootstrap and so on. You don't need to add css and js files to layout, cause you've already done it with Asset Pipeline.
But I strongly recommend you to read about Asset Pipeline, .erb format and some other rails basics. It's better to start from them, not from implementing css framework to the project.
#Allen I'm part of Creative Tim, we made the Get Shit Done UI Kit and I would like to tell you that we've got a collaboration with a Ruby on Rails professional and we created a Get Shit Done UI Kit Rails Gem
Please check it, it is hosted on the official rubygems.org and let us know if everything is working as expected.
Best,
Alex
I was wondering if there was a way to ignore a css file from being added to the manifest application.css file.
The reason why I want to do this is that I have two versions of the site, a mobile version, an an web version. The mobile version's css is currently being added to the manifest, and messing with the style of the main page.
Is there anyway to configure the manifest file to exclude a certain css file?
Remove the require_tree directive and add just the files you want, in the order you want them to application.css. Leave out the mobile CSS file.
To access the mobile CSS file you need to add it to the precompile list in
production.rb:
config.assets.precompile += ['mobile.css']
This will allow you to use the standard rails helper to access the mobile css:
<%= stylesheet_link_tag "mobile" %>
as distinct from the application.css file.
One tip for these situations is that you can share CSS files between manifests. For example, if you have a CSS reset in a separate file this can be added to both manifests (assuming you make the mobile css a manifest too).
What I ended up doing was creating subdirectories under app/assets/stylesheets called app/assets/stylesheets/web and app/assets/stylesheets/mobile
Then place an application.css with the standard:
/* ...
*= require_self
*= require_tree .
*/
inside each of your new web and mobile folders. Then to access them:
# just use this
<%= stylesheet_link_tag "web/application", :media => "all" %>
# or this as needed
<%= stylesheet_link_tag "mobile/application", :media => "all" %>
How can I include specific JS or CSS files (by convention ?) with Ruby Rails 3.1 ?
I have a view :
views/project/index.html.erb
And I want to include a specific javascript file for this page. I put it in
assets/javascripts/project/index.js
Same for another view :
home/index.html
Thanks
In the application.css and application.js file, be sure to remove the line \\= require tree.
Then, manually list all the css/js files you want included in each manifest file, for example:
// application.js
//= global.js
//= everywhere.js
Then, I would setup a yield in your header or your closing body tag for your application layout file, for instance (in haml)
%head
%title Some Page
= stylesheet_link_tag 'application'
= yield :stylesheets
Then in your particular view, say _example_partial.html.haml, do this:
- content_for :stylesheets do
= stylesheet_link_tag 'example_partial'
-# the rest of your view goes here
You do the exact same thing with Javascript files, just using javascript_include_tag instead of stylesheet_link_tag.
This will let you quickly and easily assemble view-specific javascript / css payloads. There may be a more sophisticated way to handle this using the asset pipeline, but I would suggest that if the asset pipeline is already minifying and merging you major stylesheets that this kind of +1 css / js file per view is not going to cause a major performance hit. Just try to make sure you don't overdo it with dozens of separate files loading into a single view.