I found a nice template online and want to use it for my rails app homepage. I decided to use the high voltage gem and read through its readme. I managed to get the routing right but I could not find the appropriate path/folder for the numerous asset (css, js, svgs and sass) files which come inside the template zip file, and which obviously make it look nice.
I tried putting them into the assets folder of my rails app, which got some of the "features" working, but svgs and images didn't display... and it screwed my existing pages. Reading through the Rails documentation I then tried storing the template assets into the vendor folder, which did not work either.
Where should I store the assets for my template-inspired homepage for them not to screw the appearance of my normal/app pages? Which paths should I use in my html to call them?
If you have troubles with images, take a look at image references in the template source. You can see a reference to image like this :
background-image: url('images/top-1280.svg')
which would not serve this image in Rails.
I would suggest to find and replace all the image references in your css (or scss) files.
Try this :
background-image: url(image-path('top-1280.svg'));
which is the proper way for Rails 4.
The differences:
in Rials you have a helper method "image-path" and you do not prefix the image file with directory name.
It is important to check in your "app/assets/stylesheets/appilcation.css" if there are lines like:
*= require_tree .
*= require_self
Now about Font Awesome : I see that in this theme you are about to use Font Awesome. I would suggest using the gem for Rails:
In your Gemfile:
gem 'font-awesome-sass'
I think the theme you have chosen is very nice. Thank you for sharing it, it will be useful for my current project.
Related
I am new to rails so this is probably a simple question about using the asset pipeline.
In my app, I want to use this jquery plugin: http://www.fyneworks.com/jquery/star-rating/
So to do it, I included the following gem in my gemfile: https://github.com/RichGuk/jquery-star-rating-rails
However, I find that the image used for the star ratings is too low resolution and I'd also like to change the style. However, all 3 versions of the stars that are displayed are held in one image so I'd have to play around with the scripts as well to make sure they are configured properly if I make the image for the stars larger.
Back to my question: How do I edit this image file in my application?
I've tried downloading all the files and putting them in my vender directory and editing the file but it did not seem to work.
I know the files are included by the gem but how do make the files visible to edit?
Appreciate the help!
So the asset pipeline consists of potentially many directories (assuming you are using gems that inject their own assets into the pipeline). When an asset is being grabbed in Rails, Rails goes through these directories (in the same order, every time) to find the asset. When the name of the file is first found, that's it, Rails grabs it and uses that file.
Vendor asset directories are specified after app assets, I believe. So, if you place the image that you want to change in the app/assets/images folder, you'll essentially be overriding that vendor image in your application with your own image since Rails will search it's own app/assets first. Obviously, the files need to be named the same.
Try adding your star image in your assets path. It seem to
reference star.gif using the asset_path
I would also try
overriding the star plugin by creating your own css file.
The website https://wrapbootstrap.com/ has themes which were made using Twitter Bootstrap. Each of these themes include different versions of Twitter Bootstrap along with other various libraries and versions (jquery, fontawesome, etc...)
How do I add these themes to my existing Rails app? What are the steps?
I'm especially curious about the conflicts that may arrise if I'm already using a different version of jquery, twitter bootstrap, fontawesome, and others (as declared in the Gemfile).
Thank you
You can add the css from the theme you purchased from wrapbootstrap to your assets > application.css.scss file. And use the html tags that came with the theme in your rails app views so that the css styling is applied.
Also, I would recommend using gem 'sass-rails' to import the standard bootstrap styling.
Here's a tutorial to get you started with adding bootstrap to a rails app. Adding the theme css and html tags is up to you.
http://railscasts.com/episodes/328-twitter-bootstrap-basics?view=asciicast
I did this for few of the projects, I agree with majorly what Mike has answered above. Here are some of the gotchas I saw.
We started as a standard project on Rails all our views dynamic(Ember)/static were based on Bootstrap CSS. When major internal pages were up and functionality demonstrated we focused on landing pages. By this time we had the gems for bootstrap, fontawesome added to our Gemfile.
So one of the thing is to remove these gems "bootstrap", "fontawesome" from Gemfile. Include these as part of your wrapbootstrap dump.
Also as you progress with integration you may realize that a lot of common code is being repeated, its in your best interest to split the page components: headers, footers other things as partial Rails views. It severely saves the editing effort.
Another thing I found extremely useful to keep every thing up while you are still in integration stage, is to split your CSS/JS includes for pages imported from wrap bootstrap and pages you already have. So if you intend to migrate all existing pages into new theme scraping your CSS, then it can be merged in stages, otherwise you can let them co-exist.
You have to add new entries in routes.rb, controller calls to support the pages if you don't have them already. Likes of about, contactus, team etc. etc.
And if you use something like Ember/Backbone then you have to manage the co-existence of single pager app in some pages which may or may not be linked to the Wrapbootstrap pages.
This was all the things I had to take care off when I integrated the wrapbootstrap theme on top of Rails-EmberJS app.
Interesting timing as I just had to do this myself. I'm still fairly new to Rails so this might not be the best solution, but here's how I got it working ...
Note: every theme is different so this may not be a one size fits all approach.
1) My theme was built with Middleman and it was expecting to run stand alone or on a Sinatra instance.
2) In order to get the theme up on Rails, I had to add the compass gem, the sass gem, the sass-rails gem, and the compass-rails gem to work properly. I'm assuming you can install these (if required for your theme).
3) Assuming you have a Rails app ready to roll, go into your assets directory and backup your .js, .css, and all fonts and images. Place your theme asset files in the appropriate place.
4) Now do the same with your view layer. You may have a partials and/or pages folder which you can place in the views directory. You'll want to put application.erb.html and any navigation files in the layouts folder under the views directory. Again, make sure you back up your original files first.
5) If your theme was designed for Sinatra, you may have a Config.rb file. I moved the logic from this file into my config/environment.rb file. I was the least confident with this step. Other Rails devs can chime in if there is a better location.
6) Start your server up. You may encounter some exceptions but this is to be expected.
7) Take a look at your old app/assets/javascripts/application.js file and compare it to the new file. Ensure that the new file has the jquery ujs library included //= require jquery_ujs . Without this bit of magic your PUT and DELETE HTTP verbs won't work properly.
8) Path adjustments. My theme had the Font Awesome library included. In order to get it to work, I had to adjust the reference paths at the top of the font-awesome.scss file.
9) Finally, you'll need to debug the newly added code in the environment.rb file. The Sinatra developer was doing a lot of Route magic to adjust the navigation display. This wasn't porting over well to my environment. I removed many of these calls from my navigation template files. Once complete, my newly skinned app was up and running! Good luck.
make sure that while installing twitter bootstrap you should add following gem into your Gemfile under "group :assets"
gem 'therubyracer'
gem 'less-rails'
gem 'twitter-bootstrap-rails'
then run bundle command.
Now, the theme "file_name.css" (file_name could be any) that u have downloaded just add it into "stylesheets" folder under app->assests->stylesheets
then open your application.css file in same folder there you will see
*= require_tree.
replace this line with
*= require "file_name.css"
NOTE: Don't forget to re-compile your assets or simply delete the content of your tmp/cache folder.
save it and reboot your server. it will apply youe new theme.
Watch this training course which guide you to do so in detail and from scratch.
http://pluralsight.com/training/courses/TableOfContents?courseName=getting-started-aspdotnet-mvcservice-stack-bootstrap
I purchased a nice-looking Twitter Bootstrap them online that is going to spice up my Rails 3.2.8 application. The package contains the following directories:
/css
/img
/js
Of course these files will have relative links to each other in them. Is there a standard way of integrating this type of stuff into the asset pipeline, or is it still a standard practice to put it under public?
You'll want to use the asset pipeline. Everything is moving that direction and it's really not any harder (except when it is). Your files will go in the /app/assets/ directory.
For the css, you should be able to drop it right into app/assets/stylesheets/, just be sure that bootstrap is included first. There are several gems that make it easy to include bootstrap's files. I use bootstrap-sass, but you might also try twitter-bootstrap-rails (depends on if you want sass support or not). With either one, look at the readmes that I linked to as they include some useful details you'll want to know for each gem.
For the javascript, it should be about the same thing. In your application.js file, be sure that bootstrap is include before //= require_tree . in case the theme adds any custom javascript. Both of the gems I listed before also include the javascript files for bootstrap. You can read their documentation to see the details (it's almost exactly the same as normal for both gems).
As far as images are concerned, put them in the app/assets/images/ directory and you'll have to change the stylesheets a bit for it to work. When an image is declared in the stylesheet, like background: url('./images/bg.jpg');, you'll need to use the image_path helper instead, so it would look like background: url(image_path('bg.jpg'));. Notice I just included the name of the image. The asset pipeline will automatically parse this to the correct path for you.
If the theme includes any custom fonts, you'll do the same as images except using the asset_path helper like so in your #font-face declaration:
url(asset-path('museo700.ttf', font));
There are also type-specific helpers you can use, such as font-path, image-path, etc. Either asset-path with a type declared or the type-specific helper will work, just be consistent with which one you use so as not to produce confusion.
You can place custom fonts in a directory something like app/assets/fonts/. The asset pipeline will automatically find them, since they're in the assets directory.
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)