I downloaded bootstrap theme files, it includes the static HTML, CSS and js files. If I'm using the same bootstrap theme in rails app, how can I integrate those files with rails application
Broadly/simply:
When using the rails 4-5 asset pipeline:
copy the js files to app\assets\javascript and require in application.js
copy the css files to app/assets/stylesheets and require in application.css
The index.html page (or in general, the static html pages) will have to be split-up into
a "layout", e.g. app/view/layouts/application.html.erb (or use your preferred templating framework, I prefer haml/slim) and edit it to keep header/footer elements only (aka the repeating elements for all pages, or a set of pages)
copy the remainder (the contents) to the main index.html.erb of the controller where you want to copy/use the template
Related
I have a website that contains a registration page on the front end.
It also contains an admin panel which uses an admin theme.
Since the javascripts and css files of the theme are placed on assets folder, they will be loaded on the admin pages as well as on the FRONT END.
Is there a way to organise the theme files on the asset folder so that they are not loaded on the front end?
Add an admin_application.(css & js) file and do require all the css and js used for admin panel into that and stub all the front_end assets.
You can stub the file like
in js
//= stub file.js
in css
*= stub file.css
Note: You should use different layout for both front_end and admin_panel.
I am developing a rails application starting from webarch template. I know that adding the whole assets folder in the public/ folder will link the assets with my views, but it would not be taking advantage of the assets pipeline functions. The template has a lot of plugins and different options and one generally does not use all of it. The assets folder's size is 30MB.
I though about putting it inside vendor/assets and using it with the asset pipeline but this generates two problems:
I would be serving 30MB of minified code and using a small percentage of it in my app.
I would have to manually rewrite the whole assets folder to use links the way asset pipeline wants it (javascript_include_tag "file" to serve file.js). Of course, I would do this via a script but it still seems like a problem someone should have encountered first.
Since neither vendor/assets and public/ folders seem to be a proper location for these files I would like a better option (or a way to make the later options work better).
A solution to keep your files under asset pipeline when they are too big to reasonably be left in one single minimified asset file is to split your assets by categories, compile those categories in different minimified files, and include them in your views when needed.
I do it for an app that contains several "heavy" javascripts components that are located in different area of my app and are not often used.
1- Organize your file structure
In app/assets/javascrips and app/assets/stylesheets create one directory per category we are going to create. Examples:
app/assets/javascrips/common
app/assets/javascrips/admin
app/assets/javascrips/user_account
2- Create your manifests
In app/assets/javascrips and app/assets/stylesheets create one manifest file per category and have them included the related directory
File app/assets/javascrips/common.js
//= require jquery
//= require_tree ./common
File app/assets/javascrips/admin.js
//= require_tree ./admin
File app/assets/javascrips/user_account.js
//= require_tree ./user_account
3- Add your manifests to rails precompile list
You can do it in config/application.rb file, but when it gets big it is preferable to create an initializer file config/initializers/assets.rb
Rails.application.configure do
config.assets.precompile += %w[common.js admin.js user_account.js]
end
4- Include them in your views and layouts, and set-up your javascript libraries.
Import the assets files into layouts and views. It can be a good idea to create several layouts for different area of your application that would be using common assets files. The methods to use are
stylesheet_link_tag 'manifest_file' and javascript_include_tag 'manifest_file'
And keep in mind you may have to tell your javascript plug-ins they need to use the miniminied file when dynamically loading files. For them you can use a configuration .js.erb file. Example:
File app/assets/javascrips/admin/plug-in_config.js.erb
PLUGIN.config('dynamicFileName', '<%= javascript_path('manifest_file') %>');
How can I use the custom templates of angular ui bootstrap in rails?
I mean, if I use pagination for example it will look for a templates/pagination/pagination.html template.
The problem is that rails won't serve templates in that path, it actually needs to be assets/templates/pagination/pagination.html using the <%= asset_path(....) %> helper.
Hacking the angular ui bootstrap javascript file is a way, but I don't feel like hacking it every time I get a new version.
What I would suggest is to bundle custom templates with the library itself or inside a separate file. The technique to use is to fill in $templateCache with the content of your custom templates. Have a look at one of the files distributed with tamplates to see what I mean:
https://github.com/angular-ui/bootstrap/blob/gh-pages/ui-bootstrap-tpls-0.3.0.js#L2042
You can bundle templates into the $templateCache as part of the build process or prepare this file manually (in this case you need to write templates as JS strings).
Downloading individual templates via XHR for each and every directive would be wasteful as it would result in many XHR requests and would slow down your application. Also, if you preload templates into the $templateCache you can specify required path, one that doesn't need to be a valid path on your WWW server.
I use bower to manage my js libs.
Hence I have these files in my vendor/assets/javascripts/ folder:
angular-ui/bootstrap-bower
With these files, you can simply require them in your javascript manifest file (usually application.js)
//= require angular-bootstrap/ui-bootstrap
//= require angular-bootstrap/ui-bootstrap-tpls
and then you don't need to specify any templates if you want to use the default built-in templates.
I find this solution in the following url
Ref:angular-ui-bootstrap-directive-template-missing
I have a rails-api app where I'd like to serve a stylus stylesheet with some variables set based on the current tenant.
The main app itself is a static, standalone RIA built in Dojo and doesn't make use of the Rails asset pipeline.
The stylesheet however, I'd like to have sprockets assemble from various sources as well as some values from the database.
Goals/desires:
I'd like to start out with a stylesheet in app/assets/stylesheets
I'd like the stylesheet in app/assets/stylesheets to include a base stylesheet that's distributed as part of the standalone RIA app found in public/ria/src/namespace/resources/base.styl
I'd like to be able to run the stylesheet in app/assets/stylesheets through ERB to populate it with some variables based on the current tenant
Ideally sprockets would cache the result of this process per-tenant
Important note:
I bootstrap the application with a simple static HTML file in /public. The RIA is in effect server agnostic and is a simple git module checked out into the public dir.
How do I install a custom theme for twitter-bootstrap with the rails asset pipeline?
Should I create a new folder under assets and dump in all of the css, js, image and font files for the theme?
Update:
I put all files in my downloaded theme (except the html example files) into a folder in app/assets and added this folder to my asset paths in application.rb:
config.assets.paths << Rails.root.join("app", "assets", "bootstrap_theme")
I added some markup using css classes from the theme but it's not using the theme..
Update: I see that the boostrap theme has the compiled core bootstrap files included inside it. Should I take this to mean it's not intended to be used with Less?
Also, should I precompile every asset file individually for production (in application.rb) and in each view include the specific ones needed (and include them after the core bootstrap files)? Then I guess to make any overrides to the theme they'd need to be made directly in the theme files?
Update: I think the problem was that I was requiring the theme css files in my manifest after the bootstrap_and_overrides, assuming the idea of the theme was to change the bootstrap defaults. But requiring some of the theme css before the standard bootstrap_and_defaults works better. It means needing to manually pick and choose which css to load before and after bootstrap.
I never proved the twitter bootstrap in a rails application but I searched before how can I do it.
If you install the gem less-rails-bootstrap or bootstrap-sass, you can follow the instructions to modify the theme here.
I hope it helps.