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

Comments

  1. says

    I do not like to use others frameworks because I know when it all comes down to it I cannot take all credit for it so I like to create my own framework and reuse it from time to time. I do use eric meyers css reset though :)

    Great article Amber! :)

  2. says

    This is a great idea and something I started doing recently. ALthough I use 960.gs as my CSS framework of choice, I have a folder I can just copy which has all the basic files and directories in place so I don’t need to worry about downloading and linking new libraries and frameworks.

    I also do this for other types of sites, so I have a barebones CodeIgniter application with my custom modifications made so I can dive right in, some basic customisations to a stock wordpress install etc

    Definately worth doing!!

  3. says

    I appreciate your work. But in comparison with other common frameworks like 960gs, blueprint, etc,. your “framework” is a different type of framework. Do you know what’s major difference between your framework with ALL other existing framework?

  4. says

    I love not having to reinvent the wheel. Frameworks have reshaped my thinking. I believe that a good developer and programmer uses what’s already available in a totally new way!

  5. says

    Taking 960.gs as an example, frameworks are optimised chunks of CSS that are modular and meant to greatly speed up the process of prototyping websites. Although the full 960.gs CSS should never really be used in a production environment because most of the time a large part will never be used on your website, there’s no sense why it’s structure cannot be applied to a website with a semantic focus.

    Have you ever used this framework? I was skeptical too, but I gave it a shot and never looked back; it really helps design on a grid, enhancing usability and giving your site the professional edge. The grid system is based on pixel widths and relative positioning, with each column having a 10 pixel gutter on each side. It’s completely modular and you can use whatever HTML that you desire; as I said, using the grid_X syntax in production is a daft idea but the concept can have a profound impact on how you design websites.

    Even if you don’t go the 960.gs route, you cannot deny that it gives you a powerful tool for giving you a semblance of an idea of how you’re going to lay out a site. It is a foundation framework that allows you to build exactly the site you want on top of it as it controls nothing else apart from content hierarchy.

    Just because you use 960.gs you don’t have to adhere to exactly the same code every time!

  6. says

    Wanted to stop reading after:

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

    YUI is a javascript framework, YUI Grids is probably more relevant to the point you are trying to make. It’s hard to call a set of Coda clips a framework, or do you just like the word?

  7. says

    @Ben I’ve checked several frameworks out, but their code has never been more clean or optimized than my own. Some frameworks, like Thesis for WordPress had terrible code and were an absolute pain to work with.

    I believe that if you’re a truly great developer and it’s what you do for a living, you should make your own framework. If you’re a backend programmer or a designer, using a framework to help yourself out is ok, but a specialist in CSS/HTML should see no benefit from using one, since they should already be using semantic and optimized code.

    ‘Course as the saying goes, different strokes for different folks ;) it’s just my personal opinion. It just, to me, is like using training wheels on your bike when you’re an adult.

  8. Markus says

    This is not a framework! As you state yourself it’s basically a blank template. If you have a look at the 960 page they don’t use the word framework at all.

    When using a framework you embed your code into the framework. Or in other words, your code doesn’t use the framework (that would be a library), the framework makes use of your code in an automated way.

    There seems to be a common misunderstanding in the design community about some developement specific terms.

  9. marcus kielly says

    “I believe that if you’re a truly great developer and it’s what you do for a living, you should make your own framework”

    As a training exercise maybe, but any developer who has worked in a team will probably not agree with that sentiment. Standard frameworks set standard methods for teams to work to – so no one has to get their head round coding style #3299821292.

    If you think you should write code from scratch, why have you used jQuery and Shadowbox?

  10. says

    Amber, I think you missed my point which is that using 960 as a baseline grid can be really effective as a starting point for a design. Even if you disagree with the concept of a fixed grid and prefer a fluid one there are many advantages in using the framework, one of which is ultimately creating a more organised site.

    Using the grid (12 columns of 60px with a 10px gutter on either side) helps to organise your content and dictate things like image width. Now I could spend the time reinventing the wheel and designing my own grid but this one suits me perfectly.

    Oh and trust me, I’ve been involved with website design for around six years and know my way around CSS; there’s no way I would have been able to use this grid when I was first starting out as it’s not a “training wheels” framework!

  11. Jodi says

    Great article, Amber, as usual. I just set up and organized my set of “templates” a few weeks ago and am amazed at how much time it saves me!

  12. says

    I think this is a cost/benefit equation we all have to balance for ourselves.

    For me, the feasibility of a framework seems to drop off quickly once we leave anything that can be called programming or scripting and start getting into stuff that (I feel) needs to be semantically meaningful.

    CSS frameworks rely on presentational class names, seemingly by definition, and I just can’t go there. The majority of clients wouldn’t know or care, but for me it turns the purpose of CSS on its ear. If I want to change the navigation from x columns to y columns I have to change the class name in the mark up on every page. So it’s not just unsemantic, it runs counter to the way I understand and use the language.

    I can’t even conceive of an HTML framework above and beyond some very simple top level stuff like what Amber is talking about here.

    However, jQuery presented unobtrusive scripting in a way I could grok almost instantly and has been a major game changer for me professionally. And while I haven’t used them yet, I think I’ll eventually find a similar eureka moment with something like Cake PHP or CodeIgniter.

  13. says

    Great article. I can understand the logic in creating pre-defined masters for your sites. It is intelligent to do so, saving time and consequently money. I totally recommend the techniques discussed here. Kudos to Amber, great stuff… Keep it coming..!

  14. says

    Once again, might I commend you on an article that is presented in a way that both descriptively illustrates your topic and introduces time saving measures.

  15. says

    Thanks. Great artickle. I like this idea of creating your own framework, or whatver people will call it. This is a real time saver and something I myself should have started doing long time ago.

  16. Shameed says

    Hi Amber, this is a good idea to using pre made template as our own but in design part i like 960gs which will give idea to our images, and width of coloums

  17. says

    Till now, I have never used a framework as such to start developing a site other than when am developing a theme. For theme development in wordpress, I have always used the Starker’s theme. It acts like a framework only as he has stripped down the theme to just basic template files etc. :) Interesting post though..

  18. says

    While it may save some time actually doing the coding, learning to do it will also take time at he start. If you can afford the luxury, it is always worth it to learn some new skill.

  19. says

    Thank you! I needed a quick and dirty maintenance page. As in, “Crap, I wasn’t ready to switch nameservers after all.” I’m not a coder and Googling for basic pages only brings up complicated prettified stuff. The pretty stuff wouldn’t work because it would look unfamiliar to my visitors — I just wanted a basic framework I could slap my own header and some text into that wouldn’t look too 1996. Worked like a charm. Thanks!

  20. says

    Who cares if you can take credit for the code or not. The whole “not invented here” complex is dumb and stops us from doing our best work. If you can leverage an existing framework or codebase to afford you the breathing room to express your ideas faster and more effectively then go for it and who cares who gets credit for the CSS.

Trackbacks

  1. Creating Your Own XHTML And 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….

Leave a Reply

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

* Copy This Password *

* Type Or Paste Password Here *