I'm working on a older rails system which is using an older version of bootstrap. I want to start moving things to bootstrap 4 and would like to start with the header and footer. The header and footer are being rendered as partials in the application view file.
application.html.erb
<head>
<%= stylesheet_link_tag "application", media: "all" %>
</head>
<body>
<%= render 'layouts/header' %>
<%= yield %>
<%= render 'layouts/footer' %>
</body
Lets just say the stylesheet link tag needs to be inside the application.html file there is other things in the application.html file that need it.
Application.css
*= require bootstrap_and_overrides
*= require cosmo/loader
*= require cosmo/bootswatch
*= require cosmo/font-awesome
I can't remove any of the required files because it will effect the rest of my pages.
I want to use the bootstrap cdn for my header and footer
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
How can I achieve using only the bootstrap cdn for the header and footer and exclude the required css files for these two partials?
It is good that you're upgrading to the newer version of bootstrap but I would recommend you to not try to use separate bootstrap for different partials.
There will be no straight and clean to do so I believe so you'll be wasting your time and effort.
It will increase the loading time of your view
Alone Bootstrap CSS may not work for many components you'll also need latest jQuery/Javascript to make it work.
I'll suggest you to create a new branch (hopefully you'll be using Git) and take your time to upgrade Bootstrap in that and merge whenever you feel you're ready.
Related
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.
I'm building a web app on ROR5 and the layout/design is all done, with the CSS/JS files finalized. But when I open the app, click on one link, and navigate through the website, the CSS fails to load. More specifically, the CSS is all messed up. For example, say I go from 'Home' -> 'Page A', then if I backspace to 'Home' again (or click the logo to navigate to 'Home'), the 'Home' page will be messed up. Only when I refresh the page, I would get the correct display.
At first I thought it was a cache problem, but soon discovered that this line is causing the issue:
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
When I delete this line, the display issue is no longer present. However, all JS effects/JS-based plugins would not work. I have a text editor, a few jQuery animations and tab navigations, which all don't work when I delete that line.
+ of course, instead of just deleting the line, I also tried to simply disable turbolinks by doing:
<%= javascript_include_tag 'application' %>
and removing turbolinks from my Gemfile. This also didn't work.
My Gemfile includes:
gem 'turbolinks', '~> 5'
gem 'coffee-rails', '~> 4.2'
gem 'jquery-rails'
And the remaining GEMs are all standard gems for my frontend side (bootstrap, SASS, font awesome etc).
My application.js looks like this:
//= require rails-ujs
//= require jquery
//= require jquery_ujs
//= require tinymce
//= require turbolinks
//= require bootstrap-sprockets
//= require_tree .
And for reference, my application.html.erb contains a like the following:
<head>
<title>..</title>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all' %>
<%= stylesheet_link_tag params[:controller] %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Adobe Typekit Scripts -->
<script src="https://use.typekit.net/ovy4zfg.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
</head>
What could be the problem? Thanks.
I think the issue here is that you're loading in controller-specific stylesheets (<%= stylesheet_link_tag params[:controller] %>). Turbolinks will append new stylesheets, but will not remove those that are absent in subsequent page loads. So here is the flow:
User visits Home
Stylesheet for Home's controller loaded
User visits Page A
Stylesheet for Page A's controller loaded after the Home CSS
Home CSS and Page A CSS will remain in the head
If possible, include all your CSS in the application.css manifest file. If you have some controller-specific styles, try adding a class to the body, e.g.:
<body class="<%= controller_name %>">
Then you can scope your styles, e.g. for a pages_controller:
body.pages {
…
}
Alternatively you could add data-turbolinks-track="reload" to your CSS link tag:
<%= stylesheet_link_tag params[:controller], 'data-turbolinks-track': 'reload' %>
However, this will mean that you will only get the benefits of Turbolinks when navigating between pages that use the same controller. When navigating between pages that use a different controller, you will get a full page load. This is because Turbolinks will track the presence or absence of the CSS and reload if it has changed.
One last thing: it is generally a good idea to add 'data-turbolinks-track': 'reload' to your application.css so that if you release a new version of your CSS, the users on the site will be up-to-date when the change goes live.
Hope that helps
For people who came here with a slightly different problem:
When using different CSS files for different areas of your application (e.g. application.css for your regular app and admin.css for your admin area), Turbolinks fails to handle them properly when they do not live on separate (sub)domains.
So when /admin uses a different CSS file than the rest of the application, clicking a link to, say, /admin/posts and then using the back button to navigate back to /, the wrong CSS file will be used.
In this case, you need to set a root location for Turbolinks.
From the docs:
By default, Turbolinks only loads URLs with the same origin — i.e. the same protocol, domain name, and port — as the current document. A visit to any other URL falls back to a full page load.
In some cases, you may want to further scope Turbolinks to a path on the same origin. For example, if your Turbolinks application lives at /app, and the non-Turbolinks help site lives at /help, links from the app to the help site shouldn’t use Turbolinks.
Include a <meta name="turbolinks-root"> element in your pages’ <head> to scope Turbolinks to a particular root location. Turbolinks will only load same-origin URLs that are prefixed with this path.
To make the admin area under /admin from my example display the CSS correctly, include <meta name="turbolinks-root" content="/admin"> in the layout's <head>.
Tried the same thing, reinstall Webpacker and still for the error
Webpacker can't find application in C:/Users/Admin/friends/public/packs/manifest.json. Possible causes:
You want to set webpacker.yml value of compile to true for your environment
unless you are using the webpack -w or the webpack-dev-server.
webpack has not yet re-run to reflect updates.
You have misconfigured Webpacker's config/webpacker.yml file.
Your webpack configuration is not creating a manifest.
Your manifest contains:
{
}
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
According to the bootstrap docs
adding the following to your <head> makes your site responsive
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
In rails and the asset pipeline you declare your css file in application.css so the last line above is not required.
Im using the bootstrap-sass gem and the above line is achieved this line of code in the application.css file
#include "bootstrap-responsive";
It works!
But unfortunately this makes every view responsive.
I have a number of views such as my backbone app that I dont want to be responsive.
I thought about declaring the <meta viewport...> tag into a layout file that is only used for the those parts of my site that require responsive behavior.
This doesn't seem to work and despite some views not declaring this meta tag via their layout, they still become responsive.
Since I cant granularly control which css files get loaded in the asset pipeline I'm a bit stumped how to turn off and on this responsive behavior.
How do i achieve this?
Check out This link for some good info. It can be overwhelming, know, you don't have to do ALL of that... The key is: if you remove require tree (which will not add all files in directory) you need to manually add them in config/environments/production.rb with:
config.assets.precompile += %w( application-all.css application-print.css application-ie.css )
Then you can use stylesheet_link_tags with no issues...
To make it more flexible I add this to my application head:
<%= yield :head if content_for?(:head) %>
and then all my views use:
<% content_for(:head) do %>
<%= stylesheet_link_tag "#{params[:controller]}.#{params[:action]}" %>
<%= javascript_include_tag "#{params[:controller]}.#{params[:action]}" %>
<% end %>
I'm trying to figure out the asset pipeline in Rails 3 to play around with the Google api
"http://maps.google.com/maps/api/js?sensor=false"
1st question. Is it best to place that link in views/layouts/application.html.erb or in assets/javascripts/application.js
2nd question
If I'm writing a javascript function that gets its arguments from a form id in a view, where do I put that javascript function? Does it go directly in assets/javascripts/application.js or are there other places to put the javascript..
I am not sure if you even can put the maps API into the application.js. At least it didn't work for me last time I tried.
The general idea of application.js is that all content that is referenced there will be automatically minified and compressed in a production environment. Since that's not possible for the maps API I guess you should put it into your views/layouts/application.html.erb
Also note that you may not want to include the maps API on all your pages. You could either define a layout that is itself referencing application.html.erb or you use a partial or you use a content_for to include the page only in the places you need it.
One thing I've done in the past (there may be better ways) is to define a placeholder in the head section of the layout and then use that to inject scripts that are only required on a small number of pages. Like this:
application.html.erb:
<head>
other stuff
<%= yield :scripts %>
...
</head>
And inside your view that requires google maps:
<% content_for :scripts do %>
<script type="text/javascript" ..... ></script>
<% end %>
Anything inside the content_for block will be output where you placed your <%= yield :scripts %>.