Creating xhtml and css starter files to jump-start building web pages

You know how some people have a signature that they put in everything they produce? For Hitchcock, it was a small walk-on role starring himself. For Seinfeld, it’s a Superman reference. For most web designers, it’s the code that they start with.

When building a web page, designers start with required markup plus some id and class names that have become their standard signature. In almost every web page I code, I use the same declaration and meta tags. I also use the ids of “container,” “header,” “nav,” “content,” and “footer.” Why would I retype that everytime? I don’t. I just keep this code handy to copy and paste.

Here’s my starter xhtml code:

<div id="container">
<div id="nav">
<ul id="nav_ul">
	<li><a href="#">Link</a></li>
</ul>
</div>
<div id="content">
<h1>This is the h1 heading</h1>
<h2>This is the h2 heading</h2>
This is a paragraph</div>
<div id="footer">© 2010 Gloria Wadzinski</div>
</div>

The same goes for my style sheets. Of course, the colors, background images, and other attributes will change, but I always start with zero’ing out defaults and defining font size baselines. Here’s my starter css file:

html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote {
	margin:0;
	padding:0;
        font-size:100%;
        font-weight:normal;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
table {
        border-collapse: collapse;
        border-spacing: 0;
}
td, th, caption {
        font-weight: normal;
        text-align: left;
}
p {
	font-size:100%;
        margin:3px 0;
}
h1 {
	font-size:200%;
        margin:5px 0;
}
h2 {
	font-size:150%;
        margin:5px 0;
}
h3 {
	font-size:125%;
        margin:3px 0;
}
img, fieldset {
	border:0;
}
img a {
	text-decoration:none;
}
ol {
        padding-left:1.4em;
        list-style:decimal;
}
ul {
       padding-left:1.4em;
       list-style:square;
}
q:before, q:after {content:'';}
/** BEGIN clear fix **/
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix {display: inline-table;}
/*backslash hack hides from IE mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* end backslash hack */
Gloria Wadzinski

About Gloria Wadzinski

Gloria Wadzinski is a multimedia designer specializing in graphic design, website design and video production. She currently lives in Boulder, Colorado. View Gloria's contact information and portfolio at http://gloriaw.net.
Web Development, , Permalink

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>