'' 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 ''

''s.// ===== 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 ''

'' structure with ''id''s 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'' {{dev:main-layout.jpg|}}


  
    
      
        **CONTENT**
      
      
        
          **CONTENT**
        
        
          **CONTENT**
        
        
          **CONTENT**
        
      
      
        **CONTENT**

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 are doing of course, then it's up to you). Horizontal padding and margin add to the width you set on elements and widths must be accurate when creating CSS layouts. ===== Content ===== The second level of layout comes within each of the main layout ''

''s (some of which may be useful to you for fluid 2+ column layouts. This set of ''

''s begins right inside the inner-most **LAYOUT** ''

''s. This level of the structure will be called **CONTENT** because it wraps all the main page content. {{dev:content-layout.jpg|}}


  
    
      
    
    
      **BOXES**

The class names ''.ctl'', ''.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 ''

''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 [[http://www.testmain.quickorder.dev.versatilia.com|default stylesheet 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 ''

'' 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 [[http://www.testmain.quickorder.dev.versatilia.com|default stylesheet in action]] for an example. **NOTE:** The outer ''

'' which has the class name ''.box'' will also have an ''id'' to indicate what the box contains eg. ''top-search'', ''product-list'', ''basket'', ''my-details'' and so on. {{dev:box-layout.jpg|}}

You can see a list of all the **BOXES** and their respective ''id''s on the [[.:Boxes|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. * [[.:layout:body]] The page heading, copy and the extras that may be attached. * [[.:boxes:product-list]] The product list * [[.:boxes:basket]] The baskets use essentially the same HTML because they should be made to look the same. * [[.:layout:links]] The layout of the links sections. \\ \\ ---- **NOTE:** Any comments, bug reports, HTML edit requests and support requests for help getting your stylesheet right please register with and use the [[http://forum.quickorder.uk.com|quickorder support forum]].