Rails consolidation part5 - Bootstrap and Asset Pipeline
How do I make an rails consolidation part5 - bootstrap and asset pipeline?
What is a rails consolidation part5 - bootstrap and asset pipeline? How do you make a rails consolidation part5 - bootstrap and asset pipeline? This script and codes were developed by DAWEI DAI on 29 September 2022, Thursday.
Rails consolidation part5 - Bootstrap and Asset Pipeline Previews
Rails consolidation part5 - Bootstrap and Asset Pipeline - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Rails consolidation part5 - Bootstrap and Asset Pipeline</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container-fluid"> <div class="jumbotron"> <div class="row"> <div class="col-xs-12"> <h1 class="text-center">Rails part5</h1> <h2 class="text-center"><em>Bootstrap and Asset Pipeline</em></h2> <!--div class="thumbnail"><image src="https://c2.staticflickr.com/4/3689/10613180113_fdf7bcd316_b.jpg"> <div class="caption text-center">Dr. Norman Borlaug, second from left, trains biologists in Mexico on how to increase wheat yields - part of his life-long war on hunger.</div> </div--> <div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-12 col-md-offset-0"> <h3 class="text-center text-primary">Lesson 1</h3> <pre>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" 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}
</pre> <p>How to integrate bootstrap template with rails (basic) </p> <ol> <li> Go to startbootstrap.com and pick a free template to download</li> <li>Create root app folder. Unzip the template.zip file and put all the content into public folder under root app folder. Get rid of the old root folder in the template zip file (similar to sinatra)</li> <li> Inside views folder, create home.html.erb (it should be index.html’s content), in home.html.erb, make sure things start with e.g. css/ (could be do nothing, just copy and paste here) Set up routes.rb to route it to home.html.erb. <mark><strong>VERY VERY IMPORTANT!!!! make it /css, don't make it css. otherwise it will consider it as a relative path and starting from the current page</strong></mark></li> <li>For rails, put in gemfile, sqlite to developement group, pg and rails_12factor to production group, then do bundle install –without production
By now, works for Sinatra both locally and on heroku, no further configuration
But works for Rails only locally, but on heroku, all stylings are off(due to the static assets in public are not recognized by heroku)
http://stackoverflow.com/questions/22570563/rails-public-folder-items-not-available-in-production
You need to open up production.rb in Rails and say config.servce_static_assets = true
Then all stylings are back, also the picture is there(didn’t one-month teacher say pics won’t persist on heroku?) Also the CDN works too (if you have use rails_12factor in production group for gemfile, then you don’t have to set this to true https://github.com/heroku/rails_12factor#rails-4-serve-static-assets - check the last paragraph
</li> </ol> <p>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</p> <p>sprockets and gemmit are same stuff, ofiscating tool</p> <pre>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
</pre> <p>https://railsapps.github.io/rails-javascript-include-external.html</p> <pre>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" 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 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');" </pre> <!------------------------------------> </div> </div> </div> </div> <footer class="text-center"> <hr> <p>Written and coded by <a href="https://www.freecodecamp.com/quincylarson" target="_blank">Dawei Dai</a>.</p> </footer>
</div>
</body>
</html>
Rails consolidation part5 - Bootstrap and Asset Pipeline - Script Codes CSS Codes
body { margin-top:60px;
}
| Developer | DAWEI DAI |
| Username | shachopin |
| Uploaded | September 29, 2022 |
| Rating | 3 |
| Size | 10,926 Kb |
| Views | 22,264 |
Do you need developer help for Rails consolidation part5 - Bootstrap and Asset Pipeline?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
DAWEI DAI (shachopin) Script Codes
| Name | Size |
| Oracle JET Experiment 3 - Offcanvas | 4,424 Kb |
| JS consolidation part1 | 12,648 Kb |
| Rails consolidation part1 - Basics | 8,029 Kb |
| Oracle JET Experiment 5 - Toolbar | 3,377 Kb |
| Angular JS 1.X Experiment 4 - Routing | 4,467 Kb |
| JSON and Ajax demo part1 | 3,828 Kb |
| Oracle JET consolidation part3 | 10,230 Kb |
| Rails consolidation part2 - Model | 6,785 Kb |
| Macbook System Setup part2 | 8,280 Kb |
| Oracle JET Experiment 2 - ojNavigationList | 2,920 Kb |
Create amazing blog posts with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| React Template | Isac | 1,241 Kb |
| Fixed with using Calc | Tomleo | 2,542 Kb |
| Glitchy Text Effect | Kescoe | 2,208 Kb |
| Pricing Table | Semenchenko | 6,784 Kb |
| Loading Bar | Jaradlight | 2,333 Kb |
| Cartoon Bomb | Tcmulder | 4,929 Kb |
| Experiment | Toddmoy | 2,849 Kb |
| Scroll to top button | DominicFrancois | 3,743 Kb |
| CSS Patterns | Alyda | 3,953 Kb |
| Angular Sandbox | Alexgurrola | 1,616 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!