Blueprint Print

The print stylesheet does sensible things for the printed page.

It’s important to note that the grid layout is not applied to the printed page.

You probably want to set non-content sections like headers, footers, asides, and navs to display: none; in your printed page.

See the compass print utilities for related functionality.

This file can be imported using: @import "blueprint/print"

View the Source for this module on Github.

Imports

The following sass files are automatically imported when you import this file:

  1. Float – Mixins for cross-browser floats.
  2. Typography

Mixins

View Source: Sass | SCSS 

=blueprint-print($body_selector: body)
  @if $body_selector == true
    +blueprint-print-body
    +blueprint-print-defaults
  @else
    #{$body_selector}
      +blueprint-print-body
      @if $body_selector != "body"
        @warn "[DEPRECATED] To specify a the selector \"#{$body_selector}\\" to +blueprint-print, pass true as the first argument and mix it into #{$body_selector}."
        +blueprint-print-defaults
    @if $body_selector == "body"
      +blueprint-print-defaults

@mixin blueprint-print($body_selector: body) {
  @if $body_selector == true {
    @include blueprint-print-body;
    @include blueprint-print-defaults; }
  @else {
    #{$body_selector} {
      @include blueprint-print-body;
      @if $body_selector != "body" {
        @warn "[DEPRECATED] To specify a the selector \"#{$body_selector}\\" to +blueprint-print, pass true as the first argument and mix it into #{$body_selector}.";
        @include blueprint-print-defaults; } }
    @if $body_selector == "body" {
      @include blueprint-print-defaults; } } }

Usage examples: As a top-level mixin, apply to any page that includes the stylesheet:

+blueprint-print

Scoped by a presentational class:

body.blueprint
 +blueprint-print(true)

Scoped by semantic selectors:

body#page-1, body#page-2, body.a-special-page-type
  +blueprint-print(true)

Deprecated: You can pass the body selector as the first argument when used as a top-level mixin

+blueprint-print("body#page-1, body#page-2, body.a-special-page-type")
View Source: Sass | SCSS

This style is in blueprint, but I think it’s annoying and it doesn’t work in all browsers. Feel free to mix it into anchors where you want it.

View Source: Sass | SCSS 

=blueprint-print-body
  line-height: 1.5
  font-family: $blueprint_font_family
  color: black
  background: none
  font-size: 10pt

@mixin blueprint-print-body {
  line-height: 1.5;
  font-family: $blueprint_font_family;
  color: black;
  background: none;
  font-size: 10pt; }
View Source: Sass | SCSS 

=blueprint-print-defaults
  .container
    background: none
  hr
    background: #cccccc
    color: #cccccc
    width: 100%
    height: 2px
    margin: 2em 0
    padding: 0
    border: none
    &.space
      background: white
      color: white
  h1, h2, h3, h4, h5, h6
    font-family: $blueprint_font_family
  code
    font:
      size: 0.9em
      family: $blueprint_fixed_font_family
  a
    img
      border: none
    &:link,
    &:visited
      background: transparent
      font-weight: 700
      text-decoration: underline
  p img.top
    margin-top: 0
  blockquote
    margin: 1.5em
    padding: 1em
    font-style: italic
    font-size: 0.9em
  .small
    font-size: 0.9em
  .large
    font-size: 1.1em
  .quiet
    color: #999999
  .hide
    display: none

@mixin blueprint-print-defaults {
  .container {
    background: none; }
  hr {
    background: #cccccc;
    color: #cccccc;
    width: 100%;
    height: 2px;
    margin: 2em 0;
    padding: 0;
    border: none;
    &.space {
      background: white;
      color: white; } }
  h1, h2, h3, h4, h5, h6 {
    font-family: $blueprint_font_family; }
  code {
    font: {
      size: 0.9em;
      family: $blueprint_fixed_font_family; }; }
  a {
    img {
      border: none; }
    &:link,
    &:visited {
      background: transparent;
      font-weight: 700;
      text-decoration: underline; } }
  p img.top {
    margin-top: 0; }
  blockquote {
    margin: 1.5em;
    padding: 1em;
    font-style: italic;
    font-size: 0.9em; }
  .small {
    font-size: 0.9em; }
  .large {
    font-size: 1.1em; }
  .quiet {
    color: #999999; }
  .hide {
    display: none; } }