Posted By

LuckyShot on 04/17/10


Tagged

css js html jquery yahoo reset 1kb


Versions (?)

Who likes this?

4 people have marked this snippet as a favorite

abbyabigale
wirenaught
deiby
Balamir


Web Template - HTML, CSS and JS ready to start coding (1KB 960px mod, Yahoo Reset, jQuery, XHTML strict)


 / Published in: HTML
 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  4. <title><?=TITLE?></title>
  5. <style type="text/css">
  6. /* Yahoo CSS Reset - Copyright (c) 2010, Yahoo! Inc. All rights reserved. Code licensed under the BSD License: http://developer.yahoo.com/yui/license.html version: 2.8.1 */
  7. html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}del,ins{text-decoration:none;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:baseline;}sub{vertical-align:baseline;}legend{color:#000;}input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}input,button,textarea,select{*font-size:100%;}
  8.  
  9. /* 1KB grid - 12 columns, 60 pixels each, with 20 pixel gutter (960px) */
  10. .g1{width:60px;}.g2{width:140px;}.g3{width:220px;}.g4{width:300px;}.g5{width:380px;}.g6{width:460px;}.g7{width:540px;}.g8{width:620px;}.g9{width:700px;}.g10{width:780px;}.g11{width:860px;}.g12{width:940px;}.g1,.g2,.g3,.g4,.g5,.g6,.g7,.g8,.g9,.g10,.g11,.g12{overflow:hidden;float:left;display:inline;margin:0 10px;}.row{width:960px;overflow:hidden;margin:0 auto;}.row .row{width:auto;display:inline-block;margin:0 -10px;}
  11.  
  12. /* Common styling */
  13. .center {text-align:center}
  14. .right {text-align:right}
  15. .left {text-align:left}
  16. .fright {float:right}
  17. .fleft {float:left}
  18. strong,.strong {font-weight:900}
  19. em,.em {background:#FF9}
  20. small,.small {font-size:.7em}
  21.  
  22. /* Style sheet - */
  23. body {}
  24. #navtop {}
  25. #navtop div ul li {display:inline}
  26. #header {}
  27. #header div h1 {}
  28. #nav {}
  29. #nav div ul li {display:inline}
  30. #content {}
  31. #sidebar-one {}
  32. #sidebar-two {}
  33. #main {}
  34. #footer {}
  35. #footer div {}
  36.  
  37. div {outline:1px solid #069 /* this is for debugging */}
  38. </head>
  39.  
  40.  
  41. <div id="navtop" class="row">
  42. <div class="g12">
  43. <ul class="right">
  44. <li><a href="#">Item1</a></li>
  45. <li><a href="#">Item2</a></li>
  46. <li><a href="#">Item3</a></li>
  47. <li><a href="#">Item4</a></li>
  48. </ul>
  49. </div>
  50. </div>
  51.  
  52. <div id="header" class="row">
  53. <div class="g12">
  54. <h1>Heading</h1>
  55. </div>
  56. </div>
  57.  
  58. <div id="nav" class="row">
  59. <div class="g12">
  60. <ul>
  61. <li><a href="#">Item1</a></li>
  62. <li><a href="#">Item2</a></li>
  63. <li><a href="#">Item3</a></li>
  64. <li><a href="#">Item4</a></li>
  65. </ul>
  66. </div>
  67. </div>
  68.  
  69. <div id="content" class="row">
  70. <div id="sidebar-one" class="g3">
  71. <h4>Heading4</h4>
  72. </div>
  73.  
  74. <div id="main" class="g6">
  75. <h2>Heading2</h2>
  76. <p>Paragraph</p>
  77. <h3>Heading3</h3>
  78. </div>
  79.  
  80. <div id="sidebar-two" class="g3">
  81. <h4>Heading4</h4>
  82. </div>
  83. </div>
  84.  
  85. <div id="footer" class="row">
  86. <div class="g12">
  87. <p>Paragraph</p>
  88. </div>
  89. </div>
  90.  
  91. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  92. <script type="text/javascript">
  93. $(document).ready(function() {
  94. /* jQuery magic here */
  95. });
  96. </script>
  97.  
  98. </body>
  99. </html>

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: jordandavidson on December 27, 2017

Its extremely efficiently and basic software.This program is clarified using the javascript. I extraordinarily get a kick out of the risk to visit this web page.This blog is especially beneficial for all PC studentsBest Essay Help UK

Posted By: victoriakeating on February 12, 2018

The snippets and instructions here are just perfect for beginners to learn and reference for experienced developers. I would also recommend his website and regular emails for incredibly useful Online Dissertation Help UK information.

Posted By: AngelaRuther on April 24, 2018

Snippet you are sharing here is really helpful for beginners to develop their coding skill and can learn advanced things about HTML OR CSS. As a designer of Dissertation writing service your website helps me to know more about design. Thank you

Posted By: shawnjasper on June 6, 2018

I was just browsing through the internet looking for some information and came across your blog. I am impressed by the information that you have on this blog. It shows how well you understand this subject. Bookmarked this page, will come back for more. cheap dissertation writing service

You need to login to post a comment.