jquery-ui-rails sounds really helpful as it figures out all the dependencies for the UI components you want and serves up the theme css/images. However, at the end of the Github page linked to above, it talks about the limitations where only the base theme is supported. Loading other themes is apparently "cumbersome, not officially supported by this gem, and adds 1 KB overhead as both the base theme and the custom theme are served up."
Can't I just edit the base theme/images this gem uses and replace it with my own theme from jqueryui.com's ThemeRoller?
You can use your custom theme.
For example:
- delete/comment from application.css this lines
*= require jquery.ui.core
*= require jquery.ui.theme
download theme from http://jqueryui.com/themeroller/
put css file in app/assets/stylesheets/ and you can customize styles
put images in app/assets/images/images/
This didn't work for me. After doing everything that Alexey mentioned, I had to add the following back into the application.css:
*= require jquery-ui.min.css
Obviously, I copied in the .min file into the assets/stylesheets folder from all of the files downloaded with the theme.
ME: Rails 4.2.7, Ruby 2.2
Related
Rails 4.2.4
Ruby 2.1.2
I am trying to use twitter-bootstrap-rails.
I would like to use it by the same way I am using jquery-rails
assets/applications.js
//= require jquery
In this case I don't need to copy any jquery.js or jquery.css files to my project because Rails fetches it for me form gem.
The different situation is with twitter-bootstrap-rails.
In the guide
The Twitter Bootstrap Rails gem can provide the Bootstrap stylesheets
in two ways.
The plain CSS way is how Bootstrap is provided on the official
website.
The Less way provides more customization options, like changing theme
colors, and provides useful Less mixins for your code, but requires
the Less gem and the Ruby Racer Javascript runtime (not available on
Microsoft Windows).
Seems the first way is more suitable for me. But in this case I should use the generator rails generate bootstrap:install static before to use any twitter-bootstrap .js or .css files. The generator fetches the files into assets folder of my project.
So I am looking for a way how to use twitter-bootstrap-rails .js and .css files in my project without copying them into my project folder. I just would like to add twitter-bootstrap-rails files just putting for instance line //= require bootstrap into application.js.
Thanks a lot.
Instead of using twitter-bootstap-rails, use bootstrap-sass.
In your application.js, add the following:
//= require bootstrap-sprockets
change application.css to application.scss and add:
#import "bootstrap-sprockets";
#import "bootstrap";
and you're good to go. Oh. Just please don't forget to restart your server.
I noticed that after generating a new Rails 4.2 application the order for the requires in application.css has been changed.
*= require_tree .
*= require_self
Shouldn't this be the other way around? Even in the Guides it isn't this way...
The change was made in order to allow styles defined in application.css to override previously included styles.
See Rails issue #11639 and this commit which changed the order of the require instructions.
As described in the official documentation here, and also explained in this SO answer here:
This puts the CSS contained within the file (if any) at the precise location of the require_self call.
This is slightly different than what I wrote in the comments since, as indicated by the above quote, the JS or CSS in the manifest will be inserted at the location of require_self. This becomes important if you have later assets that depend on something you wrote in the manifest.
Of course if you're doing that though, it would probably be better to place that "inline" asset in a separate file anyways, just to keep the manifest clean.
Learning rails... so I use the bootstrap-sass gem... Where are the actual bootstrap CSS files? Seems like there is some sort of magic going on to include them. What if I want to tweak a property of the CSS....
You're using the bootstrap-sass gem which is preferred by many Rails developers. So the Twitter Bootstrap CSS files are in the gem (in vendor/assets/stylesheets/).
Developers use a gem to include Bootstrap files because it makes things easier to update when new Bootstrap versions are released by simply updating the gem (plus gems are the Rails way, eh?). The bootstrap-sass gem is popular because Sass is the default format for stylesheets in Rails. An alternative is the twitter-bootstrap-rails gem which uses the native Bootstrap LESS format for stylesheets.
Using the gem, you need to modify the file app/assets/javascripts/application.js:
#app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .
Best practice is to add a file named app/assets/stylesheets/bootstrap_and_overrides.css.scss:
# app/assets/stylesheets/bootstrap_and_overrides.css.scss
#import "bootstrap";
body { padding-top: 60px; }
#import "bootstrap-responsive";
This shows an example of overriding the Bootstrap body style to add padding to accommodate the Bootstrap navigation bar. Then just add application-specific CSS (or Sass) in additional files in app/assets/stylesheets/.
I've written an in-depth article:
Twitter Bootstrap and Rails
that goes into greater details and shows how to set up the application layout, navigation links, Rails flash messages, and form builders for Twitter Bootstrap. The article could be helpful if you want to know more.
Unfortunately, if you use the gem, the css files are hidden from you. If you do a bundle show bootstrap-sass you'll see where the files for the gem are, and you can see the stylesheets being used in there.
If you view the gem's files, you'll see the stylesheets being used in vendor/assets/stylesheets/.
I'd recommend just not using the gem, and getting your own Bootstrap stylesheets and putting them in your application's vendor/assets/stylesheets/.
The CSS files are inside the gem. To include them in your application,
in app/assets/stylesheets/ you can create a file of your choice. (i'll call it bootstrap_overrides.css.scss)
and include the bootstrap source, and override.
#include "bootstrap";
/* here are the overrides if you want to override the styles */
#include "bootstrap-responsive";
and make sure that bootstrap_overrides.css.scss is included in your global application.css file.
I'm somewhat new to the Rails asset pipeline so I might be doing something wrong. I'm trying to use Active Admin for my backend and twitter bootstrap css for my front end application.
I added the bootstrap.css to /app/assets/stylesheets then also added:
//= require bootstrap
to application.css - then I did a precompile of the assets locally
It seems to work fine but some of the styling isn't coming through exactly and I think it's because active admin's css is overriding it.
My understanding is that the application compiles the css assets into the application css public asset and the application uses that file when running.
I need to somehow separate the two and make it use twitter bootstrap css as the main css on the front end and maybe tell it not to use active admin's css files on the front end.
What's the best way to do this?
I had the same problem, and was able to fix it by moving
app/assets/stylesheets/active_admin.css.scss
to
vendor/assets/stylesheets/active_admin.css.scss
The active admin assets should be in vendor/ as mentioned in the rails guide:
"Vendor/assets is for assets that are owned by outside entities, such as code for JavaScript plugins and CSS frameworks."
Have you watched the RailsCasts video on using ActiveAdmin? In the video, Ryan shows you how to prevent the ActiveAdmin CSS from stepping on your main app CSS.
http://railscasts.com/episodes/284-active-admin
Moving info from Video into answer
In the application.css you remove:
*= require_tree .
For rails 4, Jiten K suggests adding this to production.rb:
config.assets.precompile += ['active_admin.css']
However one of the comments on that SO answer says this is not needed. I have not needed it so far.
For me changing application.css to following solves the problem:
*= require bootstrap
*= require_tree .
*= stub "active_admin"
I'm working with a Rails 3 app, bootstrap-sass, and the asset pipeline, and I'm looking for some ideas on how to debug asset pipelines woes.
When working in development, and compiling on the fly (i.e. including from lots of compiled css files), my app looks exactly how I expect it to.
However when I use the asset pipeline to to compile assets into a single file, to test how it will behave in production, I think validation errors in the concatenated file application.css are causing browsers to stop evaluating the css correctly, and I'm seeing a number of display issues.
When I look at the generated css files in development, and pass them through a css3 validator, I can see that validation errors occur when working with the vendored css files (in most cases these are due to vendor specific hacks, setting off the validator) - the files I've generated are passing validation when I run them through the w3c validator, and I've listed the pass/fail results in the sprockets files below:
/*
* sprocket file in application.css
*
*= require_self
*= require vendor
*= require bootstrap-include # FAILS 474 ERRORS - presumably down to css hacks
*= require DT_bootstrap # FAILS TWO ERRORS - presumably down to css hacks again
*= require navbar # PASSES
*= require footer # PASSES
*= require main # PASSES
*= require home # PASSES
*= require widget # PASSES
*= require search # PASSES
*= require devise # PASSES
*= require doohickeys # PASSES
*= require datepicker # FAILS - again yet more cross browser css hacks suspected
*/
How should you start prepping files for production when concatenation breaks an app's visuals like this?
I'm asking on here to get an idea of how best to debug a compiled stylesheet like this - it sounds like something that has been solved before elegantly, but I'm not aware of a reliable, approach when dealing with a problem like this.
For example, I can see that some rules are not being evaluated by using web developer inspector tools in Firefox and Webkit, but it's not clear to me how to go beyond that, short of doing some laborious binary search on the compiled CSS.
Surely there are some more specialised tools available for situations like this already, like being able to compile only some files in application.css, and link to a precompiled bootstrap-sass file separately, or something similar?
You should not use Sprocket directives if you are using something like bootstrap-sass, you should use #import.
Rename your manifest file from application.css to application.css.scss, then #import away, example:
#import "frameworks";
#import "bootstrap-responsive";