Rails Tutorial - Chapter 5

This chapter was pretty basic. It did start to bring the app to life visually…and there were certainly some tricky exercises surrounding application helpers, etc.

One major component involved integrating bootstrap and SASS. All the FEDs I know absolutely love SASS, but I’ve never had much of a chance to fully understand (let alone implement into a project). This was also the first time I had the opportunity to use bootstrap—even though it’s just scratching the surface.

One resource that was particularly helpful is the list of existing Less variables. This really makes the stylesheets easy to maintain and read.

The other standout (that I’m somewhat shocked I didn’t fully comprehend previously) are nested elements. Here’s an example from the Sample App code¹.

// From app/assets/stylesheets/custom.css.scss

footer {
  margin-top: 45px;
  padding-top: 5px;
  border-top: 1px solid #eaeaea;
  color: #777;
  a {
    color: #555;
    &:hover {
     color: #222;
    }
  }
  small {
   float: left;
  }
  ul {
    float: right;
    list-style: none;
    li {
      float: left;
      margin-left: 15px;
    }
  }

You can review the same commit diff on GitHub as well.

Moving on to heavier stuff soon (user models, finalizing signups and microposts, followers, etc).