Save Time by Having a Kick Start Website Framework

Published 3rd March 2010

If your like me and end up making loads of websites and website themes it is essential to have a starter framework in place to save you time and give you a head start when making new websites. The benefits of having a website framework are obvious and all good web developers will have one.

So I’ve decided to share mine with you. Please feel free to use this as a template for your own framework and let me know about anything you would add or remove.

Framework Structure

Things to note:

  • All of these files are kept in a folder called TEMPLATE which is in an easy to find place.
  • In the images folder I have a blank Photoshop file called template.psd.
  • In the styles folder I have the default 960gs grid.css file in case I need to use it.

Index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Theme Name</title> <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> </head> <body> <div id="wrapper"> </div> </body> </html>

Things to note:

  • I use a transitional DOCTYPE. Most people are starting to use the simpler HTML5 DOCTYPE. Change as you need.
  • I’ve included the jQuery library from the Google CDN as I use it a lot. If you don’t remove this line.

Style.css

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } body { line-height: 1; color: black; background: white; } ol, ul { list-style: none; } table { border-collapse: separate; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } body { font-family:Arial, Helvetica Neue, Helvetica, sans-serif; font-size:14px; line-height:1.6em; color:#000; background:#fff; } a, a:visited { color:blue; text-decoration:none; border-bottom:1px solid blue; } a:hover, a:active { color:#000; text-decoration:none; } h1, h2, h3, h4, h5, h6 { } h1 { font-size:2.2em; line-height:1.3em; margin-bottom:5px; } h2 { font-size:1.9em; line-height:1.3em; margin-bottom:5px; } h3 { font-size:1.7em; line-height:1.3em; margin-bottom:5px; } h4 { font-size:1.5em; line-height:1.3em; margin-bottom:3px; } h5 { font-size:1.3em; line-height:1.3em; margin-bottom:3px; } h6 { font-size:1.2em; line-height:1.3em; margin-bottom:3px; } p { font-size:1em; margin-bottom:10px; } ol { list-style:decimal; padding-left:30px; margin-bottom:10px; } ul { list-style:disc; padding-left:25px; margin-bottom:10px; } li { padding:2px; } b, strong { font-weight:bold; } i, em { font-style:italic; } u { text-decoration:underline; } code { font-family:Courier,"Courier New",Monaco,Tahoma; background:#eee; color:#000; padding:0px 2px; } pre { background:#eee; padding:10px 20px; margin:20px; } blockquote { font-style:italic; margin:0 0 10px 20px; padding-left:10px; border-left:3px solid #B40000; } #wrapper { } input, textarea, select { padding: 2px; font: 400 1em Verdana, Sans-serif; color: #666; background:#ffffff; border: 1px solid #999; margin:2px; } input:focus, textarea:focus, select:focus { color: #000; background: #fff; border: 1px solid #002F59; } .clear { clear:both; } .pointer { cursor:pointer; } img { -ms-interpolation-mode:bicubic; } img.alignright img.alignleft img.aligncenter a img.alignright a img.alignleft a img.aligncenter .round5 { -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; } .round10 { -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; } .round15 { -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; } .round20 { -moz-border-radius:20px; -webkit-border-radius:20px; border-radius:20px; } .round25 { -moz-border-radius:25px; -webkit-border-radius:25px; border-radius:25px; } .round30 { -moz-border-radius:30px; -webkit-border-radius:30px; border-radius:30px; }

Things to note:

  • Keep project/theme name at top of the file as well as date and author. This is useful for future developers.
  • You should always use a CSS reset. In this case I use Eric Meyers CSS reset.
  • Split your CSS into sections with clear headers to make it easier to navigate.
  • I’ve included some default styles that I use a lot. These can be removed as required.

Conclusion

This is my kick start website framework. It has grown and changed over time and will continue to do so as technologies change and expand. If you are a web developer I strongly encourage you to develop your own website framework.