YAML introduction

In 2005, the web developer Dirk Jesse published the responsive CSS framework YAML under the Creative Commons license CC-BY 2.0, which allowed the basic framework to be used for free both privately and commercially. Operators who want to put their web project online under a different license can also acquire a commercial model that gives them free access to the licensing. The focus of the CSS framework has always been on offering users the biggest possible freedom for the design of barrier-free web applications. The current version of the framework (4.2.1) was made available in 2013, and is supported by various content management systems such as WordPress, TYPO3, or Joomla thanks to corresponding CMS integration templates.

YAML is a work environment that makes it easier for developers to work with the web languages HTML and CSS, and focuses on the usability and simplicity of the planned project. The name YAML is an abbreviation of “Yet Another Multicolumn Layout”. The YAML framework is not to be confused with the YAML markup language (“YAML Ain’t Markup Language”), which is only indirectly related to the web framework: The modules that make up the framework were created primarily with Sass (“Syntactically Awesome StyleSheets”). This allows you to customize and extend the individual sections using the CSS preprocessor, which is significantly influenced by the YAML markup language.

The JavaScript library jQuery has been implemented and perfectly matched to the CSS framework since version 3.0, which considerably simplifies the development of dynamic and animated elements for an individual web presence. With Thinkin’ Tags, the successor of YAML Builder (since 3.1), there is also a drag-and-drop editor to help you create your own YAML layout and automatically manage all of the HTML pages and stylesheets created for your project.

With its modular system, YAML offers the typical amenities of a framework: If you want to start a new web project, you don’t have to start completely from scratch, but instead can begin right away with a powerful base frame – which will save you valuable time. As a responsive CSS framework, the strength of the pre-built YAML components lies especially in their adaptability: Regardless of which devices and browsers users employ, the flexible code provides an appealing visual presentation. With the core modules available, the framework covers the most frequently required elements – although their total size is just under 6 KB.

The following are the standard modules specified in the stylesheet base.css:

In order to support older versions of Internet Explorer, the core components of the base.css file are complemented by a bug fix collection for versions 5, 6, and 7 of the former Microsoft browser. This is saved in the iehacks.css file, which is optional, but should always be used in the same way if you want to present your YAML project in the old versions of the internet browser.

The CSS framework not only ensures that your website is optimally prepared for all visitors, but is primarily designed to make the development process and the possible connection to your preferred content management system as easy as possible. The modular construction and strict separation of layout and design components help to keep the code user-friendly and lean. If you don’t need a particular website element, then you don’t have to do anything with it, because the basic framework simply provides you with a path, and you specify its direction.

The fact that you can use the simplified stylesheet language Sass for this purpose is doubtlessly one of the biggest advantages of the YAML framework. Thanks to the simple syntax, the desired stylesheets are written much faster than with ordinary CSS. In addition, the preprocessor reduces the number of HTTP requests by linking stylesheets to one another and automating the compression of the templates. Finally, Sass automatically generates the necessary CSS files without having to worry about them.

Another big advantage of the responsive CSS framework results from the development work of the dedicated YAML community, which has designed and published various templates for the different content management systems – in some cases even offering specific support. These finished templates link the framework with the applications for managing your web content. You can download and use them partially for free, and partially at a fee. This saves you the necessary adjustments to the core framework and directs all focus to the design of your web project. The following YAML CMS templates exist, among others:

• JYAML: Complete package consisting of templates, plugins, and libraries for Joomla from Version 3.6.0 based on YAML 4
• YAML for Drupal: Various templates for Drupal implemented by the CSS framework in Drupal 6 and 7 (planned for 8 as well)

The construction and language base of the YAML framework are representative of its simplicity. In 2008, the first stable version of the previously mentioned YAML builder was released so that users could utilize it to optimally design their own web projects. Combining all key functions of the CSS basic framework (up to YAML 3.1), the online tool allows you to create the planned web layout quickly and intuitively using helpful drag-and-drop elements. Each individual change can be immediately viewed in the live preview. Finally, the builder automatically creates the necessary stylesheets and the (X)HTML markup.

With the fourth version of the framework, the YAML builder found its legitimate successor in the Thinkin’ Tags tool. This is characterized by an even better workflow for the creation of website prototypes based on YAML or the supported CSS framework Blueprint. The following features, among others, are available to developers for this purpose:

• HTML editor: With the help of the integrated HTML editor, you can easily edit code by double-clicking in the layout or the DOM structure tree. The editor simplifies code writing with typical assistance tools such as syntax highlighting, auto-completion, and live review.

• CSS editor: You can also edit your project’s CSS files using an internal editor (including syntax highlighting and live analysis) direct in Thinkin’ Tags. For this, the editor accesses the corresponding media queries, with whose help a stylesheet is then assigned to a medium.

• Page and stylesheet management: Each project can contain various HTML pages and stylesheets, where you can assign the corresponding design sheets to each HTML file. It’s also possible to hide stylesheets for a certain time.

• Responsive web design check: Without having to leave Thinkin’ Tags, you can test your layout for different scenarios – for example, the display width on different devices, such as desktops, tablets, or smartphones can be emulated to detect and remove any inconsistencies.

• User-friendly typography optimization: Changes in the typography are quickly tested thanks to helpful sliders. In addition, you have access to more than 600 fonts from the Google WebFont library, which you can integrate into your project with just one click.

The biggest problem with frameworks like YAML is often the long training period required to familiarize yourself with the code of the different modules. If you want to rely on the prebuilt code snippets, then you have to deal extensively with their operating principles, even if you already have profound knowledge of HTML, CSS, and others. It’s therefore important to adapt the individual work effort to the conceptual approaches of the framework in order to achieve the desired end result. For this, YAML provides detailed documentation on the individual components. Also typical of frameworks is the fact that more code is usually loaded for a YAML project than is actually required – unless you specifically optimize it.

Another drawback of the responsive CSS framework is the licensing mentioned above. Although the Creative Commons Attribution 2.0 license (CC-BY 2.0) allows you to use the web framework both privately and commercially free of charge, the prerequisite is that you have to refer to the YAML homepage in your web presence. If you want to publish your project under a different license, you can’t get around purchasing one of the paid license models (Project, General, OEM, etc.).

Going by how browser-friendly it is, its responsive web design approach, and the support of both CSS3 and HTML5, YAML is a very interesting framework for web applications, despite the last release being some time ago. Thanks to the accessibility module, you can shape your online presence in a machine-readable form, which is not only a decisive step toward accessibility, but also earns you valuable points when it comes to search engine optimization. In combination with Thinkin’ Tags, you have everything that you need to create a modern, standard-compliant web presence. Additionally, if you manage your project’s content with the help of a supported content management system, then you can concentrate entirely on the formation of your layout and design.

To use the current version of the CSS framework, you first have to download the appropriate core files, which you can find either on the official website or in the YAML GitHub repository. These also contain documentation, various layout demos, and the JavaScript jQuery library, among other things. To compile the standard version of the framework from the existing files, you need the following five components:

• Node.js: Server-side runtime environment based on JavaScript engine V8
• Grunt-CLI: Command line based tool that builds on Node.js and is required to automate tasks (e.g. compiling LESS or SCSS files)
• Ruby: Object-oriented programming language
• Sass: Alternative stylesheet language which enables the use of variable and mix-ins, thus simplifying the creation of design sheets
• Compass: Framework which uses Sass as the default library and provides the preprocessor with a large number of mix-ins

Once you’ve installed these components and saved the YAML files on your system, you have to resolve and install all of the necessary Grunt dependencies. The following tasks are required to properly compile the YAML framework:

• grunt: Start a simple Compass sequence to compile the existing Sass-/SCSS files in CSS
• grunt watch: Activate the Compass monitoring function, which is used to automatically recompile the Sass/SCSS- documents during all later changes
• grunt build: Compile all static YAML CSS files
• grunt build-utf8: A similar function to grunt build, but the rule @charset “utf8” remains active in the CSS files

YAML simplifies the development of a new web project as well as its visual development via CSS in an uncommon way. The learning process that the user of the framework has to undergo, though, should in no way be underestimated: You have to be familiar with HTML and CSS and be willing the embrace the conceptual ideas of the standard-compliant development base if you want to fully exploit their entire potential. With Thinkin’ Tags, developer Dirk Jesse brought a tool to the market to help experienced users create YAML layouts by actively supporting their efforts, and at the very least, facilitating their entry. But newcomers will likely have problems with the pre-designed layout structure in spite of the tool’s help.

A big point of concern is the future capability of the framework. The last update for the current version 4 came out in 2014. Even though the work on a fifth edition of the responsive CSS framework has been confirmed by Jesse, it remains to be seen how and if further development is taking place. But so far, YAML and Thinkin’ Tags have provided an absolutely recommendable platform for modern web projects, which are characterized by a flexible and standard-compliant structure.