CSS Development Shortcut From Me To You

I’ve just uploaded pnh_tag_test.html (UPDATE: see note at end of post)

Its just a simple document that I thought I’d share… but for all its simplicity it does a lot of work.

So what is it?

Over time as part of my development process I’ve evolved a large file of HTML tags and content that gets included into the templates I build and used as a base for CSS coding and testing. Just use your favorite include method or copy & paste the content into your HTML document and start working.

Early in the development process, somewhere between evaluating a static PSD file and having functional templates there comes a time to code the styles for the display and typography on a page. Since a few paragraphs of lorem ipsum typically isn’t enough to work with, this expanded sample makes a great time saver.

But what continues to impress me is not the time saved in having a document with a bunch of tags already dummied up. It’s not the number of times I’ve dropped the file into a template and caught some sizing problems somewhere or that margins on adjacent elements aren’t playing well together. No, the real value has proven to be in the use of this document for review and reference further along in the process. Designers love seeing everything there in one place for them to comment on and it makes for an easy deliverable to keep clients involved with the build while you’re working out details with more complex content areas.

Surely its not the only tool in the development and review process, but for just a silly chunk of markup it has proven as an invaluable tool so I thought it time to share.

UPDATE 2010.08.15 An updated version of this file, which I still use often on projects, can now be found on GitHub in the PNHTagTest Project.

One thought on “CSS Development Shortcut From Me To You

  1. Thanks for sharing this Chris,

    It’s something I’ve thought about but never bothered to do. Seeing all the common html elements rendered on one page can only lead to more consistency and visual coherence, particularly with the typography. It also might prevent minor accidents later. I’ve already passed this on to my other developer colleagues.

    Simple is good.

    Ian

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>