Using breakpoints

A common term in RWD is breakpoint, the point at which your layout changes to accommodate the viewport. It allows you to make your layouts more useable based on the size of the device your users are viewing the site on.

For example, if you have a navigation menu that is 601px wide, it won’t look great on devices with a viewport of less than 601px. You can use a breakpoint to say, “Once the viewport is wider than this size, change the layout of the navigation menu.”

So if you select a media query for min-width: 600px, your breakpoint is 600px.

Choosing breakpoints is an important decision because it ensures your layout doesn’t, well, break. Many breakpoints focus around specific devices—usually iOS devices—but as the field of screen sizes increases, this is not a good approach.

Instead, choose your breakpoints based on the point at which your content starts to look bad.

If you’re starting mobile first, that means adding a breakpoint that takes effect when the page is on devices with larger screens. As the viewport expands past the breakpoint, it can switch to different layout settings, such as multicolumn layouts or layouts that are centered in the screen.

If you’re starting by designing your pages for large screens (a large tablet or desktop), when the page is viewed on a smaller device you select your breakpoint by resizing the browser window (and therefore the viewport) down until the content becomes unreadable.

Ultimately, you’ll probably have three major breakpoints (where there’s a major shift in content) and three to four minor breakpoints (with smaller fixes for specific content). But that’s a guide, and it’s completely up to you. Do what works best for your design.

Starting small: mobile first styles

Most of the styles in Code 17.4 are for general look and feel and are not related to layout. On the smallest screens, everything will be a single column, so the browser’s default styles for the elements will work. The changes you see for margin, padding, fonts, and colors were just to add some personality to the page and make the layout changes more obvious (like giving the aside a different background color from the body).

So now it’s time to answer the question of when to start changing the layout—at what point can you begin to space the content out a bit more?

As you try to figure this out, the best thing to do is resize your browser. Since this layout lends itself very well to a one-column format, not a whole lot needs to be done in terms of adjusting it. Complicated layouts require more complicated media queries.

However, there are a few things that can be done to take advantage of more screen real estate.

The mid-sized screen layout

One way you can take advantage of more screen space when your page is being viewed on bigger devices is to spread out the header text a bit. One way to do this is to set up a grid on the <header> element and use columns to space the child elements.

To create a two-column layout at a breakpoint:

1. Start by defining your media query, based on the breakpoint at which you’ve chosen to change your layout. Type @media screen and (min-width: 768px) {.

   Add this code to the end of your style sheet (assuming you’re using the code from Code 17.4).

2. Target the element you’d like to change at your determined breakpoint. Type header {.

3. Add the styles for this element at the specific breakpoint, one per line. Type display: grid;.

4. Type grid-template-columns: 2fr 1fr;.

5. Type grid-gap: 15px;.

6. Type justify-items: center;.

7. Close the ruleset for your element by typing }.

8. Close the media query by typing }.

Once you extend your browser window to a width of at least 768px, your header will move the byline out from under the heading and to its right (FIGURE 17.5).

This is a good first step, but the real fun starts at the next breakpoint: 1000px.

The large-screen layout

On a large screen, you can really take advantage of the screen real estate. Using a multicolumn layout for large screens is a great way to show more information to the user, now that they have the room for it. A wrapper div comes in handy here. This div “wraps” the elements—header, main, aside, and footer—so that they are all siblings. That means you can apply display: grid to the .wrapper selector and easily control how each child element (or grid item) is displayed.

Since the large screen layout builds upon all the styles added to style.css before it, add the following styles to the end of style.css.

To set up a grid layout at a specific breakpoint:

1. You want this layout to go into effect at the largest breakpoint you determined works best for your layout. Type @media screen and (min-width: 1000px) {.

2. You will also need to create the grid-areas. Based on Code 17.3, type header { grid-area: header; }.

   Because of the cascade, this will essentially be added on to previous rulesets targeting header.

3. On a new line, type main { grid-area: main; }.

4. On a new line, type aside { grid-area: sidebar; }.

5. On a new line, type footer { grid-area: footer; }.

Be sure to leave off the } that would close the media query. We’re not done with it yet!

With those defined, it’s time to convert the wrapper div into a grid with a template layout.

To convert wrapper to a grid layout:

1. It’s time to target your entire layout at this breakpoint. Type .wrapper {.

2. A grid lends itself well to controlling each element of the layout. On a new line, type display: grid;.

3. On a new line, type grid-gap: 15px;.

4. Determine how many columns you want in your layout. For this example, choose five to make it clear we won’t have a main section and aside that are the same widths. On a new line, type grid-template-columns: 1fr 1fr 1fr 1fr 1fr;.

5. Type grid-template-areas:.

6. Type "header header header header header".

   Remember from the mid-sized layout task, that header is also using grid. This controls the width of the header element, which we want to extend across the entire page.

7. Type "main main main main sidebar".

8. Type "footer footer footer footer footer";.

9. Close the .wrapper ruleset by typing }.

10. Close the media query. On a new line, type }.

Now the sidebar shows up to the right of the main content, just like in Figure 17.4.

Now for the fun part: resize the browser window and watch your layout change!

There are a few more stylistic changes you can make, like increasing the heading font size and tightening up some styles, but you’ve just taken your first layout and made it responsive.

The rest of this chapter explores other functions of CSS media queries.

Creating a print style sheet

Because computers print websites more or less exactly as they appear in the browser window, such printouts often aren’t very helpful to those who want readable text (FIGURE 17.6).

Luckily, you can add a media query to apply print styles to the page. Here’s how to do it, starting with the markup from the previous section.

To add printer styles to a website:

1. At the bottom of your style sheet, type @media print { to target printers.

2. Type the elements you want to include in the printout. For this example, you want the whole page, so include body, header, aside, footer {.

3. On a new line, type background: #FFFFFF;.

   This step and the next set the background color and text to white and black, respectively, so the text is more easily readable when printed.

4. On a new line, type color: #000000;.

5. On a new line, type }.

6. On a new line, type .wrapper {.

   This is the crux of the print styles.

7. On a new line, type display: block;.

   Simply setting the display to block makes the browser ignore all grid-related properties (like grid-template-columns) and moves the content into one column.

8. On a new line, type width: 75%;.

   This is a stylistic decision on my part, but it gives the reader plenty of margin on either side of the content.

9. On a new line, type margin: 0 auto;.

10. On a new line, type } to close the .wrapper ruleset.

11. On a new line, type } to close the media query.

This creates a single column of black text that looks great when printed (FIGURE 17.7).

Aside from media types (all, print, screen, speech), you can also target specific media features.

Targeting specific media features

You might want to target a specific feature on touch devices, check if a device is in portrait or landscape, or much more. This is what the extended media features are for. A great example is checking to see whether a user has enabled dark mode.

To apply dark mode styles:

1. At the bottom of your style sheet, type @media screen.

2. To specify one or more media features, type and followed by the name of the media feature in parentheses. To check for dark mode, type (prefers-color-scheme: dark) {.

3. Type the selectors you want the style to apply to; in this case, body, header, aside, footer {.

4. To make sure the text harmonizes with the overall inky environment, reverse the usual black-on-white colors. Type background: #272727; to make the page a dark gray.

5. Type color: #FFFFFF; to make the text white.

6. Because it’s light text on a dark background, a bit more spacing will make the text easier to read. Type line-height: 2em;.

7. Type }.

8. Type one more }.

Now, when you visit the site on a device using dark mode, it will look like FIGURE 17.8.

Experiment with more of these media features, as you can do checks for the following:

• Pointer (cursor) support (with any-pointer)

• Hover support (with any-hover)

• Retina displays (with resolution, min-resolution)

• Inverted colors (with prefers-color-scheme)

And much more. The possibilities for customizing a website’s experience are growing quickly!