Blueprint Scaffolding

Training wheels… So that your site doesn’t look too bad when you’re starting out.

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

View the Source for this module on Github.

Imports

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

  1. Form
  2. Grid

Mixins

View Source: Sass | SCSS 

=blueprint-scaffolding($body_selector: body)
  @if $body_selector != body
    #{$body_selector}
      +blueprint-scaffolding-defaults
  @else
    +blueprint-scaffolding-defaults

@mixin blueprint-scaffolding($body_selector: body) {
  @if $body_selector != body {
    #{$body_selector} {
      @include blueprint-scaffolding-defaults; } }
  @else {
    @include blueprint-scaffolding-defaults; } }

The styles contained here are meant to provide for an attractive experience out of the box and are expected to be removed once custom visual design begins. The +blueprint-scaffolding mixin must be mixed into the top level of your stylesheet. However, you can customize the body selector if you wish to control the scope of this mixin. Examples: Apply to any page including the stylesheet: +blueprint-scaffolding Scoped by a single presentational body class: +blueprint-scaffolding(“body.blueprint”) Semantically: +blueprint-scaffolding(“body#page-1, body#page-2, body.a-special-page-type”) Alternatively, you can use the +blueprint-scaffolding-body and +blueprint-scaffolding-defaults mixins to construct your own semantic style rules.

View Source: Sass | SCSS 

=blueprint-scaffolding-body
  margin: 1.5em 0

@mixin blueprint-scaffolding-body {
  margin: 1.5em 0; }

The styles this mixin provides were deprecated in Blueprint 0.9 and is no longer part of the main scaffolding, but the mixin is still available if you want to use it.

View Source: Sass | SCSS 

=box
  padding: 1.5em
  margin-bottom: 1.5em
  background: #e5ecf9

@mixin box {
  padding: 1.5em;
  margin-bottom: 1.5em;
  background: #e5ecf9; }

Mixin +box to create a padded box inside a column.

View Source: Sass | SCSS 

=blueprint-scaffolding-defaults
  .box
    +box
  // Border on right hand side of a column. You can comment this out if you don't plan to use it.
  div.border
    +border
  // Border with more whitespace, spans one column.
  div.colborder
    +colborder
  hr
    +colruler
  hr.space
    +colspacer
  form.inline
    +blueprint-inline-form

@mixin blueprint-scaffolding-defaults {
  .box {
    @include box; }
  // Border on right hand side of a column. You can comment this out if you don't plan to use it.
  div.border {
    @include border; }
  // Border with more whitespace, spans one column.
  div.colborder {
    @include colborder; }
  hr {
    @include colruler; }
  hr.space {
    @include colspacer; }
  form.inline {
    @include blueprint-inline-form; } }