Similar content

Loading

Powered by Canoo FindIT.

CSS concepts

Philosophy

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.

Layout

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.
The technique used to achieve this is CSS media queries and javascript. For older browsers that do not recognize javascript, it is completely unobtrusive and the default CSS resolution is 1024 x 768.

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.

Patterns

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:

  • home
  • section
  • article
  • image-gallery
  • form = none
  • search-results
  • sitemap
  • glossary
  • glossary-letter = glossary
  • events = event
  • event = event
  • news = article
  • news-overview = section
  • categories-overview = section
  • profile
  • joboffer
  • faq
  • sign-up
  • to be continued
The Body Classes are automatically generated by the STK system. Depending on the final template configuration, merged out of the site&template configuration, the body class is resolved and rendered. For example if a vertical navigation is enabled or not the body class will contain the 'nav' attribute. In the any template definition a property 'bodyClass' can be set. This overwrites the auto generated body class value.

The Body Classes are:

  • Default case when no bodyClass is rendered: 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.

Teasers

There are four types of teasers:

  1. Teaser with an image and an optional link list - div class="teaser";
  2. Teaser without an image - div class="teaser mod";
  3. Teaser with a latest list - div class="teaser latest";
  4. Teaser with a link list, without text and image -div class="teaser teaserlist".
The teaser latest displays two or more of the latest news articles in a list, and the list has a heading, for example, Latest News. In comparison with single teasers, the latest list teaser has a different mark up. Because of their grouping, they are out of the flow or id-count. No class teaser is necessary and the following is applicable - ul / li / h3 / p.

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.
An opener is a large special teaser - div class="opener" id="teaser-1". It is always the first teaser and there is only one per page.

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

Forms are in the main column. For example a contact form is wrapped in a div class="form-wrapper".   

The basic form structure is:

  • div;
  • label;
  • span;
  • input;
  • /label;
  • /div.
There are four different widths for form fields.To assign a width, add a class to the label:
  • small: class="s";
  • medium: class="m";
  • large: class="l";
  • wide:no class.
The following combinations are possible:
  • s+l;
  • m+m;
  • no class.

Link Lists

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.
li are classed individually: li class="external/download"

Link lists can be placed in an article, a teaser or in a box in the right sidebar.

Microformats for Special Elements and Paragraphs

Events

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

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".

Dom Tabs

Dom tabs can be used in the main area and in the right sidebar. In both areas the mark up is the same, but for javascript reasons different ids and class names need to be assigned. On each page, a single dom tab can be used in either area, i.e. it is possible to have one in main column and one in sidebar.

Comments

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.
The above are marked up with p class="comment-meta" and "cite". Comments are also counted on the page, starting from 1 - n <div id="comment-count-1" class="comment-count">1</div>.Commenting can be closed and when this happens, the comment-closed text appears.

  

For more information, please refer to to article.html.

Tagclouds

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.

   

Accessibility

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

"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. 

Internationalization

The 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":
    • Search;
    • Navigation (Global Navigation);
    • Sub-Navigation;
    • Additional information (Sidebar);
    • Browse (Pager Navigation).