FreeStyle Layout

HTML Structure

This page guides you through the HTML div structure from the outside in to give an overview of what you will be styling.

 

Disclaimer: We believe in minimal markup and lean HTML however for the purposes of this template and to meet CSS coders of different skill levels halfway we have provided a lot of structural markup and CSS hooks to help. The overall effect on pagesize is not too great and is certainly smaller in file size than a table-based layout would be. You will not need to style all of these extra divs.

 

 

Layout

There are some conventions to get your head around to get you going with your overall layout.

The following image shows you the outlying div structure with ids and class names indicated. For the rest of the documentation we will refer to this level of structure as **LAYOUT**. At this level we have:

  • #header
  • #primary
  • #secondary
  • #tertiary
  • #footer

<body>
    <div id="wrapper">
      <div id="header">
        **CONTENT**
      </div>
      <div id="inner-wrapper">
        <div id="primary" class="primary">
          **CONTENT**
        </div>
        <div id="secondary" class="secondary">
          **CONTENT**
        </div>
        <div id="tertiary" class="tertiary">
          **CONTENT**
        </div>
      </div>
      <div id="footer">
        **CONTENT**
      </div>
    </div>
  </body>

These containers are what you can use to create your columns with. **It is recommended not to set any padding or margins on these divs** (unless you know what you're doing of course, then it's up to you). Horizontal padding and margin add to the width you set on elemtns and widths must be accurate when creating CSS layouts.

 

Content

The second level of layout comes within each of the main layout divs (some of which may be useful to you for fluid 2+ column layouts.

 

This set of divs begins right inside the inner-most **LAYOUT** divs. This level of the structure will be called the **CONTENT** because it wraps all the main page content.

 

<div class="content">
    <div class="ctl">
      <div class="ctr"></div>
    </div>
    <div class="inner-content">
      **BOXES**
    </div>
    <div class="cbl">
      <div class="cbr"></div>
    </div>
  </div>

The class names .ctrl, .ctr, .cbl and .cbr are part of a short-hand notation that you will see variations of as you continue to read. The 'c' stands for **CONTENT**, while 'tl' stands for 'top left', 'tr' for 'top right', 'bl' for 'bottom left' and 'br' for 'bottom right'. The purpose of these <div>s is to give you an easy mechanism for creating your design, You may want to make a fluid design with rounded corners on the main sections. See the default style sheet in action for an example of fluid rounded boxes (in this case used on **BOXES** detailed below).

 

Boxes

Within **CONTENT** there is one final level of <div> layout with a few exceptions.

We shall refer to this level of structure as **BOXES** because this is the construct that surrounds individual sections of the site for example, menus, shopping basket, forms etc... and you may want this extra level of markup to help you achieve your design. As mentioned before see the default style sheet in action for an example.

  • NOTE:** The outer <div> which has the class name .box will also have an id to indicate what the box contains e.g. top-search, product-list, basket, my-details and so on.

<div class="box">
    <div class="tl">
      <div class="tr"></div>
    </div>
    <div class="inner-box">
      .....
    </div>
    <div class="bl">
      <div class="br"></div>
    </div>
  </div>

You can see a list of all the **BOXES** and their respective ids on the Boxes page which should be your next port of call. This page includes the exceptions mentioned earlier.

 

Sub Layouts

the following is a list of common patterns you will find within the main content area or within BOXES.