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"

Imports

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

Mixins

blueprint($nested)

=blueprint($nested: false)
  +blueprint-typography($nested)
  +blueprint-utilities
  +blueprint-grid
  +blueprint-debug
  +blueprint-interaction
  +blueprint-form

@mixin blueprint($nested: false) {
  @include blueprint-typography($nested);
  @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)