HTML and CSS Starter Templates
January 5th, 2010 (Web)Out of laziness, when building a website, I’ve often just started with one of the Dreamweaver basic template layouts – I’ll go in and delete a bunch of stuff and rework it to the way I wanted. This included copying and pasting code from websites I have built previously and rewriting the same sections of code with each new site. I was also using Dreamweaver as a code editor just because I started there. Dreamweaver is quite bloated however and if you are not using the WYSIWYG features, it is completely unnecessary. There are much better text editors out there already. I’ve currently switched to Notepad++ on the Windows side (what I use at work) and so far it has been working out quite nicely. I have put together a base CSS (2.1 and 3 valid) and HTML (5 spec valid and backwards compatible) template file with the structure I typically use for building a site. There are a few items in the CSS (like the comment block at the top) that are geared towards Wordpress users, but those can be ignored or removed as necessary. Now, let’s see the code. First the HTML
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>Website Title</title> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> </head> <body> <!-- the header --> <div id="header"> <div class="container"> <div id="menu"> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </div> </div> </div> <!-- main content of the page --> <div id="content"> <div class="container"> </div> </div> <!-- footer --> <div id="footer"> <div class="container"> <p>Copyright © yyyy Website Name </div> </div> </body> </html>
Pretty basic, right? The only thing that might throw you off is the DOCTYPE. This is the way HTML5 does it – much simpler. Also, there is some Javascript included for backwards compatibility with IE.
Now, on to the CSS
/*
Theme Name:
Theme URI:
Description:
Version: 1.0
Author:
Author URI:
*/
/* 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, b, u, i, center,
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-size: 100%;
vertical-align: baseline; background: transparent;
}
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; }
:focus { outline: 0; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: 0; }
body {
font-size: 62.5%;
text-align: center;
color: #000000;
}
/* container - place inside each section or around the entire page depending on your layout */
.container {
width: 960px;
margin: 0 auto;
text-align: left;
position: relative;
}
/* for clearing any floats <br class="clearfloat" /> */
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
/*--- header section - put whatever you want here ---*/
#header {
}
/*--- horizontal "block" menu ---*/
#menu {
float: left;
}
#menu li {
display: block;
float: left;
}
#menu li a {
display: block;
text-decoration: none;
height: 50px;
width: 125px;
padding: 5px 10px 5px 10px;
}
/* wordpress specific menu stylings */
#menu li.current_page_item a {
}
#menu li.first a {
}
#menu li.last a {
}
/*--- content section - put whatever you want here ---*/
#content {
font: 1.2em Verdana, Arial, Helvetica, sans-serif;
}
/*--- footer section - put whatever you want here ---*/
#footer {
}
A few things of note in the CSS. One is that at the top, I’m using a modified version of Eric Meyer’s CSS reset. I changed some of the spacing and indentation to make it a little more compact. I also removed the ‘content: none;’ from the ‘blockquote’ and ‘q’ resets so the stylesheet would validate with CSS3. A final modification I made was to the font size (from 100% to 62.5%). This resets the font base to 10px for easy em calculations (i.e. 1.4em is a 14pt font). The rest of the stylesheet should be mostly self explanatory.
So, what do you use as a starting point when building websites? What do you like about my templates? What don’t you like? What would you do differently?
Finally, last but not least, here is the zip file if you want an easy download: SZ’s Barebones HTML and CSS.
Update: I made some minor changes to the font placement in the CSS file. It didn’t quite work properly before. I’m now setting the font size to 62.5% in the body rather than in the reset. Font size can be defined in em’s in individual classes or ids.
Thanks for the insight on this. I may pilfer the CSS.
As to text editors: I’ve fallen in love with Scintilla Text Editor (http://www.scintilla.org/SciTE.html) for my non-WYSIWYG stuff. The nice thing is that it works on both Windows and X. Not on Mac though. Found Text Wrangler there and that does a pretty good job.
Josh, hope it’s some use to you. Good call on SciTE. It looks like a nice editor as well. I do like Text Wrangler on the Mac – I’ve gone between that and Aptana Studio depending on the size of the project. I tend to fall back to the default install of Vi on *nix systems (it’s just so quick, consistent and easy to use).
I really like how you set the font sizes so the em corresponds with the #pt size. I’m always guessing and playing around with it when using “em” to get whatever size I have in mind – 10pt for example.
This is a nice simple layout that makes it easy to start building any site. Thanks for sharing your code!
[...] images are saved into their proper formats, I build the HTML/CSS with a notepad editor – see this post for an update on the text editor I am now using instead of [...]
Using Notepad++, like it best of the editors I have tried. I use mostly at work. Shared it today with one of our customers to look at flat export file and she thought that the line numbers down this side were better than apple pie. I had the pleasure of opening up the world of text editors beyond microsoft foistware.