By , March 2010

How To Setup A Reusable Framework For Your Next Website

You've done your research, sketched out the wireframes, designed a stunning mockup and now its time to markup. Where do you start?

Having your own reusable framework is a great way to save time and provide a basis for your next website.

Your own reusable framework is by no means perfect for every project that you work on but it is a great starting point and it can evolve over time.

This post looks at the current framework I have in place and breaks it down. Please feel free to reuse this as you see fit and also point out anything that you feel would be beneficial to add (or remove).

Framework structure

Picture 3.png

All files are kept in a folder simply named 'NewSite' which contains the following:

ie.css A stylesheet specific for IE6 (or sometimes 7) that at the end of a project will usually contain various CSS bug fixes and PNG transparency fixes.

images/ directory For storing all images for the website.

index.html The main template for the website. Depending on CMS or programming language I use this will be chopped up at some stage.

print.css A stylesheet used when printing a document.

scripts/ directory For placing all the project's Javascript files.

script.js A default script for placing most of the project's Javascript code, stored in the scripts directory.

style.css The main stylesheet.

Now lets look at what each file contains.

index.html

This is the main template for any website and the starting point for marking up.





    
    
    
    
    
    
    
    
    
    
    

    
    
    




Skip to content

Notes about the markup used:

  • The doctype is HTML 5
  • There is a 'skip to content' link for screen readers (the style sheet will hide this)
  • Uses a conditional statement to load ie.css for Internet Explorer browsers below version 7
  • JQuery library is included using Google's CDN (but is commented out until it is needed)
  • The bare bones of the markup has been added

styles.css

Now lets look at the default stylesheet I'm using.


/*
Author: Lee Munroe
*/


/* 
# CSS contents ###################
* 1 Reset defaults
* 2 Layout
* 3 Nav
* 4 Headings
* 5 Lists
* 6 Images
* 7 Links
* 8 Forms
* 9 Tables
* 10 Typography 
* 11 Other
*/


/* 
# Colour reference ###################


*/
 
/*
# Reset defaults ################### 
*/

html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td { margin: 0; padding: 0; } 
a:link, a:visited{text-decoration:none;outline:none;}
html {overflow: -moz-scrollbars-vertical;}
#skipto{position:absolute;left:-9999px;top:-9999px;}
.group:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}

/*
# Layout ################### 
*/

body{font:75%/1.5  "Helvetica Neue", Helvetica, Arial, sans-serif;color:#222;background:#fff;}

/*
# Nav ################### 
*/



/*
# Headings ################### 
*/

h1{}

h2{}

h3{}

h4{}

#logo{width:;height:;background:url(images/logo.gif) no-repeat;}
#logo a{display:block;height:100%;width:100%;}
#logo a span{position:absolute;left:-9999px;top:-9999px;}

/*
# Lists ################### 
*/



/*
# Images ################### 
*/

img{border:none;}
img.left{margin:0 10px 10px 0;}
img.right{margin:0 0 10px 10px;}

/*
# Links ################### 
*/

a{}
a:hover{}

/*
# Forms ################### 
*/



/*
# Tables ################### 
*/



/*
# Typography ################### 
*/

p{margin:0 0 1.5em;}

/*
# Other ################### 
*/

.right{float:right;}
.left{float:left;}
.clear{clear:both;}
.alignleft{text-align: left;}
.alignright{text-align: right;}
.aligncenter{text-align: center;}

Notes for the stylesheet:

  • Author name at the top. I'll also include the project name and date here. This is mainly for the records of anyone the site is handed over to.
  • Using comments to break down the stylesheet into sections making it easier to scan down and find styles. Larger projects may have a different structure.
  • A general reset for margins and padding. There are lots of more advanced resets out there but I find this basic one works well. Read about CSS reset here
  • .group:after - the group class is applied to any element that needs cleared right after. Usually where there are 2 or more floats side by side.

ie.css


.group {zoom: 1;}

Notes:

  • As it stands, only contains a fix for the .group class

print.css


#header, #footer{display:none;}

Notes:

  • Removes the header and the footer when printing. The final file will need tinkering with though.

script.js


/*
$(document).ready(function() {
    
});
*/

Notes:

  • The document ready function is for JQuery Javascript functions that you want to run when your page loads. This is commented out until needed.

Conclusion

Download framework as zip file

Please feel free to use these templates in your own projects.

Again, this is just a framework I've put together over time. I recommend you adapt it to suit your own environment.

What does your framework look like? Anything useful I've missed?

Further reading

More useful templates/frameworks to check out:

« New Website Book Review: Logo Design Love »