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.
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.
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 classes to create these typical modern full-page layouts, where backgrounds span over the full viewport width.
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.
$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.