CSS layout and structure

Notanant has an HTML structure that provides flexibility so that the look of a site or page can be controlled entirely from the layout which positions components on the page and CSS.

It is so flexible that the entire look of a site can be switched immediately just by switching the CSS files - see www.notanant.com/templates for examples of this in practice.

There are three elements for the designer to consider.

1. At the base is the main layout - this sets the number of columns and the position of components and images that are fixed page-by-page (eg the banner, position of links and menus and other dynamic components or bespoke structural HTML such as permenant links to external sites, or a name and address on the page).

For custom-build sites, you can assume that the end user will not change these layout elements, which enables certain design parameters to be fixed in the CSS - eg a particularly striking left column, or links in the header area.

2. On top of the pagelayout, the site and content are wrapped by one of five CSS sheets

• the base (main.css) which provides a standardised base level of control for all templates with generic padding and margin and colouring
• the template layout - wrapping specific for a template. In an general-purpose (non-custom) template, you cannot assume the presence of any element in the main layout, (advanced users can add and suggest elements to the layout for new sites using the stylefile.txt - eg a side or top banner of a particular dimension)
• the component layout - wrapping specific for the components on the page (eg menu styles and styles for lists, images etc)
• the text layout - font selection and coloring
• buttons - layout for the links for buttons - now almost redundant and fixed as a standard style

3. The content. This is user defined. In custom sites, you may be able to advise the client to place certain content on the page. In template driven sites you have no control over content. Content may also be resized or adjust length by language.

To understand the CSS, the attached document describes the page structure. Each CSS file is used to control a different layer of the page. If you're used to thinking of HTML as a linear document, this layer approach thinking can seem a little strange, but think of it as stacking content onto an underlying page frame bit by bit.

A CSS sheet is placed in a directory along with its associated images and backgrounds in a standardised template.css. The style reference is then a link to the whole directory. This allows styles ot be of the form background: url(gradient.jpg) in template.css referencing a gradient background held in the same directory.

We do run into sniffiness from designers used to building static HTML sites because we use tables to build our page structure. Our experience from building highly flexible content management systems is that a floating DIV structure is too fragile for a system with the flexibility that Notanant provides where content is entirely generated by the user. DIV structures tend to degrade badly where content is not entirely at the control of the designer unless you strongly limit content and site look.

For accessibility a separately served version of the same content is more appropriate as it allows more flexibility over content aspects such as the positioning of navigation (eg top and bottom) in addition to control over display. Notanant is a full separation of content and display which is why content can be served in many different formats for different purposes.