XHTML/CSS Starter Kit

So I have been toying around with the idea of creating a starter kit for web design projects. After listening to the Boagworld podcast I was inspired to organize a default set of XHTML web templates, CSS stylesheets, images and javascripts that I use over and over in my design as a starting point for when I start a new site. While I definitely have my own way of doing things, I thought it would be great to have some sort of community backed/tested set of templates that all web designers could use that would cut down on a lot of the repetitive work that we do as well as hopefully be a useful guide to starter web designers to get their feet wet (and hopefully steer them away from creating sites based on table layouts or sites that don’t don’t follow standards. I AM NOT TRYING TO MAKE A FRAMEWORK, and I have examined a couple frameworks and probably would like to support one. I am trying to make something that will save web designers time and effort when starting new projects.
Goals

  1. Provide a centralized, versioned set of XHTML templates with standard configurations (two column, three column, three rows)

    XHTML Files (As Few As Possible)
    CSS Files
    Graphics – Any Layered Images Provided – Any Fonts Used Provided

  2. Standard JavaScript Libraries
  3. Manage the templates through svn or some method of source control
  4. Document the templates through some sort of wiki
  5. Provide the templates by default with as little “individuality” as possible (I am not looking to make web templates for production to design a site, this should be a foundation not a “template” package)
  6. Provide a method for “style” packages to be made and dropped in for those who do want to make templates : Naming Convention on Graphics: Naming Convention on IDs and Classes
  7. Templates created with search engine optimization in mind – while I wouldn’t violate any standards to improve SEO I think some basic principles such as tagging styles, order of content etc can be kept into mind.

Before I start such a project I am going to put this out there to the web design community to see if there is interest as well as get some feedback on some following items:

1. Transitional Versus Strict Markup – What should the default templates support. I am leaning towards strict by default as that is basically what everyone should be trying to do, however transitional is much more of the standard.

2. Graphic Design – While I want to stay away from the default out of the box templates from having styling in that I don’t want to encourage a bunch of clone sites out there, I think that certain elements like gradient backgrounds or perhaps basic icons like RSS or print should be included. I would want all these elements to have the source files included as well as be licensed for use. Should I include this or not?

3. JavaScript Libraries – I want to include some standard JavaScript libraries like prototype, scriptaculous and maybe moo.fx. These of course don’t have to be included in the templates, however I would think that it would be a benefit to have the latest and the greatest included for ease of use. Are there any other JavaScript libraries I should be concerned about?

4. Microformats – Should some standard templates for Microformats be included? If so what.

5. File Structure – Is there an accepted file structure that would be the most beneficial? What about naming conventions for the files and folders (Examples stylesheets in “css”, images in “i”?)

6. Framework – I would think it would be beneficial to support an existing framework.. build off of someone’s research is always a good place to start. I shows this CSS Framework by Joseph Fritz on the Boagworld Forum I would like to get some feedback on what other people think.

7. Expandability – I would really like to build the structure so that people could easily drop in components if they want like a lightbox component or something like that. I would want to see what would be the best structure for something like that. This would also hold true to people who perhaps want to offer graphic sets. Does this stray too much away from the goal? Thoughts and feedback are appreciated.

8. Distribution – How should versioning be handled… as a set? Per file? Source Control?

9. Browsers & Platforms – What browsers should the templates be tested on? I know all the standards but what about mobile stuff? Should have have a mobile template?

10. Last but not least I need a catchy name for the project :)

Well I hope this will peak some peoples interest and hopefully get some feedback.

About Lynn Wallenstein

I create things and make things better. Thats and interesting title huh? Well thats what I do. I head my own freelance/consulting firm, Powered By Geek. I am the main idea gal and I make things pretty. This blog is where I ramble about all things design, code, project or whatever both for PBG and for my collection of personal projects.

Contact Me
My Portfolio
Buy Me a Coffee