Advanced Search

Posted By

johnloy on 12/12/08

Tagged

Versions (?)

Last Edited at 12/12/08 05:46pm

Statistics

Viewed 542 times
Favorited by 1 user(s)

Related snippets

456
Base CSS structure
0
CSS Starter
2
CSS Starter
4
CSS Starter
0
CSS Starter
0
CSS Starter
2
CSS Starter
5
CSS Starter
4
CSS Starter

starter CSS structure

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

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  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


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.