Posted By

LeeRJohnson on 06/14/09


Tagged

template yui skeleton grid


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

appx


YUI 2.7 HTML Skeleton


 / Published in: HTML
 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
  2. "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  4. <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
  5. <meta http-equiv="Cache-Control" content="max-age=200" />
  6. <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
  7. <link rel="icon" href="favicon.ico" type="image/x-icon" />
  8. <link rel="author" href="http://design.leerjohnson.com" />
  9. <title>YUI 2.7 Document Template</title>
  10. <!-- CSS and Script Tags Configured at:
  11. http://developer.yahoo.com/yui/articles/hosting/?autocomplete#configure -->
  12. <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/yui/2.7.0/build/reset-fonts-grids/reset-fonts-grids.css" />
  13. <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/yui/2.7.0/build/base/base-min.css" />
  14. </head>
  15. <!-- #doc = 750px width, centered
  16. #doc2 = 950px width, centered
  17. #doc3 = 100% width
  18. #doc4 = 974px width, centered
  19. Grids: Templates (yui-t’s)
  20. .yui-t1 160 on left
  21. .yui-t2 180 on left
  22. .yui-t3 300 on left
  23. .yui-t4 180 on right
  24. .yui-t5 240 on right
  25. .yui-t6 300 on right
  26. -->
  27. <div id="doc3" class="yui-t6">
  28. <!-- overall document wrapper -->
  29. <div id="hd">
  30. <!--header / masthead-->
  31. <h1>YUI 2.7 Document Template</h1>
  32. </div>
  33. <div id="”bd”">
  34. <!--body-->
  35. <div id="yui-main">
  36. <div class="yui-b">
  37. <!--primary-->
  38. <!--
  39. Grids: Nesting Grids (yui-g’s)
  40. .yui-g 1/2, 1/2
  41. .yui-gb 1/3, 1/3, 1/3
  42. .yui-gc 2/3, 1/3
  43. .yui-gd 1/3, 2/3
  44. .yui-ge 3/4, 1/4
  45. .yui-gf 1/4, 3/4
  46. !-->
  47. <div class="yui-g">
  48. <div class="yui-u first">
  49. <h2>Headings</h2>
  50.  
  51. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
  52. euismod tincidunt ut consectetuer adipiscing elit, sed diam nonummy nibh euismod
  53. tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
  54.  
  55.  
  56. </div>
  57. <div class="yui-u">
  58. <h2>Headings</h2>
  59.  
  60. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
  61. euismod tincidunt ut consectetuer adipiscing elit, sed diam nonummy nibh euismod
  62. tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
  63. </div>
  64. </div>
  65. </div>
  66. </div>
  67. <div class="yui-b">
  68. <!--secondary-->
  69. <h3>Helpful links and tools</h3>
  70. <ul id="nav">
  71. <li><a href="http://developer.yahoo.com/yui/grids/builder/" >The YUI Grids Builde</a></li>
  72. <li><a href="http://developer.yahoo.com/yui/articles/hosting/?autocomplete#configure">YUI Dependency Configurator:</a></li>
  73. <li><a href="http://html-ipsum.com/">HTML Ipsum</a></li>
  74. <li><a href="http://snipplr.com/users/LeeRJohnson/" >Snipplr</a></li>
  75. <li><a href="http://www.typetester.org/" >Typetester</a></li>
  76. </ul>
  77. </div>
  78. </div>
  79. <div id="ft">
  80. <!--footer-->
  81. </div>
  82. </div>
  83. </body>
  84. </html>

Report this snippet  

You need to login to post a comment.