You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository has been archived by the owner on Apr 4, 2018. It is now read-only.
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" />
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.
The text was updated successfully, but these errors were encountered:
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.
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.
Sign up for freeto subscribe to this conversation on GitHub.
Already have an account?
Sign in.
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:
@import "styleguide/print";
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.
The text was updated successfully, but these errors were encountered: