Existen bastantes plataformas de desarrollo para diversas tecnologías. Los más sonados son los que interactuan del lado del servidor y en el nivel de programación. Pero YAML es digno de mención por que realmente nos facilita la labor de realizar hojas de estilo.

No debemos confundir el lenguaje de marcado YAML (Yet Another Markup Language) superconjunto de JSON con YAML (Yet Another Multicolumn Layout). Entre las principales características del framework están:

  • Un esquema definido de plantillas que incluye una cabecera, un pie de página y un área para una o más columnas muy propio de las nuevas tendencias de diseño.
  • Compatibilidad con la mayoría de los navegadores utilizando la plantilla por defecto proporcionada en la distribución.
  • Esquemas de diseños fijos o fluidos.

Lo interesante de esta herramienta es que cuando el diseñador inicia a crear la hoja de estilo lo hace con un esquema ya fijado y con la compatibilidad multinavegador. Esta última característica es muy importante a mi parecer. Posteriormente y con el transcurso del diseño de la plantilla el diseñador puede ir restando elementos innecesarios dentro de la hoja de estilo. Pero es importante resaltar que YAML no es una plantilla prediseñada.

Estructura del paquete:

El paquete de distribución incluye la carpeta YAML/ que contiene los archivos necesarios para trabajar con la herramienta. Las demás carpetas son DOCUMENTATION/, EXAMPLES/ y TOOLS/. Dentro de la carpeta YAML están las siguientes hojas de estilo.

  • /yaml: contiene los archivos central_draft.css y markup_draft.css. Esta carpeta es la carpeta principal del framework. El primer archivo embebe todos los componentes CSS necesarios para trabajar y el segundo muestra el código fuente de la estructura de YAML.
  • /yaml/core: contiene los archivos base.css, iehacks.css, print_base.css, slim_base.css, slim_iehacks.css y slim_print_base.css. Como su nombre lo indica, estos archivos son los componentes base del framework. El primer archivo incluye toda la definición CSS para elaborar un diseño a tres columnas. El segundo (iehacks.css) contiene todos los “ajustes” necesarios para la correcta visualización en el navegador Internet Explorer 5 al 7 independientemente del diseño elegido. Y el tercero proporciona soporte para CSS Print.
  • /yaml/screen: componentes CSS para el diseño en pantilla. Incluye los archivos basemod_draft.css y content_default.css.
  • /yaml/navigation: componentes para la definición de menús de navegación horizontal y vertical.
  • /yaml/print: hojas de estilo con valores por defecto para la definición de la versión imprimible de la página.
  • /yaml/patches: mas “ajustes” para Internet Explorer.

¿Cómo empezar a utilizar nuestra plantilla?

Cuando iniciamos el diseño, lo primero que debemos hacer es agregar nuestra plantilla como recurso de hoja de estilo, generalmente utilizando el atributo link. Esta hoja de estilo principal contiene nuestro diseño y la incorporación de las otras hojas de estilo que son parte de YAML mediante la regla @import. 

<head>
      ...
      <link href = "css/layout_3col_standard.css" rel = "stylesheet"
            type = "text/css"/>
...
</head> 
/* import core styles | Basis-Stylesheets */
@import url(../yaml/core/base.css); 
/* import screen layout | Screen-Layout einbinden */
@import url(../yaml/navigation/nav_shinybuttons.css);
@import url(screen/basemod.css);
@import url(screen/content.css); 
/* import print layout | Druck-Layout einbinden */
@import url(../yaml/print/print_003_draft.css);

Reglas de oro para usar YAML correctamente

Las siguientes reglas resumen los principios básicos para el buen desarrollo con YAML:

  • YAML no es una plantilla prefabricada.
  • YAML está basado en el principio TOP-DOWN (iniciar el desarrollo de la hoja de estilo con definiciones de propiedades estándard para todos los navegadores).
  • Todas las plantillas YAML necesitan de tres componentes básicos: base.css, iehacks.css y print_base.css.
  • Se debe separar correctamente los archivos del framework, de los propios de nuestro diseño incluyendo los archivos modificados del framework.
  • Lee el manual de documentación de YAML antes de iniciar el desarrollo con la herramienta.

El YAML Builder

Adicionalmente en el sitio del proyecto hay un enlace al YAML Builder. Esta aplicación web nos permite definir plantillas en tiempo real y de una manera más gráfica simplificando aún más el proceso de desarrollo de la hoja de estilo. Luego que hemos terminado nos permite obtener una copia de la plantilla lista para poder ser utilizada.

Conclusiones

La idea de utilizar frameworks es debido a la necesidad de agilizar los tiempos de desarrollo de las herramientas. YAML es una muy buena propuesta; útil para aquellos desarrolladores CSS.

La herramienta permite realizar nuestras hojas de estilo de una manera más sencilla, rápida y elegante, combinando propiedades generales y un buen soporte para los navegadores con lo cual no tendremos que ser nosotros los que nos preocupemos por esos detalles que antes nos consumían tanto tiempo valioso.

Les invito a probar por ustedes mismo la herramienta. Para mayor información sobre el proyecto pueden dirigirse a la página web en donde encontrarán el manual de documentación, los archivos del framework y el vínculo al YAML Builder.