YAML CSS Framework — for truly flexible, accessible and responsive websites

<!DOCTYPE html> <html lang="en" itemscope itemtype="http://schema.org/Product"> <head> <meta charset="utf-8"/> <title>YAML CSS Framework — for truly flexible, accessible and responsive websites</title>  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="keywords" content="css, css framework, toolkit, css layout, grid, column, equal height, html5, css3, flexible, mobile layout, responsive layout, accessibility, modular, forms"> <meta name="description" content="Yet Another Multicolumn Layout (YAML) is a modular CSS framework for truly flexible, accessible and responsive websites."> <meta name="author" content="Dirk Jesse"> <meta name="publisher" content="Dirk Jesse, Highresolution.info"> <meta name="content-language" content="en"> <meta name="page-topic" content="Computer"> <meta name="revisit-after" content="2 days"> <meta name="robots" content="index, follow"> <meta itemprop="name" content="YAML CSS Framework"> <meta itemprop="description" content="YAML is a modular CSS framework for truly flexible, accessible and responsive websites. The structure is extremely versatile in its programming and absolutely accessible for end users."> <link href="https://plus.google.com/+yaml" rel="publisher" /> <link rel="apple-touch-icon" href="http://www.yaml.de/images/yaml4-square-128.png"> <link href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:700&text=YAML4%20CSS%20Framework" rel="stylesheet" type="text/css"/> <link href="http://fonts.googleapis.com/css?family=Droid+Serif:400,400italic,700|Droid+Sans:700" rel="stylesheet" type="text/css"/> <link href="minified/layout-min.css?v=4" rel="stylesheet" type="text/css"/>    <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-1851047-1']); _gaq.push(['_setDomainName', 'yaml.de']); _gaq.push(['_gat._anonymizeIp']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> </head> <body id="yaml-top" class="doc"> <ul class="ym-skiplinks"> <li><a class="ym-skip" href="#sitenav">Skip to navigation (Press Enter)</a></li> <li><a class="ym-skip" href="#main">Skip to main content (Press Enter)</a></li> </ul> <div id="intro" role="contentinfo"> Yet Another Multicolumn Layout - continuously developed since 2005 </div> <div id="sitenav" role="banner"> <div class="ym-wrapper"> <div class="ym-wbox"> <div class="mnav"> <ul class="ym-grid ym-equalize linearize-level-2"> <li class="ym-g20 ym-gl active"><strong>Home</strong></li> <li class="ym-g20 ym-gl"><a href="docs/index.html">Docs & Demos<span>Layout Demos and Documentation</span></a></li> <li class="ym-g20 ym-gl"><a href="license.html">License <span>License Modells & License Conditions</span></a></li> <li class="ym-g20 ym-gl"><a href="resources.html">Resources <span>Download Archive, Developer Tools & CMS Integration</span></a></li> <li class="ym-g20 ym-gr"> <a href="https://plus.google.com/+yaml">Development Blog <span> Latest news, release notes and tipps & tricks (on Google+)</span></a> </li> </ul> </div> </div> </div> </div> <header role="banner"> <div class="ym-wrapper"> <div class="ym-wbox"> <h1><span>YAML</span> 4</h1> <h2>CSS Framework</h2> <p>A modular CSS framework for truly <em>flexible</em>, <em>accessible</em> and <em>responsive</em> websites</p> </div> </div> </header> <div id="main" role="navigation"> <div class="ym-wrapper"> <div class="ym-wbox"> <div class="ym-grid linearize-level-2"> <div class="ym-g33 ym-gl"> <div class="ym-gbox-left"> <h3>Features</h3> <ul> <li>Bulletproof flexible grid system</li> <li>Flexible forms toolkit with theme-support</li> <li>Focussed on web standards & accessibility</li> <li>Optimized typography for all standard elements</li> <li>Matched building blocks for rapid prototyping</li> <li>Namespacing avoids conflicts with third-party CSS</li> <li>Well prepared for HTML5 and CSS3</li> <li>Very slim framework core (5.9 kB)</li> <li>Build on Sass</li> </ul> <p><a class="ym-button ym-next" href="docs/index.html">Docs & Demos</a></p> </div> </div> <div class="ym-g33 ym-gl"> <div class="ym-gbox"> <h3>Browser Support</h3> <p>YAML is tested and supported in major modern browsers like Chrome, Firefox, Opera, Safari and Internet Explorer.</p> <img class="flexible browsericons" src="images/browser_logos-64.png" alt="browser logos"> <ul> <li>Latest Google Chrome</li> <li>Mozilla Firefox 3.6+</li> <li>Opera 10+</li> <li>Apple Safari 4+</li> <li>Internet Explorer 6+</li> </ul> </div> </div> <div class="ym-g33 ym-gr"> <div class="ym-gbox-right"> <h3>Download</h3> <div class="box info"> <p><strong>Latest Release:</strong> v4.1.2, (Build: 130728)</p> <p><a href="download/release/yaml412-130728.zip" class="ym-button ym-next">Download</a><br/> Or you can get the latest version from <a href="https://github.com/yamlcss/yaml">Github</a>.</p> <p>Released under Creative Commons License CC-BY 2.0. Please read the <a href="license.html">license conditions</a>.</p> </div> <div class="social-buttons"> <a name="fb_share" type="button_count" share_url="http://www.yaml.de"></a> <a href="https://twitter.com/share" class="twitter-share-button" data-via="yamlcss">Tweet</a> <g:plusone size="medium"></g:plusone> </div> </div> </div> </div> </div> </div> </div> <div id="secondary" role="navigation"> <div class="ym-wrapper"> <div class="ym-wbox"> <div class="ym-grid linearize-level-2"> <div class="ym-g33 ym-gl"> <div class="ym-gbox-left"> <h2>Where it comes from</h2> <h3>A brief history</h3> <p>When YAML was released in October 2005, it was conceived as a base for developing flexible layouts, with a strong emphasis on meeting the challenges that result from working with flexible (elastic, fluid) containers and varying units. </p> <p>This CSS framework has been continually improved and extended over the years, based on the feedback and needs of professional frontend developers. Its code base has proved to be stable under real-world conditions on thousands of websites. Over the years, YAML-based websites won several awards at the German annual accessibility competition «Biene Award».</p> </div> </div> <div class="ym-g66 ym-gr"> <h2 class="indent">What makes it different?</h2> <div class="ym-grid linearize-level-1"> <div class="ym-g50 ym-gl"> <div class="ym-gbox"> <h3>Modular Concept</h3> <p>YAML provides a complete set of matched building blocks to create complex websites. Grids, navigation, forms, typography module and all provided add-ons work seamlessly together.</p> </div> </div> <div class="ym-g50 ym-gr"> <div class="ym-gbox-right"> <img class="flexible float-right" src="images/HTML5_Logo_128.png" alt="HTML5 logo"> <h3>HTML5 & CSS3</h3> <p>All layout modules are well prepared for HTML5 and CSS3 and make use of them to benefit from the latest web technologies.</p> </div> </div> </div> <div class="ym-grid linearize-level-1"> <div class="ym-g50 ym-gl"> <div class="ym-gbox"> <h3>Device Independence</h3> <p>YAML is focussed on device independent screen design and provides bullet-proof modules for flexible layouts. This is a perfect starting point and the key to truly responsive design.</p> </div> </div> <div class="ym-g50 ym-gr"> <div class="ym-gbox-right"> <h3>Developer Support</h3> <p>YAML has matured into a stable and versatile layout framework, and is regularly updated. Third party developers have created integration tutorials and templates for a long list of Content Management Systems.</p> </div> </div> </div> </div> </div> <div id="examples" class="ym-grid linearize-level-2"> <div class="ym-g33 ym-gl"> <div class="ym-gbox-left"> <img class="flexible bordered" src="images/screenshot-thinkintags.jpg" alt=""/> <div><a class="label" href="http://www.thinkintags.com">thinkintags.com</a> <span class="label">Relaunch May 2013</span> <span class="label">YAML 4.0.2</span></div> </div> </div> <div class="ym-g33 ym-gl"> <div class="ym-gbox"> <img class="flexible bordered" src="images/screenshot-efa.jpg" alt=""/> <div><a class="label" href="http://www.einfach-fuer-alle.de/">einfach-fuer-alle.de</a> <span class="label">Relaunch May 2013</span> <span class="label">YAML 4.0.2</span></div> </div> </div> <div class="ym-g33 ym-gr"> <div class="ym-gbox-right"> <img class="flexible bordered" src="images/screenshot-liechtenecker.jpg" alt=""/> <div><a class="label" href="http://liechtenecker.at/">liechtenecker.at</a> <span class="label">2013</span> <span class="label">YAML 4.0.x</span></div> </div> </div> </div> </div> </div> </div> <footer role="contentinfo"> <div class="ym-wrapper"> <div class="ym-wbox"> <div class="ym-grid linearize-level-2"> <div class="ym-g66 ym-gl"> <div class="ym-gbox-left"> <p>漏 2005 – 2013 by Dirk Jesse, <a href="http://www.highresolution.info">Highresolution.info</a><br>Code and Documentation licensed under <a href="http://creativecommons.org/licenses/by/2.0/">CC BY 2.0</a>.</p> <p><a href="legal.html">Legal Disclaimer</a> | <a href="http://shop.yaml.de">YAML-Shop</a> by <a href="http://www.itratos.de">Itratos</a></p> </div> </div> <div class="ym-g33 ym-gr"> <div class="ym-gbox-right"> <p><a href="https://twitter.com/yamlcss" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @yamlcss</a> <a href="https://plus.google.com/+yaml?prsrc=3" style="text-decoration:none;"><img src="https://ssl.gstatic.com/images/icons/gplus-32.png" alt="" style="border:0;width:32px;height:32px;"/></a></p> <p>Hosted by <a href="http://all-inkl.com/?partner=414472">all-inkl.com</a></p> </div> </div> </div> </div> </div> </footer>  <script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" defer></script>  <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>  <script type="text/javascript"> (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="minified/domscripts-min.js"></script> </body> </html>

CINXE.COM

YAML CSS Framework — for truly flexible, accessible and responsive websites