Joomla! Documentation - User contributions [en]

Archived:Layout Specifications in Version 1.6

2009-12-27T23:40:25Z

Andrea.tarr: Undo revision 20961 by Andrea.tarr (Talk)

{{underconstruction}}

{{RightTOC}}
= Principles for Core Layouts =

The base for this document is a result of the discussions in the Google group Joomla-CMS-dev during the summer of 2009. Use this document to continue the discussion by fixing this wiki.

== 1. Validates to nominated standards ==
xHTML 1.0 strict. We will validate the core layouts to strict, but the template could still use whichever standards they want, whether that’s xHTML 1.0 strict, transitional or HTML5. It is the template which actually controls the validation standard. Override layouts will be used for full HTML5 use.

== 2. Semantically relevant markup ==
=== Tables ===
# Use tables to display relational information and do not use them for layout.
# Use the th (table header) to describe a column or row in a table with relational information and Group rows with only th (table header) cells with the thead (table head) element.
# Group the rest of the table with the tbody (table body) element.
# Use scope attribute to associate table labels (th cells) with columns or rows and headers and id attributes to associate table labels (th cells) with individual cells in complex tables
# Use a class to indicate odd/even rows

=== Forms ===
# Associate the label with the form element by using the "for" in the label
# Use fieldset and legend to group appropriate items together
# Make sure that the order of the elements makes sense when tabbing through them
# Make sure that the form can be completed and submitted using the keyboard
# Indicate required fields to the user before they input the field. For this project we will use an asterisk before the field to indicate required fields and will have a JText comment "Required fields are indicated with an *."
# Use semantic markup for the form based on the use of the form, not the fact that it is a form. For instance, use divs for contact pages, login screens and creating/editing articles, pagination & filters, use tables for lists of tabular data (e.g. list of articles in Article Manager), use ul for simple lists such as parameters. Decide how you would mark it up if it were not a form, then markup that way.

=== Hierarchical structure ===
# Use heading tags instead of class names on the component & content headers.
# H1 will be reserved for the site header, so h2 is the old componentheader and h3 the old contentheading.
# Everyone has different ideas on the best hierarchical method, but choosing to pick one rather than add an additional parameter will give both ease of use and to give the template designers something consistent. Current SEO thought is that headers give weight, but they are no longer distinguishing among the higher header the way they used to. Usability prefers to keep them in order.

=== ID's & Classes: ===
# Use ID if it really should be an ID, otherwise use CLASS.
# Be careful that you can't end up with one ID more than once on a page when the page is actually served lists for menus
# Use as many classes as needed and no more.
# Use a standardized approach to class names and ids. Change to new class/id if the old ones don't make sense.

== 3. Due consideration is given to support RTL sites ==
# We need RTL expertise on this because it's important and we don't have the skills.
# text align: right
# Should this change the order of fields: e.g. should the columns in Article Manager swap around based on LTR or RTL.

== 4. Adheres to nominated accessibility principles ==
# Aim for WCAG 2.0 AA compliance
# Header mark up for headers, menus (module), filters and selections
# Bring forms into compliance
# Appropriate relational markup on tables (including scope)
# Javascript accessible (the only javascript in the front end layouts is checking for required fields. That's also covered server-side)
# Use links for links and mark it up so it can get focus and be seen to have focus
# Able to navigate logically and fully with keyboard

== 5. Standardised nomenclature (naming practices, etc) ==
# Use existing names where possible and follow similar conventions. (Note: for the change from 1.5 to 1.6 change from jargon names such as componentheading to generic names such as page-title)
# For new classes & ids:

# One word preferred
# When two words are use, use all lowercase, no punctuation
# If you are using related classes hyphenate between the words: .button2-left, .button2-right, button2-top, .button2-bottom, #content-box, #submenu-box, #border-top, #border-bottom

== 6. Aims to work on nominated browser versions ==
# IE7+, FF2+, Safari 3.1+, Opera 9.0+, Google Chrome
# IE6 should be usable
# Program for standards compliant browsers and put fixes for non- standard browsers in separate files

== 7. Consideration is given to a variety of devices (phones, etc) ==
# Community member to step up on this matter

== 8. Principles for use of scripting languages ==
# Includes unobtrusive JavaScript, rich JavaScript, Mootools std, etc
# There is very little JavaScript in use in the frontend core at present.
# Mootools and compatibility is under discussion in Google group Joomla-CMS-Dev

[[Category:Specifications Version 1.6]] [[Category:Specifications]]

Archived:Layout Specifications in Version 1.6

2009-12-27T23:39:05Z

Andrea.tarr: /* Principles for Core Layouts */

{{underconstruction}}

{{RightTOC}}
The base for this document is a result of the discussions in the Google group Joomla-CMS-dev during the summer of 2009. Use this document to continue the discussion by fixing this wiki.

== 1. Validates to nominated standards ==
xHTML 1.0 strict. We will validate the core layouts to strict, but the template could still use whichever standards they want, whether that’s xHTML 1.0 strict, transitional or HTML5. It is the template which actually controls the validation standard. Override layouts will be used for full HTML5 use.

== 2. Semantically relevant markup ==
=== Tables ===
# Use tables to display relational information and do not use them for layout.
# Use the th (table header) to describe a column or row in a table with relational information and Group rows with only th (table header) cells with the thead (table head) element.
# Group the rest of the table with the tbody (table body) element.
# Use scope attribute to associate table labels (th cells) with columns or rows and headers and id attributes to associate table labels (th cells) with individual cells in complex tables
# Use a class to indicate odd/even rows

=== Forms ===
# Associate the label with the form element by using the "for" in the label
# Use fieldset and legend to group appropriate items together
# Make sure that the order of the elements makes sense when tabbing through them
# Make sure that the form can be completed and submitted using the keyboard
# Indicate required fields to the user before they input the field. For this project we will use an asterisk before the field to indicate required fields and will have a JText comment "Required fields are indicated with an *."
# Use semantic markup for the form based on the use of the form, not the fact that it is a form. For instance, use divs for contact pages, login screens and creating/editing articles, pagination & filters, use tables for lists of tabular data (e.g. list of articles in Article Manager), use ul for simple lists such as parameters. Decide how you would mark it up if it were not a form, then markup that way.

=== Hierarchical structure ===
# Use heading tags instead of class names on the component & content headers.
# H1 will be reserved for the site header, so h2 is the old componentheader and h3 the old contentheading.
# Everyone has different ideas on the best hierarchical method, but choosing to pick one rather than add an additional parameter will give both ease of use and to give the template designers something consistent. Current SEO thought is that headers give weight, but they are no longer distinguishing among the higher header the way they used to. Usability prefers to keep them in order.

=== ID's & Classes: ===
# Use ID if it really should be an ID, otherwise use CLASS.
# Be careful that you can't end up with one ID more than once on a page when the page is actually served lists for menus
# Use as many classes as needed and no more.
# Use a standardized approach to class names and ids. Change to new class/id if the old ones don't make sense.

== 3. Due consideration is given to support RTL sites ==
# We need RTL expertise on this because it's important and we don't have the skills.
# text align: right
# Should this change the order of fields: e.g. should the columns in Article Manager swap around based on LTR or RTL.

== 4. Adheres to nominated accessibility principles ==
# Aim for WCAG 2.0 AA compliance
# Header mark up for headers, menus (module), filters and selections
# Bring forms into compliance
# Appropriate relational markup on tables (including scope)
# Javascript accessible (the only javascript in the front end layouts is checking for required fields. That's also covered server-side)
# Use links for links and mark it up so it can get focus and be seen to have focus
# Able to navigate logically and fully with keyboard

== 5. Standardised nomenclature (naming practices, etc) ==
# Use existing names where possible and follow similar conventions. (Note: for the change from 1.5 to 1.6 change from jargon names such as componentheading to generic names such as page-title)
# For new classes & ids:

# One word preferred
# When two words are use, use all lowercase, no punctuation
# If you are using related classes hyphenate between the words: .button2-left, .button2-right, button2-top, .button2-bottom, #content-box, #submenu-box, #border-top, #border-bottom

== 6. Aims to work on nominated browser versions ==
# IE7+, FF2+, Safari 3.1+, Opera 9.0+, Google Chrome
# IE6 should be usable
# Program for standards compliant browsers and put fixes for non- standard browsers in separate files

== 7. Consideration is given to a variety of devices (phones, etc) ==
# Community member to step up on this matter

== 8. Principles for use of scripting languages ==
# Includes unobtrusive JavaScript, rich JavaScript, Mootools std, etc
# There is very little JavaScript in use in the frontend core at present.
# Mootools and compatibility is under discussion in Google group Joomla-CMS-Dev

[[Category:Specifications Version 1.6]] [[Category:Specifications]]

CSS Class Names Frontend in Version 1.6

2009-12-27T18:33:43Z

Andrea.tarr: /* List of CSS Class Names */

{{underconstruction}}

= List of CSS Class Names =

This is a list of CSS class names used in the front end core layout files.

{| class="prettytable"
| '''Class'''
| '''Description'''

|-
| actions
| list of print/email/pdf/edit etc icon buttons

|-
| archive-items
| items in the archive

|-
| archive(suffix)
| archive page

|-
| archive-module(suffix)
| articles archive module

|-
| bannergroup(suffix)
| banner module

|-
| banneritem
| item in the banner module

|-
| bannerfooter
| footer in the banner module

|-
| blog(suffix)
| blog layout page

|-
| breadcrumbs(suffix)
| breadcrumbs module

|-
| cat-items
| items in the category

|-
| categories-list(suffix)
| categories view

|-
| category
| category table

|-
| category-desc
| block with category image and description

|-
| category-list(suffix)
| category list (sortable table) layout

|-
| cols1
| total number of columns in multi-column layout is 1

|-
| cols2 (or 3 or 4, etc)
| total number of columns in multi-column layout is 2 (or 3 or 4, etc)

|-
| column1
| column 1 in possible multi-column layout

|-
| column2 (or 3 or 4, etc)
| column 2 (or 3 or 4, etc) in possible multi-column layout

|-
| counter
| page x of x display

|-
| created-by
| person who created the article

|-
| created-date
| date the article was created

|-
| display-limit
| display number limit

|-
| edit-icon
| edit icon

|-
| element-invisible
| class for elements to not be visible but readable by screen readers

|-
| email-icon
| email icon

|-
| filter-search
| search filter

|-
| filter-search-lbl
| label for the search filter

|-
| filters
| filters for the items

|-
| item-category
| category in the item-info list

|-
| item-info
| information about the item such as category, created date, author, etc

|-
| item-page(suffix)
| single article page

|-
| item-separator
| separator at the end of each article

|-
| items-intro
| block of articles with introductions

|-
| items-leading
| block of leading articles

|-
| items-more
| block of links to additional articles

|-
| latestnews(suffix)
| latest news module

|-
| list-author
| author column

|-
| list-date
| date column

|-
| list-hits
| hits column

|-
| list-title
| title column

|-
| modified-date
| last date article modified

|-
| mostread(suffix)
| popular articles module

|-
| pagination
| block display page numbers & pagination links

|-
| pathway
| breadcrumb links

|-
| pdf-icon
| pdf icon button

|-
| print-icon
| print icon button

|-
| readmore
| read more link

|-
| row0
| odd rows in tables

|-
| row1
| even rows in tables

|-
| subcategories
| list of subcategory links

|-
| system-unpublished
| article is an "unpublished" article

|}

[[Category:Specifications Version 1.6]] [[Category:Specifications]]

CSS Class Names Frontend in Version 1.6

2009-12-27T17:56:39Z

Andrea.tarr: /* List of CSS Class Names */

{{underconstruction}}

= List of CSS Class Names =

This is a list of CSS class names used in the front end core layout files.

{| class="prettytable"
| '''Class'''
| '''Description'''

|-
| actions
| list of print/email/pdf/edit etc icon buttons

|-
| archive-items
| items in the archive

|-
| archive(suffix)
| archive page

|-
| archive-module(suffix)
| articles archive module

|-
| bannergroup(suffix)
| banner module

|-
| banneritem
| item in the banner module

|-
| bannerfooter
| footer in the banner module

|-
| blog(suffix)
| blog layout page

|-
| cat-items
| items in the category

|-
| categories-list(suffix)
| categories view

|-
| category
| category table

|-
| category-desc
| block with category image and description

|-
| category-list(suffix)
| category list (sortable table) layout

|-
| cols1
| total number of columns in multi-column layout is 1

|-
| cols2 (or 3 or 4, etc)
| total number of columns in multi-column layout is 2 (or 3 or 4, etc)

|-
| column1
| column 1 in possible multi-column layout

|-
| column2 (or 3 or 4, etc)
| column 2 (or 3 or 4, etc) in possible multi-column layout

|-
| counter
| page x of x display

|-
| created-by
| person who created the article

|-
| created-date
| date the article was created

|-
| display-limit
| display number limit

|-
| edit-icon
| edit icon

|-
| element-invisible
| class for elements to not be visible but readable by screen readers

|-
| email-icon
| email icon

|-
| filter-search
| search filter

|-
| filter-search-lbl
| label for the search filter

|-
| filters
| filters for the items

|-
| item-category
| category in the item-info list

|-
| item-info
| information about the item such as category, created date, author, etc

|-
| item-page(suffix)
| single article page

|-
| item-separator
| separator at the end of each article

|-
| items-intro
| block of articles with introductions

|-
| items-leading
| block of leading articles

|-
| items-more
| block of links to additional articles

|-
| latestnews(suffix)
| latest news module

|-
| list-author
| author column

|-
| list-date
| date column

|-
| list-hits
| hits column

|-
| list-title
| title column

|-
| modified-date
| last date article modified

|-
| mostread(suffix)
| popular articles module

|-
| pagination
| block display page numbers & pagination links

|-
| pdf-icon
| pdf icon button

|-
| print-icon
| print icon button

|-
| readmore
| read more link

|-
| row0
| odd rows in tables

|-
| row1
| even rows in tables

|-
| subcategories
| list of subcategory links

|-
| system-unpublished
| article is an "unpublished" article

|}

[[Category:Specifications Version 1.6]] [[Category:Specifications]]

CSS Class Names Frontend in Version 1.6

2009-12-27T17:48:15Z

Andrea.tarr: /* List of CSS Class Names */

{{underconstruction}}

= List of CSS Class Names =

This is a list of CSS class names used in the front end core layout files.

{| class="prettytable"
| '''Class'''
| '''Description'''

|-
| actions
| list of print/email/pdf/edit etc icon buttons

|-
| archive-items
| items in the archive

|-
| archive(suffix)
| archive page

|-
| archive-module(suffix)
| articles archive module

|-
| blog(suffix)
| blog layout page

|-
| cat-items
| items in the category

|-
| categories-list(suffix)
| categories view

|-
| category
| category table

|-
| category-desc
| block with category image and description

|-
| category-list(suffix)
| category list (sortable table) layout

|-
| cols1
| total number of columns in multi-column layout is 1

|-
| cols2 (or 3 or 4, etc)
| total number of columns in multi-column layout is 2 (or 3 or 4, etc)

|-
| column1
| column 1 in possible multi-column layout

|-
| column2 (or 3 or 4, etc)
| column 2 (or 3 or 4, etc) in possible multi-column layout

|-
| counter
| page x of x display

|-
| created-by
| person who created the article

|-
| created-date
| date the article was created

|-
| display-limit
| display number limit

|-
| edit-icon
| edit icon

|-
| element-invisible
| class for elements to not be visible but readable by screen readers

|-
| email-icon
| email icon

|-
| filter-search
| search filter

|-
| filter-search-lbl
| label for the search filter

|-
| filters
| filters for the items

|-
| item-category
| category in the item-info list

|-
| item-info
| information about the item such as category, created date, author, etc

|-
| item-page(suffix)
| single article page

|-
| item-separator
| separator at the end of each article

|-
| items-intro
| block of articles with introductions

|-
| items-leading
| block of leading articles

|-
| items-more
| block of links to additional articles

|-
| latestnews(suffix)
| latest news module

|-
| list-author
| author column

|-
| list-date
| date column

|-
| list-hits
| hits column

|-
| list-title
| title column

|-
| modified-date
| last date article modified

|-
| mostread(suffix)
| popular articles module

|-
| pagination
| block display page numbers & pagination links

|-
| pdf-icon
| pdf icon button

|-
| print-icon
| print icon button

|-
| readmore
| read more link

|-
| row0
| odd rows in tables

|-
| row1
| even rows in tables

|-
| subcategories
| list of subcategory links

|-
| system-unpublished
| article is an "unpublished" article

|}

[[Category:Specifications Version 1.6]] [[Category:Specifications]]

CSS Class Names Frontend in Version 1.6

2009-12-27T17:25:49Z

Andrea.tarr: /* List of CSS Class Names */

{{underconstruction}}

= List of CSS Class Names =

This is a list of CSS class names used in the front end core layout files.

{| class="prettytable"
| '''Class'''
| '''Description'''

|-
| actions
| list of print/email/pdf/edit etc icon buttons

|-
| archive-items
| items in the archive

|-
| archive(suffix)
| archive page

|-
| archive-module(suffix)
| articles archive module

|-
| blog(suffix)
| blog layout page

|-
| cat-items
| items in the category

|-
| categories-list(suffix)
| categories view

|-
| category
| category table

|-
| category-desc
| block with category image and description

|-
| category-list(suffix)
| category list (sortable table) layout

|-
| cols1
| total number of columns in multi-column layout is 1

|-
| cols2 (or 3 or 4, etc)
| total number of columns in multi-column layout is 2 (or 3 or 4, etc)

|-
| column1
| column 1 in possible multi-column layout

|-
| column2 (or 3 or 4, etc)
| column 2 (or 3 or 4, etc) in possible multi-column layout

|-
| counter
| page x of x display

|-
| created-by
| person who created the article

|-
| created-date
| date the article was created

|-
| display-limit
| display number limit

|-
| edit-icon
| edit icon

|-
| element-invisible
| class for elements to not be visible but readable by screen readers

|-
| email-icon
| email icon

|-
| filter-search
| search filter

|-
| filter-search-lbl
| label for the search filter

|-
| filters
| filters for the items

|-
| item-category
| category in the item-info list

|-
| item-info
| information about the item such as category, created date, author, etc

|-
| item-page(suffix)
| single article page

|-
| item-separator
| separator at the end of each article

|-
| items-intro
| block of articles with introductions

|-
| items-leading
| block of leading articles

|-
| items-more
| block of links to additional articles

|-
| latestnews(suffix)
| latest news module

|-
| list-author
| author column

|-
| list-date
| date column

|-
| list-hits
| hits column

|-
| list-title
| title column

|-
| modified-date
| last date article modified

|-
| pagination
| block display page numbers & pagination links

|-
| pdf-icon
| pdf icon button

|-
| print-icon
| print icon button

|-
| readmore
| read more link

|-
| row0
| odd rows in tables

|-
| row1
| even rows in tables

|-
| subcategories
| list of subcategory links

|-
| system-unpublished
| article is an "unpublished" article

|}

[[Category:Specifications Version 1.6]] [[Category:Specifications]]

Archived:Layout Specifications in Version 1.6

2009-12-24T05:12:58Z

Andrea.tarr: /* Principles for Core Layouts */

CSS Class Names Frontend in Version 1.6

2009-12-24T04:55:51Z

Andrea.tarr: /* List of CSS Class Names */

{{underconstruction}}

= List of CSS Class Names =

This is a list of CSS class names used in the front end core layout files.

{| class="prettytable"
| '''Class'''
| '''Description'''

|-
| actions
| list of print/email/pdf/edit etc icon buttons

|-
| archive-items
| items in the archive

|-
| archive(suffix)
| archive page

|-
| blog(suffix)
| blog layout page

|-
| cat-items
| items in the category

|-
| categories-list(suffix)
| categories view

|-
| category
| category table

|-
| category-desc
| block with category image and description

|-
| category-list(suffix)
| category list (sortable table) layout

|-
| cols1
| total number of columns in multi-column layout is 1

|-
| cols2 (or 3 or 4, etc)
| total number of columns in multi-column layout is 2 (or 3 or 4, etc)

|-
| column1
| column 1 in possible multi-column layout

|-
| column2 (or 3 or 4, etc)
| column 2 (or 3 or 4, etc) in possible multi-column layout

|-
| counter
| page x of x display

|-
| created-by
| person who created the article

|-
| created-date
| date the article was created

|-
| display-limit
| display number limit

|-
| edit-icon
| edit icon

|-
| element-invisible
| class for elements to not be visible but readable by screen readers

|-
| email-icon
| email icon

|-
| filter-search
| search filter

|-
| filter-search-lbl
| label for the search filter

|-
| filters
| filters for the items

|-
| item-category
| category in the item-info list

|-
| item-info
| information about the item such as category, created date, author, etc

|-
| item-page(suffix)
| single article page

|-
| item-separator
| separator at the end of each article

|-
| items-intro
| block of articles with introductions

|-
| items-leading
| block of leading articles

|-
| items-more
| block of links to additional articles

|-
| list-author
| author column

|-
| list-date
| date column

|-
| list-hits
| hits column

|-
| list-title
| title column

|-
| modified-date
| last date article modified

|-
| pagination
| block display page numbers & pagination links

|-
| pdf-icon
| pdf icon button

|-
| print-icon
| print icon button

|-
| readmore
| read more link

|-
| row0
| odd rows in tables

|-
| row1
| even rows in tables

|-
| subcategories
| list of subcategory links

|-
| system-unpublished
| article is an "unpublished" article

|}

[[Category:Specifications Version 1.6]] [[Category:Specifications]]

CSS Class Names Frontend in Version 1.6

2009-12-24T04:53:33Z

Andrea.tarr: New page: {{underconstruction}} = List of CSS Class Names = This is a list of CSS class names used in the front end core layout files. {| class="prettytable" | '''Class''' | '''Description''' |-...

{{underconstruction}}

= List of CSS Class Names =

This is a list of CSS class names used in the front end core layout files.

{| class="prettytable"
| '''Class'''
| '''Description'''

|-
| actions
| list of print/email/pdf/edit etc icon buttons

|-
| archive-items
| items in the archive

|-
| archive(suffix)
| archive page

|-
| blog(suffix)
| blog layout page

|-
| cat-items
| items in the category

|-
| categories-list(suffix)
| categories view

|-
| category
| category table

|-
| category-desc
| block with category image and description

|-
| category-list(suffix)
| category list (sortable table) layout

|-
| cols1
| total number of columns in multi-colunn layout is 1

|-
| cols2 (or 3 or 4, etc)
| total number of columns in multi-column layout is 2 (or 3 or 4, etc)

|-
| column1
| column 1 in possible multi-column layout

|-
| column2 (or 3 or 4, etc)
| column 2 (or 3 or 4, etc) in possible multi-column layout

|-
| counter
| page x of x display

|-
| created-by
| person who created the article

|-
| created-date
| date the article was created

|-
| display-limit
| display number limit

|-
| edit-icon
| edit icon

|-
| element-invisible
| class for elements to not be visible but readable by screen readers

|-
| email-icon
| email icon

|-
| filter-search
| search filter

|-
| filter-search-lbl
| label for the search filter

|-
| filters
| filters for the items

|-
| item-category
| category in the item-info list

|-
| item-info
| information about the item such as category, created date, author, etc

|-
| item-page(suffix)
| single article page

|-
| item-separator
| separator at the end of each article

|-
| items-intro
| block of articles with introductions

|-
| items-leading
| block of leading articles

|-
| items-more
| block of links to additional articles

|-
| list-author
| author column

|-
| list-date
| date column

|-
| list-hits
| hits column

|-
| list-title
| title column

|-
| modified-date
| last date article modified

|-
| pagination
| block display page numbers & pagination links

|-
| pdf-icon
| pdf icon button

|-
| print-icon
| print icon button

|-
| readmore
| read more link

|-
| row0
| odd rows in tables

|-
| row1
| even rows in tables

|-
| subcategories
| list of subcategory links

|-
| system-unpublished
| article is an "unpublished" article

|}

[[Category:Specifications Version 1.6]] [[Category:Specifications]]

Archived:Layout Specifications in Version 1.6

2009-12-11T19:17:18Z

Andrea.tarr: New page: {{underconstruction}} = Principles for Core Layouts = The base for this document is a result of the discussions in the Google group Joomla-CMS-dev during the summer of 2009. Use this doc...

{{underconstruction}}

= Principles for Core Layouts =

The base for this document is a result of the discussions in the Google group Joomla-CMS-dev during the summer of 2009. Use this document to continue the discussion by fixing this wiki.

== 1. Validates to nominated standards ==
xHTML 1.0 strict. We will validate the core layouts to strict, but the template could still use whichever standards they want, whether that’s xHTML 1.0 strict, transitional or HTML5. It is the template which actually controls the validation standard. Override layouts will be used for full HTML5 use.

== 2. Semantically relevant markup ==
=== Tables ===
# Use tables to display relational information and do not use them for layout.
# Use the th (table header) to describe a column or row in a table with relational information and Group rows with only th (table header) cells with the thead (table head) element.
# Group the rest of the table with the tbody (table body) element.
# Use scope attribute to associate table labels (th cells) with columns or rows and headers and id attributes to associate table labels (th cells) with individual cells in complex tables
# Use a class to indicate odd/even rows

=== Forms ===
# Associate the label with the form element by using the "for" in the label
# Use fieldset and legend to group appropriate items together
# Make sure that the order of the elements makes sense when tabbing through them
# Make sure that the form can be completed and submitted using the keyboard
# Indicate required fields to the user before they input the field. For this project we will use an asterisk before the field to indicate required fields and will have a JText comment "Required fields are indicated with an *."
# Use semantic markup for the form based on the use of the form, not the fact that it is a form. For instance, use divs for contact pages, login screens and creating/editing articles, pagination & filters, use tables for lists of tabular data (e.g. list of articles in Article Manager), use ul for simple lists such as parameters. Decide how you would mark it up if it were not a form, then markup that way.

=== Hierarchical structure ===
# Use heading tags instead of class names on the component & content headers.
# H1 will be reserved for the site header, so h2 is the old componentheader and h3 the old contentheading.
# Everyone has different ideas on the best hierarchical method, but choosing to pick one rather than add an additional parameter will give both ease of use and to give the template designers something consistent. Current SEO thought is that headers give weight, but they are no longer distinguishing among the higher header the way they used to. Usability prefers to keep them in order.

=== ID's & Classes: ===
# Use ID if it really should be an ID, otherwise use CLASS.
# Be careful that you can't end up with one ID more than once on a page when the page is actually served lists for menus
# Use as many classes as needed and no more.
# Use a standardized approach to class names and ids. Change to new class/id if the old ones don't make sense.

== 3. Due consideration is given to support RTL sites ==
# We need RTL expertise on this because it's important and we don't have the skills.
# text align: right
# Should this change the order of fields: e.g. should the columns in Article Manager swap around based on LTR or RTL.

== 4. Adheres to nominated accessibility principles ==
# Aim for WCAG 2.0 AA compliance
# Header mark up for headers, menus (module), filters and selections
# Bring forms into compliance
# Appropriate relational markup on tables (including scope)
# Javascript accessible (the only javascript in the front end layouts is checking for required fields. That's also covered server-side)
# Use links for links and mark it up so it can get focus and be seen to have focus
# Able to navigate logically and fully with keyboard

== 5. Standardised nomenclature (naming practices, etc) ==
# Use existing names where possible and follow similar conventions. (Note: for the change from 1.5 to 1.6 change from jargon names such as componentheading to generic names such as page-title)
# For new classes & ids:

# One word preferred
# When two words are use, use all lowercase, no punctuation
# If you are using related classes hyphenate between the words: .button2-left, .button2-right, button2-top, .button2-bottom, #content-box, #submenu-box, #border-top, #border-bottom

== 6. Aims to work on nominated browser versions ==
# IE7+, FF2+, Safari 3.1+, Opera 9.0+, Google Chrome
# IE6 should be usable
# Program for standards compliant browsers and put fixes for non- standard browsers in separate files

== 7. Consideration is given to a variety of devices (phones, etc) ==
# Community member to step up on this matter

== 8. Principles for use of scripting languages ==
# Includes unobtrusive JavaScript, rich JavaScript, Mootools std, etc
# There is very little JavaScript in use in the frontend core at present.
# Mootools and compatibility is under discussion in Google group Joomla-CMS-Dev

[[Category:Specifications Version 1.6]] [[Category:Specifications]]