Skip to content

03 Layout

Jump to bottom Edit New page
Dave Strus edited this page May 6, 2015 · 3 revisions

Now we can see post titles and following the links. It still looks quite bland, so let's edit our application layout with some markup that, thanks to Bootstrap, will look better without even writing any custom CSS.

Replace the body with the following markup:

app/views/layouts/application.html.erb

<body>

<div class="container wrap">
  <div class="row">
    <div class="col-xs-12">
      <header>
        <div class="well">header</div>
      </header>
    </div>
  </div>
  <div class="container">
    <div class="row">
      <div class="col-xs-8">
        <main>
          <div class="well">
            <!-- BEGIN main content -->
            <%= yield %>
            <!-- END main content -->
          </div>
        </main>
      </div>
      <div class="col-xs-4">
        <nav id="sidebar">
          <div class="well">sidebar</div>
        </nav>
      </div>
    </div>
  </div>
</div>
<footer>
  <div class="well">Footer</div>
</footer>

</body>

We've wrapped our lonely old yield inside some elements, some of which have been given classes that Bootstrap has styles for. We're also using HTML5 semantic elements—header, main, nav, footer—in place of DIVs when possible. We've also added HTML comments around that yield to make it easier to find what our views rendered when we view the source of a page in a browser.

If we refresh our page, we'll see a layout that includes a header, a main content area, a right sidebar, and a footer. The entire layout is contained in a box that doesn't fill the entire width of the screen, which is a Bootstrap default that is less-than-ideal here. As a quick solution for that, we'll add a custom style.

Create a new file in app/assets/stylesheets called style.scss. This file will hold our custom styles for this project. You could put these styles directly in application.scss, but we recommend that you don't.

Put the following in your custom stylesheet:

app/assets/stylesheets/style.scss

.container {
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.col-xs-12 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

The use of !important is gross, but it's the quickest way to override Bootstrap's default style for containers. If we refresh now, we get a layout that basically corresponds to how we want our app to be laid out.

The footer isn't actually at the bottom of the page, but rather immediately under our content. To make it stick at the bottom of the page, we'll have to add a little more markup, and a little more style.

In the layout, we're going to add an empty .push div as the last element inside the .wrap div.

app/views/layouts/application.html.erb

<div class="container wrap">
  <div class="row">
    <div class="col-xs-12">
      <header>
        <div class="well">Redly</div>
      </header>
    </div>
  </div>
  <div class="container">
    <div class="row">
      <div class="col-xs-8">
        <main>
          <div class="well">
            <!-- BEGIN main content -->
            <%= yield %>
            <!-- END main content -->
          </div>
        </main>
      </div>
      <div class="col-xs-4">
        <nav id="sidebar">
          <div class="well">sidebar</div>
        </nav>
      </div>
    </div>
  </div>
  <div class="push"></div>
</div>

<footer>
  <div class="well">Footer</div>
</footer>

There's a fair amount of trickery that goes into making the footer behave the way we want. Exactly how this works is beyond the scope of this class. If you'd like to know more, we are employing Ryan Fait's solution. The CSSStickyFooter is another option that doesn't require the empty .push div.

In any case, we need to add some rules to the top of our stylesheet to make it work:

app/assets/stylesheets/style.scss

* {
  margin: 0;
}
html, body {
  height: 100%;
}
.wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -60px; /* negative value of the footer's height */
}
footer, .push {
  height: 60px; /* .push and .footer must have the same height */
}
footer .well {
  margin-bottom: 0;
}

.container {
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.col-xs-12 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

Now it looks acceptible. Let's go ahead and replace that "header" and "footer" placeholder text with something at least a little more meaningful.

      <header>
        <div class="well">Redly</div>
      </header>
<footer>
  <div class="well">Use of this site constitutes acceptance of the <a href="http://dresdenfiles.wikia.com/wiki/Unseelie_Accords">Unseelie Accords</a>.</div>
</footer>

We'll leave the "sidebar" placeholder as-is for the moment.

This leaves us with something that looks more-or-less how we want it. We have a way to view all existing Post records, but the only way to create and edit those posts is via the console. Time to fix that.

Next: Posts#new

Add a custom footer
Add a custom sidebar
Clone this wiki locally