Rapid XHTML/CSS development using

Rapid XHTML/CSS development using Hot

Tag it:

Articles Reviews DHTML

Written by Philip Karpiak

Friday, 03 August 2007

{mos_sb_discuss:20}

Ever wanted to get your XHTML or CSS files off the ground a little bit faster, and with ease? Then keep reading, as this post is all about reducing the time wasted on performing redundant tasks, such as setting up new XHTML and CSS files. Setting up the tags and selectors we would use with any web site shouldn�t have to be done every single time. I�m posting here the templates I use to accelerate my coding when I�m just starting out on a project. This will remove some of the mundane actions and makes room for actual coding.

You could use the following templates any way you like. If you have an IDE like TopStyle Pro I recommend setting it to use these templates when you create a new document of the appropriate type. Or you could just save these and copy/paste the code into your new document. It�s all about making these tricks conform to your style and needs, not the other way around.

The XHTML template

Most HTML-specialized IDE�s already have templates with the necessary tags in place. But I wanted to go a little bit further with my own template:

<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<link rel="stylesheet" type="text/css" media="screen" href="" />
</head>
<body>
<div id="masthead">

</div>
<div id="content">

</div>
<div id="footer">

</div>
</body>
</html>

Here I took the usual plain Jane template, and added the required divs, content-type, a CSS file link, etc. It may seem to be not much, but every bit helps if you find yourself grinding out many different/static pages per day. If you want to use a different DOCTYPE then you can copy and paste whichever one you want from WaSP�s DOCTYPE list. I have left out #navigation as it is too subjective to have it in the template (it could be placed in #masthead, outside it, etc.).

The CSS template

For those of you that have read CSS tactics of efficiency: Part 1 and wanted to see a complete example of how those methods come together, here it is:

/*      Desc: *Purpose of CSS file*
    Author: *Your name*
    Date: *Last modified date*
    Colours    + *Page/section name*
        - *colour hex* *colour name* (*purpose*)
=== === === === === === === === === === */

/*=STRUCTURE
=== === === === === === === === === === */
html {

}
body {

}
/*=TYPOGRAPHY
=== === === === === === === === === === */
h1 {

}
h2 {

}
h3,
h4 {

}
p {

}
/*=COMMON
=== === === === === === === === === === */
a {

}
img {

}
/*=MASTHEAD
=== === === === === === === === === === */
#masthead {

}
/*=NAVIGATION
=== === === === === === === === === === */
#navigation {

}
/*=CONTENT
=== === === === === === === === === === */
#content {

}
/*=FOOTER
=== === === === === === === === === === */
#footer {

}

The labels and headers should be self-explanatory. With the above template you can start building up your style sheets right away, without having to worry about micromanaging your selector locations. Also included are the bare bone selectors I would use for any project. You may have noticed that I have html and body selectors. If you would rather use the body and #wrapper combo instead, then just adjust the selectors accordingly.

That�s it for now. I hope these templates become very beneficial to your development process. They should be easy to grasp, and be even easier to use in practice. So go and have fun with your new productivity pals!

More great articles and tips .... http://eswat.ca/

User reviews

There are no user reviews for this item.

Add new review

Last Updated ( Friday, 03 August 2007 )

< Prev		Next >

[ Back ]