Q
Version: 0.12.2
Source on Github

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

view source

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

Usage examples:

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

+blueprint

Scoped by a presentational class:

body.blueprint
  +blueprint(true)

Scoped by semantic selectors:

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