I've watched the Railscast video Twitter Bootstrap Basics. It describes how to use the LESS version of the Twitter Bootstrap for Rails named twitter-bootstrap-rails.
As SASS is part of Rails and I got some issues installing the LESS-version, I'm trying to use the SASS version named bootstrap-sass instead.
In the video he describes the command rails g bootstrap:themed products -f which converts standard layout to take advantage of the capabilities in Twitter Bootstrap. How can I do this in the bootstrap-sass gem?
This is not a direct answer, but my solution to a similar problem.
I like to download the full bootstrap download, grab bootstrap.css
run it through http://css2sass.heroku.com/
and take that and put in in app/assets/stylesheets as bootstrap.sass
This usually generates on or two errors in the sass with some funky nesting, but its non-essential stuff and I just clean it up real quick after loading a page on localhost
Related
I'd like to be able to use Bootstrap 3 and Sass in my RoR project and have the scaffolding generator output Bootstrap 3 HTML. I'm using Ruby 2 with Rails 4.
Nothing too fancy - mostly just having the forms buttons have the appropriate CSS classes.
I've used the Rails Tutorial Sample App (ver 4) as a base which includes the bootstrap-sass gem - but when I use the generator the HTML does not have the proper bootstrap classes - for instance the buttons don't have the btn btn-default class.
I realize that the scaffolding is behaving as it was designed to, it is a base and is meant to be customized (or replaced) - but it seems like it should not be hard to also have the generated HTML be "Bootstrap Ready"
A related question had an answer where someone mentioned that editing the files in the directory lib/erb/scaffold like edit.html.erb - would override the default templates that Rails uses for scaffolding. I'm not opposed to that but I was hoping that there might be a something like a gem that already did this.
I like using the bootstrap-sass gem and I hope that there is a solution that would be compatible with it - I'd rather use scss than less
Seems like there should be several gems to do this.
I've had the same trouble but finally found this:
https://github.com/decioferreira/bootstrap-generators
It includes Bootstrap 3.1 and provides scaffolding and you can choose haml and scss as well as other options.
For example when I did rails g scaffold Link guid:string profile:string media_url:string
It automatically produced this:
EDIT FOR HEROKU USERS
I did have trouble pushing my app that is using bootstrap-generators (v3.1.1) to Heroku. Heroku was giving the error File to import not found or unreadable: bootstrap.scss
The fix turned out to be to modify the automatically generated bootstrap-generators.scss file. Change #import "bootstrap.scss"; to #import "bootstrap"; (eg just remove the extension).
NEW EDIT FOR HEROKU USERS
The new gem 3.1.1.1 fixes the bug. You no longer need to change #import "bootstrap.scss"; to #import "bootstrap"; in the bootstrap-geneerators.scss file.
If you need to customize your generated views more you can actually override the default views with your own.
Just put them in lib/templates/{erb|haml}/scaffold. You can see some example files here.
This may be what you're looking for http://railscasts.com/episodes/328-twitter-bootstrap-basics
through railscasts, I found http://railscasts.com/episodes/328-twitter-bootstrap-basics that with the
gem 'less-rails' (this is the gem https://github.com/seyhunak/twitter-bootstrap-rails)
I can use
rails g bootstrap:themed scaffold-name -f
which applies bootstap to various classes like table, buttons etc. This is amazing timesaver but I am not able to find this for SASS as I am using SASS for my rails app (I am using this gem https://github.com/thomas-mcdonald/bootstrap-sass)
IS there any way to apply bootstap to existing scaffold code as me doing this manually can take lot of time ? OR is there any easy way to put the classes in the .erb files ?
Thanks
I don't know if this is a ridiculous question however I am creating a website with RefineryCMS, Ruby, and Rails. I chose to speed up some things by using Twitter's Bootstrap via the less-rails-bootstrap gem. I do however need to customize some colors and such though I can't seem to locate any of the less files. I looked in the logs and see references to things such as 'twitter/bootstrap.css' though I'm not able to locate this or where the less files live.
Where are these things? Else, how to do you override the defaults?
When you complete with gem install and bundle install command , you should :
rails g bootstrap:install
This will insert some files in your app/assets dir , including bootstrap_and_overrides.css.less in app/assets/stylesheets.
You can learn more in this Railscast.
UPDATE: (Jan 25 2014): Valuable information form the comment of #Niels Abildgaard:
According to GitHub repository of less-rails-bootstrap gem, Rails generator command shoud be :
rails generate less_rails_bootstrap:custom_bootstrap
How am I supposed to use bootstap with rails 3.0 rather than >= 3.1 ? is there any plugin which supports rails 3.0 ?
I think all of the bootstrap gems require Rails 3.1 or greater. I recently had bootstrap on a 3.0.10 Rails app using the Less.js file that you download from their site: http://lesscss.org/. This is the simplest most basic way to use Twitter-Bootstrap; the file compiles all of your "my_file.less" files into css on the client side.
However, if you want to modify the variables (which is the real power of using this framework) than you need to compile it. You can take a look at this Less compiler: http://wearekiss.com/simpless. I've never tried that, but I hear good things about it and it works on Mac, Linux, or PC.
Probably the easiest thing to do - if you want to compile the code on server side - would be to upgrade your project to Rails 3.1.1 and just use one of the Twitter Bootstrap gems. This is actually exactly what I ended up doing. I was able to update my app to 3.1.1 and I used the Boostrap-Sass gem (just because I slightly prefer Sass).
If you decide to upgrade, follow this RailsCast: http://railscasts.com/episodes/282-upgrading-to-rails-3-1
It helped me a lot.
Ryan Bates also offers a video on how to incorporate Twitter Bootstrap into a Rails app: http://railscasts.com/episodes/328-twitter-bootstrap-basics.
Here's a link to the Sass version of Bootstrap that I am currently using: https://github.com/thomas-mcdonald/bootstrap-sass
Many solutions : you can upgrade to rails 3.1+, might be the better (not the easier, depending on you app) way. You can include the static files yourself if you don't intend to change anything that is handled at the less level. You can do it even if you intend to, but you'll have to recompile the files yourself (or find a way to automate it). Finally, there might be a gem out there that is compatible with rails pre-asset-pipeline, or an old version of a gem. You'll have to look for yourself if you absolutely want a gem.
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.