News-Feeds:
Producing HTML / CSS for TYPO3 templates
We often get clients who want to deliver HTML/CSS templates to us, which we then implement in TYPO3. I'm pretty sure this sort of workflow is common among TYPO3 developers, as it's been reflected in the documentation as far back as Modern Template Building, which does a good job explaining how TYPO3 can separate the HTML/CSS production from the typoscript implementation of the templates. Nonetheless, we often find that if the person putting together the HTML and the styleesheets were more familiar with the CSS classes that are output by core TYPO3 content elements, they could deliver templates that were more complete and easier (read: less expensive) to bring into TYPO3.
To address this problem, Gabe Blair, an employee at Cast Iron Coding, recently wrote up a set of guidelines for our clients and staff producing HTML templates. I'm cross-posting it here with the hope that it can reach a wider audience and, perhaps, prove helpful to someone. Please let me know if you can think of anything that could be added to this, or if you see any mistakes!
Gabe's article is as follows (It's still a work in progress, so please forgive any errors on our part):
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 doesnt 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 dont 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 its useful: .bodytext.
Headers
Its 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 its 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.
comments
October 6, 2007
18:38
I just realized that we promised to provide a set of empty CSS declarations that can be a good starting point, but forgot to do so. I'll update this later today with a link to the CSS.
October 10, 2007
09:13
Thanks.
October 10, 2007
10:20
Hallo,
veröffentlichter Link:
http://castironcoding.com/resources/content-elements-demo/index.html
ist nicht w3c valide.
lg
bernd
October 12, 2007
16:41
Buzz is the official blog resource of the TYPO3 project. You can be part of Buzz too. If you want to blog about the achievements of your team or your personal involvement please check out our HELP section.
Posting this here makes it easy to point out to. Thank you!