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
- 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 - Standard JavaScript Libraries
- Manage the templates through svn or some method of source control
- Document the templates through some sort of wiki
- 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)
- 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
- 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.




December 4th, 2006 at 3:18 am
[...] http://lwallenstein.poweredbygeek.net/2006/12/04/xhtmlcss-starter-kit/ [...]
December 4th, 2006 at 8:18 am
Well first… I think this is an awesome idea. Everyone has something they use as a starting point, and this is a great opportunity to come together as a community and make it better for all of us. Couple of thoughts…
2. try and keep the gradients at bay. you should revisit the “web 2.0 design toolbox,” then run in the opposite direction.
8. Source control sounds like a great idea.
9. I’d stay away from mobile… it, like, quadruples your QA time
December 6th, 2006 at 10:01 am
I’m totally for this idea. I have attempted to make a few boiler plates for myself but I often find myself ditching them almost entirely. I think the goal should be to keep the starter kit as light weight as possible. I hate it when I extract some sort of web “make your life easier” package to then see 50 nested folders with hundreds of files in each. It just makes it too difficult to get your head around it.
January 16th, 2008 at 7:48 am
I found this topic in my search for exactly whats been mentioned.
I am a complete novice but trying to start off on the right foot by designing in css xhtml web standards.
As well as being a good starting point it would also be a fantastic learning resource for newbies.
I also am aware of scriptaculous and mootools and think they should be included as you can spot these all over sites these days.
Another popular standards script in large use is lighbox.
hope to see something soon.