Creating Your Own XHTML & CSS Framework




A lot of developers like to use a framework when they code. While frameworks can save you valuable coding time, I believe using pre-made frameworks to sometimes be limiting and unproductive.

Of course, I’m talking about pre-made HTML and CSS frameworks like Yahoo’s YUI or the 960gs framework, not WordPress, Drupal or some full-featured CMS.

XHTML and CSS Framework

While this may seem harsh, it’s true. If you’re business is based on handwritten, clean and accessible code, I personally feel like it’s cheating to use someone else’s code. It’s also never as clean because it’s someone else’s coding style mixed into yours. To use one of these frameworks requires that you either change the code each time to fit your style, or that you change your style of coding to fit theirs. You’ll also end up deleting a lot of what’s included in the framework because you probably won’t need it.

Of course, frameworks are great for saving coding time. So why not give yourself a leg up by creating your own barebones version? Creating a custom framework allows you to get the best of both worlds: you’ll save time when starting a new site and the code will be optimized and clean and exactly the way you code anyways.

The Header File

The best time to start your new framework is when you’re starting a new site. Take a few extra minutes to set up your framework.

We’ll start with the HTML and the header template. In my own framework, I like to keep what I use on 90% of the sites I build: all of the head data and divs for the header, logo and container. Here’s a look at my PHP header file:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Title</title>
<meta name="description" content="" />
<meta name="keywords" content="" />

<link rel="stylesheet" href="main.css" />
</head>

<body>

<div id="container">
	<div id="header"><a title="" href="index.php"><img src="images/logo.jpg" alt="" /></a></div>
    
    <ul id="nav">
    	<li><a class="home active" title="" href="index.php"></a></li>
    </ul>

You can see that I’ve got all the necessary tags for most header pages, but have left the client specific info out. This allows me quickly set up a new site, while still allowing me to move stuff around without losing time.

Of course, you can place anything you think you need in any of these files. The goal is to create something that will work for you, so you don’t have to follow my format perfectly, or even at all.

The Footer File

The footer file, just like the header file, also contains the bare structure of what I use for most of my sites. It looks like:

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

</body>
</html>  

With both of these files, most of the time consuming markup is finished and validated. All that’s left to do is the main site struture.

The CSS

Using a CSS file in your framework also gives you a head start in coding. I like to keep my CSS file with a reset and the basic section structure. If the site is complicated, I’ll further section off the sub pages by page name, if not, all of the sub page styles will rest under “sub pages”.

/*****CSS RESET*******/

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: ''; content: none; }
:focus { outline: 0; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: 0; }

/****BODY STYLES********/

body { font-family: Arial; font-size: 14px; color: #3A454F; background: url('images/bkgHome.jpg') repeat-x #FFF top; }

p { line-height: 17px; }

h1 { font-size: 30px; }

#container { margin: 0 auto; width: 800px; }

/****HEADER STYLES*******/
/*****NAV STYLES*******/
/*****FOOTER STYLES*******/
/*****HOME CONTENT STYLES*******/
/*****SUB CONTENT STYLES*******/

I’ve also got just a few body styles to speed things up further. You really can’t do too much in a CSS file, as you never know if the site is 1, 2 or 3 column, if the nav is on top or below the footer, etc… I try to minimize the amount of deleting that I have to do in my framework, which is why I haven’t added more styles in.

Storing Your Framework

Now the way you store and access your framework will also determine how quick and useful it is, or if it’s just something you forget and never use.

For my regular static site framework (the one I just showed you), I keep it in my “Clips” section of my Coda IDE. If you have an IDE with a similar feature, keeping it there is the quickest way to access it as you don’t have to look through files or open anything to use it.

If your IDE is without this feature, keeping it in a labeled folder in your code library (or wherever you keep you useful pieces of code) should work well.

Creating Multiple Frameworks

Creating your own framework can be useful for more than just static sites. I also work in WordPress and my WordPress framework is a lot more extensive than my static one. It’s basically a blank theme with the necessary files and loops, along with the framework code above, to quickly set up my own theme. This will also work well with Drupal, Joomla or any other CMS you use.

I keep my WordPress theme framework inside of a folder, along with the customary WordPress files. This framework I actually made from a modified version of the standard Kubrick theme, which allowed me to quickly edit the code to my style, clean it up and validate it. This framework probably cuts my coding time in half, as it also contains functions I use often, so I don’t have to spend time looking up code.

Make Your Own!

So now it’s time for you to make your own framework! Throughout the years I’ve found that it’s a waste of time trying to adapt a pre-made framework to a site, it rarely works well and you end up spending more time fighting to get the framework to fit, than if you had just coded the site from scratch.

Using something you’ve built ensures it works, remains elastic for all of your sites, contains the same coding style and saves you time for each site you build.

You should also aim to edit and improve the framework every few months or so, as your coding normally changes and adapts from site to site!

I hope you enjoyed this post! Please make sure to leave a comment below and tell us how you do it :)


Amber Weinberg

About the author:

Amber is a freelancer with over 10 years of experience and specializes in clean, semantic and valid 1.0 Strict XHTML, CSS and Wordpress development. She also writes a web development blog on her portfolio at www.amberweinberg.com.

Comments:

Scroll back to the top
Content


Receive the top stories from SpyreStudios and the Splashpress Media network every week, right in your Inbox. Relevant and timely content is yours for FREE!