Time to get rid of another couple of shortcuts on my Windows desktop that have been parked there far too long:
- MDC style guide - MDC
http://developer.mozilla.org/Project:En/MDC_style_guide - Custom CSS Classes - MDC
http://developer.mozilla.org/Project:en/Custom_CSS_Classes
When I stumbled upon these pages a few years ago, I immediately thought of that quote from the old Guinness commercials:
Brilliant!
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.
Figure 1: Snippets in Expression Web
