Web style guide

Layouts

Standard content page layout

Our standard page layout has two columns:

a main column (on the left, 5/8ths width)
a side-bar (on the right, 3/8ths width).

When viewed on a tablet the two columns become half-and-half. When viewed on a mobile both columns take up 100% of the screen width, with the main column stacked on top of the side-bar.

This is where the main page content goes.

        Code
        
<div class="article">
    <!-- This is where the main page content goes. -->
</div>
<div class="side-bar">
    <!-- This is where additional or summative information goes. -->
</div>

Style B

Main content in this layout is split across columns

This is the second column

        Code
        
<div class="col-1of2">
    <!-- This is where the main page content goes. -->
</div>
<div class="col-2of2">
    <!-- This is where additional or summative information goes. -->
</div>

Special 1/3 layout

The special 1/3 layout is used for landing page preview menu.

Used for level 1 page body menu

        Code
        
<div class="col-3max">
    <div>
        <!-- 1 -->
    </div>
    <div>
        <!-- 2 -->
    </div>
    <div>
        <!-- 3 -->
    </div>
    <div>
        <!-- 4 -->
    </div>
    <div>
        <!-- 5 -->
    </div>
</div>

Special 1/4 layout

The special 1/4 layout is used for project cards.

used for project cards

        Code
        
<div class="col-4max">
    <div>
            <!-- content -->
    </div>
    <div>
            <!-- content -->
    </div>
    <div>
            <!-- content -->
    </div>
    <div>
            <!-- content -->
    </div>
    <div>
            <!-- content -->
    </div>
    <div>
            <!-- content -->
    </div>
</div>

Special 1/2 layout

The special 1/2 layout is used for profile banks

used for profiles

        Code
        
<div class="col-2max">
    <div>
            <!-- content -->
    </div>
    <div>
            <!-- content -->
    </div>
    <div>
            <!-- content -->
    </div>
    <div>
            <!-- content -->
    </div>
    <div>
            <!-- content -->
    </div>
    <div>
            <!-- content -->
    </div>
</div>