In my rails 3.0.10 I would like to use Bootstrap from Twitter but I only found examples using Rails 3.1 and the Asset Pipeline. How would add it to my 3.0 application? Do I just download it from the main site and put the files inside of my public folder? What about using LESS?
The absolute simplest way is to drop the boostrap.css file into your public folder and then reference it in your layouts/application.html.erb file. Then you can start using it right away. You're a bit limited at that point in what you can modify but that will get you started.
What is your question about LESS? bootstrap uses LESS but you don't have to worry about that since you're just using a plain ole css file.
See this railscasts video: Twitter Bootstrap Basics. There is another follow-up screencast after you finish this one.
We converted bootstrap to use SASS (think I found it in a github repo somewhere), and included it in the lib/assets/ folder.
Our application.css includes the partials. We've made a few custom modifications to the partials, works just fine.
Version 2 will be converted to SASS pretty sure I'm sure, but in the meantime there are asset pipeline modules available for LESS which you could add so that your rails app understands less files:
A quick search found this (can't vouch for it at all)
https://github.com/metaskills/less-rails
If it works as described you could just drop in bootstrap as it is and reference it in your application.css file.
Related
I have a project of Rails 4 integrated with bootstrap.
I use less-rails-bootstrap gem in order to integrate it.
I wonder what is the best way to integrate bootstrap into rails without using less (os sass). I assume I can simply download the css and js files as explained in the bootstrap site, but I wonder if i might have problems with it.
Yes, if you don't want to customize Bootstrap styles, you can simply download it from bootstrap site and put it under vendor folder.
And you won't have problems, since Rails will precompile the files (js/css/img) under vendor folder.
Make sure to read this answer if you add fonts too.
I'm working on using a Grunt workflow to manage my assets in my Rails app rather than Sprockets.
So far, I have my apps JS and CSS both being concatenated and minified into public/assets/javascripts/application.js and public/assets/stylesheets/application.css respectively.
And also have my Bower components JS and CSS being concatenated and minified into public/assets/javascripts/vendor.js and public/assets/stylesheets/vendor.css respectively.
Fonts and Images from Bower components are then copied into public/assets/(images|fonts).
This is all well and good but now I need the references to fonts/images within those files to be updated to reflect their new location.
I have looked at cssmin and yes it rewrites file references but I cannot get the file path to change depending upon the type of file being referenced.
Any ideas on how I can do this?
Also, I ahve been reading about Grunt plugins which can read your view files and use those to minify and concatenate files and update the and tags in the views for you.
Surely I can't do that in a Rails app? Is there a way I can deal with this in Rails?
This other StackOverflow post may be of help:
Integrate Grunt into Rails asset pipeline
The accepted answer recommends using the Half Pipe gem.
The second answer linked to a blog post about a Do-It Yourself solution: Goodbye, Sprockets! A Grunt-based Rails Asset Pipeline.
I haven't used either solution, but they are worth a try.
I'm switching from PHP to Ruby on Rails and I'm loving it, the only thing is I'm so used to Twitter Bootstrap for most of my designs and now I feel crippled without it, I followed some tutorials like adding bootstrap-sass and what not to my Gemfile, but I still appear to be missing important things like input-block-level I'm just curious if there is an updated version or a easier tutorial to follow? Thanks.
AFAIK, the easiest and most rails way to integrate the twitter bootstrap to rails is via
twitter-bootstrap-rails gem, they have a pretty good documentation too.
check these screen casts, and this (premium) to get an idea.
and welcome to Rails :)
To to the input-block-level in ERB do something like this
"input-block-level" => "hello_world"
Same as you, I'm coming from PHP and love RoR ;)
With bootstrap you need to import it in your manifest. Read a bit about the assets pipeline in RoR guide.
To import bootstrap, create a file in your app/assets/stylesheets directory, with the name you want, but with the extension .css.scss, and place in it the following line:
#import "bootstrap";
Also if you need to use the javascript helpers from bootstrap, you need to add the following line in your app/assets/javascript/application.js file:
//= require bootstrap
Just download the bootstrap ( CSS, JS ) file and make the updation in that file at regular interval from his official site : Bootstrap
For Bootstrap Tutorials : Click Here
Or you can refer the sample code for reference, because sometimes we dnt get the way to implement such functionality like tooltip.
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 want to compress all my js and css files for a project and bundle into one file (one js and one css file). Which one do you recommend for a Rails 3.0 out of http://api.rubyonrails.org/classes/ActionView/Helpers/AssetTagHelper.html and http://synthesis.sbecker.net/pages/asset_packager and why?
I recommend using Jammit from DocumentCloud (if you don't know DocumentCloud, they are behind some very good open source projects like Underscore.js, Backbone.js...) :
http://documentcloud.github.com/jammit/
See the docs for the features, it's very powerful...