Lesson 10

Making the Application Look Awesome (Optional)

In the previous lessons we built out all the back-end functionality to support everything our advice generator will need. Unfortunately, right now our web application looks pretty lousy. In this lesson we'll make a few tweaks to the UI to make the application look awesome.

Removing the Existing Phoenix CSS

Phoenix provides us with some design elements to start with, as well as integrating with the Twitter Bootstrap v3 Framework.

We won't use the CSS they provide for the default splash page, so let's get rid of it. To do that, delete everything after line 8 in priv/static/css/phoenix.css, which will remove the Phoenix specific CSS, but leave us with Twitter Bootstrap and normalize.css.

The file should look something like this when you're done:

/*!
 * Bootstrap v3.1.1 (http://getbootstrap.com)
 * Copyright 2011-2014 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

/*! normalize.css v3.0.0 | MIT License | git.io/normalize */A TON OF LINES OF CSS CODE ARE RIGHT HERE

Save the file.

Remove the content in web/templates/layout/application.html.eex that is specific to the Phoenix splash page. Make the body tag of the application look like this:

<body>
  <%= @inner %>
</body>

Save the file and refresh the page and you'll notice all the Phoenix specific styles have been removed. Now we have a clean slate we can work with.

Adjusting the Font Stack

One thing that will make this application look much better is to adjust the font stack.

Go to Google Fonts and find a font you think will look good.

I selected Roboto Slab, chose the different font-weights, and scrolled down and copied the standard import code to the clipboard. I then pasted the code into web/templates/layout/application.html.eex beneath the existing style tags:

<link rel="stylesheet" href="/css/phoenix.css">
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>

Save the file.

Add the following to the bottom of priv/static/css/phoenix.css, although you may have a slightly different line if you have chosen a different font.

body {
  font-family: 'Roboto Slab', serif;
}

Save the file. Refresh the page and you'll notice the font changed!

Adding a Header

Our web application should have a header with a logo and a link to contribute a new quote. To do this, add the following code to web/templates/layouts/application.html.eex:

 <body>
  <header>
    <div class="col-xs-6">
      LOGO HERE
    </div>

    <div class="col-xs-6 text-right">
      LINKS HERE
    </div>
  </header>
  <%= @inner %>
</body>

Save the file and refresh the page. You will notice this change added a a bit of content that will be displayed within our header.

A black border along the top of our header would make it look better. To do that add the following lines of CSS code to the bottom of the priv/static/css/phoenix.css file:

header {
  border-top: 9px solid #222222;
}

Save the file and refresh the page. Notice the black bar it added in the header.

This UI component from CSSDeck would make an excellent logo for our application. Replace LOGO HERE in web/templates/layout/application.html.eex with the HTML markup we pulled from CSSDeck:

<header>
  <div class="col-xs-6">
<div class="circle"> <br /> Elixir & <br /> Erlang <br /> Rock! </div>
</div> <div class="col-xs-6 text-right"> LINKS HERE </div> </header>

Save the file.

Next pull in the CSS from the CSSDeck example to the priv/static/css/phoenix.css file:

.circle {
    font-weight:bold;
    font-style: italic;
    position: relative;
    border-radius: 100%;
    background: #f84342;
    border: 1px solid #F7F7F7;
    width: 80px;
    height: 80px;
    margin: 10px 10px;
    text-align: center;
    color: #FFF;
    font-size: 10px;
    line-height: 16px;
    cursor: pointer;
    transform:rotate(11deg);
    -ms-transform:rotate(11deg); /* IE 9 */
    -webkit-transform:rotate(11deg); /* Opera, Chrome, and Safari */
}

Save the file and refresh the page. Notice the red circle with text was added to the page! Nice!

Next play with the font-family, font-size and font-weight within the red circle. To do that, add the following snippet to priv/static/css/phoenix.css:

.circle {
  font-weight:bold;
  font-style: italic;
  position: relative;
  border-radius: 100%;
  background: #f84342;
  border: 1px solid #F7F7F7;
  width: 80px;
  height: 80px;
  margin: 10px 10px;
  text-align: center;
  color: #FFF;
  font-size: 10px;
  line-height: 16px;
  cursor: pointer;
  transform:rotate(11deg);
  -ms-transform:rotate(11deg); /* IE 9 */
  -webkit-transform:rotate(11deg); /* Opera, Chrome, and Safari */
font-family: "Helvetica Neue", Helvetica, sans-serif; font-weight:200; font-size:16px;
}

Save the file and refresh the page. Notice how the font within the red circle got updated slightly.

Include a horizontal rule under the header. Edit web/templates/layouts/application.html.eex to add this line:

<body>

  <header>
    <div class="col-xs-6">
      <div class="circle">
        <br />
        Elixir &
        <br />
        Erlang
        <br />
        Rock!
      </div>

    </div>

    <div class="col-xs-6 text-right">
      LINKS HERE
    </div>
  </header>

<hr class="clear col-xs-12"/>
<%= @inner %> </body>

Save the file.

By adding a bit of CSS to implement the .clear CSS selector and adjusting the margins on the horizontal rule, we can get the header to look good.

Add the following lines to priv/static/css/phoenix.css:

.clear {
  clear:both;
}

hr {
  margin:0;
}

Save the file and refresh the page. The section for the header will start to standout.

The header should include a link to the new form so add the following lines of code to hook up a link in the header web/templates/layouts/application.html.eex:

<header>
  <div class="col-xs-6">
    <div class="circle">
      <br />
      Elixir &
      <br />
      Erlang
      <br />
      Rock!
    </div>

  </div>

  <div class="col-xs-6 text-right">
<div id="header-links"> <a href="<%= quote_path(@conn, :new) %>">Contribute</a> </div>
</div> </header>

Save the file.

Add the follow CSS to priv/static/css/phoenix.css to make the linked in the header look awesome:

#header-links {
  margin-top:20px;
  margin-right:20px;
}
#header-links a {
  color:black;
  font-weight:700;
  font-size: 40px;
}

#header-links a:hover {
  color: #f84342;
}

Save the file and refresh the page. The header looks solid. Next let's add a footer.

Adding a Footer

Add a sticky footer to the application using flexbox.

Based off the Sticky Footer Example, adjust web/templates/layouts/application.html.eex to look like this:

<main class="Site-content">
<%= @inner %>
</main> <footer> <div class="col-xs-6"> LEFT SIDE </div> <div class="col-xs-6"> RIGHT SIDE </div> </footer>

In the example the Sticky Footer post provides, the body tag includes the class of Site. Adjust the body tag on web/templates/layouts/application.html.eex , so our application matches their example:

<body class="Site">

Save the file

Copy the CSS from the post and include the following to the bottom of the priv/static/css/phoenix.css file:

.Site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.Site-content {
  flex: 1;
}

Save the file and refresh the page. We now have a sticky footer! Now it is time to fill the footer up with valid stuff.

Add a link to display another quote randomly in the footer. This link can just be a regular link to the homepage. Adjust web/templates/layouts/application.html.eex to look like this

<footer>
  <div class="col-xs-6">
<a href="<%= quote_path(@conn, :homepage)%>"> This isn't enough, I need more </a>
</div> <div class="col-xs-6"> RIGHT SIDE </div> </footer>

Save the file.

Add the following CSS to the priv/static/css/phoenix.css file to make the link in the footer look awesome:

footer {
  margin-bottom:20px;
  margin-left:20px;
}
footer a {
  color:#f84342;
  font-size:24px;
}

footer a:hover {
  color:black;
}

Save the file.

Now let's brag-it-up about how we used some cool technology to build this. Download the elixir logo and the phoenix badge into the priv/static/images folder as elixir.png and phoenix.png. Then add the following code to web/templates/layouts/application.html.eex so the logos are included in the footer:

<footer>
  <div class="col-xs-6">
    <a href="<%= quote_path(@conn, :homepage)%>">
      This isn't enough, I need more
    </a>
  </div>
<div class="col-xs-6 text-right"> <a href="http://elixir-lang.org"> <img src="/images/elixir.png"/> </a> <a href="http://www.phoenixframework.org/"> <img src="/images/phoenix.png" /> </a>
</div> </footer>

Save the file.

Return to priv/static/css/phoenix.css and add the following line to size our icons reasonably:

footer img {
  height:30px;
}

Save the file and refresh the page. Our footer looks awesome now!

Making our Detail Page Look Awesome

To get our detail page looking awesome we will adjust the HTML we're generating. Wrap the contents of the page in a div with a few classes in web/templates/quote/show.html.eex. This will give the content of the page a bit of spacing from the edge of the page.

<div class="col-xs-10 col-xs-offset-1 page-content">
<h1> <%= @quote.saying %> </h1> <h2> <%= @quote.author %> </h2>
</div>

Showing the user a bit more context about what we are presenting to them on the detail page will make our page look better. Add another headline to web/templates/quote/show.html.eex, like this:

<div class="col-xs-10 col-xs-offset-1 page-content">
<h3> <span>SPLURTY No. <%= @quote.id %></span> You know <u>you need to learn Elixir</u> because... </h3>
<h1> <%= @quote.saying %> </h1> <h2> <%= @quote.author %> </h2> </div>

Save the file.

Make this h3 we added look awesome by adding the following CSS to priv/static/css/phoenix.css:

h3 span {
  color: #ddd;
  font-size: 20px;
  font-weight:700;
  padding-right:30px;
}

h3 {
  font-size: 30px;
  font-weight: 100;
}

Save the file and refresh the page. The blurb we just added looks great.

Our page would look better if the h1 was a bit larger. Add the following to priv/static/css/phoenix.css:

h1 {
  font-size:80px;
  font-weight:700;
}

Save the file and refresh the page. Our detail page is coming together.

Let's use bootstrap's text-right to right-align the name of the author by adjusting the h2 in web/templates/quote/show.html.eex:

<div class="col-xs-10 col-xs-offset-1 page-content">
  <h3>
    <span>SPLURTY No. <%= @quote.id %></span>
    You know <u>you need to learn Elixir</u> because...
  </h3>
  <h1 class="text-center">
    <%= @quote.saying %>
  </h1>

<h2 class="text-right">
<%= @quote.author %> </h2> </div>

Save the file and refresh the page. It's very close.

Add some spacing between the header and the quote we're displaying by including the following CSS in priv/static/css/phoenix.css:

.page-content {
  margin-top:30px;
}

Save the file and refresh the page.

If a user selects characters on the page, let's change the color of the selection to be red by adding the following to the bottom of priv/static/css/phoenix.css:

::selection {
  background-color: #f84342;
}

Save the file and refresh. The detail page looks great!

Making our Forms Look Awesome

Press the Contribute link in the navigation. The new form will be presented to you. Adjust the spacing from the edges of the page by wrapping it in a div with bootstrap classes applied in web/templates/quote/new.html.eex:

<div class="col-xs-10 col-xs-offset-1">
<h1>New Quote</h1> <form action="<%= quote_path(@conn, :create) %>" method="post"> <div class="form-group"> <input type="hidden" name="csrf_token" value="<%= csrf_token(@conn) %>"> <label for="quote[saying]">saying</label> <input type="text" name="quote[saying]" class="form-control" /> <label for="quote[author]">author</label> <input type="text" name="quote[author]" class="form-control" /> </div> <button type="submit" class="btn btn-primary">Save</button> </form>
</div>

Save the file and refresh the page.

Make the same adjustment for the edit form; adjust web/templates/quote/edit.html.eex to look like this:

<div class="col-xs-10 col-xs-offset-1">
<h1>Edit Quote</h1> <form action="<%= quote_path(@conn, :update, @quote.id) %>" method="post"> <div class="form-group"> <input type="hidden" name="csrf_token" value="<%= csrf_token(@conn) %>"> <input type="hidden" name="_method" value="put"> <label for="quote[saying]">saying</label> <input type="text" name="quote[saying]" class="form-control" value="<%= @quote.saying %>" /> <label for="quote[author]">author</label> <input type="text" name="quote[author]" class="form-control" value="<%= @quote.author %>" /> </div> <button type="submit" class="btn btn-primary">Save</button> </form>
</div>

Save the file.

The last change to make to the forms is to adjust the look and feel of the buttons. Edit priv/static/css/phoenix.css to define how the btn-primary should look:

.btn-primary, .btn-primary:hover {
  border-radius:0;
  font-size:30px;
  width:100%;
  font-weight:100;
  background-color: #f84342;
  border-color:  #f84342;
}

Save the file and refresh the page. Looks solid!

Making our Index Page Look Awesome

Navigate to localhost:4000/quotes/. We'll apply a couple classes from twitter bootstrap onto this page by adjusting web/templates/quote/index.html.eex to look like this:

<div class="page-content col-xs-10 col-xs-offset-1"> <table class="table table-striped">
<thead> <tr> <th>Saying</th> <th>Author</th> <th>Actions</th> </thead> <%= for q <- @quotes do %> <tr> <td> <a href="<%=quote_path(@conn, :show, q.id) %>"> <%= q.saying %> </a> </td> <td> <%= q.author %> </td> <td>
<a href="<%=quote_path(@conn, :edit, q.id) %>" class="btn btn-danger">
Edit </a>
<a href="<%= quote_path(@conn, :destroy, q.id) %>" data-method="DELETE" class="rest btn btn-danger">
Destroy </a> </td> </tr> <% end %> </table> </div>

Save the file and refresh.

As a last tweak, let's override some defaults of the btn-danger button by adding the following CSS to priv/static/css/phoenix.css:

.btn-danger {
  border-radius:0;
  font-weight:100;
}

Save the file and refresh the page. It looks great!

Your application should look just like this at this step.

Next Lesson