Blueprint Module

The blueprint module is a simple way of importing all of the most commonly used blueprint modules. In addition, it provides a single mixin, +blueprint, that can be used to generate the blueprint css styles.

Installing

To create a project using blueprint:

compass create my_project --using blueprint

To add blueprint to an existing compass project:

compass install blueprint

To add blueprint and compass to a Rails project:

compass init rails --using blueprint

Alternate Project Layouts

For any of the above commands you could have also selected the blueprint/basic or blueprint/semantic patterns. The basic pattern assumes that you’ll start out using conventional class-based blueprint styling techniques, while the semantic template assumes that you’ll be using mixins and @extend to style your site. Example:

compass create my_project --using blueprint/semantic

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

View the Source for this module on Github.

Imports

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

1. Colors
2. Debug
3. Form
4. Grid
5. Internet Explorer
6. Interaction
7. Print
8. Typography
9. Utilities

Mixins

blueprint($body_selector)

=blueprint($body_selector: body)
  //@doc off
  @if not ($body_selector == "body" or $body_selector == true)
    @warn "[DEPRECATED] To specify a the selector \"#{$body_selector}\\" to +blueprint, pass true as the first argument and mix it into #{$body_selector}."
  //@doc on
  +blueprint-typography($body_selector)
  +blueprint-utilities
  +blueprint-grid
  +blueprint-debug
  +blueprint-interaction
  +blueprint-form

@mixin blueprint($body_selector: body) {
  //@doc off
  @if not ($body_selector == "body" or $body_selector == true) {
    @warn "[DEPRECATED] To specify a the selector \"#{$body_selector}\\" to +blueprint, pass true as the first argument and mix it into #{$body_selector}."; }
  //@doc on
  @include blueprint-typography($body_selector);
  @include blueprint-utilities;
  @include blueprint-grid;
  @include blueprint-debug;
  @include blueprint-interaction;
  @include blueprint-form; }

+blueprint

body.blueprint
  +blueprint(true)

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

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