06 Style

Let's take a break from Ruby to make this thing look a little better.

We'll start with the header. That <div class="well"> give us some default styles from Bootstrap, but we're going to style the header ourselves now, so we no longer need it.

Let's remove than unneeded element from our layout.

app/views/layouts/application.html.erb

    <div class="col-xs-12">
      <header><%= link_to 'Bluit', posts_path %></header>
    </div>

Then we'll add to our stylesheet.

app/assets/stylesheets/style.scss

header {
  background-color: #cee3f8;
  height: 45px;
  font-size: 18px;
  line-height: 45px;
  margin-bottom: 10px;
  padding: 0 1em;
}

The only trickery in that CSS is that we assign the line-height to the same value as height. With that rule, we know our text will be centered vertically.

Moving on to our main content, we can once again remove a <div class="well"> element.

app/views/layouts/application.html.erb

      <main>
        <!-- BEGIN main content -->
        <%= yield %>
        <!-- END main content -->
      </main>

Now we're actually going to take advantage of SCSS's features in our stylesheet.

app/assets/stylesheets/style.scss

main {
  margin-left: 10px;
  ul.posts {
    padding-left: 0;
    li {
      list-style: none;
      margin-bottom: 8px;
      .title {
        font-size: 16px;
        a:link, a:hover, a:active {
          color: blue;
        }
        a:visited {
          color: #551a8b;
        }
      }
      .tagline {
        color: #888;
        font-size: x-small;
      }
    }
  }
}

One of SCSS's greatest features is that descendant connectors can be nested. That is, instead of a selector like main li .title a:link, we can just nest the a:link selector inside the .title selector, which is itself nested within a main selector.

Let's have a look at /posts in the browser.

It certainly isn't going to win any beauty contests, but it is beginning to remind of a web site I've seen before.

Let's fix up the sidebar just a little.

First, predictably enough, we're going to get rid of that well.

app/views/layouts/application.html.erb

      <div class="col-xs-4">
        <nav id="sidebar">
          <%= link_to 'Submit a new link', new_post_path %>
        </nav>
      </div>

Then we're going to add some style, including some CSS3 gradients.

app/assets/stylesheets/style.scss

nav#sidebar {
  margin-right: 10px;
  a {
    display: block;
    text-align: center;
    border: 1px solid #c4dbf1;
    font-size: 16px;
    font-weight: bold;
    height: 29px;
    margin-bottom: 12px;
    line-height: 29px;
    color: #369;
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top,  #ffffff 0%, #ebf3fc 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#ebf3fc)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ffffff 0%,#ebf3fc 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ffffff 0%,#ebf3fc 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ffffff 0%,#ebf3fc 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #ffffff 0%,#ebf3fc 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ebf3fc',GradientType=0 ); /* IE6-9 */
  }
  a:hover {
    color: white;
    text-decoration: none;
    background: #d7ebff; /* Old browsers */
    background: -moz-linear-gradient(top,  #d7ebff 0%, #aec8e1 50%, #9cbcd9 51%, #74a4d2 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d7ebff), color-stop(50%,#aec8e1), color-stop(51%,#9cbcd9), color-stop(100%,#74a4d2)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #d7ebff 0%,#aec8e1 50%,#9cbcd9 51%,#74a4d2 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #d7ebff 0%,#aec8e1 50%,#9cbcd9 51%,#74a4d2 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #d7ebff 0%,#aec8e1 50%,#9cbcd9 51%,#74a4d2 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #d7ebff 0%,#aec8e1 50%,#9cbcd9 51%,#74a4d2 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d7ebff', endColorstr='#74a4d2',GradientType=0 ); /* IE6-9 */
  }
}

There's another well to get rid of in the footer.

app/views/layouts/application.html.erb

45  <footer>
46    Use of this site constitutes acceptance of the <a 47 href="http://dresdenfiles.wikia.com/wiki/Unseelie_Accords">Unseelie Accords</a>.
47  </footer>

And just a tiny tweak to the stylesheet.

app/assets/stylesheets/style.scss

footer {
  color: gray;
  font-size: smaller;
  text-align: center;
}

Lovely! Let's commit our changes. Don't forget to check your git status, and maybe even git diff, to make sure you're committing what you expect.

$ git add .
$ git commit -m "Style header, main content, sidebar, and footer."

Next: Length Validation