2.2: Learning the HTML grid

The grid layout for your 23 site is rendered to conform to a specific HTML layout, which is designed to allow your site to easily render correctly in any modern browser without you having to do too many styling hacks.

The general HTML structure is described below as is the subspecific structure, but as this documentation only covers the general structures, you are advised to use an HTML inspector like Firebug for Firefox or the native HTML inspectors of Google Chrome or Apple Safari to determine specific structures. These also allow you to easily trace the CSS when necessary, which further eases your work.

General HTML structure

The general HTML structure of a 23 site is structured acording to the diagram below, which can also be downloaded as the 23 Video design cheatsheet for ease of use in design processes.

Generally speaking, the body element of the site has a class of either "blog", for Visualblog, or "tube", for 23 Video, and an ID identifying the current content of the displayed page. The specific ID can be identified by looking at the source code of any page.

The entire page is wrapped in a div with the ID #frame, from where it is subdivided into three main divs of the following ID's:

Main content HTML structure

No matter the use of sidebars or not, the central HTML element of the main content area is always a div with the ID of #content, which contains a div with the ID of #contentsub. The #contentsub div contains the main content blocks.

When using the left sidebar, a div with the ID of #leftsidebar is inserted to the #mainsub div, which contains a div with the ID of #leftsidebarsub. The #leftsidebarsub div contains the left sidebar content blocks. The same applies when using the right sidebar, albeit for legacy reasons, the ID is #sidebar rather than #rightsidebar, and the sub-div's ID #sidebarsub.

Block layout structure

Every block, except for HTML blocks, are wrapped in a div with a unique ID designated as block<unique block ID>, for example block14951. Furthermore, every block has the class layout-block, and a block-specific class, usually starting with block- — please refer to the actual blocks in the source code to find the specific elements. In the case that a block is empty, the class layout-block-empty is appended to the block wrapper div.

The basic HTML layout for a block wrapper as according to the above is as follows:

<div id="block<unique block ID>" class="layout-block <block-specific class>[layout-block-empty]">
  ..
</div>

• Download the 23 Video design cheatsheet