La base linguistique et la structure de YAML sont révélatrices de la simplicité du framework. Afin que les utilisateurs puissent utiliser au mieux ses avantages pour concevoir leurs propres projets Web, la première version stable a été lancée en 2008, à savoir YAML Builder. Combinant toutes les fonctions de base du framework CSS (jusqu'à YAML 3.1), l'outil en ligne vous permet de créer de manière rapide et intuitive votre mise en page Web grâce à des éléments de glisser-déposer bien conçus. Chacune des modifications peut être visualisée immédiatement dans l'aperçu live. Enfin, le Builder crée automatiquement les feuilles de style nécessaires ainsi que le balisage (X)HTML.
A la sortie de la quatrième version du framework, le YAML Builder a trouvé son successeur légitime dans l'outil Thinkin'Tags. Ce dernier se caractérise par un workflow encore plus performant pour la création de prototypes de sites Web basés sur YAML ou le framework CSS Blueprint qui est également pris en charge. A cet effet, les développeurs ont accès aux fonctionnalités suivantes :
- Éditeur HTML : grâce à l'éditeur HTML intégré, vous pouvez travailler le code en double-cliquant dessus dans la structure ou dans l'arborescence DOM. L'éditeur simplifie l'écriture du code grâce à des fonctions d'aide telles que le surlignage syntaxique, l'auto-complétion et la vérification instantanée.
- Éditeur CSS : vous pouvez également éditer les fichiers CSS de votre projet directement dans Thinkin'Tags à l'aide d'un éditeur interne. Pour ce faire, l'éditeur se sert de requêtes médias (ce que l’on appelle les media queries), grâce auxquelles une feuille de style peut être assignée à un média.
- Gestion des pages et des feuilles de style : chaque projet peut contenir différentes pages HTML et feuilles de style, ce qui vous permet d'affecter chaque modèle de conception à son fichier HTML. Il est également possible de masquer les feuilles de style pendant un temps défini.
- Test de conception Web responsive : vous pouvez tester votre mise en page pour différents scénarios, comme par exemple en testant la largeur d'affichage sur différents périphériques tels que les ordinateurs de bureau, les tablettes ou les smartphones, afin de pouvoir détecter et supprimer les éventuelles incohérences.
Optimisation de la typographie intuitive : les changements de typographie peuvent être rapidement testés. En outre, vous pouvez accéder à plus de 600 polices de caractères depuis la bibliothèque de polices en ligne de Google, bibliothèque que vous pouvez intégrer à votre projet en un seul clic.