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.
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 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.
The issue here is that I have Bootstrap on production looking for the fonts at:
assets/spree/fonts/glyphicons-the-file-name.something
When in development mode, it looks for these assets in:
fonts/glyphicons-the-file-name.something
So what I did was I added the fonts folder into public and it all worked. I did the same for production. You can guess that I'm now dealing with a rails assets:clean issue that must be running and removing the files, hence not allowing them to appear.
Is there a way to tell Rails to not clean the files in assets/spree/fonts?
I'm assuming you installed the bootstrap files manually?
If you instead use a gem such as the following, then you won't have to worry about these issues:
gem "bootstrap-sass"
Alternatively, you should be installing everything into your vendor directory. As you've found you'll then have issues with any linked assets within these files. The correct fix for this would be to edit the bootstrap source to use the correct asset_path helpers.
Obviously that's quite a bit of maintenance overhead when you get round to doing the next bootstrap update.
I'd take a look at the bootstrap-sass gem, even if you decide not to use it.
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
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