This is both a test page and a guide as to the various styled elements available in the Boost web pages. And for self reference this is a [class="section-body"] div inside a [class="section"] div. Each [class="section"] div should have a corresponding "id", in this case the section is [id="intro"]. Feel free to copy elements from here onto other pages to quickly get the structure you want. And of more import please update this page if you add new content styles as it helps everyone with the website documentation.

Simple paragraph inside the section body [class="section-body"].

Heading 2

The image to the left uses a [class="left-inset"] as a shorthand for any floating inset element aligned at both top and left edges. — Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.

Heading 3

This image uses a [class="right-inset"] to as a mirror of the previous section for a floating inset element aligned to top and right edges. — Sed et lectus in massa imperdiet tincidunt. Praesent neque tortor, sollicitudin non, euismod a, adipiscing a, est. Mauris diam metus, varius nec, faucibus at, faucibus sollicitudin, lectus. Nam posuere felis ac urna. Vestibulum tempor vestibulum urna. Nullam metus. Vivamus ac purus. Nullam interdum ullamcorper libero. Morbi vehicula imperdiet justo. Etiam mollis fringilla ante. Donec et dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam mi libero, luctus nec, blandit ac, rutrum ac, lectus.

Heading 4

These are, hopefully all, the standard text markup styles. Note, these are not structural markup elements. I.e. these are the styles one sees to mark parts of the text inside a paragraph, like the "not" in the second sentence of this paragraph.

EM:

Indicates emphasis.

STRONG:

Indicates stronger emphasis.

CITE:

Contains a citation or a reference to other sources.

DFN:

Indicates that this is the defining instance of the enclosed term.

CODE:

Designates a fragment of computer code.

SAMP:

Designates sample output from programs, scripts, etc.

KBD:

Indicates text to be entered by the user.

VAR:

Indicates an instance of a variable or program argument.

ABBR:

Indicates an abbreviated form (e.g., WWW, HTTP, URI, Mass., etc.).

ACRONYM:

Indicates an acronym (e.g., WAC, radar, etc.).

Q:

Indicates a quotation possibly with sub-quotes.

SUB and SUP:

Indicates either sub_scripts or super^scripts.

INS and DEL:

Used to markup sections of the document that have been inserted or deleted with respect to a different version of a document.

Heading 5

There are a variety of HTML structural elements. This means that they do not tipically show with text flow. Bu tinstead show as individual block elements. This paragraph being an example. And the somewhat overused BLOCKQUOTE being another:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.

The Boost pages avoid the use of tables as a layout mechanism. This helps, and hurts, in a variety of ways. The most important benefit is the wider semantic access of the content. It means that the largest set of browsers will interpret tables as what they are; tabular content. The following convenient sample comes from the helpful HTML4 W3 standard:

CODE-PAGE SUPPORT IN MICROSOFT WINDOWS

Code-Page ID	Name	ACP	OEMCP	Windows NT 3.1	Windows NT 3.51	Windows 95
1200	Unicode (BMP of ISO/IEC-10646)			X	X	*
1250	Windows 3.1 Eastern European	X		X	X	X
1251	Windows 3.1 Cyrillic	X		X	X	X
1252	Windows 3.1 US (ANSI)	X		X	X	X
1253	Windows 3.1 Greek	X		X	X	X
1254	Windows 3.1 Turkish	X		X	X	X
1255	Hebrew	X				X
1256	Arabic	X				X
1257	Baltic	X				X
1361	Korean (Johab)	X			**	X
437	MS-DOS United States		X	X	X	X
708	Arabic (ASMO 708)		X			X
709	Arabic (ASMO 449+, BCON V4)		X			X
710	Arabic (Transparent Arabic)		X			X
720	Arabic (Transparent ASMO)		X			X

Heading 6

One of the most important elements of HTML is the hypertext link. In the Boost pages all links are treated in a similar, consistent, manner regardless of context as much as possible. Stylistic variations are present to account for color contrast differences in the context. For example the links in the header, and footer use different colors to match the text color and contrast as much as possible with the respective backgrounds. Within section content, like here, the links also provide differing look & feel based on wether they target the Boost web site, or some external web site [class="external"]. Since most of the time links are internal, that is the default semantic. External links need to be decorated with [class="external"].

• One

  This a "directory" unordered list [ul class="directory"]. It is styled to show a list of short items in as compact a form as possible. Currently that means the items are arrayed in two columns and items are packed to read left-to-right and top-to-bottom.

• Two

  Even though this an unordered list, one can also arrange any block elements in this way. The top container needs to be a [class="directory"] and the interior items [class="directory-item"].

Unordered Lists [ul]

This type of list is one of the most commonly used structural elements used. It's used for directory listing, history listings, table of contests, and many more. The goal is to classify the various lists by type with a [class="type-here"] attribute on the list [ul]. Please resist the urge to use a classification just because it has the particular look you want. As at some future point the look will change and you will have no say in the effect of the particular context.

Default [ul]

• Item 1
  • Subitem 1a
    • Subitem 1a1
    • Subitem 1a2
  • Subitem 1b
• Item 2
  • Subitem 2a
  • Subitem 2b

Directory [ul class="directory"]

• Item 1
  • Subitem 1a
    • Subitem 1a1
    • Subitem 1a2
  • Subitem 1b
• Item 2
  • Subitem 2a
  • Subitem 2b

Table of contents [ul class="toc"]

• Item 1
  • Subitem 1a
  • Subitem 1b
• Item 2
  • Subitem 2a
  • Subitem 2b

History [ul class="history"]

• Item 1
  • Subitem 1a
  • Subitem 1b
• Item 2
  • Subitem 2a
  • Subitem 2b

Menus [ul class="menu"]

• Item 1
• Item 2

Tree [ul class="tree"]

• Item 1
  • Subitem 1a
    • Subitem 1a1
    • Subitem 1a2
  • Subitem 1b
• Item 2
  • Subitem 2a
  • Subitem 2b

Preformatted [pre]

This is often used to show code examples, or more accurately fixed examples. For example the Boost Software License:

Boost Software License - Version 1.0 - August 17th, 2003

Permission is hereby granted, free of charge, to any person or organization
obtaining a copy of the software and accompanying documentation covered by
this license (the "Software") to use, reproduce, display, distribute,
execute, and transmit the Software, and to prepare derivative works of the
Software, and to permit third-parties to whom the Software is furnished to
do so, all subject to the following:

The copyright notices in the Software and this entire statement, including
the above license grant, this restriction and the following disclaimer,
must be included in all copies of the Software, in whole or in part, and
all derivative works of the Software, unless such copies or derivative
works are solely in the form of machine-executable object code generated by
a source language processor.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE, TITLE AND NON-INFRINGEMENT. IN NO EVENT
SHALL THE COPYRIGHT HOLDERS OR ANYONE DISTRIBUTING THE SOFTWARE BE LIABLE
FOR ANY DAMAGES OR OTHER LIABILITY, WHETHER IN CONTRACT, TORT OR OTHERWISE,
ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
DEALINGS IN THE SOFTWARE.