Technology Toolbox

Your technology Sherpa for the Microsoft platform

Jeremy Jameson - Founder and Principal



Website style guide, custom CSS classes, and HTML snippets

Time to get rid of another couple of shortcuts on my Windows desktop that have been parked there far too long:

When I stumbled upon these pages a few years ago, I immediately thought of that quote from the old Guinness commercials:


I doubt the Mozilla folks were the first to fomalize their style guide and CSS rules into a "document" like this, but kudos to them anyway for sharing their work with the rest of us.

It inspired me to start creating style guides for websites and Web applications that I work on. You can see an example in one of my previous posts. In retrospect, I should have referenced these sources in that post but, well, I somehow forgot. Lo siento.

In the Template.aspx page that I use for creating new blog posts, I include sample HTML blocks that demonstrate the custom CSS classes used throughout my blog posts. These HTML blocks are very similar to those shown in the style guide from my earlier post, so no sense repeating them here.

To quickly insert commonly used HTML fragments into blog posts (including custom CSS classes), I created some custom snippets in Expression Web. Yes, I still use Expression Web for authoring blog posts rather than using the rich HTML editor in Subtext.

One reason for this is that I'd much rather have a WYSIWYG experience when writing content for the Web. I also discovered that the version of the HTML editor in Subtext 2.5 royally screws up preformatted content (i.e. <pre> elements) -- which my blog tends to have a lot of. Consequently I ended up disabling that feature entirely. Note that this is not Phil's fault -- he simply used one of the freely available rich HTML editors. Oh, and if it makes you feel any better, I found that Visual Studio 2010 also screws up <pre> content :-(

I find these snippets to be faster than copying/pasting HTML from the content included in the Template.aspx file.

Here is a screenshot that illustrates the snippets I've created.

Snippets in Expression Web
Figure 1: Snippets in Expression Web


No comments posted yet.

Add Comment

Optional, but recommended (especially if you have a Gravatar). Note that your email address will not appear with your comment.
If URL is specified, it will be included as a link with your name.

To prevent spam from being submitted, please select the following fruit: Apple

Please add 8 and 4 and type the answer here: