YAML

In 2005, the web developer Dirk Jesse published the re­spons­ive CSS framework YAML under the Creative Commons licence CC-BY 2.0, which allowed the basic framework to be used for free both privately and com­mer­cially. Operators who want to put their web project online under a different licence can also acquire a com­mer­cial model that gives them free access to the licencing. The focus of the CSS framework has always been on offering users the biggest possible freedom for the design of barrier-free web ap­plic­a­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­res­pond­ing CMS in­teg­ra­tion templates.

YAML is a work en­vir­on­ment that makes it easier for de­velopers to work with the web languages HTML and CSS, and focuses on the usability and sim­pli­city of the planned project. The name YAML is an ab­bre­vi­ation of “Yet Another Multi­column Layout”. The YAML framework is not to be confused with the YAML markup language (“YAML Ain’t Markup Language”), which is only in­dir­ectly related to the web framework: The modules that make up the framework were created primarily with Sass (“Syn­tactic­ally Awesome StyleSheets”). This allows you to customise and extend the in­di­vidu­al sections using the CSS pre­pro­cessor, which is sig­ni­fic­antly in­flu­enced by the YAML markup language.

The JavaS­cript library jQuery has been im­ple­men­ted 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­vidu­al 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 auto­mat­ic­ally 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­pletely from scratch, but instead can begin right away with a powerful base frame – which will save you valuable time. As a re­spons­ive CSS framework, the strength of the pre-built YAML com­pon­ents lies es­pe­cially in their ad­apt­ab­il­ity: Re­gard­less of which devices and browsers users employ, the flexible code provides an appealing visual present­a­tion. With the core modules available, the framework covers the most fre­quently 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­pon­ents of the base.css file are com­ple­men­ted 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­ar­a­tion of layout and design com­pon­ents 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 doubt­lessly one of the biggest ad­vant­ages of the YAML framework. Thanks to the simple syntax, the desired stylesheets are written much faster than with ordinary CSS. In addition, the pre­pro­cessor reduces the number of HTTP requests by linking stylesheets to one another and auto­mat­ing the com­pres­sion of the templates. Finally, Sass auto­mat­ic­ally generates the necessary CSS files without having to worry about them.

Another big advantage of the re­spons­ive 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­plic­a­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­men­ted 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­res­ent­at­ive of its sim­pli­city. In 2008, the first stable version of the pre­vi­ously mentioned YAML builder was released so that users could utilise 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­it­ively using helpful drag-and-drop elements. Each in­di­vidu­al change can be im­me­di­ately viewed in the live preview. Finally, the builder auto­mat­ic­ally creates the necessary stylesheets and the (X)HTML markup. With the fourth version of the framework, the YAML builder found its le­git­im­ate successor in the Thinkin’ Tags tool. This is char­ac­ter­ised 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­velopers for this purpose:

• HTML editor: With the help of the in­teg­rated 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­sist­ance 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­res­pond­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­res­pond­ing design sheets to each HTML file. It’s also possible to hide stylesheets for a certain time.

• Re­spons­ive 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­sist­en­cies.

• User-friendly ty­po­graphy op­tim­isa­tion: Changes in the ty­po­graphy 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­i­ar­ise yourself with the code of the different modules. If you want to rely on the prebuilt code snippets, then you have to deal ex­tens­ively with their operating prin­ciples, even if you already have profound knowledge of HTML, CSS, and others. It’s therefore important to adapt the in­di­vidu­al work effort to the con­cep­tu­al ap­proaches of the framework in order to achieve the desired end result. For this, YAML provides detailed doc­u­ment­a­tion on the in­di­vidu­al com­pon­ents. Also typical of frame­works is the fact that more code is usually loaded for a YAML project than is actually required – unless you spe­cific­ally optimise it.

Another drawback of the re­spons­ive CSS framework is the licensing mentioned above. Although the Creative Commons At­tri­bu­tion 2.0 licence (CC-BY 2.0) allows you to use the web framework both privately and com­mer­cially free of charge, the pre­requis­ite is that you have to refer to the YAML homepage in your web presence. If you want to publish your project under a different licence, you can’t get around pur­chas­ing one of the paid licence models (Project, General, OEM, etc.).

Going by how browser-friendly it is, its re­spons­ive web design approach, and the support of both CSS3 and HTML5, YAML is a very in­ter­est­ing framework for web ap­plic­a­tions, despite the last release being some time ago. Thanks to the ac­cess­ib­il­ity module, you can shape your online presence in a machine-readable form, which is not only a decisive step toward ac­cess­ib­il­ity, but also earns you valuable points when it comes to search engine op­tim­isa­tion. In com­bin­a­tion with Thinkin’ Tags, you have everything that you need to create a modern, standard-compliant web presence. Ad­di­tion­ally, 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 re­pos­it­ory. These also contain doc­u­ment­a­tion, various layout demos, and the JavaS­cript jQuery library, among other things. To compile the standard version of the framework from the existing files, you need the following five com­pon­ents:

• Node.js: Server-side runtime en­vir­on­ment based on JavaS­cript 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­tern­at­ive 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­pro­cessor with a large number of mix-ins

Once you’ve installed these com­pon­ents and saved the YAML files on your system, you have to resolve and install all of the necessary Grunt de­pend­en­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­it­or­ing function, which is used to auto­mat­ic­ally 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­tim­ated: 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­per­i­enced users create YAML layouts by actively sup­port­ing their efforts, and at the very least, fa­cil­it­at­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 cap­ab­il­ity 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­spons­ive 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­so­lutely re­com­mend­able platform for modern web projects, which are char­ac­ter­ised by a flexible and standard-compliant structure.