Simple form bootstrap for rails 4 - ruby-on-rails

I'm using 'bootstrap-sass' and 'simple_form' gems on Rails 4. When I run this generator: rails g simple_form:install --bootstrap I get a message that says:"Be sure to have a copy of the Bootstrap stylesheet available on your
application, you can get it on http://twitter.github.com/bootstrap."
Why do I need a copy of the Bootstrap stylesheet and what is THE stylesheet? Doesn't the 'bootstrap-sass' gem handle that? I went to the link provided but got a 404 error. If anyone can kindly explain what I need to do it would be greatly appreciated! I am fairly new to Rails, so apologize in advance if it's not a very good question. Thank you!

Here is the real link to Bootstrap. Yes, the bootstrap-sass gem will include Bootstrap's javascript, CSS, and fonts into your application, just make sure you include them.
In your javascripts/application.js (docs)
//= require bootstrap
Create a file, say master.css.scss and import the Bootstrap CSS and fonts like so (docs):
#import "bootstrap";
When you specified the extension --bootstrap when installing simple_form, you essentially said, hey I have bootstrap and want my forms to be styled the way bootstrap styles them. It will also add the appropriate HTML to the form and inputs to adhere to Bootstrap. So it automatically generated the file config/initializers/simple_form_bootstrap.rb. Now when you create a form using simple_form_for (please read their docs..they are very extensive), it will be styled like Bootstrap.
So, to sum it up, you need Bootstrap if you want your forms to be styled and set up, with Bootstrap html and css, like Bootstrap forms. If you didn't want Bootstrap, you could have just ran the simple_form generator like this: rails generate simple_form:install.

when you ran this code:
rails g simple_form:install --bootstrap
you are integrating simple_form with bootsrap. and therefore, what the message is telling you is to add bootstrap to your stylesheets folder of your application. The stylesheet folder is where you keep your css files. Here is it's directory structure:
app/assets/stylesheets
bootstrap download comes with css, javascripts, and fonts folders. the bootstrap files inside the css folder will go under app/assets/stylesheets.
of course, if you are not using bootstrap in your project, then you are running the wrong generator. you should simply run:
rails generate simple_form:install
and not append --bootstrap to the generator.

Related

Don't copy files into project for twitter-bootstrap-rails

Rails 4.2.4
Ruby 2.1.2
I am trying to use twitter-bootstrap-rails.
I would like to use it by the same way I am using jquery-rails
assets/applications.js
//= require jquery
In this case I don't need to copy any jquery.js or jquery.css files to my project because Rails fetches it for me form gem.
The different situation is with twitter-bootstrap-rails.
In the guide
The Twitter Bootstrap Rails gem can provide the Bootstrap stylesheets
in two ways.
The plain CSS way is how Bootstrap is provided on the official
website.
The Less way provides more customization options, like changing theme
colors, and provides useful Less mixins for your code, but requires
the Less gem and the Ruby Racer Javascript runtime (not available on
Microsoft Windows).
Seems the first way is more suitable for me. But in this case I should use the generator rails generate bootstrap:install static before to use any twitter-bootstrap .js or .css files. The generator fetches the files into assets folder of my project.
So I am looking for a way how to use twitter-bootstrap-rails .js and .css files in my project without copying them into my project folder. I just would like to add twitter-bootstrap-rails files just putting for instance line //= require bootstrap into application.js.
Thanks a lot.
Instead of using twitter-bootstap-rails, use bootstrap-sass.
In your application.js, add the following:
//= require bootstrap-sprockets
change application.css to application.scss and add:
#import "bootstrap-sprockets";
#import "bootstrap";
and you're good to go. Oh. Just please don't forget to restart your server.

How to implement a FlatDream Bootstrap theme in a Rails4 App?

I am working on my first ever Rails 4 app and have to integrate FlatDream theme in it. So far I could not find some easy to use and decent tutorial to stylized a Rails app based on a themeForest theme. Can you guide some pointers?
Here are the steps.
Install gem "bootstrap-sass" if you don't already have it. You can install it by adding the following line to your gem file.
gem "bootstrap-sass"
bundle install
Next create a file named custom.css.scss (app/assets/stylesheets) and add the following two line to it
#import "bootstrap";
#import "bootstrap-responsive";
Next add the following to app/assets/javascript/application.js
//= require bootstrap
Now you need to convert your your css files of your theme to scss. There are converters which can help you with this. Google is your best friend here. Put the scss files image files etc at right places. If the theme uses some custom javascript you need to add it to your project in standard manner.
You are good to go.

How can I have Ruby on Rails output Bootstrap v3 scaffolding?

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

How to apply bootstrap to existing rails file generated through scaffold?

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

Integrating Bootswatch Theme with Twitter-Bootstrap-Rails Gem

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

Resources