I recently installed the fluid960gs plugin for rails, which includes some stylesheets. How can I use these stylesheets, located in the vendor/plugins/fluid960gs directory? is there a way to do it automatically using the stylesheet_link_tag function, or do i need to manually move them to the public/stylesheets directory?
You can reference them in the vendor directory, but it would be better if you just copy them over to public/stylesheets. This way, if you make any changes to them, you'll have the originals to fall back on, in case you need to.
I think you should check if you require the plugin in your compass.rb
Then you should be able to import the lib using #import method:
Add the following to your compass.rb config file:
# Require any additional compass plugins here.
require '960fluid'
Then make sure you have imported the grid library into your core .sass or .scss file with:
#import "fluid960";
Related
I have a plugin with many types of files, and its own tree structure (html, css, js, documentation, images, etc)
Rather than going through the plugin folder, and splitting all the css and js files into the vendor/assets/js/ vendor/assets/css/ folders, I want to just keep the entire plugin folder as is. For example,
vendor/assets/multipurpose_bookshelf_slider/
How do I make sure the paths load properly, and reference them in my manifest files?
Currently, I have some files place as follows (not exhaustive)
/my_app/vendor/assets/multipurpose_bookshelf_slider/css/skin01.css
/my_app/vendor/assets/multipurpose_bookshelf_slider/js/jquery.easing.1.3.js
/my_app/vendor/assets/multipurpose_bookshelf_slider/
/my_app/vendor/assets/multipurpose_bookshelf_slider/
I'm referencing them in
application.js
//= require multipurpose_bookshelf_slider/js/jquery.easing.1.3.js
//= require multipurpose_bookshelf_slider/js/jquery.bookshelfslider.min.js
application.css.scss
#import "css/bookshelf_slider";
#import "css/skin01";
Any folder created directly under assets will be added to the load paths. Files in that folder can be referenced as usual like so:
If you have
vendor/assets/custom/js/file.js
vendor/assets/custom/css/file.css
then vendor/assets/custom/ will be added to the load paths.
Include your files in the following files by doing the following:
application.js
//= require js/file
application.css.scss
#import "css/file";
Once that's done, make sure to restart your local server, since it is upon starting your server that the load paths get recognized.
Note: to see a list of load paths, type in your terminal rails c, then type Rails.application.config.assets.paths.
If the application you're running has the assets-pipeline activated, it should find your assets after expanding the path in your application.rb
config.assets.paths << Rails.root.join("multipurpose_bookshelf_slider")
I prefer D7na's answer but with a bit of improvement in my opinion.
As long as this is related to assets, I think it is better to be placed in the assets.rb file.
assets.rb:
Rails.application.config.assets.paths << Rails.root.join("multipurpose_bookshelf_slider")
I am trying to build a Rails Engine which serves assets to its host application. Specifically, I would like to be able to do the following:
# Host App's Gemfile
gem 'my-rockin-engine'
And ...
# Host App's application.css
/*
*= require styles
*/
#import 'my-rockin-engine/mixins'
And ...
# Host App's style.sass
.host-app-defined-class-name
+my-rockin-engines-mixin
Where the mixin "my-rockin-engines-mixin" is defined somewhere in the assets of MyRockinEngine.
The problem
I have a chain of #imports from the host app, through the engine. (I'm using #imports due to reasons described here.) Any style definitions that I create inside the Engine's assets are available to the host app. However, none of the SASS mixins I create are available anywhere other than in the same file that the mixin is defined in.
Essentially, I'm wondering if my implementation is not working because either (1) I'm using Engines in a confused way; (2) It is not possible to share mixins between Rails Engines and their host application; (3) There is some aspect of sprockets/rails/compass/sass (#import/require) directives that I am misunderstanding.
Any help would be greatly appreciated! And I can always offer further details should anyone need them.
For posterity, it seems the problem I was having was in the realm of (3) -- described in my question.
Don't try and #import sass files which are named foobar.css.sass. Compass will treat such files as css, since they have to be imported via #import 'foobar.css'. #import foobar will fail because the .css is part of the filename.
So, my problem is solved by ensuring any files I #import use the .sass extension, and don't have .css in the last part of the file name.
I see https://github.com/seyhunak/twitter-bootstrap-rails how I can add bootstrap to a completely new application, using rails generate scaffold Product name price:decimal --skip-stylesheets.
My question is: how do I delete the current assets (e.g. stylesheets) from an existing application so I can install bootstrap and not have any conflicts?
PS this command seems to be for a scaffold - does it create a layout for the entire application?
If you use SASS, there is a gem https://github.com/thomas-mcdonald/bootstrap-sass that you could use instead of doing what you are trying now. As long as you have
#import "bootstrap";
in a stylesheet in app/assets/stylesheets ending with extension .css.scss (e.g. example.css.scss)
Your stylesheet are stored under app/assets/stylesheets and listed individually in a manifest file, which by default is app/assets/stylesheets/application.css.
Do not delete the manifest file. Open it, go through every item listed and delete them one by one -- both the manifest entry and the actual files. Pay attention to the require_tree and require_directory directives since they include entire directories.
I'm trying to find the twitter-bootstrap files in my rails app ('bootstrap-sass', '2.0.0'), as I need to make a change directly to the bootstrap-responsive.css file, however, I can't find it.
I have bootstrap up and running, but can't seem to find the bootstrap files. How do I locate the bootstrap-responsive.css file?
Thank you!
The bootstap-sass gem uses the Rails 3.2 asset pipeline to inject the necessary stylesheets into your app. The actual stylesheet files are located in the gem installation directory, not in your project itself.
Depending on what you want to change, you can either:
Copy the _bootstrap-responsive.scss file from the gem into your app/assets directory and edit it there.
Customize the necessary Bootstrap variables before loading up Bootstrap in your application.scss file:
$btnPrimaryBackground: #f00;
#import "bootstrap";
Edit: Try looking under
app/assets/stylesheets
Here's an example
https://github.com/joliss/solitr/tree/master/app/assets/stylesheets
I'm not too familiar with the structure of rails apps but did you create a local copy or are you using the bootstrap files being hosted directly by github? You should be able to figure that out by checking one of your launched html pages and viewing the source, looking for something like
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css">
If it's a local page, there should be a directory somewhere in your rails app where the files are stored - perhaps there's a 'static' folder or something similar? Try file-searching for it, good chance you might find it.
(I use Django/Python for web projects but I'll look into Rails a bit and see if I find anything)
If you are using HAML and SASS in your Rails application, then any templates you define in public/stylesheet/*.sass will be compiled into *.css stylesheets. From your code, you use stylesheet_link_tag to pull in the asset by name without having to worry about the extension.
Many people dislike storing generated code or compiled code in version control, and it also stands to reason that the public/ directory shouldn't contain elements that you don't send to the browser.
What is the best pattern to follow when laying out SASS resources in your Rails project?
The compass framework recommends putting your sass stylesheets under app/stylesheets and your compiled css in public/stylesheets/compiled.
You can configure this by adding the following code to your environment.rb:
Sass::Plugin.options[:template_location] = {
"#{RAILS_ROOT}/app/stylesheets" => "#{RAILS_ROOT}/public/stylesheets/compiled"
}
If you use the compass framework, it sets up this configuration for you when you install it.
I always version all stylesheets in "public/stylesheets/sass/*.sass" and set up an exclude filter for compiled ones:
/public/stylesheets/*.css
Honestly, I like having my compiled SASS stylesheets in version control. They're small, only change when your .sass files change, and having them deploy with the rest of your app means the SASS compiler doesn't ever need to fire in production.
The other advantage (albeit a small one) is that if you're not using page caching, your rails process doesn't need to have write access to your public_html directory. So there's one fewer way an exploit of your server can be evil.
Somewhat related, but it's a good idea to regenerate your CSS during your capistrano deployments. This callback hook does just that:
after "deploy:update_code" do
rails_env = fetch(:rails_env, "production")
run "#{release_path}/script/runner -e #{rails_env} 'Sass::Plugin.update_stylesheets'"
end
Update: This should no longer be necessary with modern versions of Haml/Sass.
If I can manage it, I like to store all of my styles in SASS templates when I choose HAML/SASS for a project, and I'll remove application.css and scaffold.css. Then I will put SASS in public/stylesheets/sass, and add /public/stylesheets/*.css to .gitignore.
If I have to work with a combination of SASS and CSS based assets, it's a little more complicated. The simplest way of handling this is to have an output subdirectory for generated CSS within the stylesheets directory, then exclude that subdirectory in .gitignore. Then, in your views you have to know which styling type you're using (SASS or CSS) by virtue of having to select the public/stylesheets/foo stylesheet or the public/stylesheets/sass-out/foo stylesheet.
If you have to go the second route, build a helper to abstract away the sass-out subdirectory.