Rationale

Why are we providing a style guide?

• Coherent visual and editorial style. TDN should be a seamless coherent whole, not a hundred minisites. This makes it easy for people to browse, read, and digest information from the site.
• Future proofing and maintainability. We may need to switch CMS platforms or perform style upgrades in the future. Conforming to these guidelines will help make that as painless as possible; portable content is more valuable than hard-to-move content. And any value you add to TDN is value added to the whole Torque community.

Basic Formatting

In general, TDN content should be formatted in basic HTML. This includes: h1, h2, h3, h4, h5, h6, p, br, i, u, b, list tags (ul, ol, li) and table tags (table, tr, td, th). Where possible, especially in articles, content should be written so that it is easy to update and modify them. Legibility of content, both in source and in presentation, is of the utmost importance.

The major exception to this rule is for links, which should use the MediaWiki formatting (see the TDN Syntax Guide for more specifics), not a href tags. Images can be done using the img tag, but recommend you use the embedded upload functionality, which can be read about in the TDN Syntax Guide.

Limit your use of extra attributes on tags; ie, use CSS, color and other formatting tricks as little as possible. They make it more difficult to read and edit the articles and may break badly if the theme is different than the one you wrote in.

Use of templates to help format articles is strongly encouraged. For notes on template syntax, check out the TDN Syntax Guide

Below is a description of all official templates.

Templates for Formatting

Template:ContentStandard is the most basic template. It places your text into a 740 pixel wide table. An example of this template in action can be found in this very article, as it's formatted with Content Standard.

ContentStandardBlackRule is a simple, 740 pixel wide black rule which can be used to break up sections in longer articles. The black rule offers a break that a reader will interperet as a place to momentarily rest their brain and reflect on they just read; something especially important on longer articles. Again, you can look to this very article for an example of its use. The different sections are seperated by Template:ContentStandardBlackRule.

Template:ContentBlockoutA and Template:ContentBlockoutB should be used together for complex articles that dont use images over 480 pixels wide. ContentStandard should be used for all paragraph/blocks of text except blocks of text that need to have a blockout next to them.

Here is an example to better illustrate use of these two templates.

Template Example

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus justo. Sed neque tortor, laoreet vitae, condimentum eget, nonummy a, felis. Nunc id tellus. Nam egestas. Integer sed quam vel ligula consequat faucibus. Sed mollis. Maecenas vel sem. Nunc egestas velit ac nibh gravida consequat. Nunc et libero. Donec eget ipsum nec erat bibendum dictum. Fusce eget nunc ut lacus suscipit faucibus. Nullam consectetuer purus vel nibh. Etiam sem nulla, consectetuer posuere, ornare ut, suscipit ut, odio.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus justo. Sed neque tortor, laoreet vitae, condimentum eget, nonummy a, felis. Nunc id tellus. Nam egestas. Integer sed quam vel ligula consequat faucibus. Sed mollis. Maecenas vel sem. Nunc egestas velit ac nibh gravida consequat. Nunc et libero. Donec eget ipsum nec erat bibendum dictum. Fusce eget nunc ut lacus suscipit faucibus. Nullam consectetuer purus vel nibh. Etiam sem nulla, consectetuer posuere, ornare ut, suscipit ut, odio.

Ut elementum erat et quam. Mauris viverra erat hendrerit augue. Morbi vitae felis vitae massa fringilla tempus. Duis sapien. Vestibulum sed est nec ipsum egestas egestas. Nulla eu nisl. Mauris feugiat justo id erat. Pellentesque porta libero nec odio. Aenean placerat sem eu metus. Pellentesque ullamcorper rutrum nunc. Curabitur ut nibh. Proin tellus ante, rutrum vitae, ullamcorper a, convallis ut, purus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

In the above example, the top two paragraphs are being held within Template:ContentBlockoutB, while the bottom two are within Template:ContentBlockoutA. As you can see, ContentBlockoutB's job is to keep the text within the same margins as ContentBlockoutA, giving the blockouts their own unique space. This is important because if the you'd be less likely to notice the blockouts if regular article text wandered in and out of right margin. Blockouts are typically important so they need every opportunity to be noticed by a reader.

It's important to note that the blockout itself will be aligned with where ever the template is activated. If you don't need a blockout until halfway through your article, use ContentBlockoutB until you are ready to have your blockout to appear.

Finally, a note on custom content. As shown in the TDN Syntax Guide, templates can be set up to have different areas which use custom content. ContentBlockoutB has a single space for all your content (which is for the paragraph/s or block of text you wish to format). ContentBlockoutA has three spaces. The first space is for your block of text, the second is for the blockout title, and the third is for the blockout content. View the TDN:Getting Started guide or go into edit mode on any page which uses these templates if you need assistance with setting them up.

There is another template which can improve organization and readability when used with ContentBlockoutA and ContentBlockoutB; Template:ContentBlockoutBlackRule.

ContentBlockoutBlackRule is similar to ContentStandardBlackRule except it's smaller to reflect to width of the templates it's used with. An example of it's use:

Example Header 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus justo. Sed neque tortor, laoreet vitae, condimentum eget, nonummy a, felis. Nunc id tellus. Nam egestas. Integer sed quam vel ligula consequat faucibus. Sed mollis. Maecenas vel sem. Nunc egestas velit ac nibh gravida consequat. Nunc et libero. Donec eget ipsum nec erat bibendum dictum. Fusce eget nunc ut lacus suscipit faucibus. Nullam consectetuer purus vel nibh. Etiam sem nulla, consectetuer posuere, ornare ut, suscipit ut, odio.

Example Header 2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus justo. Sed neque tortor, laoreet vitae, condimentum eget, nonummy a, felis. Nunc id tellus. Nam egestas. Integer sed quam vel ligula consequat faucibus. Sed mollis. Maecenas vel sem. Nunc egestas velit ac nibh gravida consequat. Nunc et libero. Donec eget ipsum nec erat bibendum dictum. Fusce eget nunc ut lacus suscipit faucibus. Nullam consectetuer purus vel nibh. Etiam sem nulla, consectetuer posuere, ornare ut, suscipit ut, odio.

Templates for Unfinished Articles

There are a few other templates which have can be used under certain circumstances. The first is Template:WIP. WIP will place an orange banner which labels the article as being a work in progress. If you wish to add this to your article, place the call at the first line so as to make the banner appear at the top of the page; This will ensure that any reader will know first hand that the article is still being developed.

Along the same lines is Template:ComingSoon. ComingSoon will place a message that the article is in development, but coming soon. This is useful for when you have a minimum amount of work done on an article that you don't wish to post until it's further developed. ComingSoon has two custom blocks; The first is for the title of what is coming soon and the second is for the estimated date when it will be ready.