I have a rails app at 4.1.5. There are some score sheet pages which need printing and which need to printed at an exact font size and td border thickness (thin). I am using the bootstrap-sass gem.
I have just updated my code to bootstrap 3 and now find that bootstrap is interfering with my score sheet css. What is my best strategy?
Place my scoresheet css file in either lib/assets or vendor/assets. I have read that there is a descending load order with vendor/assets loaded last but can't confirm if that's true.
Put my score sheet css (or sass) into my bootstrap overrides css after the #import bootstrap directive.
Remove require_tree from my application.css and require each file explicitly in order. I understand require_tree will load files in random order.
None of the above?
require_tree will load alphabetically. You could prefix each file with a number, but that's not my recommendation.
You can explicitly require files, then follow that with a require_tree, which is a catch-all for the rest, which I recommend.
Regarding order, if you want to affect all sass variable based items such as font-size across the entire site:
declare values for matching variables (see bootstrap/variables.scss)
import bootstrap
require specifics, then catch-all with require_tree
Related
I just implemented Trix editor in my rails app and it works perfectly on localhost but is pulling this ugly business on Heroku:
I can only imagine this is to do with the asset pipeline, so the basics are that I did install the gem (gem 'Trix') and did bundle install, I added //= require trix in my application.js and *= require trix in my application.css.scss. My assets precompiled upon pushing things to Heroku.
Here's the entire application.css.scss structure:
*= require magnific-popup
*= require trix
*= require_tree .
*= require_self
*/
#import "bootstrap-sprockets";
#import "bootstrap";
#import 'ionicons';
Other than these basics, can anyone figure out what step I'm missing to get the styling to appear on Heroku?
There is a style being applied to a class .form-control that is setting height on that box at 34px. Which is why it does not grow with the text
When I remove the height property that the box gets then the box expands out around the text again. This can be kind of hard to find and fix from my end but it is located in a file application.css file inside a block with the same styles that this is surrounded by, probably not line 5 though, probably a later line but depends on file size, search for height: 34px or just 34px again or something and look for a block of styles like the one in the image here and remove that line (now keep in mind if this line is used as a style somewhere else then that will break).
That should fix the issue.
If you are not familiar with using chrome (or any browsers) dev tools I would recommend finding any reference and getting comfortable with using them, they are perfect for debugging this kind of thing.
I have required CSS stylesheets many times in many of my RubyOnRails applications, and actually i need a few things demystified.
What is the difference between:
//=require mystyles
and
*=require mystyles
Both seem to work, so what is the difference?
And is this a part of the asset pipeline or a part of SASS or just plain CSS?
The two examples you gave are exactly the same for stylesheets, however the //= syntax is the only one that works for Javascript. You also need a standard CSS comment at the start (/*) and a close comment (*/) at the end of the require block to make it ignored to anything but the asset pipeline:
/* ...
*= require mystyles
*= require_self
*/
These require directives are only part of the asset pipeline, not CSS or SASS. To include a stylesheet for CSS or SASS, you would use a #import rule as Blieque stated in his comment.
Check out the manifest files and directives section of the Asset Pipeline guide on the Ruby on Rails guide site for a more detailed explanation of the difference. There is also a warning given there that might be of interest:
If you want to use multiple Sass files, you should generally use the
Sass #import rule instead of these Sprockets directives. Using
Sprockets directives all Sass files exist within their own scope,
making variables or mixins only available within the document they
were defined in.
There is no difference, as long as it's a valid comment line, it'll work :)
I have been looking around and cannot find a good example of implementing Chosen, http://harvesthq.github.com/chosen/, into a Rails app. I am trying to convert my existing multi-select into a chosen styled multi-select box.
I tried inserting the files manually, copying chosen.jquery.js into my assets/javascripts folder along with adding chosen.css. Also added //= require chosen-jquery to application.js along with the following code
jQuery(function($){
$('.chzn-select').chosen();
})
Also have *= require chosen in application.css.scss
I added :class => "chzn-select" in a collection_select in a form_tag.
Also tried using the 'chosen-rails' gem (here is an example http://choppingbloc.tumblr.com/post/24894460392/multiple-select-boxes-with-chosen-jquery) but had no luck.
Anything I might be overlooking? The collection_select is working, but it is not styled like Chosen. I am a beginner so if there is anything obvious I may have overlooked, please tell - everything above is what I have done.
Set it up like this
You have to include both the css file and the js file
in you application.css.scss, (because it is sass, do not use /* require)
#import "chosen";
in you application.js
//= require chosen.jquery
You should give your selects a different class or id than
$('.chzn-select').chosen();
because, it might make things messy when you debug the html. Chosen gives classes with this prefix like .chzn-done, .chzn-single, chzn-drop, chzn-search.
If you have a railscasts pro account.
look at this
token-fields-revised
You should really drop the chosen plugin and go for the select2 plugin. It is based on the chosen plugin, but is way better.
I'm using this gem in my rails app:
https://github.com/thomas-mcdonald/bootstrap-sass/
I would like to override the responsive-navbar, which is included on the last line of this file, with my own:
https://github.com/thomas-mcdonald/bootstrap-sass/blob/master/vendor/assets/stylesheets/_bootstrap-responsive.scss
Is that possible?
I've tried creating an empty file at this location: /app/assets/stylesheets/bootstrap/_responsive-navbar.scss, but it doesnt override from the bootstrap-sass project.
CSS overrides previous behavior if it is included after a previous style. Or in other words:
h1 {color:blue}
h1 {color:red}
Will render an h1 HTML tag red.
To override the responsive navbar you can add your changes to the application.css.scss file after
*= require_self
*= require_tree .
which compiles all the other css files in your rails app.
For what it's worth, the ruby docs recommend that you "should not rely on any particular order" in what css file gets compiled first/second (see
http://guides.rubyonrails.org/asset_pipeline.html#manifest-files-and-directives). Which may indicate why your new styling is not showing up.
Sprockets official documentation clearly says that:
Sprockets takes any number of source files and preprocesses them
line-by-line in order to build a `single` concatenation.
I'm a big fan of sprockets in Rails but here's the problem - my application has to support multiple layouts(desktop browsers) and mobile clients(iphone, ipad, android phones etc).
Both of this layouts require their own HTML reset CSS rules. Concatenated rules of desktop&mobile reset files would make a conflict because they override low level CSS directives.
How can I fix that?
You can get multiple top-level CSS files by making a Sprocket file for each. For example, say you want desktop.css to be comprised of reset.css, common.css, and ie.css and mobile.css to be comprised of common.css and ios.css. You would have the following files:
app/assets/stylesheets/desktop.css
app/assets/stylesheets/mobile.css
app/assets/stylesheets/reset.css
app/assets/stylesheets/common.css
app/assets/stylesheets/ie.css
app/assets/stylesheets/ios.css
In desktop.css, you would have the following:
/*
*= require reset.css
*= require common.css
*= require ie.css
*/
In mobile.css, you would have the following:
/*
*= require common.css
*= require ios.css
*/
Then, in app/views/layouts/desktop.html.erb, you would do
<%= stylesheet_link_tag :desktop, :debug => Rails.env.development? %>
and similarly for mobile.html.erb.
Lastly, you'll need to set the precompiled asset list in config/environments/production.rb:
config.assets.precompile = %w( desktop.css mobile.css )
I'm not really sure if sprockets supports this but I know that if you use the Jammit gem. You can setup different packages each with it's own cocktail of your JS or css files. e.g. have a :workspace package for desktop and and :mobile package for mobiles.
It is all defined in a config yaml file and it will concat them in the order you list them, which can help get plugin dependencies correct etc.
javascripts:
workspace:
- public/javascripts/vendor/jquery.js
- public/javascripts/lib/*.js
- public/javascripts/views/**/*.js
- app/views/workspace/*.jst
mobile:
- public/javascripts/vendor/jquery.js
- public/javascripts/lib/mobile.js
stylesheets:
common:
- public/stylesheets/reset.css
- public/stylesheets/widgets/*.css
workspace:
- public/stylesheets/pages/workspace.css
mobile:
- public/stylesheets/pages/mobile.css
Jammit might be worth a look for your needs
Hope this helps.
I'm assuming you already have different layouts for each device or device group. If so, just include a different top-level css file in each, then have different require statements in those top-level files. If you're using Rails 3.1, there's no reason you have to keep the built-in line that includes all css files.