Documentation – YAML CSS Framework
Description: Online documentation and usage examples for all framework modules, containing responsive grids and columns, forms, navigations, typography and support for rtl-languages.
Keywords: css, css framework, toolkit, css layout, grid, column, equal height, html5, css3, flexible, mobile layout, responsive layout, accessibility, modular, forms

- Skip to navigation (Press Enter)
- Skip to main content (Press Enter)

### Quick Start Demos

Here are some examples that show the YAML CSS framework in full flight.

#### Flexible Grid

A flexible and responsive grid layout showing the basic usage of YAMLs grid elements.

View Example

#### Columns & Grids

A responsive layout with a flexible content column, some nested grid elements and a fixed width sidebar.

View Example

#### Custom Grid (960px)

A fixed grid layout, based on 960 Grid System. It shows the use of custom grid configurations.

View Example

#### RTL Support

A demo for YAMLs support of Hebrew or Arabic languages, that have «right to left» text flow.

View Example

## Introduction

### Framework Core

#### Framework Base: "base.css" yaml/core/base.css

The stylesheet base.css in the folder yaml/core/ is the first and most important core-file of the YAML framework. It lays the foundation (browser normalisation, layout-modules eg. grids, forms etc.). This stylesheet is required for every YAML-based layout and should not be changed!

Module | Classes | Short Description
--- | --- | ---
Normalisation | - | This module provides a reliable foundation for development by crossbrowser-normalizing the visual style for the most important elements. YAML offers an optional typography module containing default styles for all typical semantic HTML elements with an em-based (proportional to base font-size) vertical rhythm.
Layout | parent class `.ym-wrapper` optional class `.ym-wbox` | The layout module defines a layout-wrapper and default values for minimum and maximum width.
Grid | parent class `.ym-grid` child classes `.ym-gl` `.ym-gr` `.ym-g[xx]` optional classes `.ym-equalize` `.ym-gbox` `.ym-gbox-left` `.ym-gbox-right` | The grid module provides flexible, nestable grids. Standard column widths are based on percentages. Optionally, all columns within a grid row can have equal height. Grid sizes can be extended/customized with user-defined CSS classes.
Column | parent class `.ym-column` child classes `.ym-col[1|2|3]` optional classes `.ym-cbox` `.ym-cbox-left` `.ym-cbox-right` | The column module divides a content area horizontally into a set of 2 or 3 columns whose widths can be defined in arbitrary units [px, em, %]. Column order can be defined via CSS by the user.
Form | parent class `.ym-form` child classes `.ym-fbox-text` `.ym-fbox-select` `.ym-fbox-check` `.ym-fbox-button` optional classes `.ym-full` `.ym-columnar .ym-required .ym-error .ym-message .ym-label` | The form module provides the standard building blocks for designing robust flexible forms and offers three positioning options for arrangement of labels and form elements. YAML strictly separates structural form design (base.css) from visual styling of the form, to enable easy theming.
Float Handling | float clearing `.ym-clearfix` float containing `.ym-contain-dt` `.ym-contain-oh` `.ym-contain-fl` | This module offers several classes to handle floated objects within the layout. The `.ym-clearfix` class enables markup-free clearing of floats. The other predefined classes can be used to contain floated elements (or to handle unknown content in general, e.g. user generated content).
Accessibility | parent class `.ym-skiplinks` child class `.ym-skip` optional classes `.ym-hideme` `.ym-print .ym-noprint` | The accessibility module provides a robust, layout-independent implementation for skip links. Furthermore it contains CSS classes to make content accessible for screen readers but hide them in visual media or make them visible only in the printed output.

#### Support for old Internet Explorer versions "iehacks.css" yaml/core/iehacks.css

The stylesheet iehacks.css from the yaml/core/ folder is the second core component of the YAML framework. It contains all the structure- and layout-independent bugfixes for Internet Explorer (versions 5.x/Win - 7.0/Win). This bugfix-collection is essential for the robust and error-free presentation of YAML-based layouts in old Internet Explorer.

This stylesheet is optional but required for legacy support of old Internet Exlorer versions prior IE 8 and should remain unchanged! Many bugfixes exploit IE's numerous parser bugs - particularly those in older IE versions. The resulting CSS code is therefore not always valid and should thus only be made accessible to IE. This is possible with the use of Conditional Comments in the `<head>` of the document. The Conditional Comment has to be included below all regular stylesheets.

List of CSS bugsfixes provided by iehacks.css:

- fixes italics bug
- fixes disappearing list-background bug
- fixes list-numbering bug
- fixes guillotine bug (IE6, in most cases)
- fixes doubled float-margin bug (for YAML's structural elements)
- workaround for expanding box problem
- removes additional paddings in buttons
- triggers hasLayout for HTML5 elements and YAML's structural elements
- activates bicubic interpolation for image scaling
- several stability fixes

#### Basic Framework Integration

Here's a template of an empty HTML5 file containing the integration of YAML's core stylesheets:

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8"/>

      <title></title>
      <meta name="description" content=""/>
      <meta name="author" content=""/>

      <!-- mobile viewport optimisation -->
      <meta name="viewport" content="width=device-width, initial-scale=1.0">

      <!-- stylesheets -->
      <link rel="stylesheet" href="yaml/core/base.min.css" type="text/css"/>
      <link rel="stylesheet" href="css/styles.css" type="text/css"/>

      <!--[if lte IE 7]>
      <link rel="stylesheet" href="yaml/core/iehacks.min.css" type="text/css"/>
      <![endif]-->
    </head>
    <body>
      ...
    </body>
    </html>

For both core-files, minified file versions are provided. base.min.css weights only 4.6 kB and iehacks.min.css has a filesize of 2.1 kB. Use them for your production code. For development and a deeper understanding of the framework use the non-minified, commented file versions.

Of course, you can build your layouts on XHTML 1.0 or HTML 4 Strict. YAML only requires the browser to be in Standard Mode. In Quirks Mode, YAML can't provide IE6 and 7 support.

#### Central Stylesheets for Improved Development Workflow

For prototyping and working with several, reusable stylesheets, YAML uses central stylesheets that import all other stylesheets. This reduces HTML changes (think of Content Management Systems) to a minimum during development.

    <head>
      ...
      <link rel="stylesheet" href="css/central.css" type="text/css"/>
      <!--[if lte IE 7]>
      <link rel="stylesheet" href="yaml/core/iehacks.min.css" type="text/css"/>
      <![endif]-->
    </head>

Here's an example for how such a central stylesheet could look like:

    /* Google Font API */
    @import url("http://fonts.googleapis.com/css?family=Droid+Serif");
    @import url("http://fonts.googleapis.com/css?family=Droid+Sans:700");

    /* import framework core */
    @import url("../yaml/core/base.min.css");

    /* import screen layout */
    @import url("../yaml/navigation/hlist.css");
    @import url("../yaml/forms/gray-theme.css");

    @import url("screen.css");
    @import url("typography.css");

    /* import print layout */
    @import url("print.css");

For production use, all stylesheets should ideally be concatenated and minified to reduce HTML requests and bandwidth of course.

### HTML5 Support

Visit the html5shim project on Google Code.

The recent version 3.0 of html5shim has some issues. I recommend watching the discussion and/or try one of these alternatives:

- html5 innershiv
- IEPP

#### html5shim

HTML5 is supported by all modern browsers. To enable Internet Explorer 6-8 to render HTML5 elements correctly, JavaScript is mandatory to register the new elements so that the browser allows them to be styled with CSS.

    <head>
      ...
      <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
      <![endif]-->
    </head>

On the htm5shim project page this code-snippet is presented without the leading "http:" in the script URL. This is no problem as long as you're running on a webserver. It fails, if you're testing an HTML file from the file system on your local machine – that's why we included it here.

## Layout Module yaml/core/base.css

#### Flexible Layouts

The CSS2 Box Model is best suited for fixed measurements (i.e. pixels). The total width of a container is determined by adding the individual properties of the box: `width`, `padding`, and `border`.

If there are mixed units of measurement within a container (e.g. `width: 25%; padding: 0 10px;`), it is no longer possible to calculate the total width of the container in advance.

YAML solves this problem by using nested elements to separate values for width (`.ym-wrapper`) and `paddings` and `borders` (`.ym-wbox`).

The `.ym-wbox` elements are optional and can be removed when using CSS3 Box Modell (`box-sizing:border-box`).

### PAGE Layout

Header
Main

The layout looks like a single sheet of paper on top of `<body>`. All content sections are wrapped by a single width-defining element.

#### Default Markup

    <body>
      <div class="ym-wrapper">
        <div class="ym-wbox">
          <header> ... </header>
          ...
        </div>
      </div>
    </body>

### FULLPAGE Layout

Header
Main

The layout is subdivided into several vertical aligned sections, covering the full width of the viewport. The content area is aligned or centered within these sections.

#### Default Markup

    <body>
      <header>
        <div class="ym-wrapper">
          <div class="ym-wbox">
            ...
          </div>
        </div>
      </header>
      ...
    </body>

### Layout Configuration

##### PAGE Layout

Values for `width`, `min-width` and `max-width` are defined for the `.ym-wrapper` element, as the outmost layout element. Any white space to the boundaries of the layout can be defined for `.ym-wbox`, using `margin`, `padding` or `borders`.

    .ym-wrapper {
      min-width: 760px;
      max-width: 80em;
    }

    .ym-wbox { padding: 10px; }

##### FULLPAGE Layout

The value for `min-width` should be defined for the outmost layout element (here: `<header>`). All other width values (`width` and `max-width`) have to be defined for the `.ym-wrapper` element. White space surrounding the layout can be defined for `.ym-wbox`, using `margin`, `padding` or `border`.

    body > header { min-width: 760px; }

    .ym-wrapper {
      max-width: 80em;
    }

    .ym-wbox { padding: 10px; }

## Grids Module yaml/core/base.css

Grids are wrapped by an element with the `.ym-grid` class.

To allow independent control of grid-column widths and gutters (remember the CSS2 Box Modell), YAML uses a nested structure were `.ym-g[xx]` classes hold `width` values and `.ym-gbox` class holds `margin`, `padding` or `border` values.

The `.ym-gbox` elements are optional and can be removed when using CSS3 Box Modell (`box-sizing:border-box`).

### Default Grid Configuration

20 %
20 %
20 %
20 %
20 %
25 %
25 %
25 %
25 %
33.333 %
33.333 %
33.333 %
50 %
50 %
Full Width

#### Predefined Split-Values

##### Grid Classes

CSS class | Column Width
--- | ---
`.ym-g20` | 20 %
`.ym-g25` | 25 %
`.ym-g33` | 33.3333 %
`.ym-g38` | 38.2 % (Golden Ratio)
`.ym-g40` | 40 %
`.ym-g50` | 50 %
`.ym-g60` | 60 %
`.ym-g62` | 62.8 % (Golden Ratio)
`.ym-g66` | 66.6666 %
`.ym-g75` | 75 %
`.ym-g80` | 80 %

##### Grid Visualisation

20 %
80 %
25 %
75 %
33.333 %
66.666 %
Golden Ratio (1 : 1.618) 38.2%
Golden Ratio (1 : 1.618) 61.8%
40 %
60 %
50 %
50 %
60 %
40 %
Golden Ratio (1.618 : 1) 61.8%
Golden Ratio (1.618 : 1) 38.2%
66.666 %
33.333 %
75 %
25 %
80 %
20 %

#### Default Markup

Grids are wrapped by an element with the `.ym-grid` class. The grid module is based on floats. Standard float direction is left, using CSS class `.ym-gl`. At the end of each row, rounding errors will be corrected by changing the float direction for the last column to right (`.ym-gr`).

To allow independent control of column- and gutter-widths, YAML uses a nested structure were `.ym-g[xx]` classes hold `width` values and `.ym-gbox` class holds gutter values as `padding` or `margin`.

    <div class="ym-grid">
      <div class="ym-g50 ym-gl">
        <div class="ym-gbox">
          <!-- content -->
          ...
        </div>
      </div>
      <div class="ym-g50 ym-gr">
        <div class="ym-gbox">
         <!-- content -->
         ...
        </div>
      </div>
    </div>

### Nested Grids

Grids can be nested in any variation to achieve your design. You can also combine or nest grid modules and column modules within your layouts.

50 %
50 %
50 %
50 %
33.333 %
33.333 %
33.333 %

    <div class="ym-grid">
      <div class="ym-g50 ym-gl">
        <div class="ym-gbox">
          <!-- content: grid-column -->
        </div>
        <div class="ym-grid">
          <div class="ym-g50 ym-gl">
            <!-- content: nested grid-column -->
          </div>
          <div class="ym-g50 ym-gr">
            <!-- content: nested grid-column -->
          </div>
        </div>
      </div>
      <div class="ym-g50 ym-gr">
      ...
      </div>
    </div>

### Advanced Grid Features

#### Custom Grids

yaml/screen/grid-960-12.css yaml/screen/grid-960-16.css

YAMLs grid module provides a logical subdivision of widths (1/2, 1/3, 1/4, 1/5 and Golden Ratio) but it can easily be extended. Custom grid configurations, e.g. a fixed grid, can be created with only a few lines of CSS. Here is an example for a simple 960.gs port (without pull and push classes):

##### Custom Grid Configuration

    /* Simple 960.gs port for YAML 4 */
    .ym-g960-1 { width: 80px; }
    .ym-g960-2 { width: 160px; }
    .ym-g960-3 { width: 240px; }
    .ym-g960-4 { width: 320px; }
    .ym-g960-5 { width: 400px; }
    .ym-g960-6 { width: 480px; }
    .ym-g960-7 { width: 560px; }
    .ym-g960-8 { width: 640px; }
    .ym-g960-9 { width: 720px; }
    .ym-g960-10 { width: 800px; }
    .ym-g960-11 { width: 880px; }
    .ym-g960-12 { width: 960px; }

    .ym-gbox {
      padding: 0;
      margin-right: 20px;
    }

##### Custom Grid Markup

    <div class="ym-grid">
      <div class="ym-g960-6 ym-gl">
        <div class="ym-gbox">
          <!-- content: left -->
        </div>
      </div>
      <div class="ym-g960-6 ym-gl">
        <div class="ym-gbox">
          <!-- content: right -->
          ...
        </div>
      </div>
    </div>

Predefined stylesheets for a 12- and 16-columns port of 960.gs can be found in folder /yaml/screen/.

In the same way, it is possible to create robust custom grids based on em-unit or to extend YAMLs percentage-based grids with other ratios and you're still able to define `padding` and `border` properties independently. This way the most complex flexible grids are still very easy to handle.

### Equal Heights Grids

Have you ever dreamed of flexible content boxes with complete graphical styling ability? Do you wish them to feature equal heights via pure CSS? Do you need them to be crossbrowser with full support for older IEs?

Here they are.

###### Left Grid Column

- List Item 1
- List Item 2
- List Item 3

###### Right Grid Column

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.

To enable equalized column heights within a grid row, simply add `.ym-equalize` to the grid container `.ym-grid`.

    <div class="ym-grid ym-equalize">
      ...
    </div>

##### Technical Information

This flexible equal heights solution is based on YAMLs grid module and combines three layout techniques. The equal height boxes are based on CSS tables (in all modern browsers) and floats (in Internet Explorer 6.x – 7.0). Additionally it uses Alex Robinson's Equal Height technique for `.ym-gbox` containers in all browsers and therefore inherits one of its limits.

##### Limits of this "equal heights" approach

As Alex Robinson writes in Appendix J of his «one true layout» article, some browsers have issues when linking to anchors in elements within the containing block (e.g. anchors of skip links). This problem is fixed in recent versions of Firefox, Opera and Safari and there is a workaround for IE5.x & IE6 – but this can't be fixed in Internet Explorer 7.0 with CSS. Therefore keep that issue in mind (avoid linking into equalized containers) when using equal heights subcolumns.

### Responsive Grids

Flexible layouts work best when their responsive behavior is based on the boundary conditions of the individual screen designs. That's why YAML doesn't provide a pre-baked plan for linearization of grid elements.

As a frontend developer, you are completely free to define, how many levels of linearization your design needs and when they should be applied.

#### Progressive Linearization

Here's a code-snippet to a linearization level for the grid module at a viewport size, lower then 760px. To create additional levels, copy this media block, set the viewport size, when the new level is triggerd (max-width) and count up the number in the class name.

    @media screen and ( max-width: 760px )  {

      /* linearization for grid module */
      .linearize-level-1,
      .linearize-level-1 > [class*="ym-g"] {
        display: block;
        float: none;
        padding: 0;
        margin: 0;
        width: 100% !important;
      }

      /* reset defined gutter values */
      .linearize-level-1 > [class*="ym-g"] > [class*="ym-gbox"] {
        overflow: hidden; /* optional for containing floats */
        padding: 0;
        margin: 0;
      }
    }

Add the class `.linearize-level-1` to any grid module, you want to be linearized:

    <div class="ym-grid linearize-level-1">
      ...
    </div>

## Column Module yaml/core/base.css

#### Creating a Column-Set

Columns are wrapped by an element with the `.ym-column` class.

To allow independent control of column widths and paddings (remember the CSS2 Box Modell), YAML uses a nested structure where elements with the class `.ym-col[1|2|3]` hold `width` values and elements with `.ym-cbox` class `padding` or `border` values.

The `.ym-cbox` elements are optional and can be removed when using CSS3 Box Modell (`box-sizing:border-box`).

### 2 Columns

Col 1
Col 3

#### Default Markup

    <div class="ym-column">
      <div class="ym-col1">
        <div class="ym-cbox">
          ...
        </div>
      </div>
      <div class="ym-col3">
        <div class="ym-cbox">
           ...
        </div>
      </div>
    </div>

### 3 Columns

Col 1
Col 2
Col 3

#### Default Markup

    <div class="ym-column">
      <div class="ym-col1">
        <div class="ym-cbox">
          ...
        </div>
      </div>
      <div class="ym-col2">
        <div class="ym-cbox">
          ...
        </div>
      </div>
      <div class="ym-col3">
        <div class="ym-cbox">
           ...
        </div>
      </div>
    </div>

### Column Configuration

As default, YAML provides a 1-3-2 configuration for a columnset with 3 columns. Columns 1 and 2 are defined as floats while column 3 is a static container. To change their visual order, use one of the following configurations:

#### 3 Columns

##### 1-3-2 (default)

Layout | Unit-Mix | [%] | [px] | [em] | Ruler
--- | --- | --- | --- | --- | ---
1-3-2 (default) | Yes | Yes | Yes | Yes | Yes

    .ym-col1 { width: 25%; } /* left column */
    .ym-col2 { width: 25%; } /* right column */
    .ym-col3 { margin-left: 25%; margin-right: 25%; } /* center column */

##### 2-3-1

Layout | Unit-Mix | [%] | [px] | [em] | Ruler
--- | --- | --- | --- | --- | ---
2-3-1 | Yes | Yes | Yes | Yes | Yes

    .ym-col1 { width: 25%; float: right; } /* right column */
    .ym-col2 { width: 25%; float: left; } /* left column */
    .ym-col3 { margin-left: 25%; margin-right: 25%; } /* center column */

##### 1-2-3

Layout | Unit-Mix | [%] | [px] | [em] | Ruler
--- | --- | --- | --- | --- | ---
1-2-3 | No | Yes | Yes | Yes | No

    .ym-col1 { width: 25%; margin: 0;} /* left column */
    .ym-col2 { width: 50%; float:left; margin: 0; } /* center column */
    .ym-col3 { margin-left: 75%; margin-right: 0%; } /* right column */

##### 3-2-1

Layout | Unit-Mix | [%] | [px] | [em] | Ruler
--- | --- | --- | --- | --- | ---
3-2-1 | No | Yes | Yes | Yes | -

    .ym-col1 { width: 25%; float:right; margin: 0; } /* right column */
    .ym-col2 { width: 50%; margin: 0; } /* center column */
    .ym-col3 { margin-left: 0; margin-right: 75%; } /* left column */

##### 2-1-3

Layout | Unit-Mix | [%] | [px] | [em] | Ruler
--- | --- | --- | --- | --- | ---
2-1-3 | No | Yes | Yes | No | No

    .ym-col1 { width: 50%; float:left; margin-left: 25%; } /* center column */
    .ym-col2 { width: 25%; float:left;  margin-left: -75%; } /* left column */
    .ym-col3 {  float:right; width: 25%; margin-left: -5px; margin-right: 0%; } /* right column */

##### 3-1-2

Layout | Unit-Mix | Percentage | Pixels | EM | Ruler
--- | --- | --- | --- | --- | ---
3-1-2 | No | Yes | Yes | No | No

    .ym-col1 { width: 50%; float:right; margin-left: -75%; margin-right: 25%; } /* center column */
    .ym-col2 { width: 25%; float:right; margin-right: 0%; } /* right column */
    .ym-col3 {  float: left; width: 25%; margin-left: 0; margin-right: -5px; }  /* left column */

#### 2 Columns

Configurations for a set of 2 columns are derived from the default configuration (1-3-2) by removing `.ym-col2` as an optional sidebar from the default configuration.

##### Scenario A: flexible content and fixed sidebar

When such a column configuration is linearized, the sidebar content drops below the main content.

Note: This CSS technique requires that `.ym-col1` isn't completely empty. Internet Explorer needs at least dummy content (e.g.: `&nbsp;`), otherwise it doesn't render the element and the alignment of the sidebar within the parents padding area fails.

##### Sidebar left aligned

    /*
     * |-------------------------------------------------------|
     * | sidebar         |    content                          |
     * | col 3 | fixed   |    col 1 | flexible                 |
     * |                 |                                     |
     * |-------------------------------------------------------|
     */

    .ym-column {
      display: block;
      overflow: hidden;
      padding-left: 250px; /* column width */
      width: auto;
    }

    .ym-col1 {  /* content */
      position: relative;
      float: left;
      width: 100%;
    }

    .ym-col3 { /* sidebar */
      position: relative;
      float: left;
      width: 250px; /* column width */
      right: 250px; /* column width */
      *right: 0px; /* fix for ie6 & ie7 */
      margin: 0 0 0 -100%;
    }

##### Sidebar right aligned

    /*
     * |-------------------------------------------------------|
     * | content                             | sidebar         |
     * | col 1 | flexible                    | col 3 | fixed   |
     * |                                     |                 |
     * |-------------------------------------------------------|
     */

    .ym-column {
      display: block;
      overflow: hidden;
      padding-right: 250px; /* column width */
      width: auto;
    }

    .ym-col1 {  /* content */
      position: relative;
      float: left;
      width: 100%;
    }

    .ym-col3 { /* sidebar */
      position: relative;
      float: left;
      width: 250px; /* column width */
      margin: 0 -250px 0 0;
    }

##### Scenario B: content and sidebar utilizing the same unit

The columns are much easier to set up, when all both columns are utilizing the same unit (%|px|em). Here's a sample for a 75% content column and a 25% wide sidebar.

When such a column configuration is linearized, the sidebar content drops below the main content.

##### Sidebar left aligned

    /*
     * |-------------------------------------------------------|
     * | sidebar         |    content                          |
     * | col 3 | flexible|    col 1 | flexible                 |
     * |                 |                                     |
     * |-------------------------------------------------------|
     */

    .ym-col1 { float: right; width: 75%; } /* content */
    .ym-col3 { width: auto; margin: 0 75% 0 0; } /* sidebar */

##### Sidebar right aligned

    /*
     * |-------------------------------------------------------|
     * | content                             | sidebar         |
     * | col 1 | flexible                    | col 3 | flexible|
     * |                                     |                 |
     * |-------------------------------------------------------|
     */

    .ym-col1 { float: left; width: 75%; } /* content */
    .ym-col3 { width: auto; margin: 0 0 0 75%; } /* sidebar */

##### Scenario C: Vertical navigation and flexible content

When such a column configuration is linearized, the main content drops below the navigation.

##### Navigation left aligned

    /*
     * |-------------------------------------------------------|
     * | navigation      |    content                          |
     * | col 1 | fixed   |    col 3 | flexible                 |
     * |                 |                                     |
     * |-------------------------------------------------------|
     */

    .ym-col1 { width: 250px; } /* sidebar */
    .ym-col3 { margin-left: 250px; margin-right: 0; } /* content */

##### Navigation right aligned

    /*
     * |-------------------------------------------------------|
     * | content                             | navigation      |
     * | col 3 | flexible                    | col 1 | fixed   |
     * |                                     |                 |
     * |-------------------------------------------------------|
     */

    .ym-col1 { float: right; width: 250px; } /* sidebar */
    .ym-col3 { margin-left: 0; margin-right: 250px; } /* content */

#### Equal Height Column Rulers

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

In display orders (1-3-2 and 2-3-1) the column module can simulate equal height column rulers. To use this feature, add class `.ym-clearfix` to content box (`.ym-cbox`) in element `.ym-col3`, put the DIV-element with the class `.ym-ie-clearing` (crossbrowser-support for IE6 and IE7) at the end of column `.ym-col3` and use the properties `border-left` and `border-right` of the element`.ym-col3` to create the column rulers.

##### Default Markup

    <div class="ym-column">
      <div class="ym-col1">
        <div class="ym-cbox">
          ...
        </div>
      </div>
      <div class="ym-col2">
        <div class="ym-cbox">
          ...
        </div>
      </div>
      <div class="ym-col3">
        <div class="ym-cbox ym-clearfix">
          ...
        </div>
        <div class="ym-ie-clearing">&nbsp;</div>
      </div>
    </div>

##### CSS Configuration

    .ym-col1 { width: 25%; } /* left column */
    .ym-col2 { width: 25%; } /* right column */
    .ym-col3 { /* center column */
      margin: 0 25%;
      border-left: 1px #ddd solid;
      border-right: 1px #ddd solid;
    }

### Responsive Columns

Flexible layouts work best when their responsive behavior is based on the boundary conditions of the individual screen designs. That's why YAML doesn't provide a pre-baked plan for linearization of column elements.

As a frontend developer, you are completely free to define, how many levels (or steps) of linearization your design needs and when they should be applied.

#### Progressive Linearization

Here's a code-snippet to a linearization level for the column module at a viewport size, lower then 760px. To create additional levels, copy this media block, set the viewport size, when the new level is triggerd (max-width) and count up the number in the class name.

    @media screen and ( max-width: 760px )  {

      /* linearization for column module */
      .linearize-level-1,
      .linearize-level-1 > [class*="ym-col"] {
        display: block;
        float: none;
        padding: 0;
        margin: 0;
        width: 100% !important;
      }

      /* reset defined gutter values */
      .linearize-level-1 > [class*="ym-col"] > [class*="ym-cbox"] {
        overflow: hidden; /* optional for containing floats */
        padding: 0;
        margin: 0;
      }
    }

Add the class `.linearize-level-1` to any column module, you want to be linearized:

    <div class="ym-column linearize-level-1">
      ...
    </div>

## Forms Module yaml/core/base.css yaml/forms/gray-theme.css

YAML's Form-Module provides a full set of standard form elements, based on best practices for accessible forms, and supports theming.

All functional styles for form elements are defined in YAML's core stylesheet base.css.

### Default Markup

    <form class="ym-form">
      ...
    </form>

#### Form Style Options

There is a linear default style (stacked, 60 % width of form elements) and two alternative form styles can be used by adding one of the following classes to the form.

CSS-classes | Description
--- | ---
(default) | The default form style provides a stacked view of labels and their related form elements. The width of all form elements is normalized to 60% width.
`.ym-full` | This form style also provides a stacked view of labels and their related form elements, but the width of all form elements is normalized to 100% width. This form style is especially useful for small forms.
`.ym-columnar` | This form style provides a columnar arrangement of form elemnts. By default , labels are floated and left aligned.

### Standard Form Elements

The following tabs show some examples for standard form elements. Copy and paste to use them.

##### Input Field

    <div class="ym-fbox-text">
      <label for="your-id">your label</label>
      <input type="text" name="your-id" id="your-id" size="20" />
    </div>

##### Textarea

    <div class="ym-fbox-text">
      <label for="your-id">your label</label>
      <textarea name="your-id" id="your-id" cols="30" rows="7"></textarea>
    </div>

##### Select

    <div class="ym-fbox-select">
      <label for="your-id">More Options</label>
      <select name="your-id" id="your-id" size="1">
        <option value="0" selected="selected" disabled="disabled">Please choose</option>
        <optgroup label="First options to choose from">
          <option value="value #1">Option 1</option>
          <option value="value #2">Option 2</option>
        </optgroup>
        <optgroup label="Yet more options to choose from">
          <option value="value #3">Option 3</option>
          <option value="value #4">Option 4</option>
          <option value="value #5">Option 5</option>
        </optgroup>
      </select>
    </div>

##### Checkbox

    <div class="ym-fbox-check">
      <input type="checkbox" name="your-id" id="your-id" />
      <label for="your-id">Your checkbox label</label>
    </div>

##### Radio-Buttons

    <div class="ym-fbox-check">
      <input type="radio" name="your-id" value="value #1" id="your-id" />
      <label for="your-id">Your radio-button label</label>
    </div>

##### Buttons

Optional class `.ym-button` is needed to enable support for styled button in Internet Explorer 6.

    <div class="ym-fbox-button">
      <input type="submit" class="ym-button" value="submit" id="submit" name="submit" />
      <input type="reset" class="ym-button" value="reset" id="reset" name="reset" />
      <input type="button" class="ym-button" value="button" id="button1" name="button1" />
    </div>

#### Form Configuration

##### Required Fields

Required form fields can be visually emphasized by adding `.ym-required` element to the label. In any case, you should add the ARIA attribute `aria-required="true"` or `required="required"` when using HTML5.

    <div class="ym-fbox-text">
      <label for="your-id">your label<sup class="ym-required">*</sup></label>
      <input type="text" name="your-id" id="your-id" size="20" required="required"/>
    </div>

##### Error Messages

Use class `.ym-error` to highlight form fields with invalid form elements. By adding this class to the parent container, you have rich styling options. Optionally you can use `.ym-message` output messages that will be correctly aligned in all form styles.

    <div class="ym-fbox-text ym-error">
      <p class="ym-message">Error: invalid value!</p>
      ...
    </div>

##### Extended Labels

In radio button sets, the label elements are needed to label individual opions. For a more consitent appearance of forms, you can define an additional label-like name, using `.ym-label` before the button set, that will be correctly aligned in all form styles.

    <div class="ym-fbox-checkbox">
      <div>
        <span class="ym-label">Custom Label</span>
        <input type="radio" name="vote" value="Option 1" id="vote1" />
        <label for="vote1">Option 1</label>
      </div>
      ...
    </div>

### Theme Support

JavaScript has to be enabled to demonstrate the available form layouts.

###### Live Preview: Choose Style

Linear (default)
Full Width
Columnar
Enable Linearization (< 740px)

All other visual properties are separated from the framework core to make themeing of form elements as easy as possible.

YAML provides a standard form theme called gray-theme.css in yaml/forms/.

#### Basic Form Example

###### Text Fields and Simple Select Boxes

Salutation *
First name

Field «Last name» not properly filled.

Last name *
E-Mail *
More Options

###### Text Areas, Complex Select Boxes, Checkboxes

Message
Sign me up for your newsletter

###### Radio Buttons

Custom Label Option 1
Option 2
Option 3

#### Multicolumnar Forms

Use grids module to create multicolumnar forms or multiple form elements in a row.

    <form class="ym-form">
      <div class="ym-grid">
        <div class="ym-g50 ym-gl">
          <div class="ym-gbox ym-fbox-select">
            <label for="select-1">Select Field</label>
            <select name="select-1" id="select-1" size="1"> ... </select>
          </div>
          ...
        </div>
        <div class="ym-g50 ym-gl">
          <div class="ym-gbox ym-fbox-text">
            <label for="input-1">Input Field</label>
    	      <input type="text" name="input-1" id="input-1"/>
            ...
          </div>
        </div>
      </div>
    </form>

###### Another Example Form

Select Field
Textarea
Input Field
Custom Label Option 1
Option 2
Option 3

### Responsive Forms

#### Progressive Linearization

Here's a code-snippet for linearization of the default and columnar form-style at a viewport size, lower then 760px. Forms get linearized to stacked style and element widths are normalized to 100% to fit better on small screens.

Note: This code snippet assumes that all form elements are using the CSS3 box model: border-box (`box-sizing: border-box;`). Otherwise, the element width might have to be adjusted.

If you want further information on how to setup this CSS3 box model, take a look at the sample implementation in YAMLs default form theme gray-theme.css in folder yaml/forms/.

    /* optimize forms on small screens by forcing display mode: full */
    @media screen and ( max-width: 740px )  {

      .linearize-form [class*="ym-fbox"]:not([class*="ym-fbox-check"]) label,
      .linearize-form .ym-label,
      .linearize-form .ym-message,
      .linearize-form input[type="text"],
      .linearize-form textarea,
      .linearize-form select {
        display: block;
        float: none;
        position: static !important;
        width:100% !important;
      }

      .linearize-form .ym-message,
      .linearize-form .ym-fbox-check input {
        margin-left: 0 !important;
      }
    }

Add the class `.linearize-form` to any form, you want to be linearized. You should combine these settings with the linarization of your grid or column layout.

    <form class="ym-form linearize-form" action="...">
      ...
    </form>

### Buttons

Button definitions are part of the standard theme gray-theme.css, provided by YAML.

#### Custom Button Types

HTML Button Elements as wall as any other element can be styled as buttons with optional icons. Icons are generated from UTF-8 Dingbats characters (U+2700 ... U+27BF), so they are scalable and no images are needed.

    <!-- simple buttons -->
    <button class="ym-button">text</button>
    <a href="#" class="ym-button">text</a>

    <!-- buttons with icons -->
    <button class="ym-button ym-add">text</button>
    <a href="#" class="ym-button ym-add">text</a>

add delete edit email like next play save spark star

## Float Handling yaml/core/base.css

YAML provides several different standard methods for clearing and containing float objects.

### Clearing Floats

To clear floats without extra markup, YAML provides the class `.ym-clearfix`. Use it to clear floats without extra markup or avoid margin collapsing problems in static containers.

The Clearfix hack provided by YAML is a combination of Clearfix Reloaded from Thierry Koblentz and the Micro Clearfix Hack from Nicolas Gallagher. The reason for this is, that the reloaded version causes problems when there are several float objects within the same block formatting context (e.g. in YAMLs column module).

    .ym-clearfix:before {
      content:"";
      display:table;
    }

    .ym-clearfix:after {
      clear:both;
      content:".";
      display:block;
      font-size:0;
      height:0;
      visibility:hidden;
    }

    .ym-clearfix {zoom: 1;} /* IE < 8 */

### Containing Floats

To contain float-objects within a parent element, YAML provides the following methods:

Classes | Description
--- | ---
`.ym-contain-dt` | Containing floats is achieved via `display:table; width: 100%;`. This should be used, if oversized child-elements should be allowed to slide into neighbor elements or if they have effects attached (e.g. box-shadow) that shouldn't be clipped by the parent element. Note: In Firefox you can't combine properties `display:table` and `position:relative`. If you need to, use `.ym-contain-fl` instead. Note 2: As part of the table characteristics `display:table` causes the element to be enlarged to fit all child elements, even if they are oversized. CSS properties `overflow` or `max-width` doesn't have an effect in this case.
`.ym-contain-oh` | Containing floats is achieved via `overflow:hidden; width: 100%;`. This should be used, if oversized child-elements should be clipped by the parent element without scrollbars. Avoid this method if you use e.g. CSS3 box-shadows on child elements, as these shadows will be clipped as well.
`.ym-contain-fl` | Containing floats is done via `float:left; width: 100%;`. This is an alternative to `.ym-contain-dt`, when relative positioning is needed for the attached element.

## Accessibility yaml/core/base.css yaml/core/js/yaml-focusfix.css

### Skip Links

Skip links are created as an unordered list and styled with the class `.ym-skiplinks`. This class is defined in base.css and controls the visual properties of the list. Furthermore, each link in the list is marked up with the class `.ym-skip`.

    <body>
      <!-- skip link navigation -->
      <ul class="ym-skiplinks">
        <li><a class="ym-skip" href="#nav">Skip to navigation (Press Enter)</a></li>
        <li><a class="ym-skip" href="#main">Skip to main content (Press Enter)</a></li>
      </ul>
      ...
    </body>

#### Fixing IE & Webkits Focus Problems

Although there are no problems with the visual presentation of skip links, Internet Explorer 8 on Windows 7 as well as Webkit-based browsers such as Safari and Chrome require a focus bugfix as these browsers do not automatically set the skip to the link target.

YAML provides a script (yaml-focusfix.js), which finds all the skip links in a document, analyzes their targets, and automatically sets the focus to the target if one of the links is clicked.

    <body>
      ...
      <!-- full skip link functionality in ie8 & webkit browsers -->
      <script src="./yaml/core/js/yaml-focusfix.js" type="text/javascript" />
    </body>

### Hidden Content

CSS-classes | Description
--- | ---
`.ym-skip` | The use of the unordered list `.ym-skiplinks` (see above) is optional, but the preferred solution. Alternatively, you can integrate the skip links directly into the layout. To ensure the functionality, the CSS class `.ym-skip` is required for skip anchors.
`.ym-hideme` | Elements with the CSS class `.ym-hideme` are visually hidden in browsers, but still accessible for screen readers.
`.ym-print` | Elements with the CSS class `.ym-print` are visually hidden in media screen, but still accessible for screen readers and visible on media print.
`.ym-noprint` | Elements with the CSS class `.ym-print` will not be printent, but are visible on any other media type (e.g. screen).

## Navigation Module yaml/navigation/hlist.css yaml/navigation/vlist.css

In the left column you’ll find an example for a vertical navigation, in the right column one for a horizontal navigation. The tabbed box shows the default markup for both examples.

### Vertical Navigation

### Horizontal Navigation

### Default Markup

##### Horizontal Navigation

    <nav class="ym-hlist">
      <ul>
        <li class="active"><strong>Active</strong></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>

      <!-- optional search form -->
      <form class="ym-searchform">
        <input class="ym-searchfield" type="search" placeholder="Search..." />
        <input class="ym-searchbutton" type="submit" value="Search" />
      </form>
    </nav>

##### Vertical Navigation

    <nav class="ym-vlist">
      <h6 class="ym-vtitle">Optional Title</h6>
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><span>Link 3</span>
          <ul>
            <li><a href="#">Link 3.1</a></li>
            <li class="active"><strong>Link 3.2</strong></li>
            <li><a href="#">Link 3.3</a></li>
          </ul>
        </li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
      </ul>
    </nav>

## Typography yaml/screen/typography.css

### Headings & Paragraphs

#### Heading Levels

# H1 Heading

## H2 Heading

### H3 Heading

#### H4 Heading

##### H5 Heading

###### H6 Heading

#### Paragraphs

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet..

#### Special Paragraphs

This is a paragraph text with class="highlight". Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

This is a paragraph text with class="dimmed". Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

This is a paragraph text with class="box info". Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

This is a paragraph text with class="box success". Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

This is a paragraph text with class="box warning". Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

This is a paragraph text with class="box error". Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

### Misc. Elements

#### Blockquotes

> This is a paragraph text within a <blockquote> element. This is a paragraph text within a <blockquote> element. This is a paragraph text within a <blockquote> element. This is a paragraph text within a <blockquote> element.

#### Preformatted Text

    This is preformatted text, wrapped in a <pre> element.
    This is preformatted text, wrapped in a <pre> element.

#### Inline Semantic Text Decoration

- an anchor tag (`<a>`) example
- an italics and emphasize tag (`<i>`,`<em>`) example
- a big and small tag (`<big>`,`<small>`) example
- a bold and strong tag (`<b>`, `<strong>`) example
- an acronym and abbreviation tag (`<acronym>`, `<abbr>`) example
- a cite and quote tag (`<cite>`, `<q>` ) example
- a `code` and definition tag (`<code>`, `<dfn>`) example
- a `teletype` and `keyboard` tag (`<tt>`, `<kbd>`) example
- a variable and `sample` tag (`<var>`, `<samp>`) example
- an inserted and deleted tag (`<ins>`, `<del>`) example
- a subscript and superscript tag (`<sub>`, `<sup>`) example
- a mark tag (HTML5) (`<mark>`) example

### Media

Handling images and videos in flexible environments

#### Flexible Media

    .flexible {
      ...
      max-width: 100%;
    }
    /* IE6 support - 2% space for borders */
    * html .flexible { width: 100%; }

By adding the CSS class `.flexible` to an image or video, you can allow the browser to downscale this element to fit the size of its parent element. It will not be upscaled in modern browsers (in old IE6 & 7 it will as part of the provided work-around.)

#### Media Borders

    .bordered {
      ...
      border: 2px #eee solid;
      border: 2px rgba(255,255,255,1) solid;
      box-shadow: 0 0 3px rgba(0,0,0,.25);
    }

You can add a border to your images or videos by adding the CSS class `.bordered`.

### Lists

#### Unordered List

- ut enim ad minim veniam
- occaecat cupidatat non proident
  - facilisis semper
  - quis ac wisi augue
  - risus nec pretium
  - fames scelerisque
- nostrud exercitation ullamco
- labore et dolore magna aliqua
- aute irure dolor in reprehenderit in voluptate velit esse cillum dolore

#### Ordered List

1. ut enim ad minim veniam
   1. facilisis semper
   2. quis ac wisi augue
   3. risus nec pretium
   4. fames scelerisque
2. occaecat cupidatat non proident
3. nostrud exercitation ullamco
4. labore et dolore magna aliqua
5. aute irure dolor in reprehenderit in voluptate velit esse cillum dolore

#### Definition List

A definition list — this is <dt>
  A definition list — this is <dd> element.
A definition list — this is <dt>
  A definition list — this is <dd> element.
A definition list — this is <dt>
  A definition list — this is <dd> element.

### Horizontal Arrangement

#### Floating Left

    .float-left {
      float:left;
      display:inline;
      margin: 1.5em 1em 0 0;
    }

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

#### Centered

    .center {
      display:block;
      text-align:center;
      margin: 1.5em auto 0 auto;
    }

Lorem ipsum dolor sit amet, consetetur sadipscing elitr. At vero eos et accusam et justo duo dolores et ea rebum.

#### Floating Right

    .float-right {
      float:right;
      display:inline;
      margin: 1.5em 0 0 1em;
    }

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

### Tables

#### Default Table Style

The default style for tables has left aligned cells and a minimal set of borders. Vertical alignment of table cells is set to top.

Id | Product Name | Value
--- | --- | ---
1 | Pencil | cheap
2 | Car | expensive

    <table>
      <thead>
        <tr>
          <th> ... </th>
          ...
        </tr>
      </thead>
      <tbody>
        <tr>
          <td> ... </td>
          ...
        </tr>
      </tbody>
    </table>

A classic table style can be achieved with CSS class `.bordertable`

Id | Product Name | Value
--- | --- | ---
1 | Pencil | cheap
2 | Car | expensive

    <table class="bordertable">
    ...
    </table>

Both table styles can be combined with CSS class `.narrow` to achieve smaller table rows (especially useful for big tables)

Id | Product Name | Value
--- | --- | ---
1 | Pencil | cheap
2 | Car | expensive

    <table class="bordertable narrow">
    ...
    </table>

## Add-ons

### Accessible Tabs

yaml/add-ons/accessible-tabs/

Accessible Tabs is a jQuery plugin by Dirk Ginader, that generates accessible tabbing environments from standard HTML markup, and therefore provides a perfect fallback solution when JavaScript is disabled.

Get the latest version of this plugin on Github.

#### Live Example

##### Topic A

###### Lorem ipsum ...

Nullam malesuada suscipit pede. Nullam ipsum lacus, varius vel, nonummy in, consequat ut, neque. Vivamus viverra. Duis dolor arcu, lacinia sit amet, sollicitudin sed, aliquet vel, quam. Pellentesque molestie laoreet tortor. Aenean quam. Pellentesque magna metus, venenatis sit amet, congue nec, dictum in, est. Aliquam nibh.

##### Topic B

###### Lorem ipsum ...

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam malesuada suscipit pede. Nullam ipsum lacus, varius vel, nonummy in, consequat ut, neque.

##### Topic C

Your content could be here.

#### Default Markup

    <div class="jquery_tabs">
      <h4>Topic A</h4>
      <p class="tabbody"> ... </p>
      <h4>Topic B</h4>
      <p class="tabbody"> ... </p>
      <h4>Topic C</h4>
      <p class="tabbody"> ... </p>
    </div>

Accessible Tabs transforms a predefined content area, wrapped with `.jquery_tabs` into a tabbing environment, where specific elements (default: `<h4>`) become tab headings and class `.tabbody` defines the content (or its wrapper).

#### Implementation

    <head>
      ...
      <link rel="stylesheet" href="yaml/add-ons/accessible-tabs/tabs.css" type="text/css"/>
      ...
    </head>
    <body>
      ...
      <script src="lib/jquery-1.7.1.min.js" type="text/javascript" />
      <script src="yaml/add-ons/accessible-tabs/jquery.tabs.js" type="text/javascript" />
    </body>

    $(document).ready(function(){
      $('.jquery_tabs').accessibleTabs();
    });

#### Synchronize Heights

Tabbing environments can have synchronized tab heights. This is realized by combining the "Accessible Tabs" Plugin with the "syncHeight" Plugin.

##### Topic A

###### Lorem ipsum ...

Nullam malesuada suscipit pede. Nullam ipsum lacus, varius vel, nonummy in, consequat ut, neque. Vivamus viverra. Duis dolor arcu, lacinia sit amet, sollicitudin sed, aliquet vel, quam. Pellentesque molestie laoreet tortor. Aenean quam. Pellentesque magna metus, venenatis sit amet, congue nec, dictum in, est. Aliquam nibh.

##### Topic B

###### Lorem ipsum ...

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam malesuada suscipit pede. Nullam ipsum lacus, varius vel, nonummy in, consequat ut, neque.

##### Topic C

Your content could be here.

    <body>
      ...
      <script src="lib/jquery-1.7.1.min.js" type="text/javascript" />
      <script src="yaml/add-ons/accessible-tabs/jquery.tabs.js" type="text/javascript" />
      <script src="yaml/add-ons/syncheight/jquery.syncheight.js" type="text/javascript" />
    </body>

    $(document).ready(function(){
      $('.jquery_tabs').accessibleTabs({ syncheight: true });
    });

### SyncHeight

yaml/add-ons/syncheight/

Get the latest version of this plugin on Github.

#### SyncHeight jQuery Plugin – Implementation

The SyncHeight Plugin for jQuery allows you to sync heights between all element, defined by the given jQuery selector. To enable resyncing elements after browser resizing, enable updateOnResize option.

    <body>
      ...
      <script src="lib/jquery-1.7.1.min.js" type="text/javascript" />
      <script src="yaml/add-ons/syncheight/jquery.syncheight.js" type="text/javascript" />
    </body>

    $(document).ready(function(){
      $('.container-a, .container-b').syncHeight({ updateOnResize: true });
    });

### RTL Support

yaml/add-ons/rtl-support/

#### Handling Hebrew or Arabic languages

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 file of the framework: base-rtl.css. The folder screen/ contains typograhpy adjustments in typography-rtl.css and in folder navigation/ you will find appropriate ajdustments-files for YAML navigations.

#### 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.

    <html lang="{language-code}" dir="rtl">
      ...
    </hmtl>

Along with the text direction, many other CSS properties must be changed -- margins, indentations, etc., to present the text correctly.

#### Implementation

The corresopnding central stylesheet 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);
    ...

This is the best and most simple way for rapid prototyping. For production environments we recommend to combine both stylesheets to reduce the amount of HTTP requests.

### Microformats

yaml/add-ons/microformats/

Microformats are small bits of HTML that represent things like people, events, tags, etc. in web pages.

Microformats enable the publishing of higher fidelity information on the Web, providing the fastest and simplest way to support feeds and APIs for your website. See more explanations of what microformats are and what you can do with them.

##### Microformats Generators

- hCard creator
- hCalendar creator
- hReview creator
- XFN creator

Read more on microformats.org.

#### Most Common Microformats

##### Contact example (hCard)

##### Draft Preview

CommerceNet
Work:
169 University Avenue
Palo Alto, CA 94301
USA
Tel (work): +1-650-289-4040
Fax: +1-650-289-4041
E-Mail: info@commerce.net

##### Default Markup

    <div class="vcard">
      <a class="fn org url" href="http://www.commerce.net/">CommerceNet</a>
      <div class="adr">
        <span class="type">Work</span>:
        <div class="street-address">169 University Avenue</div>
        <span class="locality">Palo Alto</span>,
        <abbr class="region" title="California">CA</abbr>
        <span class="postal-code">94301</span>
        <div class="country-name">USA</div>
      </div>
      <div class="tel"> <span class="type">Tel (work):</span> +1-650-289-4040 </div>
      <div class="tel"> <span class="type">Fax:</span> +1-650-289-4041 </div>
      <div>E-Mail: <span class="email">info@commerce.net</span> </div>
    </div>

##### Event examples (hCalendar)

##### Draft Preview

http://www.web2con.com/ Web 2.0 Conference October 5- 19, at the Argent Hotel, San Francisco, CA

##### Default Markup

    <div class="vevent">
      <a class="url" href="http://www.web2con.com/">http://www.web2con.com/</a>
      <span class="summary">Web 2.0 Conference</span>
      <abbr class="dtstart" title="2007-10-05">October 5</abbr>- <abbr class="dtend" title="2007-10-20">19</abbr>, at the
      <span class="location">Argent Hotel, San Francisco, CA</span>
    </div>

##### Draft Preview

### XYZ Project Review

Project XYZ Review Meeting

To be held on 12 March 1998 from 8:30am EST until 9:30am EST

Location: 1CP Conference Room 4350

Booked by: guid-1.host1.com on 9 Mar 1998 6:00pm

##### Default Markup

    <div class="vevent">
      <a class="url" href="http://www.web2con.com/">http://www.web2con.com/</a>
      <span class="summary">Web 2.0 Conference</span>
      <abbr class="dtstart" title="2007-10-05">October 5</abbr>- <abbr class="dtend" title="2007-10-20">19</abbr>, at the
      <span class="location">Argent Hotel, San Francisco, CA</span>
    </div>
    <div class="vevent">
      <h3 class="summary">XYZ Project Review</h3>
      <p class="description">Project XYZ Review Meeting</p>
      <p>To be held on <abbr class="dtstart" title="1998-03-12T08:30:00-05:00">12 March 1998 from 8:30am EST</abbr> until <abbr class="dtend" title="1998-03-12T09:30:00-05:00">9:30am EST</abbr></p>
      <p>Location: <span class="location">1CP Conference Room 4350</span></p>
      <small>Booked by: <span class="uid">guid-1.host1.com</span> on <abbr class="dtstamp" title="19980309T231000Z">9 Mar 1998 6:00pm</abbr></small>
    </div>

##### rel-Tag

##### Draft Preview

Tags: Best Practice, Webstandards

##### Default Markup

    <p class="tags">
      <span lang="en" xml:lang="en">Tags</span>:
      <a href="http://www.mister-wong.de/tags/best-practise/" rel="tag">Best Practice</a>,
      <a href="http://www.mister-wong.de/tags/webdesign/" rel="tag">Webstandards</a>
    </p>

##### XFN

##### Draft Preview

- Me
- Jane
- Dave
- Darryl
- James Expert

##### Default Markup

    <ul>
      <li><a href="http://www.metafilter.com/" class="xfnRelationship" rel="me">Me</a></li>
      <li><a href="http://jane-blog.example.org/" class="xfnRelationship" rel="sweetheart date met">Jane</a></li>
      <li><a href="http://dave-blog.example.org/" class="xfnRelationship" rel="friend met">Dave</a></li>
      <li><a href="http://darryl-blog.example.org/" class="xfnRelationship" rel="friend met">Darryl</a></li>
      <li><a href="http://james-blog.example.com/" class="xfnRelationship" rel="met">James Expert</a></li>
    </ul>

#### Geo

##### Draft Preview

Photo taken at North Bondi.

##### Default Markup

    <p>Photo taken at <abbr title="-33.890937;151.281985" class="geo">North Bondi</abbr>.</p>