HTML/CSS for TYPO3 Sites: Best Practices
Here are some guidelines and best practices for developing HTML/CSS site templates for use in a Cast Iron Coding TYPO3 environment. At the end of the this document, I'll provide a basic slug of empty CSS so you can easily style some of the basic default content elements used by TYPO3.
Markup
General
It should go without saying that separating presentation from structure as much as possible is good practice for any web development project. There specific items that can be especially useful for developers implementing a TYPO3 site, such as:- Keeping markup as static as possible, implementing presentational variation using styles.
- Using classes on the <body> tag to implement presentational variation/branching
Static Content
"Static content" means the areas of a site where content will be static, for example a company logo at the top of every page, or a header that doesn’t change, copyright notices at the bottom, etc. No special considerations need to be made for the static parts of a template when using TYPO3.Dynamic Content
"Dynamic content" means the sections of the HTML where the CMS will insert content. The container element for each dynamic content section should have an id attribute.General TYPO3 Content Types
TYPO3 has a handful of classes and conventions it uses when creating various content types available to the CMS user by default. While these conventions may be somewhat outdated and inconsistent - having been developed by many people over a long period of time in the early stages of TYPO3 development - and don’t always adhere to the naming guidelines outlined above, they remain part of the functionality of the TYPO3 core. Using the standard class names and structures when possible allows for speedy and smooth implementation. This section describes a number of the more common conventions used by TYPO3. Some of these may not be useful and can of course be ignored. When developing a template for a TYPO3 site, the minimum markup needed to be styled can be taken from our Content Elements Demo page.Body Text
TYPO3 outputs paragraph tags with a specific class on them, in case it’s useful: .bodytext.Headers
It’s a good idea to declare styles for all header tags (h1-h6), because it is possible for the CMS to output all of these. If less than six variations of header are needed in the design, make the remaining tags identical to the last variation. Typo3 will output the first header in a dynamic content area with a special class, whether it’s h1 or h6 or anything in between. Using this class, specific control is afforded over the presentation of the first header in each dynamic content area: .csc-firstheader.Text with image
There are a handful of classes used by TYPO3 to allow for user control of some presentational aspects of a section of text with an accompanying image. There are examples of two variations of this on our Content Elements Demo page.These are wrapped with div tags having a basic class of .csc-textpic. An additional two class are added at this level to specify the position of the image in relation to the text: .csc-textpic-[x], and .csc-textpic-[y], where [x] can be one of left, center, or right, and [y] can be one of above or below. The image itself is wrapped in a div with class .csc-textpic-imagewrap.
Lists
Generic unordered lists are output by default with the class .csc-bulletlist. To style variations of lists, use .csc-bulletlist-0, .csc-bulletlist-1, .csc-bulletlist-2, and .csc-bulletlist-3. The TYPO3 CMS user has the choice of creating a list with one of these four classes added to it.Tables
Tables are also configurable by the TYPO3 user to have various classes on them. The basic class on table tags is .contenttable. As with lists, tables have four variations that can be added: .contenttable-0, .contenttable-1, .contenttable-2, and .contenttable-3. Table row tags also have enumerated classes added to them: .tr-0, .tr-1, etc. The last table row will have the class .tr-last on it. In addition, table rows have the following alternating classes on them: .tr-even, .tr-odd. Table cells have similar classes: .td-0, td-1, … A class of .td-last is added to the last cell in a row, regardless of how many columns are in the table.Variation on Tables: Filelinks
"Filelinks" is the name of a type of content element available in TYPO3 to display a tabular list of files with thumbnail images. This is basically a variation on the .contenttable structure discussed above, though "file links" tables have no more than three columns. The table tag has the class .csc-uploads. Table rows have the same .tr-even and .tr-odd classes on them, but do not have enumerated classes in addition. The three columns of cells (td tags) have the following classes: .csc-uploads-icon, .csc-uploads-fileName, and .csc-uploads-fileSize.Got comments? Post them here.
Posted on Wednesday, October 03, 2007 at 06:57 PM.