Introduction

About

YAML is continuously developed since 2005. It's strongly focussed on device independence and accessibilty.

It provides provides layout bullet-proof modules for flexible layouts.

File Structure

Within the download package fo you will find a folder called yaml with the following file stucture. This folder contains all components of the framework and should stay unchanged for easy updating.

If you want to modify any file, put a copy in your local CSS folder and reference it from there


yaml/
  ├── add-ons/
  │   ├── accessible-tabs/
  │   │   ├── jquery.tabs.js
  │   │   └── tabs.css
  │   ├── microformats/
  │   │   ├── icons/
  │   │   └── microformats.css
  │   ├── rtl-support/
  │   │   ├── core/
  │   │   │   ├── base-rtl.css
  │   │   │   └── base-rtl.min.css
  │   │   ├── navigation/
  │   │   │   ├── hlist-rtl.css
  │   │   │   └── vlist-rtl.css
  │   │   └── screen/
  │   │       └── typography-rtl.css
  │   └── microformats
  │       └── jquery.syncheight.css
  ├── core/
  │   ├── base.css
  │   ├── base.min.css
  │   ├── iehacks.css
  │   └── iehacks.min.css
  ├── forms/
  │   └── gray-theme.css
  ├── navigation/
  │   ├── hlist.css
  │   └── vlist.css
  ├── print/
  │   └── print.css
  └── screen/
      ├── grid-960-12.css
      ├── grid-960-16.css
      ├── screen-FULLPAGE-layout.css
      ├── screen-PAGE-layout.css
      └── typography.css

Core Components

Part 1: 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!

List of Core Modules

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` row wrapper `.ym-fbox` `.ym-fbox-footer` `.ym-fbox-wrap` IE6 helper classes `.ym-fbox-text` `.ym-fbox-select` `.ym-fbox-check` `.ym-fbox-button` optional classes `.ym-full` `.ym-columnar` `.ym-inline` `.ym-required` `.ym-error` `.ym-message` `.ym-label` button classes `.ym-button` `.ym-small` `.ym-xsmall` `.ym-large` `.ym-xlarge` `.ym-primary` `.ym-success` `.ym-warning` `.ym-danger`	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.

Part 2: 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 IE 6,7 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 for YAMLs layout modules

Basic HTML/CSS Template

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

lib/html5shiv/

YAML comes with the IE HTML5 enabling script html5shiv.

Visit the html5shiv project homepage on Google Code to get the latest version.

html5shiv

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="./lib/html5shiv/html5shiv.js"></script>
  <![endif]-->
</head>

Performance Hint: Avoid referencing the script directly from Google Code repository due to performance issues. Download the script and include it from your local server as shown in the above code snippet.

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

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

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 %

25 %

33.333 %

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`	61.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 %

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 %

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 yaml/screen/blueprint.css yaml/screen/fluid-12-col.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.:  ), 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 */
  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 { 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 { 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 { float: left; width: 250px; } /* sidebar */
.ym-col3 { margin: 0 0 0 250px; } /* content */

Navigation right aligned

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

.ym-col1 { float: right; width: 250px; } /* sidebar */
.ym-col3 { margin: 0 250px 0 0; } /* 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 and use the border-property of .ym-col3 to create the rulers.

Support for old Internet Explorers (6 & 7): Insert an element with the CSS class "ym-ie-clearing" as last child of column .ym-col3 to enable vertical stretching of .ym-col3 in these old browsers.

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>
    <!-- .ym-ie-clearing only needed for IE6 & 7 support -->
    <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

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>

Form 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 row wrapper -->
  <div class="ym-fbox">
    ...
  </div>
</form>

Form Style Options

There is a linear default style (stacked, 70 % width of form elements) and three 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.

Row Types

<form class="ym-form">
  <div class="ym-fbox">
    <p>This is a standard row.</p>
  </div>
  <div class="ym-fbox-footer">
    <p>This is the footter row.</p>
  </div>
</form>

Input Field

<div class="ym-fbox">
  <label for="your-id">your label</label>
  <input type="text" name="your-id" id="your-id" placeholder="enter a value" />
</div>

Textarea

<div class="ym-fbox">
  <label for="your-id">your label</label>
  <textarea name="your-id" id="your-id" rows="5"></textarea>
</div>

Select

<div class="ym-fbox">
  <label for="your-id">Available 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">
  <!-- a single checkbox -->
  <input type="checkbox" name="your-id" id="your-id1" />
  <label for="your-id1">Your checkbox label</label>
</div>
<div class="ym-fbox">
  <!-- A set of checkboxes -->
  <div class="ym-fbox-wrap">
    <div>
      <input type="checkbox" name="your-id" id="your-id2" />
      <label for="your-id2">Your checkbox label</label>
    </div>
    <div>
      <input type="checkbox" name="your-id" id="your-id3" />
      <label for="your-id3">Your checkbox label</label>
    </div>
  </div>
</div>

If you want to combine several checkboxes to a vertical aligned block, you should wrap each row with a block level element. YAML provides CSS class .ym-fbox-wrap for this use case as a universal wrapper that works with all form styles (full and columnar style).

Radio-Buttons

<div class="ym-fbox">
  <span class="ym-label">Custom Label<span>
  <div class="ym-fbox-wrap">
    <div>
      <input type="radio" name="vote" id="your-id1" />
      <label for="your-id1">Your radio-button label</label>
    </div>
    <div>
      <input type="radio" name="vote" id="your-id2" />
      <label for="your-id2">Your radio-button label</label>
    </div>
    <div>
      <input type="radio" name="vote" id="your-id3" />
      <label for="your-id3">Your radio-button label</label>
    </div>
  </div>
</div>

Buttons

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

  <!-- custom buttons -->
  <button type="submit" class="save ym-save ym-success" id="submit">Custom Button</button>
</div>

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

IE6 Support

The Internet Explorer 6 is the oldest browser, that is supported by YAML 4. This browser doesn't support attribute selectors that are used to address special input element types, e.g. input[type="checkbox"]. In order to solve this problem, YAML provides a set of helper classes that can be used to style form elements in IE6.

helper class	Description
`.ym-fbox-text`	Use this class on a parent element of an <input> element that represents a text input (`input[type="text"]`) or <textarea>. <div class="ym-fbox ym-fbox-text"> <label for="your-id">your label</label> <input type="text" name="your-id" id="your-id" placeholder="enter a value" /> </div>
`.ym-fbox-select`	Use this class on a parent element of an <select>. <div class="ym-fbox ym-fbox-select"> <label for="your-id">Available Options</label> <select name="your-id" id="your-id" size="1"> ... </select> </div>
`.ym-fbox-check`	Use this class on a parent element of an <input> element that represents a checkbox (`input[type="checkbox"]`) or radio button (`input[type="radio"]`) <div class="ym-fbox ym-fbox-check"> <input type="checkbox" name="your-id" id="your-id1" /> <label for="your-id1">Your checkbox label</label> </div>
`.ym-fbox-button`	Use this class on a parent element of an <input> element that represents a custom button (`input[type="button"]`) or submit button (`input[type="submit"]`) <div class="ym-fbox-footer ym-fbox-button"> <input type="submit" class="ym-button ym-primary" value="submit" id="submit" name="submit" /> <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">
  <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 ym-error">
  <p class="ym-message">Error: invalid value!</p>
  ...
</div>

Headings within Forms

Complex forms should be well structured. You can use <fieldset> elements for this reason but also regulare headings. To make typograhpy settings for your headings independent from their styling within forms, YAML provides class .ym-fbox-heading to force any heading level to fit in your form theme.

<h6 class="ym-fbox-heading">Sample Heading</h6>
<div class="ym-fbox">
  ...
</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">
  <span class="ym-label">Custom Label</span>
  <div class="ym-fbox-wrap">
    ...
  </div>
</div>

Extended Form Options

Grids Form Elements

To create multicolumnar forms, use the grid module to put multiple form elements in a row.

<div class="ym-fbox">
  <span class="ym-label">Wrapped From Elements and Labels</span>
  <div class="ym-fbox-wrap ym-grid">
    <div class="ym-g33 ym-gl">
      <div class="ym-gbox-left">
        <label for="plz" >Postal Code</label>
        <input type="text" name="plz" id="plz" />
      </div>
    </div>
    <div class="ym-g33 ym-gl">
      <div class="ym-gbox-left">
        <label for="city">City</label>
        <input type="text" name="city" id="city" />
      </div>
    </div>
    <div class="ym-g33 ym-gr">
      <div class="ym-gbox-right">
        <label for="country">Country</label>
        <select name="country" id="country"><option value="">entry</option></select>
      </div>
    </div>
  </div>
</div>

Inline Form Elements

<div class="ym-fbox">
  <label for="captcha">Captcha Example<sup class="ym-required" title="This field is mandatory.">*</sup></label>
  <span>1 + 5 = </span> <input class="ym-inline" type="text" id="captcha" name="captcha" value="" size="4" maxlength="2" autocomplete="off">
  <p class="ym-message">Please solve this mathmatic equation and enter the result, e.g. Enter 4 when asked for 1+3.</p>
</div>

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. Furthermore, it doesn't linearize multicolumnar form fields as they're build using the grids module, which has its own linearization code.

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 elements */
  .linearize-form label {
    float: none;
  }

  .linearize-form .ym-label,
  .linearize-form .ym-message,
  .linearize-form input,
  .linearize-form button,
  .linearize-form textarea,
  .linearize-form select {
    display: block;
    float: none;
    position: static;
    width: 100% !important;
    margin-left: 0 !important;
  }

  /* linearize grids */
  .linearize-form .ym-fbox-wrap,
  .linearize-form .ym-fbox-wrap [class*="ym-g"] {
    display: block;
    float: none;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* restore special form elements */
  .linearize-form input[type="checkbox"],
  .linearize-form input[type="radio"],
  .linearize-form input[type="image"] {
    margin-left: 0 !important;
    width: auto !important;
    display: inline;
  }
}

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.

Standard Button Types

Button styles can be applied to any element using class .ym-button (normally <a> or <button>). Within YAML's forms, this is the default for <input type="button|reset|send"/>.

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

Button	Class	Description
	`ym-button`	Default Button Style
	`ym-button ym-primary`	Primary action button
	`ym-button ym-success`	Positive action button
	`ym-button ym-warning`	"Take with care" action button
	`ym-button ym-danger`	Dangerous action button

Button Sizes

Button sizes and styles can be combined, of course.

Button	Class	Description
	`ym-button ym-xlarge`	A very large button
	`ym-button ym-large`	A more emphasized button
	`ym-button`	Default button size
	`ym-button ym-small`	A smaller button
	`ym-button ym-xsmall`	A very small button

Custom Button Types

HTML Button Elements as well 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.

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

add close delete edit email like next play reply save sign spark support 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

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

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

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

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-noprint` will not be printed, but are visible on any other media type (e.g. screen).

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

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 (responsive)

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

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

ut enim ad minim veniam
1. facilisis semper
2. quis ac wisi augue
3. risus nec pretium
4. fames scelerisque
occaecat cupidatat non proident
nostrud exercitation ullamco
labore et dolore magna aliqua
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;
}

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;
}

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.

With v1.9.7 this plugin officially dropped its support for IE7.

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

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

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

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>

Sass sass/yaml-sass/

Github

YAML4 is available on Github.

Introduction

YAML is completely developed using Sass and provides a static CSS version of the framework as well as a highly customizeable Sass port. The project structure of the Sass port is almost is identical to the static version of YAML. All CSS files in the yaml-sass folder, as well as the css files for the YAML docs are created dynamically with Sass.

Therefore you can easily include YAML in your Sass project as well as create a custom static builds of YAML for a standard CSS project.

YAML Configuration

sass/yaml-sass/_yaml-var-globals.scss

Base Module Config

Variable	Description	Default
$ym-base-normalization	Normalization Module	true
$ym-base-floathandling	Float Handling Module	true
$ym-base-columns	Columns Module	true
$ym-base-grids	Grids Module	true
$ym-base-forms	Forms Module	true
$ym-base-accessibility	Accessibility Module	true
$ym-base-print	Basic Print Styles	true

Columms Module Config

Variable	Description	Default
$ym-column-width	Default column width for `.ym-col1` and `.ym-col2`	20%
$ym-cbox-padding	Default column content (`.ym-cbox[-left\|-right]`) padding	10px

Grids Module Config

Variable	Description	Default
$ym-rounding-tolerance	Default value for negative left margin of `.ym-gr` to compensate rounding errors	-5px
$ym-gbox-padding	Default grid content (`.ym-gbox[-left\|-right]`) padding	10px

Print Module Config

Variable	Description	Default
$ym-print-fontsize	Default text font-size for print media	10pt
$ym-print-abbreviation	Enable abbreviation titles to be shown in print layout	false
$ym-print-href	Enable URLs to be shown in print layout	false

Typography Settings

sass/yaml-sass/_yaml-var-typography.scss

Fonts

Variable	Description	Default
$font-sans	Default sans-serif font family	"Droid Sans", Arial, ...
$font-serif	Default serif font family	"Droid Serif", Arial, ...
$font-monospace	Default monospace font family	Consolas, ...

Colors

Variable	Default
standard text colors
$text-color	#444
$headings-color	#161e21
$blockquote-text-color	#666
$blockquote-bg-color	transparent
$pre-text-color	#800
$kbd-text-color	#666
$mark-text-color	#000
$mark-bg-color	#ff0
highlight colors
$highlight-info-color	#f4f4f4
$highlight-success-color	#666
$highlight-warning-color	#000
$highlight-error-color	#ff0
link colors
$link-text-color	#4d87c7
$link-bg-color	transparent
$link-focus-text-color	#fff
$link-focus-bg-color	#4d87c7
special colors
$hr-color	#eee
$highlight-text-color	#c30
$dimmed-text-color	#888

Vertical Rhythm

All values have to be defined as integer values, but are internally interpreted as [px] values. Vertical rhythm is generated by utilizing [em] units to allow font-scaling.

Variable	Description	Default
$browser-default-font-size	Browser default font size (don't change unless you know what you do!)	16
$base-font-size	Default text font-size	14
$base-line-height	Default line-height	21
$h1-font-size	Heading level 1 font size	49
$h2-font-size	Heading level 2 font size	35
$h3-font-size	Heading level 3 font size	24
$h4-font-size	Heading level 4 font size	21
$h5-font-size	Heading level 5 font size	18
$h6-font-size	Heading level 6 font size	14
$h6-font-size	Heading level 6 font size	14
$text-big-font-size	<big> element font size	16
$text-small-font-size	<small> element font size	12

YAML Mixins

Introduction

sass/yaml-sass/mixins/_yaml-mixins-core.scss

The YAML mixins collection contains several reusable and configurable code-snippets (called mixins). To use them within your Sass project, you have to include the mixin collection into your scss files.

@import "./mixins/yaml_mixins_core";
...

Useful Code-Snippets

Mixin Description

ym-clearfix()

YAMLs clearfix mixin:

.wrapper {
  @include ym-clearfix();
}

ym-contain()

Configurable mixin for containing floats:

.container {
  @include ym-contain([dt|oh|fl]);
}

dt: float containing using CSS property "display:table"
oh: float containing using CSS property "overflow:hidden"
fl: float containing using CSS property "float:left"

ym-box-sizing()

Set the prefered box modell

.container {
  @include ym-box-sizing([content-box|border-box]);
}

content-box - classic CSS2 box modell (width, padding and border add up to element width)
border-box - alternate CSS3 box modell (padding and border values don't add to element width)

ym-box-shadow()

.container {
  @include ym-box-shadow($x, $y, $blur, $color, $inset);
}

Argument	Description
$x	shadow offset in x-direction
$y	shadow offset in y-direction
$blur	blur value
$color	valid rgb, hsl or hex value
$inset (default: false)	set to `true` to create an inset shadow

ym-linear-gradient()

Create linear gradients using CSS3.

.container {
  @include ym-linear-gradient(direction, start-color, end-color [, config]);
}

Argument	Description
direction	Set gradient direction: allowed values are `"to bottom"` and `"to right"`.
start-color	Valid rgb, hsl or hex value (default: `#eee`)
end-color	Valid rgb, hsl or hex value (default: `#ccc`)
config (optional)	Use "css3" to output values for modern browsers only or use "oldie" to output IE6-8 compatible filter property only

Progressive Linearization

Mixin	Description
ym-linearize-grids()	Linearization code for grids module .linearize-level-1 { @include ym-linearize-grids(); }
ym-linearize-columns()	Linearization code for columns module .linearize-level-1 { @include ym-linearize-columns(); }
ym-linearize-grids-and-columns()	Combined linearization code for columns and grids modules .linearize-level-1 { @include ym-linearize-grids-and-colums(); }
ym-linearize-forms()	Linearization code for form module .linearize-level-1 { @include ym-linearize-forms(); }

Custom Grids Generator

Mixin

Description

ym-custom-grid([arguments])

Generates classes for column widths as well as push- and pull-classes. It expects the following arguments (in this order):

Argument	Description
$prefix	optional namespace prefix
$columns	amount of columns
$width	column width
$margin-left	optional left-aligned gutter
$margin-right	optional right-aligned gutter

Example:

/* 960.gs port for YAML: 960px - 16 columns */
@include ym-custom-grid("grid",16, 960px, 10px, 10px);

Quick Start Demos

Flexible Grid

Columns & Grids

Custom Grid (960px)

RTL Support

Introduction

About

File Structure

Core Components

Part 1: Framework Base "base.css"

List of Core Modules

Part 2: Support for old Internet Explorer versions "iehacks.css"

Basic HTML/CSS Template

Central Stylesheets for Improved Development Workflow

HTML5 Support

html5shiv

Layout Module yaml/core/base.css

Flexible Layouts

PAGE Layout

Default Markup

FULLPAGE Layout

Default Markup

Layout Configuration

PAGE Layout

FULLPAGE Layout

Grids Module yaml/core/base.css

Default Grid Configuration

Predefined Split-Values

Grid Classes

Grid Visualisation

Default Markup

Nested Grids

Advanced Grid Features

Custom Grids yaml/screen/grid-960-12.css yaml/screen/grid-960-16.css yaml/screen/blueprint.css yaml/screen/fluid-12-col.css

Custom Grid Configuration

Custom Grid Markup

Equal Heights Grids

Left Grid Column

Right Grid Column

Technical Information

Limits of this "equal heights" approach

Responsive Grids

Progressive Linearization

Column Module yaml/core/base.css

Creating a Column-Set

2 Columns

Default Markup

3 Columns

Default Markup

Column Configuration

3 Columns

1-3-2 (default)

2-3-1

1-2-3

3-2-1

2-1-3

3-1-2

2 Columns

Scenario A: flexible content and fixed sidebar

Sidebar left aligned

Sidebar right aligned

Scenario B: content and sidebar utilizing the same unit

Sidebar left aligned

Sidebar right aligned

Scenario C: Vertical navigation and flexible content

Navigation left aligned

Navigation right aligned

Equal Height Column Rulers

Default Markup

CSS Configuration

Responsive Columns

Progressive Linearization

Form Module yaml/core/base.css yaml/forms/gray-theme.css

Default Markup

Form Style Options

Standard Form Elements

Row Types

Input Field

Textarea

Select