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
Related
How can I use a theme from Bulmaswatch in my rails app? I'm currently using the bulma-rails gem. Bulmaswatch recommend using their CDN but how to get it work with the asset pipeline? What's the simplest easier way to get it done?
(Supposition is you have routes, controllers, views sorted)
Add the bulma gem (cdn not needed)
Add any number of Boostrap gems that play well with sass
Bundle
Add #import "bulma"; into application file
Restart the server
IMHO the easiest way is:
Under app/assets/stylesheets delete application.css and create a new file called application.css.scss
Then in that file copy paste the code from your favorite theme on bulmaswatch.
There you go, you've got a unique theme working in bulma.
This question is somewhat similar to: How to customize bulma variables in rails
I installed a new gem to my Rails project - 'phrasing' - which has gem dependencies on multiple Haml gems. I need the gem (it is adding some phenomenal functionality to my project), and need the dependencies to be installed, but now when I run rails generate scaffold, all of the view templates are generated in Haml rather than ERB. I need views to continue to be generated in ERB.
I reviewed several previous StackOverflow articles, but most focus on converting TO Haml, and the answers around making sure that ERB is the default generator refer to removing lines from the config files, which are not there in my case (it appears that the gems are controlling the default layout format somehow).
(Note: While I appreciate that there may be several advantages to using Haml, and I might consider using it in a new project, I'd like to keep this one consistent, and it's already 80% finished in ERB.)
Turns out this was as simple as adding the following into class Application in the config/application.rb file:
config.generators do |g|
g.template_engine :erb
end
Still not sure why the manual override was necessary, but it is. This fixes it.
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.
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.
Hi there im working on a new rails app and i just started to use Foundation.
I did the installation using
rails g foundation:install
Everything is working as espected (i mean by that i can see the css in my source code, and also the visual effect of it ;p)
I just dont understand how to override the defaults proprieties of Zurb Foundation...
I saw online that im supposed to edit some foundation.css or app.css but here doesnt seems to be any file like that in my Application folder....
I did the installation by editing the gemfile then a bundle install.
cheers
and yes it works if you do your overrides on the app/assets/stylesheets/application.css
But it's better if you do it in the app/assets/stylesheets/foundation_and_overrides.scss,
also at the top of the file, there's a bunch of lines commented, with those lines you can also modify some attributes!
Option 1: Since you installed it through bundler (assuming you used something like gem 'zurb-foundation'), you won't have any files that you can edit directly. You can override and style as usual by editing app/assets/stylesheets/application.css or adding new files within the directory. I'd recommend this over modifying Zurb so you can continue receiving the benefits of being able to upgrade to newer versions of Zurb in the future without dealing with a mess.
Option 2: If you feel that you need more control over the customization and you aren't worried about the above pitfalls, you can clone/download foundation-rails and copy the files in vendor/assets to your own Rails directory of the same name. Remove zurb-foundation from your Gemfile, rebundle, and you should be able to modify the assets directly in your own project.
Option 3: Check out foundation-sass and give Compass a try. I haven't looked into it much but you should have some amount of customization through mixins.