Posted By

johnloy on 12/12/08


Tagged

css textmate


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

jackii
rwczippy


starter CSS structure


 / Published in: Other
 

  1. /*****************************************************************************
  2. = Main page layout divisions
  3. ******************************************************************************
  4. Fixtures of the page layout. These form the general shell into which
  5. components can be placed.
  6.  
  7. #header - Global header container
  8. #content - Content container
  9. #main - Main content container
  10. #sub1 or #sub2 - Subordinate content area containers, usually the sidebar
  11. #footer - Global footer
  12.  
  13. */
  14.  
  15. #header {
  16.  
  17. }
  18. #content {
  19.  
  20. }
  21. #main {
  22.  
  23. }
  24. #sub1 {
  25.  
  26. }
  27. #sub2 {
  28.  
  29. }
  30. #footer {
  31.  
  32. }
  33.  
  34.  
  35. /*****************************************************************************
  36. = Content element defaults
  37. ******************************************************************************
  38. Content element tags with or without the context of one of the main page
  39. layout divisions, like #header, #content, etc.
  40.  
  41. */
  42.  
  43. /* Links
  44. ----- */
  45.  
  46. /* Headings
  47. -------- */
  48.  
  49. /* Ordered and unordered lists
  50. --------------------------- */
  51.  
  52. /* Definition lists
  53. ---------------- */
  54.  
  55. /* Tables
  56. ---------------- */
  57.  
  58.  
  59. /*****************************************************************************
  60. = Components used in multiple viewing contexts
  61. ******************************************************************************
  62. Blocks of markup that are mostly self-contained as objects, meaning they
  63. can be added or removed from a document without altering the basic layout.
  64. They generally come in the form of UI widgets/controls, partial-templates, or
  65. boiler-plate design elements. The order of styles flows from generic to
  66. specific, and class-based to id-based.
  67.  
  68. */
  69.  
  70.  
  71. /* Generic line divider
  72. -------------------- */
  73. .divider {
  74. height: 1px;
  75. margin: 1em 0;
  76. background: url(../line_image.png) left center repeat-x;
  77. }
  78. .divider hr {
  79. position: absolute;
  80. left: -5000px;
  81. height: 1px;
  82. color: #fff;
  83. }
  84.  
  85.  
  86. /*****************************************************************************
  87. = Components used in specific body.class or body#id viewing contexts
  88. ******************************************************************************
  89. Blocks of markup that are mostly self-contained as objects, meaning they
  90. can be added or removed from a document without altering the basic layout.
  91. They generally come in the form of UI widgets/controls, partial-templates, or
  92. boiler-plate design elements. The order of styles flows from generic to
  93. specific, and class-based to id-based.
  94.  
  95. */

Report this snippet  

You need to login to post a comment.