DeutschDeutschEnglishEnglish | Imprint | Login
Yet Another Multicolumn Layout | An (X)HTML/CSS Framework

Changelog 3.x

Changes in Version 3.2.1 [10.01.10]

YAML Core

Improvements
  • yaml-focusfix.js - The JS file webkit-focusfix.js (introduced in v3.2) was renamed due to the extended support for more browsers
  • yaml-focusfix.js - no more pollution of global namespace
  • yaml-focusfix.js - added IE8 support and fallback solution for older webkit browsers
  • iehacks.css - simplified Clearfix adjustments for IE 5.x - 7.0

General

Improvements
  • content_default.css - better contrast on a:focus {} (keyboard acessibility)
  • yaml/navigation: all navigation stylesheets  - adjusted :focus() styles to avoid overruling
  • forms.css - improved robustness for "columnar" and "full" form layout (avoiding float drops)
Bugfixes
  • forms.css - included fix for IE7 auto-padding bug when using buttons

Examples

Improvements
  • equal_height_boxes.html - better accessibility for complex example (hidden more links within content boxes)
Bugfixes
  • flexible_grids2.html - added new skiplink styling to its basemod_grids2.css
  • equal_height_boxes.html - added new skiplink styling to its basemod_equal_heights.css

Changes in Version 3.2 [22.10.09]

YAML-Core

New
  • base.css - merged base.css and print_base.css (smaller filesize)
  • base.css - New subtemplate-set (20%, 40%, 60% and 80%), equalized mode is available
  • base.css - new skip link solution, that allows overlaying
  • js/webkit-focusfix.js -JavaScript based fix for focus problems in Webkit-browsers (Safari, Google Chrome)
Improvements
  • base.css - Split up media types to "all", "screen, projection" and "print", helps to avoid several problems in print layout.
  • base.css - using child selectors for equalize-definition saved about 400 bytes of code
  • base.css - moved visual print settings (fontsize & hidden containers) to print-stylesheets
  • iehacks.css - improved code for robustness of all major layout elements
  • slightly better optimized slim-versions of core-files
Bugfixes
  • base.css - removed <dfn> from the hidden elements again
  • iehacks.css - fixed a bug that made subtemplates invisible in IE 5.01
  • slim_iehacks.css - Clearfix hack was broken in IE7
Dropped Features
  • base.css - removed code to force vertical scrollbars in FF, Safari & Opera (replaced by CSS3 solution in user files) 
  • iehacks.css - removed compatibility code for #page_margins and #page IDs.  
  • iehacks.css - Column Backgrounds with #col3 border-styling isn't available anymore, due to accessibility and maintenance issues in IE

General

New
  • forms.css - added .full class as an option to get full width for <input>, <select> and <textarea> elements in small columns or within subtemplates.
  • content_default.css - added styles for <big>, <small>, <dfn> and <tt>
Improvements
  • forms.css - .yform class can be added to any element. It's not bundled with <form> element anymore.
  • forms.css - ajdusted fieldset- & div-paddings to avoid clipping of element outlines and dropshadows in Safari.
  • forms.css - cleaner and easier fix for fieldset/legend problem in all IE's (including IE8).
  • forms.css - Formatting for "reset" and "submit" buttons changed from IDs to classes to allow multiple forms on a webpage. Styling available via input[type=reset] or input.reset to older support IE versions (IE5.x & IE6).
  • content_default.css - added a fix to <sub>, <sub> to prevent the visual increase of line-height.
  • nav_slidingdoor.css - Removed predefined indent margin of 50px. Indention has to be set by the user in basemod.css
  • nav_shinybuttons.css - Removed predefined indent padding of 50px. Indention has to be set by the user in basemod.css
  • tools/dreamweaver_7/base.css - updated to recent codebase.
  • updated jQuery library to version 1.3.2
Bugfixes
  • forms.css - corrected issue in Firefox 1.x & 2.x where form labels weren't shown correctly in columnar display (FF-Bug)
  • forms.css - no more jumping checkboxes & radiobuttons in IE8 and Opera
  • basemod_draft.css - changed predefined selectors #page_margins and #page into .page_margins and .page
  • content_default.css - nested lists (ol,ul) will be displayed correctly now.
  • markup_draft.html - moved charset metatag in front of title element to allow UTF-8 there
Dropped Features
  • debug.css - removed debug-stylesheet from yaml/ folder. This feature is replaced by YAML's new Debug Application

Add-ons

New
  • Accessible-Tabs plugin for jQuery
  • SyncHeight plugin for jQuery
Improvements
  • Microformats - added missing icons: xfn-child.png, xfn-parent.png, xfn-small.png and xfn-spouse.png
  • RTL-Support - [iehacks-rtl.css] added an option to force the vertical scrollbar to the right in Internet Explorer (disabled by default)

Examples

New
  • All examples - added WAI-ARIA landmark roles for accessibility improvement
  • All examples - added optional CSS3-based code to force vertical scrollbars (overflow-y)
  • multicolumnar_forms.html - demonstrates two easy ways to create flexible multicolumnar forms
  • accessible_tabs.html - example for the usage of the Accessible-Tabs and the SyncHeight add-on
  • 3col_liquid_faux_columns.html - demonstrates "Liquid Faux Columns" technique
Improvements
  • 3col_gfxborder.html - changed ID's to classes to allow multiple usage
  • building_forms.html - JavaScript Detection added
  • equal_height_boxes.html - added a second usage example (simple)
  • dynamic_layout_switching.html - added JavaScript detection code and option to "show all columns"
Removed
  • 3col_column_backgrounds.html - this feature isn't supported anymore due to accessibility issues
Bugfixes
  • 2col_right_13.html - corrected fix for 3-pixel-bug in IE-patch file
  • dynamic_layout_switching.html - corrected fix for 3-pixel-bug in IE-patch file
  • equal_height_boxes.html - still used #page_margins and #page ID's.
  • index.html - link to last example corrected
  • several CSS files were still not saved in UTF-8
  • UTF-8 BOM signature removed from some files in examples/04_layout_styling/

Changes in Version 3.1 [20.01.09]

New Functions and Extensions

  • Form Construction Kit
    YAML now includes a complete building kit of HTML and CSS building blocks for building forms.  For more information, see Section 3.10.
  • Support for content boxes of the same height
    YAML's subtemplates can now produce boxes of the same height - that of the container with the most content.  All with CSS.  For more information, see Section 4.5.
  • A better standard template for designing content
    The content_default.css has been completely reworked and expanded and now contains a nearly complete set of set formats for texts, tables, and images.
  • Add-on: support for microformats
    This add-on provides visual emphasis for the most important microformats.
  • Add-on: support for RTL languages
    This add-on provides complete support for working with right-to-left languages (Hebrew and Arabic languages).  It includes the required adjustments of the core files and navigation elements.
  • Layout examples included
    The number of included examples has been completely reworked and expanded.  7 new sample layouts demonstrate the use of the new functions.
  • Download package and Simple Project
    The JavaScript library jQuery version 1.3 is now included in both packages in the folder js/lib/.

Changes and Corrections

(X)HTML Markup
  • IDs #page_margins and #page are now CSS classes 
    This change allows the classes  .page_margins and .page to be used more than once per page, thus broadly expanding the design possibilities.  The change has no influence on existing YAML layouts and their updates.  The necessary IE adjustments for the IDs are still included. 
  • Unification of the navigation elements
    The markup of the included navigation blocks has been unified.  All IDs were transformed into CSS classes and all classes named in a uniform manner.
Core Files [base.css]
  • Expansion of the reset block
    The blockquote and the quote elements are now included in the reset block.  Any browser-predefined quotation marks are removed in favor of a uniform presentation.
  • Bugfix for the unfortunate rendering of select elements in Firefox
    The reset block has been expanded to include 1px padding for select elements.
  • Generic layout classes removed
    The CSS classes .hidecol1, .hidecol2 and .hideboth must be adjusted for specific layouts, so they belong in the user CSS. The new layout example "dynamic_layout_switching" demonstrates their use.
  • Reworking of classes for hidden content
    The declarations for width and height were removed from the classes .skip, .hideme, and .print so they could more easily be made visible.  The DFN element was added to the hidden elements.
Core Files [iehacks.css]
  • [fix] Reworking of the z-index values for content columns
    Now Internet Explorer 6 users can again mark content in #col3 in all column variations.
Core Files [print_base.css] 
  • Font family no longer set
    The font specification "Times New Roman" has been removed from the print stylesheet.  The print version now uses the same font as the screen layout.  The switch to the pt (point) unit of measurement remains, the standard size is still set to 10pt.
  • Marking abbreviations and links
    The CSS rules for visibly marking abbreviations and linked urls have been moved to the print stylesheet (print_xyz_draft.css) to be turned on or off.
  • Introducing the CSS class .noprint
    Dynamic content elements or areas that are too difficult to select via CSS can now be hidden from the print version with the .noprint class.
Navigation [shiny_buttons.css]
  • [fix] Collapsing margin
    The collapsing of the navigation's left margin in Internet Explorer 5.x and 6.0 was corrected.
Graphics
  • File size optimization
    All included graphics files of the YAML folders and the layout examples were optimized for size and the majority converted to PNG images.
  • Included Photoshop templates
    All Photoshop templates (for example, the gfxborder graphics) are now collected in one central folder: examples/photoshop-files/.

Changes in Version 3.0.6 [09.06.08]

Changes and Corrections

Core-Files
  • [fix] Missing .print definitions added
    Elements with class .print were invisible in print layout. This is fixed now.
  • [fix] Opera & attribute selectors
    Opera 9.2x seems to have a bug concerning the optimized attribut selectors (missing brackets) in slim_print_base.css. Although all definitions are within @media print this bug leads to rendering problems in screenlayout. This bug is fixed now.
  • [new] Improved debug-stylesheet
    YAML's debug stylesheet now visualizes xhtml page structure, subtemplates and special markup for content elements.

Changes in Version 3.0.5 [24.05.08]

Changes and Corrections

  • Updated license conditions
    For free use under Creative Commons License (CC-A 2.0) naming the author is no longer necessary. A back link to YAML homepage is sufficient. The license texts of commercial licenses (YAML-C) have been revised and clarified in relation to reproduction and redistribution.
  • Overall code clean-up
    CSS scripting layout (white spaces within brackets and semicolon behind last properties) within YAML files was equalized.
  • Better optimized slim-files
    All core files where optimized for even smaller slim-variants for production use.
  • @media rule for screen layouts changed
    basemod- and IE-patch files contain all relevant CSS rules for the screen layout. The @media rules within these files have been changed to screen, projection. Therefore, the screen layout shouldn't have an impact on the print layout anymore.
Core-Files [base.css]
  • #topnav positioning
    Container #topnav gets property position:absolute only within #header. In any other case it's a static container with text-alignment to the right.
  • Subtemplates
    CSS class .subcolumns_oldgecko doesn't get overflow:hidden anymore. Containing Floats is done via float:left.
  • z-index
    Specific z-index values were be removed from base.css (more simple fix for IE Clearing bug in iehacks.css). This should help a lot to avoid problems with e.g. dropdown menus.
Core-Files [iehacks.css]
  • Bugfix for IE-Clearing-Bug using negative z-index
    The IE-Clearing-Bug can't be fixed completely in IE 5.x. But now there is a more simple way to avoid problems in IE by using one single negative z-index for #col3, than defining positive values for all content columns.
Layout examples [Folder /examples/]
  • New "Special Interest" example: "3col_fullheight"
    In this example the overall layout height will be expanded to the bottom of the viewport, if page content isn't enough to fill the screen. This example is labeled as "special interest" as a concept proof for for experienced users only.
  • Improved JS-Expression for min-/max-width in IE 5.5 and IE6
    The new JS-expression works without problems in Quirks Mode and EM based values will be calculated - as they should - from parent elements font size.
  • Small screen layoutadjustments
    Some minor changes were made in the screen layout (basemod.css) to bring it mor in line with the YAML Builder and the Simple Project Example.

Changes in Version 3.0.4 [27.11.07]

Changes and Corrections

Core-Files [base.css]
  • Better solution to force vertical scrollbars in Firefox
    The new solution forces vertical scrollbars with html { height: 100%; margin-bottom: 1px; } that leads to only 1 pixel overlap and is much more pleasing.
  • Changes in the reset-CSS block
    The cite element was removed from the block. The blockquote element doesn't get predefined properties font-size and width anymore. This can be done by the user within content.css file.
  • Container #header
    The container #header gets clear:both property. Now it is easily possible to switch   position of #header and #nav in the markup without negative interactions of floating navigation elements on #header.
  • Generic classes for l ayout switching
    The naming of the classes .hideleft and .hideright wasn't semantic, as the source order of column containers is independent from their position in screen layout. Therefore the classes are renamed to .hidecol1 and .hidecol2, which makes them clearly assigned. The class .hidenone is obsolete and was removed.
Core-Files [iehacks.css]
  • Improved layout stability
    Better stability for flexible columns in IE5.x + IE6 by adding #main {position:relative}. This avoids wrong positioning of columns after resizing the browser window while using IE-Expressions.
  • Bugfix added for List-Numbering-Bug
    Affects all IE versions 5.01 - 7.0: If a list element of an ordered list gets a property that activates hasLayout, IE doesn't correctly assign numbers to the list items.
Screenlayout Draft [content_default.css]
  • Fix for Gecko problems and font-size reset of monospaced elements
    Elements using  monospaced font (textarea, tt, pre, code) will get a standard font-size of 13px instead of 16px when resetting font-size. A bugfix was added.
Layout examples [Directory /examples/]
  • [3col_2-1-3]
    improved CSS design without activating IE/3-Pixel-Bug,
    changed imported print-stylesheet to print_100_draft.css.
  • [3col_3-1-2]
    improved CSS design without activating IE/3-Pixel-Bug,
    changed imported print-stylesheet to print_100_draft.css.
  • [3col_fixed_seo]
    Bugfix for wrong min-width behavior of Safari 3,
    better CSS design without activating IE/3-Pixel-Bug
  • [3col_gfxborder]
    Naming of edge graphics and -containers changed to be more consistent.
  • Namespace added to <html> element in all layout examples
  • 3-column-examples (03_3col_layouts)
    Fixed lateral paddings of content containers within the columns according to their position on screen.

Changes in Version 3.0.3 [18.08.07]

Changes and Corrections

Core-Files
  • [iehacks.css] Bugfix for input elements in IE6
    The new bugfix for the Italics-Bug in V3.0 had a side effect, that input elements were arbitrary extended in IE6. A fix was added and slim_iehacks.css was updated.

Changes in Version 3.0.2 [02.08.07]

Download Package & Documentation

  • [Doc en/de] some URL’s corrected.
  • [Doc de] section numbering corrected, missing section 5.3 added
  • [Doc de] Section 1.4: futher links added
  • [CSSDoc-Comments] beautified indenting of comments in css files

Änderungen und Korrekturen

Core Files
  • [base.css] fix for missing scrollbars in Opera 9.x
    Negative margins of classes .skip, .hideme and .print were reduced to -1000em to avoid this bug.
  • [iehacks.css]  CSS bugfixes for different media
    Bugfixes for the Doubled Float Margin Bug and the Expanding Box Problem only affect output on screen via @media screen rule.
  • [iehacks.css] Bugfix for single line textarea elements in IE6
    The new bugfix for the Italics-Bug in V3.0 had a side effect, that textarea elements were reduced to a single line in IE6. A small fix was added.
  • [print_base.css] print preview in IE6 & linearization of subtemplates
    Subtemplates are linearized by default. The print preview in IE6 is now more stable.
Navigation Elements
  • Adjusted background colors of list elements in nav_slidingdoor.css and nav_shinybuttons.css.
Other
  • Some small adjustments in the layout examples (page titles changed)

 

Changes in Version 3.0.1 [16.07.07]

Changes and Corrections

Core-Files
  • [fixed] A small rounding bug in Subtemplates
    In v3.0 the 33- and the 66-percent Subtemplates container had wrong widths.

Changes in Version 3.0.1 [09.07.07]

Download Package & Documentation

  • Bilingual Documentation
    The extensive documentation as well as all comments in the framework's CSS files are now available in English and in German.
  • Comprehensive Restructuring of the Download Package
    The download package now distinguishes clearly between the actual framework, the documentation, and layout examples and tools. The structure of the framework was reworked.
  • Optimized Stylesheets for Use in Production
    The core files of the framework were optimized for use on the live server.
  • Conversion of all Files to Character Encoding "UTF-8"
    All framework files were converted to UTF-8 character encoding. As the comments in the files are now available in more than one language, this step was logical and unavoidable.
  • CSS Comments according to the CSSDOC Standard
    The CSSDOC Standard offers a machine- and human-readable format for comments within CSS files.
  • Better Support of Dreamweaver 7 and 8
    For Dreamweaver 7 (MX 2004), an alternative base stylesheet is included, which enables a nearly error-free display of YAML-based layouts in the WYSIWYG design mode. A readme.txt is available for both Version 7 as well as for Version 8; this explains all the necessary adjustments for working with YAML.
  • Numerous New Sample Layouts
    The number of included example layouts has increased greatly. All layout examples base on an appealing new design.

Changes and Corrections

Markup
  • [changed] Simplification of the (X)HTML Source Code
    The class .hold_floats must no longer be explicitly assigned to #page: the bugfix is activated by default in the iehacks.css file.
Core Files
  • [new] Optimized Stylesheets for Production
    The stylesheets in the core/ folder of the YAML framework are also available in optimized form (smaller filesize). These versions have no comments and compromise between readability and smallest possible file size. This saves valuable bandwidth on the live server.
  • [new] Alternative Column Concept based on Classes
    Four generic CSS classes allow an even simpler choice of which columns display in the basic layout.
  • [new] Generic CSS Classes for Hidden Content
    The CSS classes.hideme and .print now provide two options for hiding content onscreen and yet keeping it available for screen readers and text browsers. The classes are defined in base.css and thus always available.
  • [new] Handling Oversized Elements in IE
    IE5.x and 6.0 can now interpret the CSS class .slidebox, defined in iehacks.css, to let oversized elements merely overlap onto neighboring layout areas rather than destroying a page's layout.
  • [new] New Bugfix for IE Italics Bug
    A new universal bugfix in base.css solves the problem with italic fonts in IE 5.x and 6.0. Previously, this bug was addressed in the content as it occurred.
  • [new] IE7 Bugfix for Print
    IE7 has problems printing #col3 because it does not have the property 'hasLayout' and correspondingly forces page breaks. The file iehacks.css now contains a suitable bugfix.
  • [new] Bugfix for Firefox 2 overflow:hidden Bug for Print
    Firefox Version 2.x has problems dealing with the property overflow:hidden in printing. A suitable bugfix is now in the print_base.css file for the generic class .floatbox.
  • [changed] Min-/max-width Support for IE 5.x and IE6
    The script solution via expressions was reworked, so that IE need no longer be set to Quirks Mode and can interpret EM-based values.
  • [changed] Subtemplates
    The CSS of the block and content containers was simplified. The block container now encompasses the content by virtue of its float property. Oversized content elements are now no longer cut off. The compensation for rounding errors was also improved, so that .subcolumns itself is no longer an oversized container (> 100%). The alternative class.subcolumns_oldgecko allows support among old Gecko browsers (i.e. Netscape < Version 7.2).
  • [changed] Skip-Link Navigation
    The skip-links are now immediately visible as soon as the tag navigation is activated. This behavior is required for layout accessibility.
  • [changed] Reworked Print Stylesheets
    All layout-independent adjustments for printing were split off into an independent CSS component file print_base.css, which is loaded via the print stylesheet. This helps keep track of the styles and individual changes are more easily made.
  • [changed] Hover Effects for Links in IE7
    Hover effects are no longer blocked in IE7 via iehacks.css.
  • [removed] Old IE Clearing (up to V2.4) is no longer supported
    The CSS declarations for the old CSS class .clear_columns were removed from the base.css file.
  • [removed] Hacks for IE Mac Removed from the Project
    IE/Mac interprets neither the normal style declarations nor the IE adjustments, as they are loaded via Conditional Comments and the @media rule. The Mac hacks (special comments) were rather confusing in the iehacks.css file, and were deleted. YAML supports this outdated browser by displaying all content without any CSS formatting at all.
Navigation Elements
  • [new] Navigation Elements Generally
    All included navigation lists support the tab navigation correctly, including the emphasis on the currently active menu item.
  • [new] Navigation Elements Generally
    The active menu item in any navigation element can be set either via the ID #current or now also via strong.
  • [new] Expansion of the vlist Navigation
    The vlist navigation can now display four instead of the previous two navigation levels.
  • [removed] The Navigation "Sliding Door I" removed
    The version "Sliding Door II" is still available and was renamed to nav_sliding_door.css.
Content Design
  • [new] New CSS Component content_default.css
    The file content_default.css is located in the yaml/screen/ folder and provides basic formatting for all standard content elements and can be incorporated if desired.
  • [new] Generic CSS Classes for Content Design
    The content_default.css component offers three new CSS classes .note, .important, and .warning for emphasizing content.
Other
  • [new] Debugging Stylesheet
    A new optional stylesheet debug.css makes layout debugging easier (see Section 4.8: Drafting and Debugging). Predefined CSS classes for displaying pixel grids, transparencies, or background colors allow a simple emphasis / test of layout elements. The stylesheet also warns the user, should the core stylesheet iehacks.css not load correctly.