Shared publicly  - 
YAML 4 Feedback Session

Today, it's 4 weeks since YAML 4 was released. During the last weeks I got serveral e-mails and feedback from good friends but I want to take the chance to ask you - my followers and/or users - directy.

So today, I would like to ask you some questions:

* Does the new documentation fit to your needs?
* Do you find all relevant information?
* Are there features, that need more/better explanation?
* Are there features, which are missing or should be improved?
* Are there things, other framework do better?
* How do you like the progressive linearization feature?

The discussion is open. Please let me know what you think!
Sven Wappler's profile photoMichael Bauer's profile photoKolja Kutschera's profile photoYAML CSS Framework's profile photo
Vorweg: Ich finde YAML super.

Hier sind meine persönlichen Erfahrungen.

1. Mach bitte ein Cheat Sheet für HTML und Styles.

2. Ich fand YAML anfangs verwirrend. Das liegt unter anderem daran, dass es so viele Dateien in unterschiedlichen Verzeichnissen gibt. Das finde ich übrigens auch an HTMLBoilerplate nicht gut gelöst.

Um die ersten Schritte zu machen, fände ich best-practice-Beispiele zu Download super. Also die einzelnen Demos extrahiert (ohne add-ons, libs, forms usw. ); nur eine index.html und ein css-Verzeichnis mit den notwendigen css-Dateien.

3. Eine Galerie von aktuellen Websites wäre schön, um sich die Vorgehensweise anderer Entwickler anzuschauen.

4. Ich finde die Doku von bootstrap sehr schön, auch von der Gruppierung der Inhalte.

5. Ich fände ein offizielles CDN für den Core super.

Liebe Grüße Bertram
* Does the new documentation fit to your needs?
- Yes, the onepager is much better than the old site

* Do you find all relevant information?

* Are there features, that need more/better explanation?
Some more real life examples would be nice. When to use a grid or columns and where are the push/pull classes for?

* Are there features, which are missing or should be improved?
We would like a sticky footer features that works by just adding an extra CSS file. We have build our own sticky footer on YAML using this:

Maybe you can make a version without the german comments in the source. We have to take them all out by hand. And besides are there any frontend webdevelopers not speaking English? :-D

Also it would be cool if you add Paul Irish' conditional HTML tags:

* Are there things, other framework do better?
Can''t think of anything right now.

* How do you like the progressive linearization feature?
Our designs never use this, they are always fixed width.

Thanks for the great work, keep it up!
Great job, first of all. More detailed:

* Does the new documentation fit to your needs?
Yes and no. I can find everthing, but there could be a table of content at the beginning.

* Are there features, which are missing or should be improved?
There could be one or two more examples to get easier into the logic of the different layout possibilities. Especially for beginners it is great to start with an semi-ready html/css document.

* Are there things, other framework do better?
No, of course not! ;-) Well, I like the .htaccess, the 404.html and the favicon/icon files of the html5 boilerplate...

* How do you like the progressive linearization feature?
Thats one of the greatest features in the new YAML4!
+Kanwei Li I plan to add an example for the use of the new box-modell. For your own tests: Remove the child container and add ym-wbox to its former parent element (ym-wrapper). For the layout wrapper, you can of course also remove the class and add your paddings directly to ym-wrapper.
Kleinigkeit: Auf der Dokuseite hat sich beim Bereich "Inline Semantic Text Decoration" ein "und" statt "and" reingeschmuggelt
* Are there features, that need more/better explanation?
ym-gbox-left, ym-gbox-right, ym-cbox-left, ym-cbox-right are not explained

* Are there features, which are missing or should be improved?
I miss a good solution for <figure> including <figcaption> with floats and flexible images. This solution seems to work, but not with flexible images:
Furthermore, an open GIT repository would be great (,

* How do you like the progressive linearization feature?
I like it, but can't use it most of the time. In 95% i use a CMS and it's hard to integrate so many subtemplates.
Am really pleased that YAML4 has been released - and want to upgrade my existing web site from YAML3 - YAML4; features I was looking for - to move onto html5 in a structured fashion from existing website and progressive linearisation so web site will work well with mobile devices etc.
* Does the documentation fit your needs
slightly thin when looking for detailed explanations of how things work - such as the linearisation works; or how to upgrade from 3 - 4 in terms of classes; or different structure of files. But the documentation works at as a good overview level, but could be supplemented with more detailed supplements after the initial document -which is well structured.

* missing
would love for the shiny buttons as per yaml 3 to work out of the tin - struggling just now as I try to amend my web page templates to get a look i like with yaml 4 equivalent to yaml 3

* how do you like the progressive linearisation feature
its brilliant .. just what the doctor order

Now, if only i can get the web site transformed up and up and running with YAML 4, i will be really pleased
This should work, but it's a kind of static flexible image and every image in every <figure> has the same width. But sometimes you have images in 200px width and others in 400px and with your solution i have to calculate every image separately. In a CMS this is impossible or i have to integrate a JavaScript-Calculator to calculate the widths after the document is loaded.
In my opinion that would be a bad choice because the layout has to work without any Javascript (in modern browsers) and i guess the result would be a flash after loading the whole document like the @font-face FOUT in Firefox and Opera.

So i'm searching a solution for images with different widths. Without the <figure> container everything works fine (YAML-Classes .flexible and .float-left / .float-right).
Mir ist gerade in Sachen Forms aufgefallen, dass es super wäre, wenn die columnar-Darstellung ab einer bestimmten unterschrittenen Breite für mobile Medien (Smartphones) in den full-width-Modus wechseln würde, damit diese übersichtlicher werden.
+Sven Wappler Good idea. I will add a code snippet for form linearization, such as for columns and grids with the next update.
I love it and use it on But I had quite a hard time figuering out where to actually start. Some kind of tutorial how to create a site based on yaml from the start would be great. Basically i ripped the flexible_columns example, but for example I am not sure about the pros/cons of the central stylesheet approach...
+Daniel T The equalize feature can't be implemented to the column module that easy, as the content has to be visually in the same order as it is in source code. This collides with the column module, which allows any visual order. Of course, it works in general, but it dramatically would reduce layout flexibility (column order).

Concering @import: YAML receives its power from its modular file concept to speed up the development process. For production, I recommend using a build script (Ant) and a CSS compressor (YUI Compressor or Google Closure Compiler) to concatenate and minify your stylesheets, e.g. the build script from HTML5boilerplate. Take a look at the YAML website. All CSS is reduced to a single file.
BTW: Thanks to all commenters for your feedback. If there's more, I am always listening ...
Hi, mir ist gerade aufgefallen, dass in der Doku der Quelltext der horizontalen Navigation wie folgt beginnt: <nav class="ym-hlist"> aber in der vertikalen Navigation die Klasse in <ul class="ym-vlist"> steckt bzw. in ul statt in nav. Könnte man das evtl. so lösen, dass bei beiden die Klasse in nav steht?
Add a comment...