I'm trying to use startbootstrap themes to my rails application
http://startbootstrap.com/template-overviews/creative/
I have download the themes extract it
move the css folder into vendor/stylesheets
move the javascript folder into vendor/javascripts
edit the index.html file and remove all the dependencies from there(remove the css and remove the javascript)
then
I edit my application.js and application.css to include the css and js files from the themes
application.js
//= require vendor/jquery/jquery.min.js
//= require vendor/bootstrap/js/bootstrap.min.js
//= require vendor/scrollreveal/scrollreveal.min.js
//= require vendor/magnific-popup/jquery.magnific-popup.min.js
//= require js/creative.min.js
application.css
*= require vendor/bootstrap/css/bootstrap.min.css
*= require vendor/font-awesome/css/font-awesome.min.css
*= require vendor/magnific-popup/magnific-popup.css
*= require css/creative.min.css
the css and image is working properly but the javascripts never work Idk why
so far my workaround is copy all the files into public folder
You can directly install the bootstrap gem and install it.
Open your gemfile and put:
gem 'bootstrap-sass', '~> 3.3.6'
bundle install.
Open your application.css and put:
#import "bootstrap-sprockets";
#import "bootstrap";
Rename your application.css to application.scss
Open your application.js and put:
//= require jquery
//= require bootstrap-sprockets
Related
I get the following error after updating Devise bootstrap views to the latest version (1.1.0). Everything works OK if I switch back to v0.0.11.
What is the problem?
In my Gemfile I have this
gem 'devise'
gem "twitter-bootstrap-rails"
gem "devise-bootstrap-views"
application.css
/*
*= require devise_bootstrap_views
*= require_tree .
*= require_self
*/
bootstrap_and_overrides.css
/*
=require twitter-bootstrap-static/bootstrap
Static version of css will use Glyphicons sprites by default
=require twitter-bootstrap-static/sprites
*/
application.js
//
//= require rails-ujs
//= require jquery
//= require twitter/bootstrap
// require turbolinks
//= require Chart.bundle
//= require chartkick
//= require_tree .
I know this is an old question, but I guess this is a duplicate of Question #52636393.
I had this same problem while updating dependencies from an old project of mine. All I had to do was to remove the following line from application.css
*= require devise_bootstrap_views
Look for this line in your css/sass files and try removing it. Oh, and remember to restart your server :)
I hope it helps.
My computer system is Mac OS. In the past few days, I was working on a rails project and I tried to use Bootstrap in my app. Followed by the instruction of Bootstrap website, I changed some files' contents but it still didn't work. Can somebody help me?
This is the code in application.scss:
#import "bootstrap-sprockets";
#import "bootstrap";
This is the code in application.js:
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree .
This is my Gemfile:
gem 'bootstrap-sass', '3.3.7'
I have also run 'bundle install' on my console. However, nothing happened in my pages.
Your application.js is missing the bootstrap files. Add those and you are good to go. Just add the below
//= require bootstrap-sprockets
to the application.js
(I'm new both to Rails and SO, so excuse if I'm not doing it right)
I am trying to adapt a regular third-party web template in my rails 4 application. I have a vendor folder with other files and subfolders like bootstrap.js, Nivo-slider and Isotope which contain both .css and .js files.
So I moved all files and subfolders to vendor/assets and included //= require_tree ../../../vendor/assets/ in my application.js, as recommended here. So my application.js looks like
//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require turbolinks
//= require_tree ../../../vendor/assets/
//= require_tree .
And in my layout file:
<%=stylesheet_link_tag "application.css" -%>
<%=javascript_include_tag "application" -%>
when I execute it on my server I get Sprockets::FileOutsidePaths exception:
Showing /home/valle/RoR/grifo/app/views/layouts/application.html.erb where line #25 raised:
/home/valle/RoR/grifo/vendor/assets/bootstrap.js isn't in paths: /home/valle/RoR/grifo/app/assets/images, /home/valle/RoR/grifo/app/assets/javascripts, /home/valle/RoR/grifo/app/assets/stylesheets, /home/valle/RoR/grifo/lib/assets/circle-flip-slideshow, /home/valle/RoR/grifo/lib/assets/isotope, /home/valle/RoR/grifo/lib/assets/javascripts, /home/valle/RoR/grifo/lib/assets/jflickrfeed, /home/valle/RoR/grifo/lib/assets/magnific-popup, /home/valle/RoR/grifo/lib/assets/mediaelement, /home/valle/RoR/grifo/lib/assets/nivo-slider, /home/valle/RoR/grifo/lib/assets/owl-carousel, /home/valle/RoR/grifo/lib/assets/rs-plugin, /home/valle/RoR/grifo/lib/assets/stylesheets, /home/valle/RoR/grifo/lib/assets/twitterjs, /home/valle/.rvm/gems/ruby-1.9.3-p392/gems/modernizr-rails-2.7.1/vendor/assets/javascripts, /home/valle/.rvm/gems/ruby-1.9.3-p392/gems/turbolinks-2.2.2/lib/assets/javascripts, /home/valle/.rvm/gems/ruby-1.9.3-p392/gems/jquery-rails-3.1.0/vendor/assets/javascripts, /home/valle/.rvm/gems/ruby-1.9.3-p392/gems/coffee-rails-4.0.1/lib/assets/javascripts, /home/valle/.rvm/gems/ruby-1.9.3-p392/bundler/gems/twitter-bootstrap-rails-663760e67b80/app/assets/fonts, /home/valle/.rvm/gems/ruby-1.9.3-p392/bundler/gems/twitter-bootstrap-rails-663760e67b80/app/assets/images, /home/valle/.rvm/gems/ruby-1.9.3-p392/bundler/gems/twitter-bootstrap-rails-663760e67b80/app/assets/javascripts, /home/valle/.rvm/gems/ruby-1.9.3-p392/bundler/gems/twitter-bootstrap-rails-663760e67b80/app/assets/stylesheets, /home/valle/.rvm/gems/ruby-1.9.3-p392/bundler/gems/twitter-bootstrap-rails-663760e67b80/vendor/assets/stylesheets
I thought Sprockets would take all js or css files in all assets folders, precompile, unify and minify them, but now it seems I need to specify the path. How could I solve it?
Besides, is it a problem not to have separated javascript and css folders in vendors?
in rails 4 they have removed vendor folder,so,assets will not server from vendor.
in that Rails.application.config.assets.paths not contains vendor,if you want you have to add the path like
in config/application.rb
config.assets.paths << "#{Rails.root}/vendor/assets"
Update application.js file as
//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require turbolinks
//= require_tree .
//= require otherJsFiles
And in application.css file require other css file as
*= require otherCssFiles
Require each js and css file in application.js and application.css file placed in vendor/assets.
I have the following setup:
gem 'rails', '~> 4.0.3'
In config/application.rb:
config.assets.paths << Rails.root.join('vendor', 'assets', 'components')
In vendor/assets/components/gridster/dist:
jquery.gridster.min.css jquery.gridster.with-extras.min.js
jquery.gridster.min.js
Yet, once I go to http://localhost:3000/ and view source in the browser, these assets are not showing up...what do I have to do to get them there?
Update:
application.js:
//= require jquery
//= require jquery_ujs
//= require jquery.validate
//= require bootstrap
//= require dataTables/jquery.dataTables
//= require dataTables/jquery.dataTables.bootstrap3
//= require jquery.gridster.min
//= require jquery.gridster.with-extras.min
//= require_tree .
application.css.scss:
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the top of the
* compiled file, but it's generally better to create a new file per style scope.
*
*= require_self
*= require dataTables/jquery.dataTables
*= require dataTables/jquery.dataTables.bootstrap3
*= require jquery.gridster.min
*= require_tree .
*/
In application.js, add following lines
//= require gridster/dist/jquery.gridster.min
//= require gridster/dist/jquery.gridster.with-extras.min
In application.css, add following line
*= require gridster/dist/jquery.gridster.min
You need to add reference of the files so Sprockets will search the default asset locations i.e., app/assets, lib/assets and vendor/assets Plus any additional paths appended to config.assets.paths
I`ve seen some information here but it looks kind of not audible for me.
I included //= require jquery-ui in application.js
Where should i place directory with styles and how it should be called? Could you please provide step by step instruction.. Thanks!
You simply put your stylesheets and javascripts as follow
directories path for javascript
vendor -> assets -> javascript
and require file in application.js
//= require jquery-ui
//= require_self
//= require_tree .
directories path for style sheets
vendor -> assets -> stylesheets
*=require style
*= require_tree .
It will sure work for you