Yahoo! UI Library: Grids CSS, un sistema para crear webs con CSS de forma estandarizada

Seguro que todos los que habeis tocado CSS en un momento u otro os habeis encontrado con el típico problema de que el CSS no se ve igual en todos los navegadores ni versiones de estos: lo que se ve estupendamente en Firefox no se ve bien en IE6 aunque si se ve en IE7.

En mi caso, estaba bastante cansado de este tipo de problema, siempre teniendo que “apañar” el código CSS para que funcionara bien en cualquier navegador. Quería una solución a este problema…

Y un buen día, mi amigo y colega Miguel Monreal me habló de Yahoo! YUI Grids CSS, y yo me dije ¿y esto qué es y para qué sirve?

YUI (Yahoo! User Interface Library) es un conjunto de utilidades y aplicaciones en JavaScript, así como recursos CSS que Yahoo! ofrece desde su web de desarrollo de forma totalmente gratuita. Son utilidades concebidas para hacer entornos web amables, bien pensados, muy fáciles de configurar y robustos… y este conjunto incluye una solución muy muy buena, de verdad, para los problemas de CSS como los que he comentado antes: Grids CSS, un sistema de CSS que permite crear webs maquetadas de prácticamente cualquier manera que os podais imaginar, y con una ventaja extra: es un sistema que ya lleva los típicos problemas resueltos desde el principio y 100% compatible entre navegadores. Lo único que teneis que hacer es descargaros los archivos que están a vuestra disposición en la web de Yahoo! User Interface Library y utilizarlos en vuestros proyectos web. Para que os hagais una idea, con Grids CSS de YUI vienen varios archivos y hay unas 100 plantillas de layouts web en un archivo que no llega a los 2 Kb.

Os pongo un ejemplo muy sencillo y real: estás dándole vueltas a la cabeza sobre como hacer un diseño web que consta de una cabecera, un contenido y un pie, y por ejemplo quieres que en la parte del contenido, 2/3 (o el 66% del espacio) lo ocupe un contenido y el resto otro, y que además todo esté centrado, estoe s algo bastante común, ¿o no?. Bueno, pues en lugar de hacer tu propio CSS y luego comprobarlo y corregirlo en todos los navegadores para asegurarte que funciona bien puedes utilizar ESTO, que es un modelo de Grids CSS ya hecho y con todos esos problemas resueltos. Tan solo tienes que fijarte en como está hecho y luego sustituir el contenido por el tuyo.

Por si necesitais más ejemplos, podeis ver como funciona por ejemplo en estas webs:

WedTool – Podeis ver en su código fuente y en sus CSS que está hecha con este sistema y por eso mismo nos ahorramos un montón de problemas ocn los CSS.

Gedesel – Otro ejemplo de una web hecha utilizando Grids CSS de YUI.

iMasterD.com – Una web de cursos online montada también con este sistema.

Si os poneis a buscar por ahí hay cientos de webs hechas así y si estais perdidos sobre como empezar con Grids CSS solo teneis que mirar su código fuente y sus CSS para ir entendiendo como hacerlo, aunque lo mejor es la web oficial de Yahoo! sobre YUI, la Yahoo! User Interface Library e ir directamente al apartado de Grids CSS.

Hay que invertir algo de tiempo en entender bien como funciona, pero luego la verdad es que es muy sencillo de manejar y sobre todo te resuelve todos los problemas derivados de la interpretación en diferentes navegadores. Espero que os sirva, porque es un sistema sencillo y muy muy potente y que te ahorra un montón de quebraderos de cabeza.

Be Sociable, Share!

• 
•