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.
Related
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') %>');
Question 1:
I've heard of creating div class' to cater to certain areas of the HTML but is there another way out there? Here's a link that I found related to what I mean.
http://brandonhilkert.com/blog/page-specific-javascript-in-rails/
Question 2:
Is there a way in order for me to organize my CSS and JavaScripts in my asset folder in the rails app IN SPECIFIC FOLDERS while accessing the asset pipeline benefits?
Eg.
Normal way:
assets
images(under assets)
stylesheets(under assets)
mycss1 CSS scss
mycss2 CSS scss
mycss3 CSS scss
javascripts(under assets)
myjava1 js
myjava2 js
myjava custom js
The Idea:
assets
images(under assets)
stylesheets(under assets)
myview(this is a subfolder of the stylesheets folder)
mycss1 CSS scss
mycss2 CSS scss
homepage(subfolder)
mycss3 CSS scss
javascripts(under assets)
myview(subfolder of javascripts)
myjava1 js
homepage(subfolder)
myjava2 js
myjava2 custom js
As far as I understand, you want to add your custom folders under the assets directory, put some files with specific CSS and JS and use them whenever you need it.
To achieve this you should include those files somewhere. By default, you have an appplication layout which includes application.js and application.css files which includes the rest of the related files. Those files known as manifest files and they are using sprockets gem to handle dependencies, preprocessing, compressing and other stuff (you can read more about it here). You can change the assets folder using config.assets.prefix or add new paths to look up for sprockets using config.assets.paths (This might be what you are looking for. Further reading here)
I have decided to host my own jQuery mobile files as the gem jquery_mobile_rails only includes version 1.3.0 while I want to ensure I always have the latest version of jQM. This proved surprisingly easy as i just added the js file under javascripts and the css under stylesheets in my assets folder.
I copied the icon buttons to both /assets/images and to /assets/stylesheets/images. They are displayed properly in development but not in production. My console is showing the images being precompiled.
I have the following in production.rb
config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif application-print.css)
Whereas Rails 3.2 would generate both a fingerprinted (picture-df71a1234da231a124a.png) and non-fingerprinted (picture.png) asset during precompilation, Rails 4 no longer generates non-fingerprinted versions.
Most likely, the CSS file from jQuery Mobile contains references such as this:
background-image: url(images/icons-18-white.png)
The problem being that the CSS file has no clue what the fingerprint should be. The best solution would be to use Rails' asset path helpers. First, make sure the file is an SCSS file (just rename it so it's something like jquery.mobile-1.3.1.css.scss). This will tell rails to compile it using Sass.
Next, change all of the url(...) entries in the css file to image-url(...). Make sure to add quotes around the path. For example, this would load the file at app/assets/images/images/icons-18-white.png (which becomes public/assets/images/icons-18-white.png in production).
background-image: image-url("images/icons-18-white.png")
Upon deploying these changes, the jQuery mobile css file should get precompiled and the resulting file should include the proper fingerprinted URLs.
I just purchased a theme at wrapbootstrap and fired up a new Rails app to experiment with it. The theme came with no documentation and I am new to Rails, so I could use some help. None of the other examples here are very detailed and there do not seem to be blog posts about this online. Thanks.
This is the theme, if that helps- Presume that I am running Rails 3, have ran 'rails new experiment' and have installed no gems at this point, not even bootstrap at this point. Would love to have definitive instructions for others, from the beginning, here on stackoverflow.
I suggest you do the following:
1. Copy theme assets to /vendor
Copy all CSS files to vendor/assets/stylesheets
Copy all JavaScript files to vendor/assets/javascripts
Copy all images to vendor/assets/images
2. Create entries in asset manifests
Create an entry in app/assets/stylesheets/application.css for each CSS file you wish to include in your application. All the files listed in there should be automatically included into all pages that use the default layout app/views/layouts/application.html.erb.
Same thing for JavaScripts under app/assets/javascripts/applications.js.
3. Separate theme customizations from original theme files
Feel free to customize your theme, but put your own files under app/assets/stylesheets, app/assets/javascripts and app/assets/images. That way they won't get mixed up with the theme you purchased and you can easily delete your changes without fear of mangling your theme.
4. Change image paths
Now you're going to have to manually edit all your stylesheets and JavaScript files looking for the image references. Change all paths to /assets. Like so:
background-image: url(http://www.example.com/images/bck.png)
Becomes:
background-image: url('/assets/bck.png')
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