HTML and CSS Guidelines

Basic Social Network Layout

Header

Contains the network's name, and tagline (if exists). Appears on all pages of network.

Body

The page content.

Sidebar

Contains account management functions when a user is signed in, or prompts to join if user is not signed in. This area also contains textual advertising, as well as any modules added by the network creator. Appears on all pages of network.

Footer

Additional links and copyright information. Appears on all pages of network.

Features within the context of the overall network

Features within the network lie exclusively within the body area of the network, and are linked from the main network navigation area. Features can also have corresponding modules on the main page and member profile pages.

Columns

Pages in a social network are based on a strict four-column grid. To ensure pages follow this layout, social network pages are laid out using defined column grouping (.xg_colgroup) and column (.xg_#col) element classes. These divide up the page, into which modules (.xg_module) or other content can be placed.

Example page layout and classes used.

HTML Overview

If you were to construct the layout depicted above, the following HTML structure would be used:

<div class="xg_colgroup">    <div class="xg_3col first-child">
        <div class="xg_colgroup">
            <div class="xg_1col first-child">
                <div class="xg_module">…</div>
            </div><!--/.xg_col-->
            <div class="xg_2col last-child">
                <div class="xg_module">…</div>
                                <div class="xg_module">…</div>
            </div><!--/.xg_col-->
        </div><!--/.xg_colgroup-->
        <div class="xg_colgroup">
            <div class="xg_2col first-child">
                <div class="xg_module">…</div>
            </div><!--/.xg_col-->
            <div class="xg_1col last-child">
                <div class="xg_module">…</div>
                                <div class="xg_module">…</div>
            </div><!--/.xg_col-->
        </div><!--/.xg_colgroup-->
    </div><!--/.xg_col-->
    <div class="xg_1col last-child">
        <div class="xg_module">…</div>
    </div><!--/.xg_col-->
</div><!--/.xg_colgroup-->

Element Definitions

.xg_colgroup

The containing element for a given number of columns (dependant on the width of these columns). A page can contain any number of column groupings, and can also be nested within columns (.xg_#col) to allow more complex page layouts.

.xg_1col, .xg_2col, .xg_3col

Three column elements that each have a corresponding width in pixels specified in the CSS. The width of each of these columns should add up to the width of the containing column grouping.

For example, if the column grouping is three columns wide, then you could have three .xg_1col, or one .xg_2col and one .xg_1col. The first xg_#col in each .xg_colgroup should be given first-child class, the last last-child.

Modules

Once we have defined the page layout using columns, we can use modules within these to contain page content. The containing module element (.xg_module) is typically divided into four distinct parts, although only .xg_module_body is required.

Module structure and corresponding visual appearance.

HTML Overview

The main components of .xg_module are structured and ordered as follows:

<div class="xg_module">    <div class="xg_module_head">
        <h2>Module Title</h2>
        <p class="edit">
            <a class="button" href="#">Edit</a>
        </p>
    </div><!--/.xn_module_head-->
    <form class="xg_module_options">
        <fieldset>
            <dl class="label-right">
                <dt>…</dt>
                <dd>…</dd>
                …
            </dl>
            <p class="buttongroup">
                <input class="button submit" value="Save"/>
                <input class="button" value="Cancel"/>
            </p>
        </fieldset>
    </form><!--/.xn_module_options-->
    <div class="xg_module_body">
        <h3>Heading</h3>
        <h4>Sub-Heading</h4>
        …
    </div><!--/.xn_module_body-->
    <div class="xg_module_foot">
                …
    </div><!--/.xn_module_foot-->
</div><!--/.xn_module-->

Element Definitions

.xg_module

The containing element for each module.

.xg_module_head (Optional)

The titlebar element. Should contain an edit link if this modules content can be edited/configured.

form.xg_module_options (Optional)

Module configuration options. Typically seen on the Main and Profile pages where the network creator/member can choose how to display content within this module.

.xg_module_body

Contains the modules content. Adding the pad class to this element will give the module more padding - useful for when a module takes up a whole page or is quite large.

.xg_module_foot (Optional)

Used to contain related links (RSS links, link to view more content etc.)

Icons

Throughout a social network, a number of icons are used to highlight specific links or features.

Icons can be styled in two ways. The .desc class applies an icon to a link (<a>) or text selection (<span>), whilst the .icon class applies an icon and hides the display of the associated text.

A second class (listed in the tables below), defines which icon is shown.

HTML Overview

<!-- Text with friends icon --><span class="desc friends">Friends</span>
<!-- Text with friends icon applied (description hidden) -->
<span class="icon friends">Friends</span>
<!-- Link with share icon -->
<a href="#" class="desc share">Share</a>
<!-- Link with share icon applied (description hidden) --> 
<a href="#" class="icon share">Share</a>

Typical Actions

Social Networking

Toggles

Pictorial & Miscellaneous

Validation & Error Handling

When validating forms, we provide the user with feedback as to where errors have occured by highlighting both the offending fields (adding .error classes to the offending <dl/> elements), and providing a message that descripes the problem in more detail (using the .errordesc class).

The .errordesc element must appear directly before the set of fields that have errors.

Example of a form requiring validation.

HTML Overview

<fieldset class="nolegend">        <div class="errordesc">
                <h4>There are problems with your profile</h4>
                <ul class="last-child">
                        <li>Please provide your First Name</li>
                        <li>Please provide your Country</li>
                        <li>You must accept the User Agreement to continue</li>
                </ul>
        </div>
        <dl class="label-right error">
                <dt><label for="first-name">First Name</label></dt>
                <dd><input id="first-name" type="text" class="textfield" size="30" style="width:420px" /></dd>
        </dl>
        <dl class="label-right">
                <dt><label for="last-name">Last Name</label></dt>

                <dd><input id="last-name" type="text" class="textfield" size="30" style="width:420px" /></dd>
        </dl>
        <dl class="label-right">
                <dt><label for="about">About You</label></dt>

                <dd><textarea id="about" rows="3" cols="30" style="width:420px"></textarea></dd>
        </dl>
        <dl class="label-right error">
                <dt><label for="country">Country</label></dt>
                <dd>
                        <select id="country" style="width:420px">
                                <option selected="selected">United States of America</option>
                                <option>Canada</option>
                                <option>United Kingdom</option>
                        </select>
                </dd>
        </dl>
        <dl class="label-right error">
                <dd><label><input type="checkbox" class="checkbox"/>I have read and accept theUser Agreement</label></dd>
        </dl>
        <p class="buttongroup">
                <strong class="left"><a href="#">Cancel</a></strong>
                <input type="submit" class="button" value="Submit">
        </p>
</fieldset>