Cover photo
YAML CSS Framework
4,390 followers|626,793 views


YAML CSS Framework

Shared publicly  - 
Just in case you think silence in the stream is something dangerous for the project. Lots of work has been done until here and some more has to  be done before the release. But it's on a good way ...
Rene Ettling's profile photoIrgend Wer's profile photoSwen Gerber's profile photoSaša Janiška (gour)'s profile photo

I plan to start work on two themes to be used along with stat-site-generator and although there is no lack of CSS frameworks in the market, I'd like to use good & old YAML, possibly in its new incarnation. ;)

Will YAML 5 have similar/same licensing and does buying 'general license' for YAML-4 includes upgrade to YAML-5?

The text says: "The license includes the use of future versions.", but it would be still nice to hear some YAML-related news...silences is not pretty. :-(
Add a comment...

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.
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.
andres mauricio moreno chambo's profile photo
hola buenas noches que editor utilizas en la foto.
 ·  Translate
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
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...
In their circles
6 people
Have them in circles
4,390 people
Scott Lakey's profile photo
Avni Ademi's profile photo
Swarna Sri Teja's profile photo
SIRATULHAQ ABMI's profile photo
Gavino Bazzoni's profile photo
Jose Efrain Canales's profile photo
Lukas Mestel's profile photo
Mike Sackett's profile photo
badal das's profile photo

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
Jochen Kubik (kubjo)'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 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.
Stefan Stefanov's profile photoMichael Fuchs's profile photoYAML CSS Framework'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  - 
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.
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
skydive maty'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.