Sometimes you need to print your web pages on actual paper, and it's a problem that comes up frequently and it's often overlooked. Print styles to control how elements are displayed while printing are nothing new, but accounting for responsive websites makes this far more challenging. Since Foundation is mobile-first and responsive, printing a site would normally only produce the mobile layout. The challenge here is to create print styles which would allow you to print out your pages in the breakpoint you want. In this lesson you’ll learn how to use Foundation’s built-in print styles to get your printed page right, super fast.

Print Styles Under the Hood

Print styles use a print media query to specify the print styles. This tells the browser that all the styles contained in this block are only to be applied under a special circumstance, in this case a user printing the page. This removes the need for the old “click for printer friendly version” technique.

Foundation comes with many print styles built-in that help you print your pages so they lay-out correctly and are readable. Some of these styles include:

• Resetting font and border colors
• Removing shadows and other unnecessary visual elements
• Treating links with underlines and exposing the URL
• Optimizing page breaks
• Setting page margins
• Controlling image sizes

Print Visibility Classes

A major difference between print and the web is the capacity for interaction. While you can show complex interactivity on the web, print is static and not able show state changes and functionality.

This means you need to rethink any interactive elements on the page. For instance, navigation menus are usually one of the first things to go. A printed page has no use for them and they can really eat up space if converted to simple unordered lists. Another example is with image carousels like Orbit. If your page has a carousel with ten images at the top, that’s not going to translate well to paper.

For these types of scenarios, Foundation has some handy print specific visibility classes to help you show and hide certain elements when printing. You can add these classes onto an element to either show or hide them when printing:

• .show-for-print
• .hide-for-print

Links are the most basic level of interaction on the web and this too becomes a challenge. On a piece of paper the reader has no clues as to where the link goes so it’s helpful to take all those inline links and show the reader where they lead. Setting the $print-hrefs variable to true takes care of that.

Customizing Foundation’s Print Settings

You no longer need to create a print stylesheet to override Foundation’s responsive behavior to print your pages. You can choose what breakpoint you’d like to print right from the _settings.scss file.

With the $print-breakpoint variable, you can set the value to any of the named breakpoints and Foundation will do the rest. It’s magic!

---