how to grab bootstrap from a scratch app and the concept of asset pipeline /Gemfile .. gem 'bootstrap-sass' bundle install app assets images and javascript and stylesheets folder under stylesheets application.css you see it's a manifest file it's taking all the files in this folder and combining them together create boostrap_and_customization.css.scss it's kida liks html.erb scss is precomipler for css on this file @import 'bootstrap'; (or you can rename application.css to application.css.scss, then directly put @import 'bootstrap'; inside this file under all manifest content) restart rails server to make it effective boostrap changes: in application.html.erb (to make it center) <div class="container"> <%= yield %> </div> more boostrap changes refer to onemonthrails how to add bootstrap javascript to your app (so that collapse navigation bar icon will show correctly) go to assets/javascript/application.js this is another manifest file add require bootstrap like this ... //= require jquery //= require jquery_ujs //= require bootstrap //= require turbolinks //= require_tree . bootstrap has to be loaded after jquery, because it relies on jquery to make it looks not funny on mobile device: 6. Add viewport views/layouts/application.html.erb add in <head>. just before the closing head <meta name="viewport" content="width=device-width, initial-scale=1.0"> <div class="jumbotron"> <h1>Welcome to my app!</h1> Click here to <%= link_to "Sign Up", "#", class: "btn btn-primary" %> </div> twitter bootstrap using LESS variable staring with @ rails using SASS variable staring with $ find these variables in customize section on twitter bootstrap, and change from @ to $ in boostrap_and_customization.css.scss $body-bg: #ecf0f1; $navbar-inverse-bg: #27ae60; $navbar-inverse-link-color: white; $brand-primary: #f39c12; $jumbotron-bg: #bdc3c7; @import 'bootstrap-sprockets'; (why need this? I thought import boostrap is sufficient) @import 'bootstrap'; check http://flatuicolors.com/ to pick color nd save to clipboard app/views/layouts/_header.html.erb <nav class="navbar navbar-inverse navbar-default" role="navigation"> 2. Style updates app/assets/stylesheets/bootstrap_and_customization.css.scss @import url(https://fonts.googleapis.com/css?family=Lato:400,700); $body-bg: #ecf0f1; $font-family-sans-serif: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif; $navbar-height: 45px; $navbar-default-bg: white; $navbar-default-brand-color: #c0392b; $brand-primary: #c0392b; $jumbotron-bg: white; @import 'bootstrap'; .center { -- to add your own class text-align: center; } .navbar-brand { -- to override exiting twitter boostrap class font-weight: bold; } <div class="jumbotron center"> <h1>Welcome to my app!</h1> <p> <%= link_to "Log in", "#", class: "btn btn-default btn-lg" %> <%= link_to "Sign up", "#", class: "btn btn-primary btn-lg" %> </p> </div> asset pipeline take app/assets and lib/assets, combine them and remove space and put into public/asset, just the /asset/ResouceFileName, no styleseet folder or js folder or image folder one for js one for css scss is sass, which is the preprocessor of css just rake assets:precompile (does the jamming according the maniefest file) Way 1: every time I change asset file (js or scss), I run rake assets:precompile and then during deployment, I simply copy this public/asset to server quickr deploement need team collaboration more not recommended - in some weird cases, votes twice because you have js locally and in asset folder, causing confusion) way 2: I don't have public/asset on my dev server, only deploy it the last command is running rake assets:precompile - longer deployment time if heroku sees you have public/asset, then will not run that command. You have to delete that dir in this course, we do #2, heroku will run rake assets:precompile command for us last Notice, in dev mode, your network tab shows you download each static file indiviually with clear text but in produciton mode, all js are in one file and all cs are in one file, with congested text. No able to understand. The file as a cach-buster identifier, so browser will knwo when the file is updated and update its cach to reflect the new ones chris also suggested following the boostrap-sass gem webite gemfile add gem 'autoprefixer-rails' you can also @import stuff on sass file. he renamed application.css to application.css.sass dif between scss and sass? same thing, slightly different syntaxes (for example, scss have semi-column for @impoart 'bootstrap'; sass doesn't. also if it's scss, you can write css plainly, for sass file, you have to follow sass syntax) @import "boostrap-sprockets" @import "bootstrap" scss is superset of css, better sass you have to follow sass syntax like .title width: 100px he also added //=require bootstrap-sprockets to application.js google twitter boostrap themes or WrapBooststrap manifest stuff can be in js, css and sass and scss file application.js will be compiled to application js application.css.scss or sass will be compiled to application css. In browser inspector, you only see css and js. That's what your browser can only work with. they are all serverside code, not living in your browser even remove boostrap-sass gem, still do bundle install and restart while local running in inspeact element, still see css, js coming from /assets/ folder, but they are not actually deployed to public/assets chris suggested removing turblinks (be careful your html.erb file might refer to "data-turbolinks-track"=> true, in this case you cannot just remove the gem wthout setting it to false) gem 'turbolinks' -> remove it bundle install (he thinks it might nagatively affect jquery and affect the javascript from twitter bootstrap) while running on heroku two one-line files, one for css, one for js, with cach buster all files got minified, smashed to onefile in the gem, bootstrap.scss defines all constant taht this gem uses Rails support cdn, change developer.rb and dosomethign configriaton how to only include a javascript or css on one page only 1) remove the //= require_tree . from application.js or there is a better way of excluding http://stackoverflow.com/questions/27206835/adding-page-specific-css-to-rails-asset-pipeline use stub command in your manifect file for example in css *= stub jumbotron-narrow 2) http://coderberry.me/blog/2012/04/24/asset-pipeline-for-dummies/ Q: How can I have certain JavaScript files appear at the bottom of the HTML page? Multiple manifests can be created in the assets folder. For example, I can have a separate manifest called customize.js which includes the files window-object.js and footer_2.js. //= require window-object //= require footer_2 I can add this into the HTML by using the same javascript_include_tag that is used in the HTML header of the layout. <%= javascript_include_tag("customize") %> </body> </html> 3) http://www.gotealeaf.com/blog/rails-asset-pipeline-best-practices Precompilation You may now be wondering if everything you put in the app/assets/javascripts/ folder will be automatically precompiled for your app. Fortunately, the asset pipeline provides a way to specify which files are compiled, and in which order. By default, application.css and application.js (or their sass/coffeescript equivalents), along with all non-Javascript, non-CSS assets are included. To include a CSS or Javascript file other than application.css and application.js, you have to require it in one of two ways: Add it to the precompile array in config/initializers/assets.rb (Rails 4) or your application config file (e.g. config/application.rb), or Include the file in your asset’s manifest or one of its sub-file’s manifest. The first option looks like this: in applcation.rb config.assets.precompile += %w( customize.js) This option is best for files that it makes sense to only include on certain pages, and should not be included on others. the second option is when you have require_tree . in your application.js (whicch is taken out for now because you don't want this js to show on every page) Notice here I don't have to use a manifest file (customize.js) I can use the js directly. using manifest file is to use its' minifying and smashing ability 6 Static Pages - bootstrap_and_customize.css is included in application.css, hence will be showing in all pages - diagnostic page is under pages, still with layout though, the whole page is using javascript - remove the require . from application.js, so will not be included in every page that uses application.js - create a new container customize.js - containing window-object.js which has the logic - register customize.js in application.rb (config.assets.precompile += %w(customize.js, jumbotron-narrow.css )) - use that javascript in the diagnostic at the bottom (<%= javascript_include_tag("customize") %>) - because it needs the component to render first - inspect the page, saw assets has customize.js and window-object.js - without regiter, should still work in dev(still see it coming from /assets/ folder, but they are not actually deployed to public/assets ) but not working production on heroku - static page home page without layout - home page needs <!--%= stylesheet_link_tag "jumbotron-narrow", media: "all", "data-turbolinks-track" => true %--> - better way by not remvoing requie . from application.css, but after which say *= stub jumbotron-narrow - register jumbotron-narrow here in application.rb (config.assets.precompile += %w(customize.js, jumbotron-narrow.css )) - inspect page, saw assets has jumbotron-narrow.css - without register, should still work in dev(still see it coming from /assets/ folder, but they are not actually deployed to public/assets ), but not production on heroku - in this case, I don't need jumbotron-narrow anymore, commented taht reference on the page out - notice you only see them in assets when the page uses them. If you comment the references out, then won't see them in assets Practical steps (for running non-rails looking pages on rails platform): 1. set up all the controller, routes, and html.erb file 2. on the html.erb file, copy paste the original html source code 3. in controller, render layout: false 4. under stylesheets, create customize.css, name doens't matter 5. copy paste the original css code 6. on the html.erb file, in the head, say <%= stylesheet_link_tag "customize", media: "all", "data-turbolinks-track"=> true %> 7. register customize.css in application.rb (config.assets.precompile += %w(customize.css )) 8. without regiter, should still work in dev(still see it coming from /assets/ folder, but they are not actually deployed to public/assets ), but not production on heroku 9. In this case, I need jquery to work, so I create a customize.js 10. manifest stuff can be in js, css and sass and scss file. so add manifest //= require jquery //= require jquery_ujs then you own jquery code 11 Since this jquery code is in the $(function() section, it means it will only run after the page is loaded, you can include this in the head 12 on the html.erb file, in the head, say <%= javascript_include_tag "customize", "data-turbolinks-track"=> true %> 13 register customize.js in application.rb (config.assets.precompile += %w(cutomize.js )) 14. without regiter, should still work in dev(still see it coming from /assets/ folder, but they are not actually deployed to public/assets ), but not production on heroku 15. To add images: I just had this issue myself. 3 points that will hopefully help: If you are placing images in your app/assets/images directory, then you should be able to call the image directly with no prefix in the path. ie. image-url('logo.png') Depending on where you use the asset will depend on the method. If you are using it as a background-image: property, then your line of code should be background-image: image-url('logo.png'). This works for both less and sass stylesheets. If you are using it inline in the view, then you will need to use the built in image_tag helper in rails to output your image. Once again, no prefixing <%= image_tag 'logo.png' %> Lastly, if you are precompiling your assets, run rake assets:precompile to generate your assets, or rake assets:precompile RAILS_ENV=production for production, otherwise, your production environment will not have the fingerprinted assets when loading the page. Also for those commands in point 3 you will need to prefix them with bundle exec if you are running bundler. in my case, put all png files in app/assets/images folder... image_tag in the view works, but css doens't recognize image-url command. You need to rename your css file to scss notice scss file can by recognized by stylesset_link_tag too in your dev mode, inspect element, saw background-image: url(/assets/kinglogo.png) in css saw <img alt="Kinglogo" src="/assets/kinglogo.png"> in html you can access your png like this localhost:3000/assets/icon-trash.png https://howilearnedrails.wordpress.com/2014/01/18/add-a-background-image-to-a-ruby-on-rails-app-using-bootstrap-css/ 16. deploy to heroku works (without register the scss and js file this way - config.assets.precompile += %w(customize.css.scss custmize.js) , doesn't work) 17 also notice the javascript works, but css deosn't work. Because although customize.css.scss can be regonizable in dev mode, in production mode code is still refering to customize.css in the head section <link data-turbolinks_track="true" rel="nofollow noopener" target="_blank" href = "/stysheets/customize.css" media="all" rel="stylesheet"> and no cache buster add to css either create a new folder called customize, create a parent_customize.css file under stylesheets/customize folder and put it the sae content as applciation.css register this file instead customize/parent_customize <%= stylesheet_link_tag "customize/parent_customize", media: "all", "data-turbolinks-track"=>true %> this above is not a good solution. look down below 18 Now everything works you see cach buster for js and css you also see a cach buster to all the /assets/some.png file like background-image :url(/asset/kinglogo-blahblahblah.png) 19 notice stuff in the subfolder won't be taken by require tree . by your applciation.css Note that require_tree . does not compile assets recursively through directories. If you have a folder of files that you want to include, you’ll have to add that to the manifest as well: #= require_tree ./components Read http://www.gotealeaf.com/blog/rails-asset-pipeline-best-practices. Very good! 20. Oh looks like the above statement is incorrectly. It will include the subfolder and all the css inside recursively http://atlwendy.ghost.io/exclude-some-stylesheets-in-rails-4/ practical problem #2 add a background image to your home page only 1 download a picture and put it in your assets/images folder 2.under assets/stylesheets, create a new file called background.css.scss 3.body{ background-image" image-url("hardwood.jpg") -- notice this command is for scss only (image-url) } 4. in your home.html.erb have <%= stylesset_link_tag "background", media: "all", "data-turbolinks-track" => true %> 5.since it is only for home page, exclude it from application.css mannifest know that if a css file is background.css.scss. then stub background will work too 6.now it works in local dev env already 7. push this to heroku doens't work 8. config.assets.precompile += %w(customize.css.scss custmize.js background.css.scss) push to heroku, 9 still doesn't work, becuase production env like heroku is assuming background.css 10 config.assets.precompile += %w(customize.css.scss custmize.js background.css), push to heroku 11 then it works fine in production page, you see the background css not included in application css file, this is expected, because it is not in the manifest file of application.css key 1 manifest file can be scss,sass key 2 By default, application.css and application.js (or their sass/coffeescript equivalents), along with all non-Javascript, non-CSS assets are included. To include a CSS or Javascript file other than application.css and application.js, you have to require it in one of two ways: key 3 Notice here I don't have to use a manifest file (customize.js) I can use the js directly. using manifest file is to use its' minifying and smashing ability Some cool UI using bootstrap you already know 1 breadcumb 2 jambotron 3 well 4 dropdown list 5 collection checkbox / Radio buttons 6 mutilple/single selector 7 panel heading, panel body and panel footer 8 xs-col-4 the 12 gid layout, you need container, row, then something like xs-col-4 9 using reverse link for html inside a link 10 glyphcon 11 inject html in a ruby varaibale using html_safe 12 container div 13 navbar 14 pull-right 15 btn btn-primary.... 16 alert alert-info..... 17 form styling control-group 18 glyphcon wtihin a button or a link 19 badge (needs customization css) 20 lead 21 tab 22 learned how to create a dismissble alert message using content_tag for flash message 23 offset the gridsystem col 24 list css dl-horizontal class Horizontal description 25 textarea tip: div class="row" is not necessary for shrinking the column It's only needed when you want to put the several columns in the same row!!!! THIS IS WRONG If you want something to take one line, even the size can be small you need to do something lik this div class="row" div class="col-xs-4 well" otherwise the next item will come up verses in separate line to give a class to a form (even add an attribute) form_for @user, html: {class: "form-horizontal", role: "form}
How to integrate bootstrap template with rails (basic)
Notice when you work with app, you cannot work with Sass, scss, or coffeescript file, you need to work with js and css file. That's why on production server, it needs to produce css and js, even on dev server when running it show js and css, never show scss in the browser inspector. It's just in production server there is one minified js and css file
sprockets and gemmit are same stuff, ofiscating tool
External Scripts The Rails asset pipeline is a powerful tool for managing project- specific JavaScript code; however, it doesn’t offer a facility for managing JavaScript files that are obtained outside of your own application. External scripts, those that are downloaded by a web browser from a remote web server, can be handled in three ways: copied locally and managed with the asset pipeline dynamically loaded from within another JavaScript file using a little-known Ajax technique added to an application layout or view template with a script tag
https://railsapps.github.io/rails-javascript-include-external.html
Let's say you want to utilize a done template from template website: e.g. - https://themeforest.net/item/chair-html-ecommerce-website-template/12423834?ref=LuciyR 1) Do the above with make sure <meta name="viewport" content="width=device-width, initial-scale=1"> in head tag 2) Rename application.css to application.css.scss and remove ALL content 3) Create pages#index 4) Copy paste the body tag's content without script tag from your template to your application.html.erb 5) Copy all css files (styless.css and color-red.css without bootstrap.css) to under stylesheets folder and copy all js files (without bootstrap.js) to javascripts folder 6) In application.css.scss add @import "style"; and other stuff (mostly just the css file name) according to what css are used in the old template index.html file 7) Copy the entire fonts folder (containing static fonts file) to app/assets 8) Then open style.css and change the reference to the above static fonts to /assets/somefontname (this is the traditional css style, not the rails helper style like image-url or image_tag (refer to the above img section). No need to change the font-famly name 8.5) fix the links to link_to using either simplified or complex block version Like block of code: <li> <a class="side-logo" rel="nofollow noopener" target="_blank" href=“index.html">Chair <span class="logo-dot accent-bg”></span> </a> </li> become: <%= link_to '#', class: "side-logo" do %> MyStore <span class="logo-dot accent-bg”></span> <% end %> Simple: <li> <a rel="nofollow noopener" target="_blank" href=“privacy.html">Privacy</a> </li> become: <li> <%= link_to 'Privacy', root_path %> </li> 9) Copy all images to the app/assets/images folder, Then in the code say <%= image_tag 'image_name.jpg', class: "", alt: " " %> or style="background-image: url('/assets/sss.jpg');" 10) in GEMFILE, add gem "font-awesome-rails" run bundle install 11) in application.css.scss add @import "font-awesome"; 12) in application.html.erb, head, add external css like this: <%= stylesheet_link_tag 'https://fonts.googleapis.com/css?family=Raleway:400,700,600,500,300' %> 13) Don’t forget to add meta tag name viewport to your views/layouts/application.html.erb file (find it in attached file). Without this meta tag your website will not be responsive. <meta name="viewport" content="width=device-width, initial-scale=1"> 14)Regarding the necessirty of removin turbolinks- I debugged this for hours, coudn't figure out Dawei · 12 hours ago For the logo in top nav bar, I have code like this: <%= link_to root_path, class: "navbar-brand" do %> Chair<span class="logo-dot accent-bg"></span> <% end %> I click on it and expect to see the same page just refreshed because root is routed to pages#index But the behavior is that the very first background picture disappears and the the page shrinks up. Also the off-screen side-bar doesn't work. Any idea? Can there be the same issue in instructor's code as well? Please check my repo: https://github.com/shachopin/dawei-store Thanks, Following Responses Evgen — Instructor · 10 hours ago Hi, Dawei! In my version all work fine if I add root_path to link. I think turbolinks can lead to this issue. The easiest way is to remove turbolinks from your application.js file. Should look like this: //= require jquery //= require jquery_ujs //= require bootstrap-sprockets //= require_tree . Hope this will help. P.S. You can also remove turbolinks from head in views/layout/application.html.erb file. Also you can remove turbolink from gemfile take app/assets and lib/assets, combine them and remove space and put into public/asset, just the /asset/ResouceFileName, no styleseet folder or js folder or image folder That's why you say style="background-image: url('/assets/sss.jpg');" not style="background-image: url('/assets/images/sss.jpg');"