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.


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"


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


view source

=blueprint($nested: false)
@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:


Scoped by a presentational class:


Scoped by semantic selectors:

body#page-1, body#page-2, body.a-special-page-type