The philosophy behind our CSS concepts is to:
- fully utilize the screen by creating a dynamic layout;
- be stylish, while offering ease of redesign; and
- never be boring, by providing a whole lot more than three columns and a header.
The template layouts are dynamic. The default layout of three fixed columns is optimized for a screen resolution of 1024. The grid is extremely flexible and offers easy grid variations.
The dynamic template layouts change on the fly, to adapt to the user's viewport:
- For larger screens, with a minimum width of 1200px an extra style: wide.css is added. The effect of this is that an additional promo sidebar, is displayed on the right of the screen; and
- For smaller screens, with a maximum width of 980px an extra style: small.css is added. The effect of this is that the right promo sidebar is displayed beneath the main content.
Both the number of columns and the column width can easily be controlled by body classes and no template changes are necessary. There are no empty or unnecessary divs anywhere. If there is no content for a div, the div is not shown.
Body IDs and Body Classes
The body ID represents the page type and the body class controls the number of columns and the column width.
The body IDs are:
- form = none
- glossary-letter = glossary
- events = event
- event = event
- news = article
- news-overview = section
- categories-overview = section
- to be continued
The Body Classes are:
- Default case when no
nav-col-subcol- nav | main | sidebar
nav-col- 2 columns - nav | main
col-subcol- 2 columns - main | sidebar
col-subcol-equal- 2 equal columns - main | sidebar
col-float3- 1 large column with 3 floating teasers
col-float2- 1 large column with 2 floating teasers
nav-col-float2- 1 large column with 2 floating teasers and navigation on the left - nav | main
col-float2-subcol- 1 large column with 2 floating teasers and a right sidebar - main | sidebar
col-subcol-subcol- 3 columns - main | sidebar | sidebar
Teaser and Promo IDs
Each teaser and promo box belongs to a family, has a unique ID and is numbered sequentially. Their respective classes and IDs are:
- class="promo" - class="teaser":
- id="promo-1, 2" etc. - id="teaser-1, 2" etc.
There are four types of teasers:
- Teaser with an image and an optional link list - div class="teaser";
- Teaser without an image - div class="teaser mod";
- Teaser with a latest list - div class="teaser latest";
- Teaser with a link list, without text and image -div class="teaser teaserlist".
Single Teasers can be assembled into teaser groups -div class="teaser-group" and the teaser group has a headline - h5.
The difference between the teaser.latest and a teaser group is:
- a teaser group is a group of teasers and every teaser in the group has a unique id; and
- a teaser latest is simply a single teaser with a news list and the teaser has a single id and the news items within the teaser do not have ids.
All teasers, the opener and the boxes in the sidebar can include a kicker or subline. The kicker is part of the headline - (h1)(em)Kicker(/em) Headline(/h1). As it it forms part of the headline, it is clickable and part of the link \- (h2)(a href="http://confluence.magnolia.info/pages/editpage.action#" )(em)Kicker(/em) Headline (/h2).
Every horizontal tab is unique - id="nav-sec-sectionname" - and can be styled individually. For example each tab can be assigned a different width or color-coded to conform to a section scheme. If a new section is created the new tab will be assigned a unique id, and if the section is renamed the id will change.
To use sub-navigation in the horizontal navigation, simply add the class "plus-navsub" - div id="nav-global" class="plus-navsub".
The vertical navigation class follows a strong pattern.
For an open list item with child pages the li class="open". For a marked list item displaying child pages
li class="open on".
For a breadcrumb, "You are here", the li class="on". For a non\- clickable breadcrumb <li class="on"><strong> and for a clickable breadcrumb
<li class="on"><a href="..." ><em>.
For more examples and information, please refer to nav.html.
Forms are in the main column. For example a contact form is wrapped in a div class="form-wrapper".
The basic form structure is:
- small: class="s";
- medium: class="m";
- large: class="l";
- wide:no class.
- no class.
A link list is wrapped in a div class="links" and can be assigned the headline h3.
There are four different types of link lists:
- internal links \- ul: no class. This is the default option;
- external links - ul class="external";
- downloads - ul class="download";
- \mixed \-ul: no class.
Microformats for Special Elements and Paragraphs
All events are maked as a vevent - div class="vevent". This allows users to add the event to Outlook or their Yahoo calandar easily. Events are search engine friendly. The international time format is used and the the start and end time need to be converted to international format and wrapped in a span:
<dd>8:00 AM <span class="dtstart">2008-12-10T08:00:00</span> - 10:00 AM <span class="dtend">2008-12-10T10:00:00</span>(/dd)
For more information, please refer to event.html and Microformats.
Contact data is marked as vcard - div class="vcard". This allows users to add the contact to Outlook or other contact application easily.
For more information, please refer to profile.html.
Text Blocks or Articles
The main text on article pages is wrapped in div class="text".
All comments are part of an unorded list - "ul". The comments list has a headline with a counter and is wrapped in div id="comments".Each comment:
- has an unique-id, for example - li id="comment-1,2,3" etc.;
- is a blockquote;
- has a headline;
- has information about the comment author.
For more information, please refer to to article.html.
All tags are listed in a list, which is sorted alphabetically from a-z. Every tag has a class, which assigns its popularity level from level 1 to level 5 (unpopular to extremly popular). Level 5 tags are additionally wrapped in a strong element and level 4 tags in an em element. It is possible to include a tagcloud in both the main content area and in the right sidebar.
Tags in Articles
Tags are listed in the tags-meta container below the headline and a list with selected tags can placed in the sidebar.
A skip link is a link which opens the main content directly. It is marked up in #branding - p class="skip". The link is hidden and displays via focus by tabbing through the page.
Read On links
"Read on" links that are not corectly positioned or are out of context are not easily understood by users. The solution to this problem is to add the teaser headline to the "Read on" link.
(em class="more")(a href="http://confluence.magnolia-cms.com/pages/editpage.action#" )read on (span) Headline: Breaking News(/span)(/a)(/em)
For Google and other screen readers, this addition is not visible in a visual browser.
"Invisible headlines" allow users to identify page sections easily. h6 headlines provide screen-reader user's with additional navigation, sub-navigation and skip link text information.
InternationalizationThe following are relevant to internationalization:
- Skip Link "Main Content";
- Breadcrumb: "You are here";
- Read on link "read on";
- Label Search box "search for";
- "You are here" (navigation & subnavigation);
- Structural, invisible headings (h6);
- Image in Text "Zoom":
- Navigation (Global Navigation);
- Additional information (Sidebar);
- Browse (Pager Navigation).