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
/*=================================*/
/* <Theme Name>
/* <Month> 2010
/* By: Gilbert Pellegrom
/* http://www.gilbertpellegrom.co.uk
/*=================================*/
/*====================*/
/*=== Reset Styles ===*/
/*====================*/
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;
}
/* tables still need 'cellspacing="0"' in the markup */
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: "" "";
}
/*===================*/
/*=== Main Styles ===*/
/*===================*/
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;
}
/*========================*/
/*=== Structure Styles ===*/
/*========================*/
#wrapper {
}
/*====================*/
/*=== Input Styles ===*/
/*====================*/
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;
}
/*====================*/
/*=== Other Styles ===*/
/*====================*/
.clear {
clear:both;
}
.pointer {
cursor:pointer;
}
/* Sharper Thumbnails */
img {
-ms-interpolation-mode:bicubic;
}
/* Wordpress Defaults */
img.alignright {float:right; margin:0 0 .7em 1em}
img.alignleft {float:left; margin:0 1em .7em 0}
img.aligncenter {display: block; margin-left: auto; margin-right: auto}
a img.alignright {float:right; margin:0 0 .7em 1em}
a img.alignleft {float:left; margin:0 1em .7em 0}
a img.aligncenter {display: block; margin-left: auto; margin-right: auto}
/* Easy Border Radius */
.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.
