Building HTML/CSS Sites: Use a Template

Written by Stefan Vervoort on February 27, 2009

If you are developing HTML/CSS websites with occasionally a little bit of JavaScript (just like myself), it can be very un-productive to write your basic codes over and over again.

For example, if you want to include a JS file for your dropdowns, a CSS framework file and print CSS files every time you start working on a new project, you better read this article for some time-solving solutions.

Create a Template for Starting From Scratch

We are going to make a Template Folder we use every time on a new project. This includes a basic index page, the JS files, the CSS files and our basic images. In my projects, I use these files almost every time:

JavaScript (folder /js/)

CSS (folder /css/)

Images (folder /images/)

I suggest you take a look at some of these links I provided in the list and check out what you need yourself in a regular project. If you need other JavaScript fixes or basic CSS code, be sure to use them instead and add them in the same way I will describe below.

Let’s build our Template’s Index page

I hope you have placed all the files you need in an appropriated folder. For example, I have placed my images in /images/, my CSS files in /css/ and my JavaScript files in /js/.  This will make things look pretty structured.

Alright, Let’s start with a standard HTML page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
</body>
</html>

Description + Keywords + Robots

Any site needs a proper description and maybe some keywords. They won’t do much to your SEO rankings, but they will help you displaying your search engine results in a proper way. It could also be a good idea to add a meta tag for robots, so your search engine knows they can index your site.

Here is what I have added to my standard META tags. You should add all the following codes + inclusions between the <head></head> tags in your HTML page.

    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="robots" content="index,follow" />

CSS Framework

We have to add our CSS Framework first. Depending on the way your framework needs inclusion, here is the Blueprint way:

<!-- blueprint -->
    <link rel="stylesheet" href="css/screen.css" type="text/css" media="screen, projection" />
    <link rel="stylesheet" href="css/print.css" type="text/css" media="print" />
    <!--[if IE]><link rel="stylesheet" href="css/ie.css" type="text/css" media="screen, projection" /><![endif]-->

Custom Styles

Next, I think it’s important to have a custom stylesheet at hand, so let’s add our custom.css stylesheet.

<!-- custom stylesheet -->
    <link rel="stylesheet" type="text/css" media="all" href="css/custom.css" />

JavaScript files

Now we have added style to our template, let’s add some JavaScript. I suggest you include jQuery first, because if you include jQuery plugins before the original library, they won’t work. So, here’s how I include my JavaScript files:

<!-- JavaScript -->
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/custom.js"></script>
    <!--[if lte IE 6]><script type="text/javascript" src="js/transparant-png.js"></script><![endif]-->

Everything we needed to include is done right now. We can now start adding some more code to our template’s Index file.

Structuring codes

Depending on your framework, you could add a basic structure between your <body></body> tags. Most sites I developed have this structure:

  • Container

    • Header
    • Content
      • Content
      • Sidebar 1
      • Sidebar 2
    • Footer

That’s why I have already created the structure so I can start right away.

<div class="container" id="container">
    <div class="span-24" id="header"></div><!-- end header -->
    <div class="span-24" id="content">
       <div class=""></div>
       <div class=""></div>
<!--	<div class=""></div> -->
    </div><!-- end #content -->
    <div class="span-24" id="footer"></div><!-- end #footer -->
</div><!-- end container -->

As you can see, I haven’t given my DIV’s inside my Content DIV any ID and I even commented one of them. This is for the simple reason I don’t know what I will be adding to the content area yet. Every project is different, however, I usually choose two or three DIV’s inside the content.

Our Custom CSS Files

Next thing we will do is creating some basic CSS styles.

For example, it is important to structure your codes pretty well. When you need to work fast, you often work less structured and nice. With the use of a template, the structure is already there. You only need to fill it up.

Comments

I am not going to teach you how to write structured code as Woork has some great tutorials on them. You should always start with the basics details on your project. You can add more or less details in here, that’s up to you.

/*
Author:           Stefan Vervoort
Author URI:       http://www.divitomedia.com/
Version:	   0.9
Project:
Description:
*/

I think next, a table of contents is appropriated:

/*
---------------------------------------------------------------------------------------
TABLE OF CONTENTS
	-- RESETS
	-- BASICS
	-- CUSTOM
---------------------------------------------------------------------------------------
*/

You should add a heading above each section of your stylesheet. For example, when styling basic stylesheet attributes, you can do it like this:

/*---------------------------------------------------------------------------------------
--- BASICS
---------------------------------------------------------------------------------------*/
body { }
a { }
a:visited{ }
...

And, next, you add this section to your table of contents. I suggest you only place only your larger sections in your table of contents. This is just a basic lesson in structuring your CSS file.

CSS Resets

First, I have added a Reset. My personal favorite is the Eric Meijers’ Reset Reloaded. 

/*---------------------------------------------------------------------------------------
--- RESETS
---------------------------------------------------------------------------------------*/
html, body, div, span, applet, object, iframe,
	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: '';
		content: none;
	}
	:focus {
		outline: 0;
	}
	ins {
		text-decoration: none;
	}
	del {
		text-decoration: line-through;
	}
	table {
		border-collapse: collapse;
		border-spacing: 0;
	}

The basics

The next thing I have added are a couple basic styles, without adding to much behavior. I have added default font sizes, some classes I always use (like .left, .right, .clear, .padding) and some image styles. Be sure to include your own preference in there too.

/*---------------------------------------------------------------------------------------
--- BASICS
---------------------------------------------------------------------------------------*/
html{		font-size:100%;	min-height:101%;}
body{		font-size:62.5%; color:#666;}
a{		}
a:hover{	}
a:active{	}
a:visited{	}
.left{		float:left; }
.right{	float:right; }
.clear{	clear:both; }
img.left{	margin:0 1em 1em 0; }
img.right{	margin:0 0 1em 1em; }
.padding{	padding:10px; }
#content p{	margin:1.1em 0; }

Dropdown Menu

Because I tend to use a dropdown menu in all my latest projects, I have all the styles added to my stylesheet to make the dropdown menu work proper, just without color styles. This makes it easy for me to style these menu’s easily.

If you want to use the suckerfish dropdown menu and want to add some basic behavior to your stylesheet, here are my codes. I always place my navigation menu inside a DIV with ID navigation.

/* ------------------------------------------------------------------------------------
NAVIGATION MENU				 */
#navigation, #navigation ul {		padding:0;	margin:0; list-style:none; line-height:1; float:left;	}
#navigation a {			display:block; padding:6px 10px; text-decoration:none;	}
#navigation a:hover{			text-decoration:underline; padding:6px 10px;}
#navigation li { 			float:left; width:auto;	}
#navigation li{			padding:0; margin:0; }
#navigation li ul li{			padding:1px 0px;}
#navigation li ul li a{		padding:6px 10px; width:110px; }
#navigation li ul { 			position:absolute; padding-top:1px; width:130px; left:-999em; }
#navigation li ul ul {			margin: -1.5em 0 0 130px;	}
#navigation li:hover ul ul, #navigation li:hover ul ul ul, #navigation li.sfhover ul ul, #navigation li.sfhover ul ul ul {	left: -999em;}
#navigation li:hover ul, #navigation li li:hover ul, #navigation li li li:hover ul,
#navigation li.sfhover ul, #navigation li li.sfhover ul, #navigation li li li.sfhover ul { left: auto;	}

Site Structure

It’s easy to gather all your structure DIV’s and put their ID’s under each other. This way you always know where to look when something isn’t right in your structure.

/* ------------------------------------------------------------------------------------
STRUCTURE					 */
#container{	overflow:hidden; border:solid #000; border-width:0 2px; font-size:1.5em; }
#header{}
#footer{	clear:both; }
#content{}
#right{}
#left{		}

Time for the custom code

My default styles I use in any project are in my stylesheet now. One thing I do next is adding this comment:

/* ------------------------------------------------------------------------------------
CUSTOM				 */

Which means, we are ready to start.

Template Done

We are ready to start developing with our new template system. Remember to always make a copy of your template before you start editing there. If you don’t do that you will loose your basic template, because you’ll save custom files over your original.

One tip I can give you is to email your template to your own email address. Once you, accidentally, lost your original template, you will be able to retrieve your original one! A backup is a live saver.

Download my Template

I can give you my template to use on your own projects and you will have everything all together. I hope you see the advantages of this way of starting on a project and I hope it’ll save you some time.

Download HTML-CSS-Template.

Any Tips?

If you spot any faults in the code, or if you think some code can be optimized, or if you have some tips to add to the template, don’t hesitate to leave a comment!

Liked this post? Subscribe, or Share and Enjoy:
  • Digg
  • del.icio.us
  • Blogosphere News
  • Design Float
  • DZone
  • StumbleUpon

Tags

-

This article is written by:

Name: Stefan Vervoort

URL: http://www.divitodesign.com

Description: I am a 18-year-old webdesigner and blogger from Waalwijk, the Netherlands. I also blog at WPTOY and work at DivitoMedia.

43 Responses

  1. Idealien says:
    February 27, 2009 at 7:01 pm

    A well written article. The only suggestion I’d make is that the amount of text you use for dividing the css sections is rather large. I tend to use something in the form of

    /* ===BASICS */

    so that I can search for ===BASICS or whatever section I want to jump to.

  2. Snoupix says:
    February 27, 2009 at 7:19 pm

    Thanks ! very useful.

  3. Building HTML/CSS Sites: Use a Template says:
    February 27, 2009 at 10:11 pm

    [...] Visit Source. [...]

  4. Rodrigo Teixeira says:
    February 28, 2009 at 12:01 am

    Great article!
    Important for production time.

  5. Daily Links | AndySowards.com :: Professional Web Design, Development, Programming, Hacks, Downloads, Math and being a Web 2.0 Hipster? says:
    February 28, 2009 at 1:04 am

    [...] Building HTML/CSS Sites: Use a Template » DivitoDesign Using TEMPLATE for HTML/CSS – Good read (tags: design webdev css template howto) [...]

  6. Raymond Selda says:
    February 28, 2009 at 2:10 am

    I’ve been wanting to create a template like you outlined here but somehow I often rely on copying and pasting files and folders from the original project I built. hahaha.

    Your article is a motivation for me to once and for all create a master template or maybe download yours coz I’m tooooo lazy! hahaha.

    Thank you for sharing this one!

  7. Arun Kumar says:
    February 28, 2009 at 3:33 am

    Many Thanks Stefan !!

    Indeed a very well written article, and I agree with Idealien, as it will be short and less KB too.
    PS: I have been following your website since 2 weeks or so and I must say the quality of article is top notch ! Your website is very less cluttered and it loads very fast, compared to others I follow for my web designing needs.
    Cheers !

  8. whiskey says:
    February 28, 2009 at 6:53 am

    Just for a good measure, SWFObject should be there too, and SIFR… That way you can easily delete whatever JS call you don’t need.

  9. jitendra vyas says:
    February 28, 2009 at 9:46 am

    What does the search form fix?

    and i suggest DD_belatedPNG for png.

  10. Diseño HTML/CSS - Usar Plantillas says:
    February 28, 2009 at 9:55 am

    [...] Ir al Sitio Tags: CSS, Diseño, HTML Diseño [...]

  11. viktor says:
    February 28, 2009 at 12:41 pm

    i use this since 2006:)

  12. Sérgio Soares says:
    February 28, 2009 at 1:30 pm

    Good post!

    Very useful

  13. Harry Roberts says:
    February 28, 2009 at 1:43 pm

    If you really want to create a decent template (even for static sites) I’d suggest using PHP to include headers and sub content etc. Plus PHP can bring other benefits: http://csswizardry.com/toybox/let-php-do-the-mundane/

  14. Tommie Hansen says:
    February 28, 2009 at 6:26 pm

    That’s step #2 Harry. No one … (that i know of) begins with having it all split up. It makes no sense and is much harder to work with.

    Photoshop > XHTML + CSS > PHP/ASPX. :)

  15. Tibor says:
    February 28, 2009 at 7:28 pm

    Good idea and nice set up!

    I always prefer to set the default font-size to 62.5%, which makes it easier to use EM for font-sizes; this way 1em=10px, 1.1 em=11px etc.

  16. el Cabanaz says:
    February 28, 2009 at 7:38 pm

    Ah this is helpfull! Thnx a lot!

  17. Stefan Vervoort says:
    February 28, 2009 at 7:44 pm

    @Tibor – That’s right. Do it as well!

    @Harry Roberts – I agree with @Tommie. I think it’s much harder to work with header.php, footer.php etc. That way you have to switch between them all the time if you want to edit something. Irritating. I am just splitting up everything after I am done with the structure.

    @jitendra – Will explain that later.

    @Idealien – Also possible. In my own experience, I can find my stuff better this way, but your way is fine as well. You can always throw your CSS codes through a CSS Compressor, right? :)

  18. Eric says:
    March 1, 2009 at 2:52 am

    Very helpful website and really just what I needed to read. This is definitely the type of time saving technique I need to employ!

  19. CyberFox says:
    March 1, 2009 at 3:59 am

    Very Helpful!
    Many Thanks.

  20. Raul says:
    March 1, 2009 at 9:21 am

    excellent post

  21. Evan says:
    March 1, 2009 at 6:47 pm

    One other thing I do that seems to be becoming more and more common practice, is to include jQuery using the Google Ajax Library API. That way, the jQuery file may already be cached from another site the user may have visited.

  22. links for 2009-03-01 « Where Is All This Leading To? says:
    March 2, 2009 at 12:13 am

    [...] Building HTML/CSS Sites: Use a Template » DivitoDesign (tags: howto framework development productivity resources business css guide code design tricks webdev webdevelopment webdesign web information tips tutorials xhtml template reference tools documentation tutorial templates html forbusiness) [...]

  23. ?????????(2009/03/02) - sj6works says:
    March 2, 2009 at 2:47 am

    [...] Building HTML/CSS Sites: Use a Template html?css?????????? [...]

  24. Jos Hirth says:
    March 2, 2009 at 6:05 am

    Add a red exclamation mark favicon. This way you won’t forget to add one. ;)

  25. flipweb says:
    March 2, 2009 at 6:40 am

    Thanks for this useful post

    Team Flipweb

  26. Bill says:
    March 2, 2009 at 7:59 am

    Another similar framework would be the Yahoo UI library. I have been using their standard reset-fonts-grid.css and base.css as the first two css files in all my projects. The reset is obviously for resetting everything, similar to Eric Meyer’s file. The ‘fonts’ fixes browser compatibility issues for the font sizes, and the ‘grids’ frameworks makes creating many different versions of standard layouts – from 800px wide -> fluid, along with multiple sidebars, grids, etc. Very nice alternative, IMO.

  27. anna marie says:
    March 2, 2009 at 9:18 am

    Hi..
    Indeed a very well written article and like the way it has been portrayed.In all great article.keep up the good work.
    Thanks..
    Anna

  28. Kris says:
    March 2, 2009 at 12:44 pm

    Thanks for the great post !

  29. links for 2009-03-02 « Mandarine says:
    March 3, 2009 at 4:18 am

    [...] Building HTML/CSS Sites: Use a Template » DivitoDesign (tags: webdev tools tutorial css layout xhtml template framework) [...]

  30. ??????? » [Web] ???? says:
    March 3, 2009 at 6:23 am

    [...] Building HTML/CSS Sites: Use a Template [...]

  31. Murat from Moscow says:
    March 3, 2009 at 6:29 am

    Thank you very much! Very helpfull! Hello from Moscow! :)

  32. Abhisek says:
    March 4, 2009 at 1:46 am

    What an article! Can’t help bookmarking!

  33. jitendra vyas says:
    March 5, 2009 at 7:48 am

    html { font-size:100%; min-height:101%; }

    why u add min-height:101% in custom.css. what is the use of this?

  34. Birkenstock says:
    March 9, 2009 at 11:37 am

    Great article. personally i allways use templates for my work. psd template. html/css temapltes and so on..

  35. CSS Conditional Comments Guide » DivitoDesign says:
    March 16, 2009 at 11:55 am

    [...] CSS Frameworks & Templates came around, some layout problems have been fixed, but definitely not all. These problems can [...]

  36. Gladior says:
    April 28, 2009 at 6:45 am

    Templates do work, but. Just don’t make the mistake just to color your template and call it a design. Designing a website is something you must do from scratch. If a template helps you realise yor design faster, then it’s a great template.

  37. gina michel says:
    May 9, 2009 at 1:12 pm

    Nice and informative site. Keep up the good work.

  38. sean potter says:
    May 9, 2009 at 1:27 pm

    i read every single of your post sometimes i read it over and over again ..you really inspired many people here..wish you a good luck in everything you do..

  39. Bhutan web design says:
    May 22, 2009 at 11:40 am

    Thanks!
    I will try it in my next web design project.

  40. Bill says:
    May 26, 2009 at 4:53 pm

    Thank you so much for posting this. This gives me some ideas on how to create my own CSS-website.