Cover photo
YAML CSS Framework
4,443 followers|522,983 views


YAML CSS Framework

Shared publicly  - 
A well illustrated article on how use the CSS3 Flexbox Layout Module.
Background The Flexbox Layout (Flexible Box) module (currently a W3C Candidate Recommendation) aims at providing a more efficient way to lay out, align and
Gabriele Giannotti's profile photoPeter Zsurka's profile photoFrank LDK's profile photoGIULIETTA MOFFATT's profile photo
Sehr cool erklärt!
 ·  Translate
Add a comment...

YAML CSS Framework

Shared publicly  - 
Do you use Emmet (former Zen-Coding)? Then this Gist from +Jens Grochtdreis might be helpful for you. It provides several snippets for typical HTML constructs for building the markup for YAMLs column and grid modules.
Tom Franssen's profile photo

Do you have an answer to our question here ( ?

Add a comment...

YAML CSS Framework

Shared publicly  - 
Today, +Thinkin' Tags got another feature update. It now comes with full YAML 4.1.2 support. You can now update existing projects to the latest YAML version and the form construction kit is now fully supported.
Tom Franssen's profile photoYAML CSS Framework's profile photoLuis Alberto Romero Calderon's profile photoGernot Ahlers's profile photo
+Tom Franssen Of course it is. Much to do for +Thinkin' Tags recently.
Add a comment...

YAML CSS Framework

Shared publicly  - 
YAML 4.1.2 released

This is the second maintenance release for YAML 4.1.x path. Thanks to Alexander Haß and MDMueller for their contributions.

Bug Fixes

Forms Module
- added support for input[type="image"] elements to forms module
- rearranged form styles for RTL support to avoid specificity conflicts
- corrected several small problems in RTL mode in forms module, especially in columnar view. 

Navigation Module
- removed round corners of search field in hlist navigation on iOS 

Code Changes

Forms Module
- added "clear:both" for .ym-message class to avoid conflicts when messages are placed behind the form field in the markup. 

- several improvements were made to the gradient generator, including a fallback for oldIE browsers.

Get on or on Github.
YAML CSS Framework's profile photoGernot Ahlers's profile photoMarkus Trapp's profile photomichael h's profile photo
Hi +Stefan Stefanov I can't reproduce your problem. Perhaps it's just a Chome based problem on your computer, then try to create a new profile. Anyway, YAML only provides some CSS. The problem, you describe is JS-based.
Add a comment...

YAML CSS Framework

Shared publicly  - 
Just closed the outdated side project YAML4-Sass ( 

Since the release of YAML 4.1 sources are available at:
Add a comment...

YAML CSS Framework

Shared publicly  - 
YAML 4.1 Released

The wait is over. Finally, after more than six months I released YAML v4.1 on this morning. And it's a great release that comes with interesting new changes. Let's go through them:

Github: YAML is now completely available on Github. Its easier now to integrate YAML in your frontend development workflow, watch the project to stay informed of all changes, file bugs and feature request in the issue tracker.

Sass: YAML was for more than seven years -- and still is -- a modular CSS framework. Then preprocessors became very popular during the last years and many users asked me for a Sass or Less port of YAML in the past. During the work on YAML 4.0.2 I started a "small" test project, called "yaml4-sass". This project developed rapidly and It became clear to me that YAML should be based complete on such a foundation.

YAML 4.1 is the first release with the new codebase, thats completely based on Sass. On the other side, many users still prefer working with pure CSS. That's why YAML 4.1 was developed to allow both, the classic CSS workflow and the more advanced frontend development using Sass.

Grunt: YAML 4.1 is build using this great development tool. As a result, its very easy to create custom static YAML builds, based on an individual configuration of the Sass port and its even possible to configure YAMLs namespace. Take a look at the in the Github project to learn how to use it. I'm pretty sure, you'll love it.

Improved Form Module: A lot of changes were made in YAMLs form module, to make it simpler and easier to use. This results now in a significantly lower specificity for form element selectors, making it easier to overrule base styles in your on layout. Its now possible to combine any types of form elements in a row with using standard markup, based on YAMLs grid module. And finally, styling form elements become simpler with the introduction of the new unified wrapper .ym-fbox.

Support for IE6 and IE7: Let's talk about outdated browsers now. YAML 4.1 still fully supports these dinosaurs browsers because there are areas around the world where they still matter. But I also have to say, that the support of these browsers blocks the development of YAML in many cases. For example the grid- and forms module could be written so much smarter and could provide a simpler markup. And theres even more space for improvements when it comes to responsive web design.

That's why I decided that YAML 4.1.x path will be the last release path of YAML 4 and the last one, still supporting IE6 and IE7. YAML 4.1.x will of course get compatibility updates and bugfixes, but I think it's time now to go on and focus recent browsers. Therefore it wont be a surprise when I say that the work on YAML5 has already begun. There are a lot of fresh ideas waiting for me to be implemented and this new major version of YAML will require at least the Internet Exporer 8.

There's a in the project that contains all the changes of YAML 4.1.0. Take a look at it for more detailed information.

Enjoy the new release. Your feedback is highly appreciated.
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.
Rivsen Tan's profile photoMario Peischl's profile photoFroilan Irizarry's profile photowebpunktdesign's profile photo
+Tom Franssen There is a generic examle in the docs that shows how to combine checkboxes/radios or inputs/selects and/or all of them in a row.

I can't provide real live examples out of the box. This wasn't possible before with YAMLs form module. Take a look at the underlaying HTML, there will always be some extra DIVs to manage checkboxes/radios and their lables. But that's part of the game of fluid/responsive layouts, I think.
Add a comment...
Have them in circles
4,443 people
Paul Haigh's profile photo
Adalberto Lima Vitorino (Beto Lima)'s profile photo
Michael Janssen's profile photo
Jason Divock's profile photo
Fabiano Queiroz Monte's profile photo
Tzafrir Rehan's profile photo
Ron Owens's profile photo
Pedro Blom's profile photo
Mischa Lempe's profile photo

YAML CSS Framework

Shared publicly  - 
Do you like Ruby? Then this is for you: The official Ruby gem for CSS framework YAML, maintained by +Michael Schulze.

Fantastic work, Michael.
yamlcss-gem - YAML (Yet Another Multicolumn Layout) is a modular CSS framework for truly flexible, accessible and responsive websites. It is based on Sass and has a very slim framework core that weights only ~6kB.
Michael Schulze's profile photoJens Grochtdreis's profile photo
Add a comment...

YAML CSS Framework

Shared publicly  - 
Yesterday, my browser-based rapid prototyping tool +Thinkin' Tags got a big update. The new version v0.5 comes with a fully redesigned user interface that is also much more responsive and many other new features.

For example, you can now create, duplicate, rename and delete stylesheets and you can organize which stylesheets are included and in which order for each HTML prototype.

And especially for YAML-based project: When creating new stylesheets, you can choose from several templates such as all the CSS files in yaml/screen/. So, you can now easily create prototypes of a new layout with multiple color schemes or play with different design variations of your navigation styles. 

Check the complete release notes on +Thinkin' Tags Google+ page:

It's definitely worth a look, I promise.
Catalin Bobe's profile photoJörg Auf dem Hövel's profile photo
Add a comment...

YAML CSS Framework

Shared publicly  - 
Yesterday, has moved to The change is run completely smoothly. If you should notice problems anyway, please let me know.
Thomas Pasligh's profile photoThomas Wahle's profile photoMichael Fuchs's profile photoZulbahri Majid's profile photo
Add a comment...

YAML CSS Framework

Shared publicly  - 
Useful tip for you next project? Perhaps ...
jQuery Filestyle - jQuery Customization of input html file - Customization of upload
Gernot Ahlers's profile photoMatthias Hoffmann's profile photo
Add a comment...

YAML CSS Framework

Shared publicly  - 
Today, the first maintenance release for YAML 4.1.1 is released and it brings the following changes/bug fixes:

Bug Fixes:
- removed <hgroup> element from normalization module (removed from the HTML5 specs)
- fixed a wrong margins between .ym-fbox siblings
- fixed missing button adjustments in form linearization
- fixed button style for search button in hlist navigation on iOS
- fixed a problem with .ym-inline elements in columnar mode
- fixed a problem with .ym-message in columnar mode
- fixed border for navigation title in vlist
- fixed several typos in CSS comments
- deleted some irrelevant styles from rtl-files

- added RTL support for form theme: gray-theme.css
- added new custom button class .ym-reply
- reduced file size of microformats icons and base64 inline images
- unified HTML structure for the seach field in RTL demo

Get the new version from th YAML website or directly from Github:
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.
oscar g Salvatierra's profile photoSeveriano Rodriguez's profile photo
Add a comment...

YAML CSS Framework

Shared publicly  - 
Do you need inspiration for new button styles? Take a look at these ideas.
Creative Button Styles - Modern and subtle styles & effects for buttons
Gernot Ahlers's profile photoRivsen Tan's profile photohai pham's profile photoid23's profile photo
Add a comment...
A modular CSS framework for truly flexible, accessible and responsive websites
"Yet Another Multicolumn Layout" (YAML) is a modular CSS framework for truly flexible, accessible and responsive websites

  • Bulletproof flexible grid system
  • Flexible forms toolkit with theme-support
  • Focussed on web standards & accessibility
  • Optimized typography for all standard elements
  • Matched building blocks for rapid prototyping
  • Namespacing avoids conflicts
  • Well prepared for HTML5 and CSS3
  • Very slim framework core (4.6 kB)
Browser Support
YAML is tested and supported in major modern browsers like Chrome, Firefox, Opera, Safari and Internet Explorer.
  • Latest Google Chrome
  • Mozilla Firefox 3.6+
  • Opera 10+
  • Apple Safari 4+
  • Internet Explorer 6+
Where does it come from?

A brief history

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.

This CSS framework has been continuely improved and extended over the years, based on the feedback and needs of professional frontend developers. Its code base has prooved 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».

What makes it different?

Modular Concept

YAML provides a complete set of matched building blocks to create complex websites. Grids, navigation, forms, typography module and all provided add-ons work seemlessly together.


All layout modules are well prepared for HTML5 and CSS3 and make use of them to benefit from the latest web technologies.

Device Independence

YAML is focussed on device indepentent screen design and provides bullet-proof modules for flexible layouts. This is a perfect starting point and the key to truely responsive design.

Developer Support

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.