In simpler speaking:
Put all the CSS files from the template to:
app/assets/stylesheets
Put all the image files from the template to:
app/assets/images
Put all the Javascript files from the template to:
app/assets/javasctripts
Put all the HTML files from the template to:
app/views/(controller_name)/
And change all the image tags to:
<%= image_tag("picture01.jpg") %>
For example, I want to apply this CSS template:
http://www.templatemo.com/tm-488-classic to my Ruby on Rails project.
First, I downloaded it to my local hard drive. And I tested the HTML5 and CSS to ensure they are working properly.
Next, I tried to start from the Chapter 3 of the book:
https://www.railstutorial.org/book/static_pages#cha-static_pages
I created a new project named myapp2. I tried to copy the codes from Ch 3, Ch 4, to Ch 5.1.1 from the book "at turbo speed".
I paused at Chapter 5 Section 5.1.2. And I prepared to copy the Template 488 Classic by Templatemo.com.
* Using Firefox, I tried to open the HTML and CSS in my local drive to verify the CSS template is working properly.
file:///home/jimmyc/html/templatemo_488_classic/index.html
* This was my original home.html.erb static page without CSS stylesheet.
* Next step, I copied the CSS files to:
app/assets/stylesheets
* Then, this is the home.html.erb static page with CSS stylesheet:
* I found that Michael Harlt's codes were not very compatible with the CSS template. So, I had to modify the codes a little bit.
* I decided NOT to use the application layout file by Michael Harlt on app/views/layouts/application.html.erb. So, I reverted the application layout as is original. It might make some repeat of codes in the html.erb pages, but it is easier for design of the web page as they are following the patterns for many free CSS templates on the internet
app/views/layouts/application.html.erb (original)
<!DOCTYPE html>
<html>
<head>
<title><%= full_title(yield(:title)) %></title>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all',
'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= yield %>
</body>
</html>
* I re-wrote the config/routes.rb files to make the path of those static pages more adhere to Rails style.
Rails.application.routes.draw do
root 'static_pages#home'
# home_path
get '/home', to: 'static_pages#home'
# help_path
get '/help', to: 'static_pages#help'
# about_path
get '/about', to: 'static_pages#about'
# contact_path
get '/contact', to: 'static_pages#contact'
# index02_path
get '/index02', to: 'static_pages#index02'
end
* I replaced the library path of CSS files from href="css/ to href="/assets/css/ for all html.erb files:
<link rel="stylesheet" href="/assets/css/bootstrap.min.css">
<!-- Bootstrap style -->
<link rel="stylesheet" href="/assets/css/templatemo-style.css">
<!-- Templatemo style -->
* In html.erb file, I re-wrote all <img> tags to <%= image_tag() %>. For example:
<!-- From: -->
<img src="img/tm-home-img.jpg" alt="Image" class="hidden-lg-up img-fluid">
<!-- To: -->
<%= image_tag("tm-home-img.jpg", :alt => "Image", :class => "hidden-lg-up img-fluid") %>
* Next, in the templatemo-style.css file, I wrote the image path for JPG background images:
app/assets/stylesheets/templatemo-style.css
/* old: background-image: url('../img/tm-home-img.jpg'); */
background-image: url('tm-home-img.jpg');
.tm-about-img-container { background-image: url('tm-about-img.jpg'); }
.tm-blog-img-container { background-image: url('tm-blog-img.jpg'); }
.tm-contact-img-container { background-image: url('tm-contact-img.jpg'); }
* In earlier step, I forgot those links on the top have their class "nav-link". So, I needed to specify a class in Rails link_to() method.
For example, original html:
<a href="about.html" class="nav-link">About</a>Ruby on Rails html.erb :
<%= link_to "About", about_path, class: "nav-link" %>The final top links portion in the html.erb file:
<div class="collapse navbar-toggleable-sm" id="tmNavbar">
<ul class="nav navbar-nav">
<li class="nav-item active">
<%= link_to "Home", home_path, class: "nav-link" %>
</li>
<li class="nav-item">
<%= link_to "Help", help_path, class: "nav-link" %>
</li>
<li class="nav-item">
<%= link_to "About", about_path, class: "nav-link" %>
</li>
</ul>
</div>
* Now, the prelim CSS style from templatemo is applied to my Ruby on Rails page.
* It took me some time to re-wrote the codes for home.html.erb.
app/views/static_pages/home.html.erb
<% provide(:title, "Home") %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--
Classic Template
http://www.templatemo.com/tm-488-classic
-->
<!-- load stylesheets -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400"> <!-- Google web font "Open Sans" -->
<link rel="stylesheet" href="/assets/css/bootstrap.min.css"> <!-- Bootstrap style -->
<link rel="stylesheet" href="/assets/css/templatemo-style.css"> <!-- Templatemo style -->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="tm-header">
<div class="container-fluid">
<div class="tm-header-inner">
<a href="#" class="navbar-brand tm-site-name">Sample App</a>
<!-- navbar -->
<nav class="navbar tm-main-nav">
<button class="navbar-toggler hidden-md-up" type="button" data-toggle="collapse" data-target="#tmNavbar">
☰
</button>
<div class="collapse navbar-toggleable-sm" id="tmNavbar">
<ul class="nav navbar-nav">
<li class="nav-item active"><%= link_to "Home", home_path, class: "nav-link" %></li>
<li class="nav-item"><%= link_to "Help", help_path, class: "nav-link" %></li>
<li class="nav-item"><%= link_to "Log in", '#', class: "nav-link" %></li>
</ul>
</div>
</nav>
</div>
</div>
</div>
<div class="tm-about-img-container">
</div>
<section class="tm-section">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-xs-center">
<h2 class="tm-gold-text tm-title">Welcome to the Sample App</h2>
<p class="tm-subtitle">This is the home page for the
<a href="http://www.railstutorial.org/">Ruby on Rails Tutorial</a>
sample application.</p>
<%= link_to "Sign up now!", '#', class: "tm-btn text-uppercase" %>
</div>
<%= link_to image_tag("rails.png", alt: "Rails logo"),
'http://rubyonrails.org/' %>
</div>
</div>
</section>
<footer class="tm-footer">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 col-xl-3">
<div class="tm-footer-content-box tm-footer-links-container">
<h3 class="tm-gold-text tm-title tm-footer-content-box-title">Ruby on Rails Tutorial</h3>
<nav>
<ul class="nav">
<li><a href="#" class="tm-footer-link">About</a></li>
<li><a href="#" class="tm-footer-link">Contact</a></li>
<li><a href="#" class="tm-footer-link">News</a></li>
</ul>
</nav>
</div>
</div>
<!-- Add the extra clearfix for only the required viewport
http://stackoverflow.com/questions/24590222/bootstrap-3-grid-with-different-height-in-each-item-is-it-solvable-using-only
-->
<div class="clearfix hidden-lg-up"></div>
</div>
<div class="row">
<div class="col-xs-12 tm-copyright-col">
<p class="tm-copyright-text">Jimmy Chong 2017</p>
</div>
</div>
</div>
</footer>
<!-- load JS files -->
<script src="js/jquery-1.11.3.min.js"></script> <!-- jQuery (https://jquery.com/download/) -->
<script src="https://www.atlasestateagents.co.uk/javascript/tether.min.js"></script> <!-- Tether for Bootstrap, http://stackoverflow.com/questions/34567939/how-to-fix-the-error-error-bootstrap-tooltips-require-tether-http-github-h -->
<script src="js/bootstrap.min.js"></script> <!-- Bootstrap (http://v4-alpha.getbootstrap.com/) -->
</body>
</html>
* This is picture of the finished version of the home page with new CSS style.
* And then, I went back to the book. I skipped section 5.1.2 because I copied the CSS style from templatemo already.
* For 5.1.3 partial (for header and footer), I hard coded it directly in the home.html.erb page.
Site header:
<nav class="navbar tm-main-nav">
<button class="navbar-toggler hidden-md-up" type="button" data-toggle="collapse" data-target="#tmNavbar">☰
</button>
<div class="collapse navbar-toggleable-sm" id="tmNavbar">
<ul class="nav navbar-nav">
<li class="nav-item active">
<%= link_to "Home", home_path, class: "nav-link" %>
</li>
<li class="nav-item">
<%= link_to "Help", help_path, class: "nav-link" %>
</li>
<li class="nav-item">
<%= link_to "Log in", '#', class: "nav-link" %>
</li>
</ul>
</div>
</nav>
Site footer:
<div class="tm-footer-content-box tm-footer-links-container">
<h3 class="tm-gold-text tm-title tm-footer-content-box-title">Ruby on Rails Tutorial</h3>
<nav>
<ul class="nav">
<li>
<%= link_to("About", about_path, :class => "tm-footer-link") %>
</li>
<li>
<%= link_to("Contact", contact_path, :class => "tm-footer-link") %>
</li>
<li>
<a href="http://news.railstutorial.org/" class="tm-footer-link">News</a>
</li>
</ul>
</nav>
</div>
* I skipped section 5.2 Sass and the asset pipeline because it does not match with the free CSS template.
* I did section 5.3 Layout links already.
* For section 5.3.4 Layout link tests, I generate the integration test for the app.
$ rails generate integration_test site_layout
* The testing codes:
test/integration/site_layout_test.rb
require 'test_helper'
class SiteLayoutTest < ActionDispatch::IntegrationTest
test "layout links" do
get root_path
assert_template 'static_pages/home'
assert_select "a[href=?]", root_path, count: 2
assert_select "a[href=?]", help_path
assert_select "a[href=?]", about_path
assert_select "a[href=?]", contact_path
end
end
* And then I ran the test.
$ rails test:integration
# Running:
E
Error:
SiteLayoutTest#test_layout_links:
NoMethodError: assert_template has been extracted to a gem. To continue using it,
add `gem 'rails-controller-testing'` to your Gemfile.
test/integration/site_layout_test.rb:7:in `block in <class:SiteLayoutTest>'
bin/rails test test/integration/site_layout_test.rb:5
Finished in 0.555924s, 1.7988 runs/s, 0.0000 assertions/s.
1 runs, 0 assertions, 0 failures, 1 errors, 0 skips
* I deleted the line assert_template 'static_pages/home' because I was not using Michael's CSS template.
require 'test_helper'
class SiteLayoutTest < ActionDispatch::IntegrationTest
test "layout links" do
get root_path
assert_select "a[href=?]", root_path, count: 2
assert_select "a[href=?]", help_path
assert_select "a[href=?]", about_path
assert_select "a[href=?]", contact_path
end
end
* And then, I ran the integration test and general test again and made sure that they were pass.
$ rails test:integration
Finished in 0.544734s, 1.8358 runs/s, 7.3430 assertions/s.
1 runs, 4 assertions, 0 failures, 0 errors, 0 skips
$ rails test
Finished in 0.553224s, 10.8455 runs/s, 23.4986 assertions/s.
6 runs, 13 assertions, 0 failures, 0 errors, 0 skips
* For section 5.4, I created a new User controller.
$ rails generate controller Users new
* I added a Sign up path for routes.rb
# signup_path
get '/signup', to: 'users#new'
* I chaged the sign up path for User controller test file:
require 'test_helper'
class UsersControllerTest < ActionDispatch::IntegrationTest
test "should get new" do
get signup_path
assert_response :success
end
end
* I set the sign up path for the 'Sign up now!' button.
<%= link_to "Sign up now!", signup_path, class: "tm-btn text-uppercase" %>
* I added a custom stub view for the signup page.
app/views/users/new.html.erb
<% provide(:title, 'Sign up') %>
<h1>Sign up</h1>
<p>This will be a signup page for new users.</p>
* I changed the text color from gray to black in the CSS file.
app/assets/stylesheets/templatemo-style.css
body {
/* color: #8c8c8c; */
color: #000000;
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
font-size: 18px;
font-weight: 300;
overflow-x: hidden;
}
* Okay, at the end of the chapter, I committed the changes using git and pushed it onto Github.
$ git add -A
$ git commit -m "Finish layout and routes"
$ git checkout master
$ git merge filling-in-layout
$ rails test
$ git push
* This is the log of Linux shell commands for today's blog.
Logs
Ch 3
$ cd ~
$ rails new myapp2
$ cd myapp2
$ bundle install
$ git init
$ git add -A
$ git commit -m "Initialize repository"
$ git commit -am "Improve the README"
$ git checkout -b static-pages
$ rails generate controller StaticPages home help
$ bundle update minitest
$ git add -A
$ git commit -m "Finish static pages"
$ git checkout master
$ git merge static-pages
$ git push -u origin --all
Ch 4:
$ git checkout -b rails-flavored-ruby
$ git commit -am "Add a full_title helper"
$ git checkout master
$ git merge rails-flavored-ruby
$ rails test
$ git push
Ch 5:
$ git checkout -b filling-in-layout
$ curl -o app/assets/images/rails.png -OL railstutorial.org/rails.png
$ rails generate integration_test site_layout
$ rails test:integration
$ rails test
$ rails generate controller Users new
$ git add -A
$ git commit -m "Finish layout and routes"
$ git checkout master
$ git merge filling-in-layout
$ rails test
$ git push
* This is the final home.html.erb codes for today. You can also find it on Github:
https://github.com/jimmy2046/myapp2/blob/master/app/views/static_pages/home.html.erb
<% provide(:title, "Home") %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--
Classic Template
http://www.templatemo.com/tm-488-classic
-->
<!-- load stylesheets -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400"> <!-- Google web font "Open Sans" -->
<link rel="stylesheet" href="/assets/css/bootstrap.min.css"> <!-- Bootstrap style -->
<link rel="stylesheet" href="/assets/css/templatemo-style.css"> <!-- Templatemo style -->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="tm-header">
<div class="container-fluid">
<div class="tm-header-inner">
<%= link_to("Sample App", root_path, :class => "navbar-brand tm-site-name") %>
<!-- <a href="#" class="navbar-brand tm-site-name">Sample App</a> -->
<!-- navbar -->
<nav class="navbar tm-main-nav">
<button class="navbar-toggler hidden-md-up" type="button" data-toggle="collapse" data-target="#tmNavbar">
☰
</button>
<div class="collapse navbar-toggleable-sm" id="tmNavbar">
<ul class="nav navbar-nav">
<li class="nav-item active"><%= link_to "Home", root_path, class: "nav-link" %></li>
<li class="nav-item"><%= link_to "Help", help_path, class: "nav-link" %></li>
<li class="nav-item"><%= link_to "Log in", '#', class: "nav-link" %></li>
</ul>
</div>
</nav>
</div>
</div>
</div>
<div class="tm-about-img-container">
</div>
<section class="tm-section">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-xs-center">
<h2 class="tm-gold-text tm-title">Welcome to the Sample App</h2>
<p class="tm-subtitle">This is the home page for the
<a href="http://www.railstutorial.org/">Ruby on Rails Tutorial</a>
sample application.</p>
<%= link_to "Sign up now!", signup_path, class: "tm-btn text-uppercase" %>
</div>
<%= link_to image_tag("rails.png", alt: "Rails logo"),
'http://rubyonrails.org/' %>
</div>
</div>
</section>
<footer class="tm-footer">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 col-xl-3">
<div class="tm-footer-content-box tm-footer-links-container">
<h3 class="tm-gold-text tm-title tm-footer-content-box-title">Ruby on Rails Tutorial</h3>
<nav>
<ul class="nav">
<li>
<%= link_to("About", about_path, :class => "tm-footer-link") %>
</li>
<li>
<%= link_to("Contact", contact_path, :class => "tm-footer-link") %>
</li>
<li>
<a href="http://news.railstutorial.org/" class="tm-footer-link">News</a>
</li>
</ul>
</nav>
</div>
</div>
<!-- Add the extra clearfix for only the required viewport
http://stackoverflow.com/questions/24590222/bootstrap-3-grid-with-different-height-in-each-item-is-it-solvable-using-only
-->
<div class="clearfix hidden-lg-up"></div>
</div>
<div class="row">
<div class="col-xs-12 tm-copyright-col">
<p class="tm-copyright-text">Jimmy Chong 2017</p>
</div>
</div>
</div>
</footer>
<!-- load JS files -->
<script src="js/jquery-1.11.3.min.js"></script> <!-- jQuery (https://jquery.com/download/) -->
<script src="https://www.atlasestateagents.co.uk/javascript/tether.min.js"></script> <!-- Tether for Bootstrap, http://stackoverflow.com/questions/34567939/how-to-fix-the-error-error-bootstrap-tooltips-require-tether-http-github-h -->
<script src="js/bootstrap.min.js"></script> <!-- Bootstrap (http://v4-alpha.getbootstrap.com/) -->
</body>
</html>
* This is the result of the deployment in my own style.
References:
How to set a background image in rails from css?
http://stackoverflow.com/questions/18100650/how-to-set-a-background-image-in-rails-from-css
Ruby on Rails 5.1.0
Module ActionView::Helpers::UrlHelper
http://api.rubyonrails.org/v5.1.0/classes/ActionView/Helpers/UrlHelper.html#method-i-link_to
adding a class to a link_to is breaking the link
http://stackoverflow.com/questions/5697512/adding-a-class-to-a-link-to-is-breaking-the-link
No comments:
Post a Comment