Hojas de estilo con YAML

Estás en Inicio / Editorial / Desarrollo Web

25.12.2007

Hojas de estilo con YAML

Por Juan Manuel Lemus | 3,802 Lecturas
Archivado en: CSS, Desarrollo Web

YAML es un framework de desarrollo para CSS, el objetivo de utilizar esta herramienta es ayudar a los diseñadores a realizar hojas de estilo de una manera más ágil y estándar para los múltiples navegadores. YAML combina una serie de características bastantes interesantes que sin duda nos harán más sencillo el trabajo a la hora de diseñar con CSS.

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.

Califica esta nota:

(5 votos, promedio: 3.4 de 5)

Loading ...

Sobre el autor

Juan Manuel Lemus
Editor del blog DotPress. Creador de la metodología de desarrollo L5 y jefe del proyecto Apperture Web Framework.

Comentarios

8 comentarios en total.

Francisco 25.12.2007 - 07:36 - #

Se te olvida un dato importante, una licencia para uso comercial cuesta 60€ (para un proyecto) o 120€ (licencia ilimitada), además, su licencia es Creative Commons Attribution 2.0

Yo he estado usando durante un tiempo blueprintcss que además tiene una licencia bastante menos restrictiva y sin coste alguno.
Jose Roberto (vevni) 25.12.2007 - 20:47 - #

estan alreves los links, cuando dices arriba sobre yaml (osea el framework) apuntas al otro yaml…

y cuando hablas del yaml ( el que es una extension de json ) hablas del framework, jejje una pekeña confusion…

saludos!
inyaka 26.12.2007 - 01:17 - #

¿como se usa el framework? por lo que se esto no es mas que una biblioteca de codigo, pero hasta ahora jamas he usado ningún framework, mi editor favorito es Aptana
MaKeSuRfEr 26.12.2007 - 11:14 - #

Wooww..!!.. nunca habia visto un framework para CSS..!!!..

que proo!!
Javier Errazuriz 28.12.2007 - 12:38 - #

¿Y no hay problemas de performance al estar cargando tantos archivos en cada pageload? (son muchos request para el servidor)
Carlos Zamora 29.12.2007 - 10:36 - #

esta genial, ya habia visto algo parecido pero muy primitivo en comparacion a este FrameWork.
Gracias por el dato de los costos
lisandro 20.01.2008 - 08:39 - #

Javier, seguramente es posible unir los css de manera de reducir la cantidad de archivos y de conexiones del navegador.
Carlos 18.06.2008 - 07:10 - #

Me parece que es algo complicado.

Hojas de estilo con YAML

Estructura del paquete:

¿Cómo empezar a utilizar nuestra plantilla?

Reglas de oro para usar YAML correctamente

El YAML Builder

Conclusiones

Sobre el autor

Comentarios

Editorial

Otras Notas Relacionadas

Boletín