// This import applies a global reset to any page that imports this stylesheet.
@import "blueprint/reset";

// To configure blueprint, edit the partials/base.sass file.
@import "partials/base";

// Import all the default blueprint modules so that we can access their mixins.
@import "blueprint";

// Import the non-default scaffolding module.
@import "blueprint/scaffolding";

@include blueprint-scaffolding("body.bp");

body.bp {
  @include blueprint-typography(true);
  @include blueprint-utilities;
  @include blueprint-debug;
  @include blueprint-interaction;
  // Remove the scaffolding when you're ready to start doing visual design.
  // Or leave it in if you're happy with how blueprint looks out-of-the-box
}

form.bp {
  @include blueprint-form;
}

body.two-col {
  #container { @include container; }
  
  $header-cols: $blueprint-grid-columns;
  $nav-cols: $blueprint-grid-columns;
  $content-cols: 2 * ($blueprint-grid-columns / 3);
  $sidebar-cols: $blueprint-grid-columns - $content-cols;
  $footer-cols: $blueprint-grid-columns;
    
  #header {
    @include column($header-cols);
    padding:20px 0;
    margin:20px 0;
    border-bottom:1px solid #eee;
  }
  
  #nav {
    @include column($nav-cols);
    padding:0 0 20px 0;
    border-bottom:1px solid #eee;
    list-style:none;
    li {
      display:inline;
    }
  }
  
  #content {
    @include column($content-cols - 1);
    @include colborder;
  }
  
  #sidebar {
    @include column($sidebar-cols, true);
  }
  
  #footer {
    @include column($footer-cols);
    padding:20px 0;
    margin:20px 0;
    border-top:1px solid #eee;
  }
}

// This import applies a global reset to any page that imports this stylesheet.
@import "blueprint/reset";

// To configure blueprint, edit the partials/base.sass file.
@import "partials/base";

// Import all the default blueprint modules so that we can access their mixins.
@import "blueprint";

// Import the non-default scaffolding module.
@import "blueprint/scaffolding";

// To generate css equivalent to the blueprint css but with your
// configuration applied, uncomment:
// @include blueprint

// But Compass recommends that you scope your blueprint styles
// So that you can better control what pages use blueprint
// when stylesheets are concatenated together.
@include blueprint-scaffolding("body.bp");

body.bp {
  @include blueprint-typography(true);
  @include blueprint-utilities;
  @include blueprint-debug;
  @include blueprint-interaction;
  // Remove the scaffolding when you're ready to start doing visual design.
  // Or leave it in if you're happy with how blueprint looks out-of-the-box
}

form.bp {
  @include blueprint-form;
}

body.two-col {
  #container { @include container; }
  
  $header-cols: $blueprint-grid-columns;
  $nav-cols: $blueprint-grid-columns;
  $content-cols: 2 * ($blueprint-grid-columns / 3);
  $sidebar-cols: $blueprint-grid-columns - $content-cols;
  $footer-cols: $blueprint-grid-columns;
    
  #header {
    @include column($header-cols);
    padding:20px 0;
    margin:20px 0;
    border-bottom:1px solid #eee;
  }
  
  #nav {
    @include column($nav-cols);
  }
  
  #content {
    @include column($content-cols - 1);
    @include colborder;
  }
  
  #sidebar {
    @include column($sidebar-cols, true);
  }
  
  #footer {
    @include column($footer-cols);
    padding:20px 0;
    margin:20px 0;
    border-top:1px solid #eee;
  }
}

// This import applies a global reset to any page that imports this stylesheet.
@import "blueprint/reset";

// To configure blueprint, edit the partials/base.sass file.
@import "partials/base";

// Import all the default blueprint modules so that we can access their mixins.
@import "blueprint";

// Import the non-default scaffolding module.
@import "blueprint/scaffolding";

// To generate css equivalent to the blueprint css but with your
// configuration applied, uncomment:
// @include blueprint

// But Compass recommends that you scope your blueprint styles
// So that you can better control what pages use blueprint
// when stylesheets are concatenated together.
@include blueprint-scaffolding("body.bp");

body.bp {
  @include blueprint-typography(true);
  @include blueprint-utilities;
  @include blueprint-debug;
  @include blueprint-interaction;
  // Remove the scaffolding when you're ready to start doing visual design.
  // Or leave it in if you're happy with how blueprint looks out-of-the-box
}

form.bp {
  @include blueprint-form;
}

body.two-col {
  #container { @include container; }
  
  $header-cols: $blueprint-grid-columns;
  $nav-cols: $blueprint-grid-columns;
  $content-cols: 2 * ($blueprint-grid-columns / 3);
  $sidebar-cols: $blueprint-grid-columns - $content-cols;
  $footer-cols: $blueprint-grid-columns;
    
  #header {
    @include column($header-cols);
    padding:20px 0;
    margin:20px 0;
    border-bottom:1px solid #eee;
  }
  
  #nav {
    @include column($nav-cols);
  }
  
  #content {
    @include column($content-cols - 1);
    @include colborder;
  }
  
  #sidebar {
    @include column($sidebar-cols, true);
  }
  
  #footer {
    @include column($footer-cols);
  }
}

Compass CSS Two-Column Template

css, textmate, template

CSS