4.1 Five Rules...
The following rules summarize the basic principles defining YAML's development:
- Rule 1: YAML is not a Prefab Layout
YAML bases on web standards and is a versatile tool for creating flexible, accessible CSS layouts. The best basis for effective work with the framework is a thorough understanding of YAML's structure and workings. Please take time to read the documentation before you begin your work.
- Rule 2: YAML is Based on the Top-Down Principle
YAML provides a flexible, multi-column layout with all the important standard web page elements and functional stylesheets for correct display in all browsers, as well as an optimized layout for the printed version. The user optimizes the finished layout by deleting unneeded elements from the source code.
- Rule 3: CSS Basic Components
Every YAML-based layout needs two basic CSS components base.css and iehacks.css from the yaml/core/ folder. They are responsible for the correct display in all browsers and ensure perfect printing.
- Rule 4: Separation of YAML and User CSS
The files in the YAML folder should remain unchanged. Custom stylesheets or changed versions of YAML's CSS components belong in the user's own separate CSS folder. Only then can the layout's development basis remain stable over time and bugfixing as well as maintenance and updates are simplified.
- Rule 5: Have Fun with YAML!
Samples Included
In addition to the documentation, the examples folder in the YAML download package contains a great number of prefabricated sample layouts, which can help you understand how the framework functions and serve as a starting point for your own projects.
Note: if you are new to YAML, please take the time to read the documentation through to the end. Chapter 4 contains the complete instructions for practical use, which you should read before you start.
These examples introduce the basic layout's various modification possibilities, as well as the use of the various CSS components provided. Section 1.5: The Structure of the Download Package provides an overview.
Tips for CSS Beginners
If you are not yet familiar with CSS, take one of the examples which fits your design requirements best and play around with the various style definitions of the screen layout. Try out what changes do what to the layout.
Change margins, font sizes, colors, and container widths. Messing around with them will help you overcome any awe of CSS and you'll quickly learn exactly what parts of YAML do what -- and how.
4.2 Recommended Project Structure
There are generally no requirements for working with YAML. The project structure recommended here has proved to be practical, as it makes bugfixing easier when creating a layout and maintenance easier when a new version of YAML is released.
Step 1: Creating Files and Folders
First, copy the complete yaml/ folder onto your server and create another folder on the same hierarchical level called css for your own unique CSS files.
XHTML Source Code: copy the XHTML template markup_draft.html from the yaml/ into your project folder and rename the file.
Central Stylesheet: copy the stylesheet template central_draft.css into your css folder and rename the file accordingly.
IE Patches: copy the file template patch_layout_draft.css from the yaml/patches/ folder into your css/my_patches/ folder and rename it to match the name of your central stylesheet (so that the relationship is easier to remember).
The screenshot shows the protostructure of your new project (as seen in a Dreamweaver project window).
Step 2: Adjusting the Paths
After creating the project structure, you must check all paths for the CSS components. The XHTML source code must contain the paths to the central stylesheet and to the patch file. The central stylesheet and patch file themselves must have the correct paths to base.css and iehacks.css. After these checks, the basic layout is ready to go and the real graphic design can be implemented.
Step 3: Layout Design
From this point on, you have the choice: you can create your own stylesheets for the screen and print layouts as well as for the navigation, or you can start off with YAML's file templates and preformatted CSS components.
The folder yaml/screen/ contains the file templates basemod_draft.css for the page layout and content_default.css to format content.
Copy these templates into your css folder and change them to suit your wishes. You can work with the navigation components and the print stylesheets in the same fashion.
Note: do not forget to include these additional components in your central stylesheet.
