Web Development

Build web application CSS layouts with the YAML framework

The CSS framework YAML provides developers and designers with a starting point for their web application and design work. Tony Patton suggests giving YAML a try.

Web design with CSS, HTML, and JavaScript has evolved to the point where web application interfaces often rival their desktop counterparts. However, there are still caveats and workarounds that can make creating a design from the ground up a daunting task.

Getting your design to work in every operating system and browser combination is time consuming and, quite frankly, a pain. This has all been done before, so why reinvent the wheel with every design? CSS frameworks like YAML (Yet Another Multicolumn Layout) provide a base so you can worry about overall site design instead of the many quirks of web design.

Building blocks

The YAML site describes it as "A modular framework for truly flexible, accessible and responsive websites." As the documentation states, YAML provides a cross-browser compatible, functional, modular skeleton layout, which contains all of the most often used page elements. It utilizes column-based and grid-based CSS layouts. This allows you to quickly build interfaces with one to three columns. The grids come into play when laying out the individual columns--YAML utilizes its own feature called subtemplates for building flexible grid-based designs. At this point, you take the skeleton and modify the layout (if necessary) to fit your needs.

Drag and drop

While YAML is not a prepackaged layout, it does provide a tool called YAML Builder to quickly build a layout based on YAML features (Figure A). It provides a visual layout tool that utilizes the YAML CSS framework. You choose features in the Options dialog (on the left in Figure A), and it is laid out in the browser window. Figure A

Design YAML layouts with YAML Builder (Click the image to enlarge.)
Figure B shows a two-column layout with teaser area near the top. The layout dialog in Figure B has been docked in the left area of the browser window (by clicking the icon in the upper right of the dialog), whereas it was floating in Figure A. The Toggle View button at the bottom left of Figure B allows you to view the design loaded in the browser as displayed in Figure C. Figure B

A two-column layout with teaser area with YAML Builder (Click the image to enlarge.)
Figure C

The two-column design previewed in the browser. (Click the image to enlarge.)
Once you settle on a design, the code for your layout may be retrieved via the Get Code button. It opens the modal window displayed in Figure D, where it provides the web page code as well as the necessary CSS files. The design utilizes YAML, so it assumes you will have YAML files installed in your environment. Figure D

Retrieving the source code for YUI Builder design. (Click the image to enlarge.)

Take it for a ride

YAML is freely available for download in a zip file (the current version is 4.01). The folder structure can be a bit confusing, and it takes a while to get accustomed to it. The installation includes four main folders:

  • demos: Pages and code that give you an idea of how the framework can be used.
  • docs: This includes basic YAML documentation with plenty more available online.
  • lib: Code components utilized by YAML. This includes the jQuery JavaScript library (minimum size).
  • yaml: The heart of the YAML framework contains all of the necessary code files; it contains subdirectories: add-ons, core, forms, navigation, print and screen. The core directory contains the main YAML building blocks.

The YAML source files contain import directives that reference other files within the framework, so you should be careful about changing the directory structure. The introduction page provides information on the various files in the framework with more details in the documentation.

Drawbacks

YAML may not be for everyone, and it certainly has drawbacks. For starters, it has a steep learning curve; after all, there is a lot in the YAML source files, and it takes a while to figure out how it works. The site provides excellent documentation and tutorials, so there is help on mastering it. In addition, there seems to be some code bloat in it--just a lot of code to load, though I am not the one to point out specific instances. When using YAML, you rely upon its developer and the community to keep it up-to-date and this type of crutch makes many developers cringe, but that is a drawback with any framework.

Why use it?

All the technologies (CSS, HTML, JavaScript, etc.) are there for you to use, so why utilize something you did not create? The web community helped hone YAML so it is battle tested. This means you can worry about designing a site and not the many quirks of web development. While I prefer YAML due to my experience with it, there are a number of such frameworks available and many do a great job, including YUI, 960 Grid System, and Blueprint. Like many development tasks, it comes down to personal preference.

There are many web designers and developers who turn their noses up at frameworks because they believe you should create your own code; this is debatable because most developers reuse designs over and over, which is along the lines of what frameworks do. Even if you do not utilize these frameworks, you can learn a lot by taking them for a test drive and looking at their code to see how they tackle various situations.

What is your preferred approach to web design? Do you use a framework or roll your own? Share your thoughts with the community.

About

Tony Patton has worn many hats over his 15+ years in the IT industry while witnessing many technologies come and go. He currently focuses on .NET and Web Development while trying to grasp the many facets of supporting such technologies in a productio...

0 comments