Flinders skeleton templates
The default skeleton layout for the Flinders University website (below) can be
used as a base template to setup web applications and other non-cms
templates that are available to the public and do not require a log in (see the
Guidelines for web applications document for further information about web
applications).
A complete review of the structure of the University’s web templates has
meant that the template has moved away from the Yahoo YUI! libraries and to
a fixed width layout grid system bases on the 1KB Grid System framework
(http://1kbgrid.com/) by Tyler Tate.
A grid is a method used to create layout consistency on a webpage. It utilises
columns (areas of the page that allow content to line up correctly) and gutters,
(spacing between the columns). To understand the layout and grid behind the
template please read the section entitled Explanation of the Flinders Grid
system in this document.
The structure of the base skeleton:
To begin with you can download the base skeleton
(http://www.flinders.edu.au/cms-templates/external/skeletons/skeletonstandard.html).
The base skeleton is built using HTML5 and CSS3 elements. Many div tags
and classes have been replaced with the following HTML tags.





<header>: Defines a header for a section or page
<footer>: Defines a footer for a section or page
<nav>: Defines navigation links
<article>: specifies independent, self-contained content such as a blog
entry or main content
<aside>: defines content aside from the page content
Other attributes within tags that you may notice are the role attributes ie
<header class="main_header" role="banner">. These attributes help with
accessibility and are related to WAI-ARIA (http://www.w3.org/WAI/intro/aria).
Although not currently supported by all screen readers they improve
readability of the site.
There is also a link to the modernizr script (<script type="text/javascript"
src="/flinders/app_templates/flinderstemplates/javascript/modernizr.js">) in
the head of the template. This is an important link as it provides support for
HTML5 tags in older browsers.
The content structure:
The content area of the template is split into the left hand navigation,
breadcrumbs and main content area (below). The left hand nav and
breadcrumbs are standard features of the base skeleton template. The main
content area can be modified to create layouts that suit the context that the
template is being used for.
The structure in the main content area of the base skeleton template
(highlighted above) is setup to have an <article> area 8 columns wide and a
right hand <aside> area that is 4 columns wide (to understand rows, columns
and column width as well as how to set these up to build nested structures
please read the Explanation of the Flinders Grid system in this document).
Once you are familiar with the grid system you can create nested structures
similar to the one illustrated below (these structures exist in the CMS) and can
be used to expand the base skeleton. Not all the structures provided in the
skeleton templates will suit your application and in those cases you may have
to create your own structures. Note: It is recommended that you contact
Online Communications to provide guidance should you wish to change
template structures.
The template below is the skeleton-2pillars template
(http://www.flinders.edu.au/cms-templates/external/skeletons/skeleton2pillars.html). The html that makes the 2 pillar structure is visible under the
screen shot (again, how this works is describe in the explanation of the grid
system).
<div class="column grid_12">
<!-- breadcrumbs--><div class="breadcrumbs . . .
<!--end breadcrumbs-->
<article role="main">
<div id="container_num_1" class="container
container_no_box">
<p> YOUR MAIN CONTENT GOES HERE. </p>
</div>
</article>
<div class="row">
<div class="column grid_6">
<article role="main">
<div id="container_num_2"
class="container container_no_box">
<p> YOUR MAIN CONTENT GOES HERE. </p>
</div>
</article>
</div><!--end column wrapper-->
<div class="column grid_6">
<article role="main">
<div id="container_num_3"
class="container container_no_box">
<p> YOUR MAIN CONTENT GOES HERE. </p>
</div>
</article>
</div><!--end column wrapper-->
</div><!--end row wrapper-->
</div> <!--end column grid_12-->
Summary of skeletons available for download:





Skeleton-standard: (http://www.flinders.edu.au/cmstemplates/external/skeletons/skeleton-standard.html)
Skeleton-4grid: (http://www.flinders.edu.au/cmstemplates/external/skeletons/skeleton-4grid.html)
Skeleton-2pillars: (http://www.flinders.edu.au/cmstemplates/external/skeletons/skeleton-2pillars.html)
Skeleton-3pillars: (http://www.flinders.edu.au/cmstemplates/external/skeletons/skeleton-3pillars.html)
Skeleton-no-nav: (http://www.flinders.edu.au/cmstemplates/external/skeletons/skeleton-no-nav.html)
Inserting elements of the templates:
Elements such as the header banner and footer are fairly standard within the
template and below are explanations on how they can be used and
referenced in non-cms templates.
Note that these elements assume that you are already using an HTML
skeleton with the appropriate HEAD tag sub-elements, especially the LINK
tags:
<link media="screen" rel="stylesheet"
href="/flinders/app_templates/flinderstemplates/tmp_flin_base_v2.css"
type="text/css"/>
<link
href="http://www.flinders.edu.au/flinders/app_templates/flinderstempla
tes/tmp_flin_print.css" rel="stylesheet" media="print"/>
- and the appropriate BODY tags and wrapping DIV:
<body id="bodytag">
<!--Wrapper around entire page-->
<div id="page_wrapper">
(Please refer to the skeleton samples above for guidance).
The root folder of the elements talked about below can be found at the
following location:
http://www.flinders.edu.au/cms-templates/external/
Banners
http://www.flinders.edu.au/cms-templates/external/banners/
The generic banner reference can be found at:
http://www.flinders.edu.au/cms-templates/external/banners/banner-generic
.cfm
The following page generates a banner, with a custom sub site title image.
You can then save the HTML and insert it into your application (or, if you're
keen to avoid hard-coding in your system, you can request this via HTTP
within your application code.
For example, for a Topic page, using the Current Students sub site title:
http://www.flinders.edu.au/cms-templates/external/banners/bannergeneric.cfm?bannerimagename=current_students.png&pagetitle=Current
Students
This will create a banner where the inspiring achievement image is replaced
with the current students image (Note: this image must exist on the server in
the same location as the inspiring achievement graphic). Also note the
pagetitle value at the end of the URL is set to the title you wish to display on
the page. This is a hidden title and is used mainly for screen readers.
Footers
http://www.flinders.edu.au/cms-templates/external/footers/
The footer can be inserted in a few ways:
1. As an IFRAME:
You customise the "Maintained by" link in the footer by passing parameters on
the URL:



maintbyname
maintbyaddr
(or accept the default)
pagetitle
(The email address is derived from the name, unless you specify
maintbyaddr).
<div class="app_footer">
<iframe src="http://www.flinders.edu.au/cmstemplates/external/footers/footer-iframeapp.cfm?maintbyname=Student.Systems&maintbyaddr=student
.systems&pagetitle=Topic page" width="100%"
seamless="seamless" scrolling="no" frameborder="0">
Your user agent does not support frames or is currently
configured not to display frames.</iframe>
</div>
The class=”app_footer” that is wrapped around the iframe is used to define
the height of the default footer. This is applied in the main CSS file for the
new templates so any changes that are made to the height of the footer
will be applied to this class within the CSS. This should automatically
change the height wherever the iframe footer is embedded.
Examples of usage:
This page is an example of the footer ready to be inserted as an IFRAME
using the following url:
http://www.flinders.edu.au/cms-templates/external/footers/footer-iframeapp.cfm?maintbyname=Student.Systems&maintbyaddr=student.systems&pag
etitle=Topic page
The mockup of the Student Systems Topic page, using the new template but
including the IFRAME footer:
http://www.flinders.edu.au/cms-templates/external/tests/app-iframe.html
2. As an INCLUDE:
If your application is located on the main web server AAPEP (e.g. the Events
system), the footer can be included directly.
The following is a Coldfusion example (but a similar thing can be done with
PHP):
<cfparam name="url.maintbyname" default="Scholarships
Office">
<cfparam name="url.maintbyaddr"
default=”[email protected]”>
<cfparam name="url.sectiontitle" default="(Title of the
section this page belongs to)">
<cfinclude template="/flinders/cmstemplates/external/footers/footer-generic.cfm">
3. Hard-coded:
You can also just ask Online Communications to generate the HTML for you.
In some cases it’s not feasible to have the full footer structure. An example of
this is non-public web application.
Breadcrumbs
You can generate the HTML code for any set of breadcrumbs by using this
page:
http://www.flinders.edu.au/cmstemplates/external/breadcrumbs/breadcrumbs-generic.cfm
It accepts this parameter on the URL:
crumbs=<title1>|<link1>,<title2>|<link2>,...
<title1>,<title2> etc are titles of pages. <link1>,<link2> etc are
URLs of the pages.
The following is an example of this in use:
http://www.flinders.edu.au/cmstemplates/external/breadcrumbs/breadcrumbsgeneric.cfm?crumbs=Flinders%20University|http://www.flinders.edu.au,Prosp
ective%20students|http://www.flinders.edu.au/futurestudents/,Credit%20transfer%20officers|/credit_officers.taf
Side navigation
A dummy side navigation is available for you to customise:
http://www.flinders.edu.au/cms-templates/external/sidenav/sidenavempty.html
Take note of the names of the side navigation elements in this sample, as well
as the classes applied. Correct use of these will ensure that the side
navigation is styled correctly.
Complete skeletons
You can generate an entire skeleton HTML page by using this skeleton
generator:
http://www.flinders.edu.au/cms-templates/external/skeletons/skeleton-test.cfm
You can customise the HEAD elements (title, description, subject)
using these URL parameters:


pagesubject
pagetitle

pagedescription
You can customise the footer by using:



sectiontitle
maintbyname
maintbyaddr
You can customise the breadcrumbs by using:
crumbs=<title1>|<link1>,<title2>|<link2>,...
See the example in Breadcrumbs:
http://www.flinders.edu.au/cms-templates/external/skeletons/skeletontest.cfm?crumbs=Flinders%20University|http://www.flinders.edu.au,Prospectiv
e%20students|http://www.flinders.edu.au/futurestudents/,Credit%20transfer%20officers|/credit_officers.taf
Explanation of the Flinders Grid system:
The grid system implemented for the Flinders University Content
Management System (CMS) templates is based on the 1KB Grid System
framework (http://1kbgrid.com/) by Tyler Tate.
A grid is a method used to create layout consistency on a webpage. It utilises
columns (areas of the page that allow content to line up correctly) and gutters,
(spacing between the columns) and typically looks something like this:
The Flinders Grid:
The configuration of the Flinders CMS grid is a fixed width grid of 15 columns
spread over 1060 pixels. Each individual column is 60 pixels wide, with a 10
pixel gutter between every column.
The CSS behind the grid:
The CSS to create the grid is as follows:
.grid_1 { width:60px; }
.grid_2 { width:130px; }
.grid_3 { width:200px; }
.grid_4 { width:270px; }
.grid_5 { width:340px; }
.grid_6 { width:410px; }
.grid_7 { width:480px; }
.grid_8 { width:550px; }
.grid_9 { width:620px; }
.grid_10 { width:690px; }
.grid_11 { width:760px; }
.grid_12 { width:830px; }
.grid_13 { width:900px; }
.grid_14 { width:970px; }
.grid_15 { width:1040px; }
.column {
margin: 0 0px 0px 10px;
overflow: hidden;
float: left;
display: inline;
}
.row {
width: 1060px;
margin: 0 auto;
overflow: hidden;
}
.row .row {
margin: 0 0px 0px -10px;
width: auto;
}
Within the CSS file
(http://www.flinders.edu.au/flinders/app_templates/flinderstemplates/tmp_flin_
base_v2.css) there is a class that corresponds to each of the possible
combined column widths. Each column has a 60 pixel width. Class “.grid_1”
through to class “.grid_15” refer to the number of combined columns that
create a width. A 10 pixel gutter has to be taken into account for every column
width. I.e. the width of “.grid_3” is calculated as 60 + 10 + 60 + 10 + 60 =
200px.
In addition to the column widths, there are only two other classes defined that
form the structure of the grid. “column” and “row”. The “column” class has a
margin of 10 pixels on the left edge creating the 10 pixel gutter mentioned
above. Note: The “overflow:hidden” property on both the “column” and
“row” are there to help the overflow of content and preserve the float structure
of the grid.
Setting up the HTML structure:
The HTML used to create the grid structure is minimal. Each column (defined
by the “column” class) contains a second class that determines the width of
the column (i.e. “grid_5” gives the column a width of 340 pixels). The columns
are contained by a row. This row clears the float of the columns and creates a
new “row” of columns (Note: nested rows can be used to create more
complicated layouts and are explained later). In order for the layout to work
correctly the grid within the first parent row must add up to 15 columns. See
examples below.
<div class="row">
<div class="column grid_5"> </div>
<div class="column grid_5"> </div>
<div class="column grid_5"> </div>
</div>
.grid_5 + grid_5 + grid_5 = 15 columns (grid_5 spans the width of 5 columns)
<div class="row">
<div class="column grid_10"> </div>
<div class="column grid_5"> </div>
</div>
grid_10 + grid_5 = 15 columns
<div class="row">
<div class="column
<div class="column
<div class="column
<div class="column
</div>
grid_3">
grid_4">
grid_4">
grid_4">
</div>
</div>
</div>
</div>
grid_3 + grid_4 + grid_4 + grid_4 = 15 columns
Nested rows:
Nested rows enable more complicated layouts to be created. By default the
grid sets a width of 1060 pixels on the .row class, in order to create a nested
row we need to overwrite the original .row class with a nested .row class in
the CSS.
.row .row {
margin: 0 0px 0px -10px;
width: auto;
}
Remember that the .column class has a left margin of 10 pixels (that creates
the 10 pixel gutter). We are keeping this gutter for nested columns, but we
need to compensate for the left margin of the first nested column so we use
the property margin: 0 0 0 -10px;.
Below is the code to create the following nested layout:
<div class="row">
<div class="column grid_10">
Enter some content here. . .
<div class="row">
<div class="column grid_5"> </div>
<div class="column grid_5"> </div>
</div>
</div>
<div class="column grid_5"> </div>
</div>
Note: The columns within the nested row must add up to the grid of the
column the row sits in. I.e. in the example above the nested row sits within the
column grid_10 so the grid values of the nested column must add up to 10
(grid_5 + grid_5 = grid_10).