Learning Rails 5

Chapter 3. Adding Web Style

My mission in life is not merely to survive, but to thrive; and to do so with some passion, some compassion, some humor, and some style.

Maya Angelou

The application presented in Chapter 2 is pretty appalling, visually. You’re not likely to want to present pages that look like that to your visitors, unless they’re fond of the early 1990s retro look. Rails provides a number of features that will help you make your views present results that look the way you think they should look, and do so consistently.

Note

This chapter will explore Rails features for supporting CSS and HTML, but it can’t be an HTML or CSS tutorial. If you need one of those, try Learning Web Design (O’Reilly, 2012) by Jennifer Niederst Robbins or David Sawyer McFarland’s CSS: The Missing Manual (O’Reilly, 2015).

I Want My CSS!

Figure 3-1, the result of the last chapter’s coding, is not exactly attractive.

Figure 3-1. The Hello page after the loop executes

Even this fairly hopeless page, however, can be improved with the bit of CSS shown in Example 3-1. We could put this stylesheet right into the index.html.erb file as an internal style element, or add it to app/assets/stylesheets/application.css.

Example 3-1. A simple stylesheet for a simple page

body { font-family:sans-serif;
     }

h1 {font-family:serif;
    font-size: 24pt;
    font-weight: bold;
    color:#F00 ;
   }

Better ...