In this guide, we are going to put together our prototype design. To do that, I'd like to use a tool called LayoutIt from layoutit.com. The cool thing about this tool is that it allows you to drag and drop design elements, and based on your design, and it automatically generates the corresponding HTML code for you. The HTML code includes all of the Bootstrap styles that we can use as a foundation for our app's user interface.

Since this is a pretty simple enterprise application, there's not a large number of design requirements. Here is the layout I'm going to use for our homepage.

Now, click on download and you can either sign up or click on the continue option. This will give you access to the generated html code, copy it and paste it in a blank file in the sublime text editor. I'm going to copy some parts of this code into different files.

Go to the views folder and create a new subfolder called shared. Inside this subfolder, let's create a partial. Make sure you start the name with an _, and let's name the file _nav.html.erb. Now, go back to the generated code, copy the nav component and paste it in the new file.

Next, copy the jumbotron code into homepage.html.erb located in views/static folder.

<!-- app/views/static/home.html.erb -->

<div class="jumbotron">
  <h2>
    Hello, world!
  </h2>
  <p>
    This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.
  </p>
  <p>
    <a class="btn btn-primary btn-large" href="#">Learn more</a>
  </p>
</div>

Lastly, put the "container-fluid" block in application.html.erb.

<!-- app/views/layouts/application.html.erb -->

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <%= render 'shared/nav' %>
      <%= yield %>
    </div>
  </div>
</div>

With our partial call in the layout file, notice how we don't have to include the _ since Ruby knows we are calling a partial.

Now, if you open the browser and navigate to localhost:3000/posts, this is what you see.

Let's add some space at the top for our app's name. For that, I'm going to create a new class called custom-nav in our application.css.scss file.

/* app/assets/stylesheets/application.css.scss */

.custom-nav {
  margin-top: 75px;
}

Add this custom-nav class in _nav.html.erb like this:

<!-- app/views/shared/_nav.html.erb -->

<ul class="custom-nav nav nav-tabs">

If you refresh the browser, you can see all of these changes.

I want to make a small change here. I'm going to change the custom-nav top margin from 75px to 15px because I think this will give a better look and feel.

Next, let's make some changes to the navigation component, we're going to:

• Create links for our pages
• Remove the class disabled
• Make changes to our dropdown menu.

<!-- app/views/shared/_nav.html.erb -->

<div class='logo'>
  <h1>Time Tracker</h1>
</div>

<ul class="nav nav-tabs">
  <li class="active">
    <%= link_to "Home", root_path %>
  </li>
  <li>
    <%= link_to "Time Entries", posts_path %>
  </li>
  <li class="dropdown pull-right">
    <a href="#" data-toggle="dropdown" class="dropdown-toggle">Account<strong class="caret"></strong></a>
    <ul class="dropdown-menu">
      <li>
        <%= link_to "Edit Details", edit_user_registration_path %>
      </li>
      <li class="divider">
      </li>
      <li>
        <a href="#">Separated link</a>
      </li>
    </ul>
  </li>
</ul>

If you go to the browser, hit refresh and click on Time entries, it should take you to the Posts page. Also, see the Account dropdown and click on edit my account, and it should take you to this page.

Lastly, let's integrate a logout button into our nav bar. We'll slide it right into where the Separated link text is right now.

<!-- app/views/shared/_nav.html.erb -->

<%= link_to "Logout", destroy_user_session_path, method: :delete %>

If you refresh, you can now log yourself out of the application.

Though this is not the complete UI, it's a good start, and in the next guide, we'll make our tabs functional.

Resources

• Code at this stage