5.4 Add-ons
General
The functionality of the framework can be expanded with add-ons. These are complementary elements whose function is either entirely independent of YAML or only useful in specific situations.
Official add-ons are kept in the folder yaml/add-ons/ and are available in the download package as well as in the project template Simple Project.
Add-on: Accessible Tabs & SyncHeight
Tabs have become extremely popular widgets on many websites, as many small blocks of information can be nicely sorted into limited space. JavaScript frameworks like jQuery can create the visual impression of tabs with only very few lines of code, and many other plugins are available with countless configurations for visual presentation.
The problem that even the best scripts have is that the user does not get feedback on activation. Most tab scripts change the presentation of the tabs and the visibility of their content, but leave the user where he was - at the tab he'd clicked - with no idea of what just happened.
Dirk Ginader acted on my suggestion and has recently developed the jQuery plugin "Accessible Tabs" and tested it thoroughly for accessibility. As the topic is so complicated, I ask you to read his own blog post (in English and German) on its functionality and configuration.
The second little plugin with the name "SyncHeight" serves to synchronize the height of any chosen containers via JavaScript. When using it in combination with the tab plugin, it becomes possible to orient the height of the visible tab to the maximum amount of content of all the tabs. The following example demonstrates the simple use of the Accessible Tabs as well as the optional synchronization of the tabs with the SyncHeight plugin.
/examples/09_add-ons/accessible_tabs.html
The required files (jQuery plugin, tab stylesheet) are in the folder yaml/add-ons/accessible-tabs/. The SyncHeight plugin is in the folder yaml/add-ons/syncheight/.
Further information on both plugins is on the following websites.
- Accessible Tabs mit jQuery (german)
- Accessible Tabs with jQuery (english)
- Plugin-Home: Accessible Tabs
- Plugin-Home: SyncHeight
Add-on: Microformats
Microformats are special tags to semantically structure the contents of a website: events, business cards, links, etc., so that they can be read and recognized by machines as well as humans. The content itself is not changed, only the markup.
Without special formatting, microformats are generally invisible for users without special settings -- which hinders their wide use and usefulness. It is better to make microformats immediately visible and recognizable to your visitors.
The folder yaml/add-ons/microformats/ contains the stylesheet microformats.css, which contains standard formatting for the most often-used microformats.
The use of this add-on is demonstrated in the following layout sample:
/examples/09_add-ons/styled_microformats.html
Further information on microformats can be found on the following websites:
- microformats.org
- Microformats Wiki
- Mikroformate (deutsch)
- mikroformate.org (deutsch)
- The BigPicture on Microformats
Add-on: RTL Support
This add-on provides all the relevant components for working with YAML in Hebrew or Arabic languages whose text flows from right to left.
The plugin's files are in the folder yaml/add-ons/rtl-support/. Within that folder are the subfolders core/ with the adjustments of the core elements of the framework: base-rtl.css and iehacks-rtl.css. The folder navigation/ contains the adjustments for the standard included menus.
Basic Principles
The support of right-to-left languages comes from special stylesheets which overwrite existing CSS rules to control text direction and content positioning. These stylesheets thus only contain incremental changes and include the suffix -rtl in the filename: the adjustments necessary for the file base.css are found in the file base-rtl.css.
The activation of the changed text flow from right to left takes two steps. The first step is to change the text direction with the dir attribute of the HEAD element of the page: <head dir="rtl">. The second step is to merely link the RTL stylesheets into your layout. Within the base-rtl.css, the CSS property direction: rtl; is assigned again to the BODY element.
Along with the text direction, many other CSS properties must be changed -- margins, indentations, etc., to present the text correctly..
A sample of base-rtl.css:
ul, ol, dl { margin: 0 1em 1em 0; }
li {
margin-left: 0;
margin-right: 0.8em;
}
The corresponding section of base.css:
ul, ol, dl { margin: 0 0 1em 1em } /* LTR */
li {
margin-left: 0.8em; /* LTR */
line-height: 1.5em;
}
Properties within a regular stylesheet which are overwritten with other values for the RTL display are always marked with the comment /* LTR */.
Example
The use of the add-on is demonstrated in the following example:
/examples/09_add-ons/rtl_support.html
The corresopnding central stylesheet layout_rtl_support.css always links the normal YAML components first and then the RTL variation to overwrite them.
/* import core styles | Basis-Stylesheets einbinden */
@import url(../../../yaml/core/base.css);
@import url(../../../yaml/add-ons/rtl-support/core/base-rtl.css);
/* import screen layout | Screen-Layout einbinden */
@import url(../../../yaml/navigation/nav_shinybuttons.css);
@import url(screen/basemod.css);
@import url(screen/content.css);
/* import rtl-support changes | RTL-Support Anpassungen einbinden */
@import url(../../../yaml/add-ons/rtl-support/navigation/nav_shinybuttons-rtl.css);
@import url(screen/basemod-rtl.css);
@import url(screen/content-rtl.css);
/* import print layout | Druck-Layout einbinden */
@import url(../../../yaml/print/print_003_draft.css);
Note: YAML is a tool for developing website layouts. The modular CSS structure as well as the support for RTL languages via complementary stylesheets with only the necessary changes is based on this concept.
When the layout development of any particular site is finished, the CSS components should be optimized for production: comments removed and files combined to minimize the number of HTTP requests.
