Advanced Search

Compass CSS Two-Column Template

/ Published in: CSS
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. // This import applies a global reset to any page that imports this stylesheet.
  2. @import "blueprint/reset";
  3.  
  4. // To configure blueprint, edit the partials/base.sass file.
  5. @import "partials/base";
  6.  
  7. // Import all the default blueprint modules so that we can access their mixins.
  8. @import "blueprint";
  9.  
  10. // Import the non-default scaffolding module.
  11. @import "blueprint/scaffolding";
  12.  
  13. @include blueprint-scaffolding("body.bp");
  14.  
  15. body.bp {
  16.   @include blueprint-typography(true);
  17.   @include blueprint-utilities;
  18.   @include blueprint-debug;
  19.   @include blueprint-interaction;
  20.   // Remove the scaffolding when you're ready to start doing visual design.
  21.   // Or leave it in if you're happy with how blueprint looks out-of-the-box
  22. }
  23.  
  24. form.bp {
  25.   @include blueprint-form;
  26. }
  27.  
  28. body.two-col {
  29.   #container { @include container; }
  30.  
  31.   $header-cols: $blueprint-grid-columns;
  32.   $nav-cols: $blueprint-grid-columns;
  33.   $content-cols: 2 * ($blueprint-grid-columns / 3);
  34.   $sidebar-cols: $blueprint-grid-columns - $content-cols;
  35.   $footer-cols: $blueprint-grid-columns;
  36.  
  37.   #header {
  38.     @include column($header-cols);
  39.     padding:20px 0;
  40.     margin:20px 0;
  41.     border-bottom:1px solid #eee;
  42.   }
  43.  
  44.   #nav {
  45.     @include column($nav-cols);
  46.     padding:0 0 20px 0;
  47.     border-bottom:1px solid #eee;
  48.     list-style:none;
  49.     li {
  50.       display:inline;
  51.     }
  52.   }
  53.  
  54.   #content {
  55.     @include column($content-cols - 1);
  56.     @include colborder;
  57.   }
  58.  
  59.   #sidebar {
  60.     @include column($sidebar-cols, true);
  61.   }
  62.  
  63.   #footer {
  64.     @include column($footer-cols);
  65.     padding:20px 0;
  66.     margin:20px 0;
  67.     border-top:1px solid #eee;
  68.   }
  69. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.