DivitoDesign

Everything for the Web Professional

Building HTML/CSS Sites: Use a Template

February 27, 2009 59 Comments →

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<!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.

1
2
3
4
5

<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:

1
2
3
4
5
6
7

<!-- 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.

1
2
3

<!-- 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:

1
2
3
4
5
6
7

<!-- 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.

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

<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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

Project:
Description:
*/

I think next, a table of contents is appropriated:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

/*
---------------------------------------------------------------------------------------
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:

1
2
3
4
5
6
7
8
9
10
11
12
13

/*---------------------------------------------------------------------------------------
--- 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. 

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99

/*---------------------------------------------------------------------------------------
--- 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.

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
28
29
30
31
32
33
34
35
36
37
38

/*---------------------------------------------------------------------------------------
--- 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.

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
28
29

/* ------------------------------------------------------------------------------------
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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

/* ------------------------------------------------------------------------------------
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:

1
2
3

/* ------------------------------------------------------------------------------------
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!

Information about the Author:

Name:

URL: http://twitter.com/divitodesign

Description enjoy design, write articles, like typography, love football, keep chilling.

More on: CSS

59 Comments

  1. Dan says:
    July 25, 2010 at 8:44 am

    I really think that you’ve done a good job with this wordpress site it looks really good and you have a ton of great information as well, I know I found what I was looking for anyway. Just thought I would take the time to comment, again keep up the good work

    Reply
  2. Kars says:
    September 1, 2010 at 7:26 am

    Thanks for sharing, this brings some structure into my design projects ;)

    Reply
  3. Link Building - Felipa Guzmdn says:
    September 29, 2010 at 3:55 am

    I couldn’t agree more. So where do you find the best link building services? At the best prices?

    Reply
  4. CarolineRose says:
    October 4, 2010 at 12:04 pm

    Lovely! you did a great job. I tried this. Really its helped me a lot. Thanks

    Reply
  5. Case Study: Revamping an Existing Site « DivitoDesign says:
    October 5, 2010 at 9:13 pm

    [...] year I read this very useful article about building HTML/CSS sites using a template. This template has a grid CSS layout and the jQuery framework build in. I had seen those before, [...]

    Reply
  6. Aaron S. says:
    January 6, 2011 at 8:35 am

    Excellent information! I’m more of a marketer than a developer, but I’m trying to learn. Thanks for the code snippits!

    Reply
  7. Jinny says:
    May 8, 2011 at 7:17 pm

    Really great article. I am a new learner and bounced to your site from one of the videos I was watching. Thanks for the codes and will keep working :)

    Reply
  8. Mohammed Ali says:
    June 18, 2011 at 9:24 am

    I follow all the steps and I find it interesting!
    My question is How would I include the css file to my home page so that it will be calling it all the time?
    Thank you!

    Reply
  9. Will Roque says:
    July 30, 2011 at 3:56 am

    Your template available for download is no longer working. Bad for me, as I’m just a beginner at webdesigning.

    Thanks for your teachings.

    Reply
  10. Catharine Gilbride says:
    October 14, 2011 at 8:43 pm

    hi!,I love your writing very a lot! percentage we keep in touch extra approximately your post on AOL? I need a specialist in this house to resolve my problem. May be that is you! Taking a look ahead to look you.

    Reply
  11. CSS Sites says:
    November 3, 2011 at 8:22 am

    Wow! Such a good infomation.

    Reply
  12. Anand says:
    December 8, 2011 at 1:39 pm

    Great learning css…… Thanks for info

    Reply
  13. marc says:
    December 8, 2011 at 8:01 pm

    was looking for something completely different as i stumbled upon this site. but as i was reading it made a whole lot of sense as i’m still quite new to web design. thanks, very useful info

    Reply
« Older Comments

Please Respond and Give your Opinion

We use Gravatar to handle our avatars. Get one there!