YAML

In 2005, the web developer Dirk Jesse published the re­spon­sive 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 com­mer­cial­ly. Operators who want to put their web project online under a different license can also acquire a com­mer­cial 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 ap­pli­ca­tions. The current version of the framework (4.2.1) was made available in 2013, and is supported by various content man­age­ment systems such as WordPress, TYPO3, or Joomla thanks to cor­re­spond­ing CMS in­te­gra­tion templates.

YAML is a work en­vi­ron­ment that makes it easier for de­vel­op­ers to work with the web languages HTML and CSS, and focuses on the usability and sim­plic­i­ty of the planned project. The name YAML is an ab­bre­vi­a­tion of “Yet Another Mul­ti­col­umn Layout”. The YAML framework is not to be confused with the YAML markup language (“YAML Ain’t Markup Language”), which is only in­di­rect­ly related to the web framework: The modules that make up the framework were created primarily with Sass (“Syn­tac­ti­cal­ly Awesome StyleSheets”). This allows you to customize and extend the in­di­vid­ual sections using the CSS pre­proces­sor, which is sig­nif­i­cant­ly in­flu­enced by the YAML markup language.

The JavaScript library jQuery has been im­ple­ment­ed and perfectly matched to the CSS framework since version 3.0, which con­sid­er­ably sim­pli­fies the de­vel­op­ment of dynamic and animated elements for an in­di­vid­ual 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 au­to­mat­i­cal­ly 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 com­plete­ly from scratch, but instead can begin right away with a powerful base frame – which will save you valuable time. As a re­spon­sive CSS framework, the strength of the pre-built YAML com­po­nents lies es­pe­cial­ly in their adapt­abil­i­ty: Re­gard­less of which devices and browsers users employ, the flexible code provides an appealing visual pre­sen­ta­tion. With the core modules available, the framework covers the most fre­quent­ly 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 com­po­nents of the base.css file are com­ple­ment­ed by a bug fix col­lec­tion 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 de­vel­op­ment process and the possible con­nec­tion to your preferred content man­age­ment system as easy as possible. The modular con­struc­tion and strict sep­a­ra­tion of layout and design com­po­nents help to keep the code user-friendly and lean. If you don’t need a par­tic­u­lar 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 sim­pli­fied stylesheet language Sass for this purpose is doubtless­ly one of the biggest ad­van­tages of the YAML framework. Thanks to the simple syntax, the desired stylesheets are written much faster than with ordinary CSS. In addition, the pre­proces­sor reduces the number of HTTP requests by linking stylesheets to one another and au­tomat­ing the com­pres­sion of the templates. Finally, Sass au­to­mat­i­cal­ly generates the necessary CSS files without having to worry about them.

Another big advantage of the re­spon­sive CSS framework results from the de­vel­op­ment work of the dedicated YAML community, which has designed and published various templates for the different content man­age­ment systems – in some cases even offering specific support. These finished templates link the framework with the ap­pli­ca­tions for managing your web content. You can download and use them partially for free, and partially at a fee. This saves you the necessary ad­just­ments 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 con­sist­ing of templates, plugins, and libraries for Joomla from Version 3.6.0 based on YAML 4
• YAML for Drupal: Various templates for Drupal im­ple­ment­ed by the CSS framework in Drupal 6 and 7 (planned for 8 as well)

The con­struc­tion and language base of the YAML framework are rep­re­sen­ta­tive of its sim­plic­i­ty. In 2008, the first stable version of the pre­vi­ous­ly 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 in­tu­itive­ly using helpful drag-and-drop elements. Each in­di­vid­ual change can be im­me­di­ate­ly viewed in the live preview. Finally, the builder au­to­mat­i­cal­ly creates the necessary stylesheets and the (X)HTML markup. With the fourth version of the framework, the YAML builder found its le­git­i­mate successor in the Thinkin’ Tags tool. This is char­ac­ter­ized by an even better workflow for the creation of website pro­to­types based on YAML or the supported CSS framework Blueprint. The following features, among others, are available to de­vel­op­ers for this purpose:

• HTML editor: With the help of the in­te­grat­ed HTML editor, you can easily edit code by double-clicking in the layout or the DOM structure tree. The editor sim­pli­fies code writing with typical as­sis­tance tools such as syntax high­light­ing, auto-com­ple­tion, and live review.

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

• Page and stylesheet man­age­ment: Each project can contain various HTML pages and stylesheets, where you can assign the cor­re­spond­ing design sheets to each HTML file. It’s also possible to hide stylesheets for a certain time.

• Re­spon­sive 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 smart­phones can be emulated to detect and remove any in­con­sis­ten­cies.

• User-friendly ty­pog­ra­phy op­ti­miza­tion: Changes in the ty­pog­ra­phy 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 frame­works like YAML is often the long training period required to fa­mil­iar­ize yourself with the code of the different modules. If you want to rely on the prebuilt code snippets, then you have to deal ex­ten­sive­ly with their operating prin­ci­ples, even if you already have profound knowledge of HTML, CSS, and others. It’s therefore important to adapt the in­di­vid­ual work effort to the con­cep­tu­al ap­proach­es of the framework in order to achieve the desired end result. For this, YAML provides detailed doc­u­men­ta­tion on the in­di­vid­ual com­po­nents. Also typical of frame­works is the fact that more code is usually loaded for a YAML project than is actually required – unless you specif­i­cal­ly optimize it.

Another drawback of the re­spon­sive CSS framework is the licensing mentioned above. Although the Creative Commons At­tri­bu­tion 2.0 license (CC-BY 2.0) allows you to use the web framework both privately and com­mer­cial­ly free of charge, the pre­req­ui­site 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 pur­chas­ing one of the paid license models (Project, General, OEM, etc.).

Going by how browser-friendly it is, its re­spon­sive web design approach, and the support of both CSS3 and HTML5, YAML is a very in­ter­est­ing framework for web ap­pli­ca­tions, despite the last release being some time ago. Thanks to the ac­ces­si­bil­i­ty module, you can shape your online presence in a machine-readable form, which is not only a decisive step toward ac­ces­si­bil­i­ty, but also earns you valuable points when it comes to search engine op­ti­miza­tion. In com­bi­na­tion with Thinkin’ Tags, you have every­thing that you need to create a modern, standard-compliant web presence. Ad­di­tion­al­ly, if you manage your project’s content with the help of a supported content man­age­ment system, then you can con­cen­trate entirely on the formation of your layout and design.

To use the current version of the CSS framework, you first have to download the ap­pro­pri­ate core files, which you can find either on the official website or in the YAML GitHub repos­i­to­ry. These also contain doc­u­men­ta­tion, 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 com­po­nents:

• Node.js: Server-side runtime en­vi­ron­ment 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 pro­gram­ming language
• Sass: Al­ter­na­tive stylesheet language which enables the use of variable and mix-ins, thus sim­pli­fy­ing the creation of design sheets
• Compass: Framework which uses Sass as the default library and provides the pre­proces­sor with a large number of mix-ins

Once you’ve installed these com­po­nents and saved the YAML files on your system, you have to resolve and install all of the necessary Grunt de­pen­den­cies. 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 mon­i­tor­ing function, which is used to au­to­mat­i­cal­ly 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 sim­pli­fies the de­vel­op­ment of a new web project as well as its visual de­vel­op­ment via CSS in an uncommon way. The learning process that the user of the framework has to undergo, though, should in no way be un­der­es­ti­mat­ed: You have to be familiar with HTML and CSS and be willing the embrace the con­cep­tu­al ideas of the standard-compliant de­vel­op­ment base if you want to fully exploit their entire potential. With Thinkin’ Tags, developer Dirk Jesse brought a tool to the market to help ex­pe­ri­enced users create YAML layouts by actively sup­port­ing their efforts, and at the very least, fa­cil­i­tat­ing 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 ca­pa­bil­i­ty 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 re­spon­sive CSS framework has been confirmed by Jesse, it remains to be seen how and if further de­vel­op­ment is taking place. But so far, YAML and Thinkin’ Tags have provided an ab­solute­ly rec­om­mend­able platform for modern web projects, which are char­ac­ter­ized by a flexible and standard-compliant structure.