Compass CSS Two-Column Template


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



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.