Framework Folder Structure

documentation/

The documentation of the framework in English and in the original German, as PDF files. This is a complete copy of the online documentation from yaml.de.

Read the documentation carefully and take the bold tips into account when using the framework.

examples/

This folder contains many application examples of the YAML framework with complete layout examples. The samples are organized according to various themes. The documentation explains selected examples in great detail.

js/

This folder contains a small script for dumy texts as well as the JavaScript library jQuery.

tools/

This folder contains several tools for developing layouts. The files in this folder are not necessary for the framework's functionality and need not be placed on the live server.

yaml/

This folder contains all the framework files. These are the finished, out-of-the-box CSS components as well as templates for the actual layout design. The relevance of each individual component is thoroughly explained in the documentation. Tips for using the framework in actual practice are in Chapter 4.

central_draft.css
markup_draft.html

This is the trunk folder of the YAML framework. It contains the file central_draft.css: a so-called central stylesheet (see section 3.3).

Via this central stylesheet, YAML embeds all the necessary CSS components in the (X)HTML source code of the website -- with the @import rule.

The file markup_draft.html is also here, which contains the source code structure for the YAML framework.

accessible-tabs
microformats rtl-support
syncheight

This folder contains several add-ons to the YAML layout frameworks. These are optional elements that aren't necessary for your work but they provide meaningful extensions to the framework core.

• Accessible Tabs (jQuery plugin)
• Mircoformats
• RTL-Language-Support
• SyncHeight (jQuery plugin)

js
js/yaml-focusfix.js
base.css
iehacks.css
slim_base.css
slim_iehacks.css

This folder, as the name implies, contains the core CSS components for YAML. Used together with the predefined XHTML markup and the file base.css, these files produce a robust three-column basic layout with header and footer (see Section 3.4: The Base Stylesheet).

The file iehacks.css contains all the CSS adjustments that are necessary for Internet Explorer (Versionen 5.x - 7.0) and are independent of the layout and structure (see Section 3.5: CSS Adjustments for Internet Explorer). It is a core component and required for every YAML-based layout. Both these basic files together ensure the browser-independent uniform display of the basic layout.

Each of these stylesheets has its own slim version: intended for the live site, they are optimized for size.

The folder js contains the JS-file yaml-focusfix.js that solves a focus problem of IE8 and Webkit-based browsers (see section 2.8)

basemod_draft.css
content_default.css
forms.css

CSS components for the screen design are in this folder.

basemod_draft.css is a template for the screen layout. It can be copied into different projects and the predefined containers within can be changed or added to with additional elements. Every YAML-based layout will incorporate one or more such basic modification (basemod) files via the central stylesheet (see section 3.6: Creating the Screen Layout as well as Chapter 4).

The second file in this folder is content_default.css. Often-used content elements have been predefined here. This file too can be copied into any project and adjusted accordingly. More information is available in Section 3.8.

forms.css is the CSS-part of YAMLs form construction kit. See section 3.10 for more information.

images/
nav_shinybuttons.css
nav_slidingdoor.css
nav_vlist.css

This subfolder contains the components for the navigation. Various list navigations -- horizontal as well as vertical -- are provided within the YAML framework.

• nav_shinybuttons (horizontal navigation)
• nav_slidingdoor (horizontal navigation)
• nav_vlist (vertical navigation)

More information is available in Section 3.7.

print_003_draft.css
print_020_draft.css
print_023_draft.css
print_100_draft.css
print_103_draft.css
print_120_draft.css
print_123_draft.css
print_draft.css

This folder contains the CSS files for printing YAML-based layouts.

These files modify the screen layout for paper. More information on print layouts is in Section 3.9: Adjusting the Layout for Print.

patch_layout_draft.css
patch_nav_vlist.css

This folder contains the adjustment files for Internet Explorer. The file patch_layout_draft.css is a draft for such a file.

Such stylesheets contain all the necessary CSS hacks for the layout in Internet Explorer and are incorporated into the website with a so-called conditional comment (see Section 3.5: CSS Adjustments for Internet Explorer).

The second file is patch_nav_vlist.css, which belongs to the navigation file nav_vlist.css and adjusts those CSS commands for Internet Explorer. More information is available in Section 3.7.

3col_standard.html
building_forms.html
multicolumnar_forms.html
styling_content.html

This folder contains two very simple examples. The sample 3col_standard.html contains the YAML basis layout: a simple, flexible, 3-column layout with a horizontal navigation.

Both examples building_forms.html and multicolumnar_forms.html demonstrate the use of the Form Construction Kit. For more information, please see: Section 3.10 .

The example styling_content.html demonstrates all the content elements which are influenced by the integration of the default CSS filecontent_default.css, see  Section 3.8.

2col_left_13.html
2col_left_31.html
2col_right_13.html
2col_right_31.html

All the important combinations for 2-column YAML layouts are in this folder.

3col_1-2-3.html
3col_1-3-2.html
3col_2-1-3.html
3col_2-3-1.html
3col_3-1-2.html
3col_3-2-1.html

Here are all variations of the 3-column YAML layout. More information is available in Section 4.4: Variable Column Order.

3col_column_dividers.html
3col_faux_columns.html
3col_liquid_faux_columns.html
3col_gfxborder.html
dynamic_layout_switching.html

Many examples with some far-reaching graphical layout adjustments. Samples of graphic column separators and backgrounds as well as graphical borders.

The section dynamic_layout_switching.html demonstrates the use of CSS classes to switch among various layouts, see Section 4.3.

menu_shiny_buttons.html
menu_sliding_door.html
menu_vertical_listnav.html

Three examples that show the use of the included navigation components. More information is available in Section 3.7.

2col_left_advanced.html
3col_advanced.html flexible_grids.html
flexible_grids2.html
equal_height_boxes.html

This folder contains a few more complex layouts, oriented to the usual practical demands.  In these examples, various functions of YAML are integrated and the use of subtemplates for subdividing content and for layout purposes is demonstrated. 

The example "equal height boxes" is quite a specialty.  It demonstrates the creation of content containers that are all the same height by using subtemplates: see Section 4.5.

fullpage_3col.html
fullpage_grids.html

This folder presents two layout examples demonstrating the multiple use of the CSS classes .page_margins and .page, using a new hierarchy for the containers.

3col_fullheight.html
minmax_js.html

3col_fullheight.html demonstrates a special case were the minimal layout height gets expanded to the full height of the viewport, even without any content.

minmax_js.html demonstrates an alternative method to simulate CSS properties min-width and max-width in Internet Explorer 5.x and 6.0 without using JS-Expressions. More information is available in Section 4.7.

accessible_tabs.html
rtl_support.html
styled_microformats.html

These layout examples demonstrate the use of the provided add-ons, that come along with the download package in folder yaml/add-ons/.

ftod.js

This little script creates dummy text on the fly. It is used in the application samples.

minmax.js

This script allows the use of the CSS properties min-width and max-width in Internet Explorer. More information is available in Section 4.7: Minimum & Maximum Widths.

jquery_1.3.2.js
jquery_1.3.2.min.js

Here you'll find the latest release (October 2008) of the JavaScript library jQuery.

base_dw7.css

Dreamweaver is a versatile and popular editor for creating web pages. Its WYSIWYG capabilities for CSS layouts are, however, somewhat restricted. The file in this folder simplifies the use of Dreamweaver's Design mode with YAML layouts. More information is available in Section 5.1.