Cover photo
YAML CSS Framework
4,382 followers|342,965 views


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

Fantastic work, Michael.
Oliver Klee'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.
Rivsen Tan's profile photoCatalin Bobe'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 Wahle's profile photoskydive maty's profile photoChristian M. Grube's profile photoMichael Fuchs's profile photo
Ich kann mich nur anschließen. Grundsolide Leistung und im Problemfall einfacher Support. Venünftige Kostenmodelle und gute Leistung für einen shared-Hoster (Private plus)
 ·  Translate
Add a comment...

YAML CSS Framework

Shared publicly  - 
Matthias Hoffmann's profile photoGernot Ahlers'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:
Gernot Ahlers's profile photoAbhijeet Pathak's profile photo
Add a comment...
Do you need inspiration for new button styles? Take a look at these ideas.
Gernot Ahlers's profile photohai pham's profile photoRivsen Tan's profile photoid23's profile photo
Add a comment...
Have them in circles
4,382 people
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.
Luis Alberto Romero Calderon's profile photoGernot Ahlers's profile photoYAML CSS Framework's profile photoTom Franssen'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.
Markus Trapp's profile photoYAML CSS Framework's profile photoMichael Fuchs's profile photoJean Louis'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...
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.