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"

Imports

Float – Mixins for cross-browser floats.
Typography

Mixins

view source

blueprint-print($nested)

=blueprint-print($nested: false)
  @if $nested
    +blueprint-print-body
    +blueprint-print-defaults
  @else
    body
      +blueprint-print-body
    +blueprint-print-defaults

@mixin blueprint-print($nested: false) {
  @if $nested {
    @include blueprint-print-body;
    @include blueprint-print-defaults;
  }
  @else {
    body {
      @include blueprint-print-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)

view source

blueprint-show-link-urls

=blueprint-show-link-urls
  &:after
    content: " (" attr(href) ")"
    font-size: 90%

@mixin blueprint-show-link-urls {
  &:after {
    content: " (" attr(href) ")";
    font-size: 90%;
  }
}

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

view source

blueprint-print-body

=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

blueprint-print-defaults

=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;
  }
}