Plan for print styles

[gemmaleigh]

Our current approach to applying styles for print is to use a single print stylesheet. <link href="{{ asset_path + 'stylesheets/govuk-template-print.css' }}" media="print" rel="stylesheet" />

This print stylesheet imports:

• a helper, to conditionally include content for print @import "styleguide/print";
• the typography styles from the govuk_frontend_toolkit (as these use the $is-print flag)
• an additional core-print stylesheet to apply global print styling

The $is-print helper is used in the govuk_frontend_toolkit's _typography.scss by the core-font generator mixin to set a different font family, font-size and line-height for each of the typography mixins.

One of the aims of the govuk_frontend_alpha work is to reduce the number of stylesheets that the base template must include.

We should investigate how we will apply global print styles and how to set print styles on a per-component basis, with the assumption that all styles for a component will exist in a single component Sass file, including its print overrides.

[robinwhittleton]

One possibility we’ve talked about has been to include each component’s print styles inside the component’s SASS instead of having a separate print stylesheet. We could do this using individual @media screen and @media print blocks – this is supported in IE6 and up so no browser compatibility considerations. Some prototyping is probably in order.

[selfthinker]

I have done it the way @robinwhittleton describes for a couple of years now. I generally like that approach. I encountered two downsides:

• You cannot @extend or %placehold across several @media sections.
• Especially important with a varied user base is that people will forget to add @media screen around things. That will be to the detriment of the print experience.