Agile Web Development with Rails, Edition 5

8.3 Iteration C3: Use a Helper to Format the Price 8.1 Iteration C1: Create the Catalog Listing

8.2 Iteration C2: Add a Page Layout

Demonstrate layouts.

Modify the application layout

edit app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title>Pragprog Books Online Store</title>
    <%= csrf_meta_tags %>
 
    <%= csrf_meta_tags %>
 
    <%= stylesheet_link_tag    'application', media: 'all',
    'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>
 
  <body class="<%= controller.controller_name %>">
    <div id="banner">
      <%= image_tag 'logo.svg', alt: 'The Pragmatic Bookshelf' %>
      <span class="title"><%= @page_title %></span>
    </div>
    <div id="columns">
      <div id="side">
        <ul>
          <li><a href="http://www....">Home</a></li>
          <li><a href="http://www..../faq">Questions</a></li>
          <li><a href="http://www..../news">News</a></li>
          <li><a href="http://www..../contact">Contact</a></li>
        </ul>
      </div>
      <div id="main">
        <%= yield %>
      </div>
    </div>
  </body>
</html>

Modify the stylesheet

Rename the application stylesheet so that we can use SCSS

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

Add our style rules

edit app/assets/stylesheets/application.scss
/*
 * This is a manifest file that'll be compiled into application.css, which will
 * include all the files listed below.
 * 
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets,
 * vendor/assets/stylesheets, or any plugin's vendor/assets/stylesheets
 * directory can be referenced here using a relative path.
 * 
 * You're free to add application-wide styles to this file and they'll appear
 * at the bottom of the compiled file so the styles you add here take
 * precedence over styles defined in any other CSS/SCSS files in this
 * directory. Styles in this file should be added after the last require_*
 * statement. It is generally better to create a new file per style scope.
 * 
 *= require_tree .
 *= require_self
 */
 
body, body > p, body > ol, body > ul, body > td {margin: 8px !important}
 
#banner {
  position: relative;
  min-height: 40px;
  background: #9c9;
  padding: 10px;
  border-bottom: 2px solid;
  font: small-caps 40px/40px "Times New Roman", serif;
  color: #282;
  text-align: center;
 
  img {
    position: absolute;
    top: 0; 
    left: 0;
    width: 192px;
  }
}
 
#notice {
  color: #000 !important;
  border: 2px solid red;
  padding: 1em;
  margin-bottom: 2em;
  background-color: #f0f0f0;
  font: bold smaller sans-serif;
}
 
#notice:empty {
  display: none;
}
 
#columns {
  background: #141;
  display: flex;
 
  #main {
    padding: 1em;
    background: white;
    flex: 1;
  }
 
  #side {
    padding: 1em 2em;
    background: #141;
 
    ul {
      padding: 0;
 
      li {
        list-style: none;
 
        a {
          color: #bfb;
          font-size: small;
        }
      }
    }
  }
}
 
@media all and (max-width: 800px) {
  #columns {
    flex-direction: column-reverse;
  }
}
 
@media all and (max-width: 500px) {
  #banner {
    height: 1em;
  }
 
  #banner .title {
    display: none;
  }
}

Show the results.

get /

Your Pragmatic Catalog

Dcbang

Rails, Angular, Postgres, and Bootstrap

Powerful, Effective, and Efficient Full-Stack Web Development As a Rails developer, you care about user experience and performance, but you also want simple and maintainable code. Achieve all that by embracing the full stack of web development, from styling with Bootstrap, building an interactive user interface with AngularJS, to storing data quickly and reliably in PostgreSQL. Take a holistic view of full-stack development to create usable, high-performing applications, and learn to use these technologies effectively in a Ruby on Rails environment.

45.0
Adrpo

Ruby Performance Optimization

Why Ruby Is Slow, and How to Fix It You don’t have to accept slow Ruby or Rails performance. In this comprehensive guide to Ruby optimization, you’ll learn how to write faster Ruby code—but that’s just the beginning. See exactly what makes Ruby and Rails code slow, and how to fix it. Alex Dymo will guide you through perils of memory and CPU optimization, profiling, measuring, performance testing, garbage collection, and tuning. You’ll find that all those “hard” things aren’t so difficult after all, and your code will run orders of magnitude faster.

46.0
7apps

Seven Mobile Apps in Seven Weeks

Native Apps, Multiple Platforms Answer the question “Can we build this for ALL the devices?” with a resounding YES. This book will help you get there with a real-world introduction to seven platforms, whether you’re new to mobile or an experienced developer needing to expand your options. Plus, you’ll find out which cross-platform solution makes the most sense for your needs.

26.0

8.3 Iteration C3: Use a Helper to Format the Price 8.1 Iteration C1: Create the Catalog Listing