Adding a Landing page
By now you already should have all your pages styled and time has come to add the final touch - a page where a user will be landing when visiting your website.
Adding new pages
Any page is a view that is returned by our Rails app as a response to a request from the browser. The browser requests a URL from your Rails app. Therefore, we first need to define what our URL will be.
For our app, we'll choose landing. Therefore, if our app would be hosted at marinelife.com, the user would be able to visit the new page at marinelife.com/landing.
If we want to add our URLs, we need an action and a controller. In my case, I will call the controller Pages and the action landing.
Open the file config/routes.rb and add the following line (after root to: "posts#index"):
get "landing" => "pages#landing"
Then, from your terminal, run:
$ rails routes
In the output you will see the following line:
landing GET /landing(.:format) pages#landing
Now run your app using
$ rails server
and open your browser to http://localhost:3000/landing. You should see the following:
Rails tried to find the action landing in the controller pages, but it doesn't exist. Create a new file called pages_controller.rb in app/controllers and type in the following:
class PagesController < ApplicationController
end
Save, refresh the page and see the following:
This looks familiar. Rails tells us that it couldn't find an action! Let's create an empty action. Write the following code in the app/controllers/pages_controller.rb, inside the class (between the class declaration and the end):
def landing
end
Save the file, refresh the page:
Rails has successfully directed the request towards the action of the controller, but could not find a suitable view!
Let's create one. Create a folder under app/views, called pages (since the controller is called Pages). Inside the folder create a file called landing.html.erb, as per the action name.
Write anything into it, save and refresh the page:
Now we have a landing page.
Importing pages
One of the good things about Bootstrap is that there are lots of things on the Internet about it. In particular, we found a website that offers a couple of easy-to-use templates. But we have prepared a beautiful template for you that you can download here.
If you extract the archive, you should see the following file hierarchy:
├── LICENSE
├── README.md
├── css
│ ├── bootstrap.css
│ ├── bootstrap.min.css
│ └── landing-page.css
├── font-awesome
│ ├── css
│ │ ├── font-awesome.css
│ │ └── font-awesome.min.css
│ ├── fonts
│ │ ├── FontAwesome.otf
│ │ ├── fontawesome-webfont.eot
│ │ ├── fontawesome-webfont.svg
│ │ ├── fontawesome-webfont.ttf
│ │ └── fontawesome-webfont.woff
│ ├── less
│ │ ├── bordered-pulled.less
│ │ ├── core.less
│ │ ├── fixed-width.less
│ │ ├── font-awesome.less
│ │ ├── icons.less
│ │ ├── larger.less
│ │ ├── list.less
│ │ ├── mixins.less
│ │ ├── path.less
│ │ ├── rotated-flipped.less
│ │ ├── spinning.less
│ │ ├── stacked.less
│ │ └── variables.less
│ └── scss
│ ├── _bordered-pulled.scss
│ ├── _core.scss
│ ├── _fixed-width.scss
│ ├── _icons.scss
│ ├── _larger.scss
│ ├── _list.scss
│ ├── _mixins.scss
│ ├── _path.scss
│ ├── _rotated-flipped.scss
│ ├── _spinning.scss
│ ├── _stacked.scss
│ ├── _variables.scss
│ └── font-awesome.scss
├── fonts
│ ├── glyphicons-halflings-regular.eot
│ ├── glyphicons-halflings-regular.svg
│ ├── glyphicons-halflings-regular.ttf
│ ├── glyphicons-halflings-regular.woff
│ └── glyphicons-halflings-regular.woff2
├── img
│ ├── banner-bg.jpg
│ ├── dog.png
│ ├── intro-bg.jpg
│ ├── ipad.png
│ └── phones.png
├── index.html
└── js
├── bootstrap.js
├── bootstrap.min.js
└── jquery.js
9 directories, 52 files
Let's first take the index.html from the archive, open it using Sublime Text (just drag and drop it into Sublime Text), copy just what's between and (lines 68-225, inside the <body></body> tags) into your newly created app/views/landing.html.erb.
Now refresh your app (at http://localhost:3000/landing) and see the following:
This is what you get for blind copy and paste. Time to figure out how to adapt the template.
The CSS files
Now go back to the archive and open the file css/landing-page.css. You'll see a whole bunch of things there! Select all of the contents of the file and copy it.
Go back to your Rails app structure and create a new folder under app/assets/stylesheets called pages. In that directory (namely app/assets/stylesheets/pages) create a new file called landing.css.
Open the newly created landing.css file and into it paste the whole contents.
Now refresh your page. You should see the following:
If you don't see this, you may need to make small adjustments to the app/assets/application.scss file. It should look like this:
/*
* 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, or any plugin's
* vendor/assets/stylesheets directory 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 bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*= require_tree .
*= require_self
*= require rails_bootstrap_forms
*/
@import "bootstrap-sprockets";
@import "bootstrap";
.form-panel {
padding: 30px;
margin-top: 40px;
}
The images
First, copy the whole img folder from the theme and put it in your Rails app under assets/images. You should get a hierarchy like app/assets/images/img/*.png, like this:
app/assets
├── images
│ └── img
│ ├── banner-bg.jpg
│ ├── dog.png
│ ├── intro-bg.jpg
│ ├── ipad.png
│ └── phones.png
├── javascripts
│ └── application.js
└── stylesheets
├── application.scss
└── pages
└── landing.css
Now refresh the page and here's what we see:
However, not all images are displayed. This is because Rails cannot properly find some of the images. We can fix that using an image_tag instead of an <img>.
Open the file app/views/pages/landing.html.erb, and change the lines 47, 69, and 91 from something like this:
<img class="img-responsive" src="img/ipad.png" alt="">
to something like this:
<%= image_tag "img/ipad.png", class: "img-responsive" %>
Do that for all three images. (To be sure, stop and restart the Rails server). Refresh the page:
The fonts
A couple more things left on this page and we're done. The first one is the fonts. The page uses some icon fonts (those are just icons, but written like text) that are found on Font Awesome, so let's include these.
Go to the file app/views/layouts/application.html.erb and you can find a section between <head> and </head>. Now paste the following code there:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
While you're editing the file, you can write your application's name between the <title></title> tags.
Here's how the file content looks like:
<!DOCTYPE html>
<html>
<head>
<title>Marine Life</title>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
<body>
<%= yield %>
</body>
</html>
After refresh, you will notice the name and icons, now present on the landing page.