My Web Design Framework

mywebdesignframeworkIn many web design projects I tend to have similar initial steps. Because of this behavior and my way of coding, I’ve decided to create a web design framework that will help me gain some time from the overall estimation of a project. Keep in mind that this framework is flexible and you can adapt it to your way of creating websites. At the end of this post you will have several files that will help you build your future web projects faster.

1. XHTML Template

When it comes to writing the HTML template I always use XHTML 1.0 Strict Doctype. I use it because it is quite restrictive and it helps you to separate the design from the content easily. Also the output code is much cleaner and well structured.

For My Web Design Framework I’ve decided to include first a basic template of a XHTML file. This template contains my most common structure that I use in my projects. So basically this template is composed of the XHTML 1.0 Strict Doctype and several nested DIVs.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Your Title</title>
</head>
<body>
<div id="wrapper">
	<div id="header">
 
	</div><!--header-->
	<div id="body">
		<div id="content">
 
		</div><!--content-->
		<div id="sidebar">
 
		</div><!--sidebar-->
	</div>
	<div id="footer">
 
	</div><!--footer-->
 
</div><!--wrapper-->
</body>
</html>

As you can see the template is pretty basic and it has a semantic approach which makes it suitable for simple HTML projects, WordPress themes or any other website project. The DIVs inside the template can be used, adjusted or deleted – this is your choice. You can easily adjust it to your needs to fit your coding style.

2. CSS Template

The second file in this framework is a CSS template, a file that can be easily customized like the XHTML template. For this file I’ve analyzed my CSS creation steps and I’ve decided that several section that I often use must be in this template: CSS Reset, Typography, LoVe HaTe, Clearing Floats methods and Diagnostic Classes.

There are several CSS reset codes out there but you’ll only use the one that is suitable for you. It is not a must to use a CSS reset, so in this case you can delete the first section of the CSS template if you don’t like resets. In my case, for the reset section I’ve started with Eric Meyer’s CSS Reset but I’ve removed several sections from the code.

For typography and LoVe Hate rule I left the properties and values empty. That is because these sections are different in most of my project. The reason for letting the elements still in the file is as I said in the first lines – to boost my productivity.

For the clearing floats problem I’ve placed in the CSS template two classes: fixed and clear. Both can be used to clear the floats but in different ways.

1
2
3
4
5
6
7
8
9
10
11
12
.fixed:after {
	content:"."; display:block; height:0;
	clear:both; visibility:hidden;
	}
 
.fixed { display:block; }
/*  \*/
 
.fixed { min-height:1%; }
* html .fixed {height:1%;}
 
.clear 	{ clear:both; }

The last part of the CSS template are the debugging styles. These are 2 generic classes that I usually attach to different elements in the design. The classes have one a red border and the other one a green background. In this case I can see what elements are OK and what elements are not well positioned, aligned or scaled.

1
2
.fix_br		{ border:1px dotted #f00; }
.fix_bg		{ background:#0f0; }

You can add other elements common for your daily work flow. As I said any part is customizable and in the end you should create your personal Web Design Framework.

3. HTML Components Template

The last part of the framework is an HTML file that has most of the HTML elements. You can find here all headings, paragraph, fieldset, drop-down and others. The reason for this file is to see how HTML elements are rendered after your CSS is applied.

My Web Design Framework

In the end the base for my design work flow is composed of 3 main files:
XHTML Template
CSS Template
HTML Components Template

You can add even more files that you may use like Javascript Frameworks (jQuery, Mootools etc.), your most used snippets etc. You only have to keep in mind that this is flexible and it has to make your coding easier and faster.

Conclusion

Treat this article as an optional thing not a necessary one. You may have a different style and maybe you can’t implements something like this in your work. But when you have repetitive actions in your design process try and embed them in some framework and in this way you will gain speed and time. Hopefully these ideas will be useful to you and you will increase your productivity. Cheers!

Download:
You can click the following link in order to download My Web Design Framework. Thanks

8 ideas on “My Web Design Framework

  1. Jitendra

    thx for giving this information.

  2. v-render

    nice article about framework

  3. Luc

    I use something very similar, although I try not to use “sidebar” as a name, it seems too presentation-based – I tend to use “extras” now. Also, you might want to remove the commented code from between the content/sidebar divs, IE6 throws a fit with whitespace (or comments) between floated divs totalling the width of their container, which is normally the case with a wrapper like #body.

  4. shin

    Small suggestion. div id=body can be id=maincontent or maincontainer, since class body exist.

  5. Web Design Studio

    I have something similar, as css/html code snippets and just drag them when need them… rather than files/templates

    Cheers,
    Alex

  6. OkieDokie

    I use something like this for when developing. But this is the kind of thing it’s always good to share.

    Just would like to say I got inspired by you project session, so I decided to do one my self in my blog…

    Thanx for the inspiration

    • Andy Gongea

      Nice to know you think it is useful. Cheers mate!

  7. Rey

    great framework…. but the download link is no longer working..
    kindly upload it again pls.?

    thanks a lot..