Web 2.0 Tips

Buscando un poco de documentación sobre el lenguaje de configuracón Yaml, encunetro este Framwork CSS, que aparte ofrece on-line una herramienta para crear y una plantilla sobre este FW CSS, Yaml (Yet Anoter Multicolumn Layouts) ofrece una buena base de CSS para trabajar con templates basados en columanas sobre XHTML, aparte de incluir CSS’s y JS’s para fixear determinados bugs de Intertet Explorer. El codigo esta bien comentado y respeta los estandares web. Lo único malo es que no hay documentación en español (por ahora).

Pero lo que les vengo a mostrar, es una herramienta on-line que ofrecen, para crear un layout basado en CSS en pocos minutos, solo seleccionando el estilo de columnado y otras como el estilo de la barra de navegion ,etc.

El manejo es muy facil y se puede hacer hasta muy dinámico y flexible.

Opciones del layout

Una vez que este decidido el tipo de encolumnado, y los bloques que se van a mostrar, tipo el  #header, #footer, etc…

Luego nos deja ir poniendo diferentes elementos como “texto”, “listados” y demas como para rellenar el template con posibles contenidos.

Despúes de esto nos dara el código fuente de una serie de archivos.

Aca empezamos a armarlo, necesitamos bajar la ultima versión del Framework YAML, y copiarla al directorio de nuestro layout, guardamos el XHTML generado en inde.html y creamos el directorio CSS, nos quedaría algo asi:

[/css]
[yaml]
index.html

Dentro del directorio CSS, vamos a tener que crear el archivo “my_layout.css” y pegarle el código generado para este.  Luego dentro del directorio CSS tenemos que crear otros dos llamados “patches” y “screen”, donde meteremos los archivos  path_my_layout.css y en screen basemod.css.

Una vez hecho esto podemos visualizar el layout tal cual salio del builder, ahora para el resto de los cambios, nuestras personalizaciones, podemos crear el archivo css/screen/content.css y editarlo a nuestro modo para darle nuestro toque y vida a este layout, sabiendo de antemano que es cross-browser y respeta al pie de la letra los standares.

YAML Builder: http://builder.yaml.de/

No hay tips relacionados.