I am developing a website when i have third-party plugins (javascript plugins, with css files and images) and i don't want to separate the plugin between stylesheets and javascript, i want to keep the plugins folder, and each plugin with the javascript and the stylesheet.
And i use different plugins in different pages of the webapp. So i put a "plugins" folder inside "vendor/assets" but i don't know how to load them in the webpage.
Do you know how can i do that? or do you have any advice for working with javascript plugins?
Regards,
Try adding this in your application.css:
#import "/vendor/assets/plugins/css-stuff.css";
and in your application.js, try this:
<script src="/vendor/assets/plugins/javascript-stuff.js"></script>
That should work for you, but if not, then say something here.
Related
I'm currently using the Grails resources plugin and I have many modules defined like this one:
bootstrap {
resource url:'js/libs/bootstrap/bootstrap.min.js'
resource url:'css/libs/bootstrap/bootstrap-responsive.css'
resource url:'css/libs/bootstrap/bootstrap-glyphicons.css'
resource url:'css/libs/bootstrap/bootstrap.min.css'
}
This is very convenient because it groups the Javascript and CSS files together into a single conceptual Bootstrap module.
I'm looking into the asset-pipeline plugin now, and it appears that files can only require other files of the same type, which means that I now have two trees of dependencies (CSS & JS) rather than one, which is a problem because there are interdependencies, e.g., bootstrap.js depends on bootstrap.css.
Does the asset-pipeline plugin allow for declaring inter-type dependencies? If not, what is the best way to deal with this issue?
I don't consider this as a problem. Organizing JS and CSS files separately (even though both belong to the same package/product such as Bootstrap) is a good thing and if the JS is not able to refer to the CSS, change the URI.
In my opinion, if you want to use Bootstrap with Grails, try twitter-boostrap.
Checkout my blog post regading Bootstrap CSS templating in Grails and if you want an example, checkout an project I did using Twitter Bootstrap here.
I am using 'Jquery-rails' gem. when the server compiles all assets, every single plugin from jquery library is attatched to the page in front-end. Is it possible to use only the specific plugins.
These are the files being automatically attached in front-end:-->
jquery.ui.bind,jquery.ui.bounce, jquery.ui.droppable, jquery.ui.explode, jquery.ui.shake,
jquery.ui.slider, jquery.ui.sortable, jquery.ui.spinner,..................
[more than 100 of them]
but i am using only few of them.
how to solve this problem.
Yes you can add the specific jquery plugins as required. Download it from here Jquery plugin Download. Select the required plugins as per your requirement. Now include the files in your assets folder and change the layouts/application.html.erb to make the files available.
I have a best practices question regarding one-off javascript plugins and their role in the Rails asset pipeline.
I'm new to Rails, and am working on a new project. The site template I'm using uses a large collection of js plugins for added functionality. (eq chartjs.org, ckeditor, and about 40 others) Since these are needed on a page-by-page basis, I'm not sure if I should really load them all in the application.js manifest.
Currently, I have the template's assets under the /vendor directory and only the core assets are being loaded from my application.js manifest.
Thoughts on how/where to include the plugins?
As i know that rails default added all js file include in application.js by //= require_tree . so, you can remove it and add only those file which you want to added. and if you want to run only specific function then you can use location.pathname with condition and it will work for only that specific page.
I've got a Ruby on Rails app running with Bootstrap, which I installed using the gem twitter-bootstrap-rails.
I'd now like to integrate a new Bootswatch theme, but I'm having trouble figuring out what to do.
There are four possible downloads for each theme - a bootstrap.css file, a bootstrap.min.css file, a variables.less file, and a bootswatch.less. My question is: do I need to download and add them ALL to my ~/app/assets/stylesheets folder? or do I just need a subset of those? Currently inside ~/app/assets/stylesheets are just two files: application.css and boostrap_and_overrides.css.less. LESS really throws me off here so I'm totally confused with how it works and what I need to do to add new css files with this setup. Any help is appreciated.
You only need to download the bootstrap.css file, and rename it. The bootstrap.min.css is the same as the css file just a minified version of it. Less is just another way of writing css and accessing each property differently. Check out less. Add css file and begin integrating into html, also point html to new stylesheet.
Here's a twitter bootstrap gem for easy Bootswatch theme integration/customization for rails:
https://github.com/scottvrosenthal/twitter-bootswatch-rails
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)