Basic Layout Options
All examples are based on YAML's standard XHTML markup. All layout modifications are CSS based without any markup changes (aside from removing unused columns). For more information see chapters Basic Variations and Variable Order and Use of Content Columns.
01_layouts_basics
02_layouts_2col
Basic Styling Options
These examples show various techniques for column design or layout with surrounding shadows as well as how to use the navigation components that are included in the YAML download package.
05_navigation
Advanced Layout Options
YAML provides powerful subtemplates (flexible, nestable grid elements). These grids can be combined with column-based layouts or they can be used instead of any columns.
Furthermore two layout examples demonstrate the multiple use of .page_margins and .page classes to create these typical modern full-page layouts, where backgrounds span over the full viewport width.
06_layouts_advanced
07_layouts_advanced_2
Special Interest Examples & Add-ons
Add-ons expand the features of the framework. They are complementary building blocks that are either independent from YAML or they're used only for special purposes.
08_special_interest
Development Information
Ver. 3.1
$Revision: 343 $
$Date: 2009-01-19 23:41:32 +0100 (Mo, 19. Jan 2009) $
Quick start using YAML
«Simple Project» Template
You need some help for a quick start? Just download and unpack the «Simple Project» template on your server or local machine. It includes a ready to use folder structure containing all necessary files for your first YAML-based layout.
If you're familiar with HTML & CSS, you can start building your screen layout by editing basemod.css & content.css in the css/screen/ folder.
Or you can use the YAML Builder to create your layout in a visual drag & drop environment. The code output (file names and paths) of the YAML Builder is harmonized to the Simple Project, so just copy/paste all source code into your existing files.