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.

Comentarios

Todavia recuerdo las miradas de odio de los diseñadores cuando lo pusimos en el primer portal, senti pinchazos en la nuca y mi olor corporal aumentó, pero creo que ahora les mola la gramola…. un abrazo fiera

Madre mía… yo buscando portales de rock con un buen diseñico a ver si puedo aprovechar algo para mi web y me apareces el primero… pero no me has servidoooooo 😛

Noelia, mis diseños son puro rock&roll: cadenas, fuego, chavalas, cuero… ¿qué más quieres?, ¿estás pensando en convertir http://www.webpereza.es en un foro de heavy metal?… Siiiii!!!

Es mas, si quieres hacerlo mas rapido, incluyen un diseñador online que escribe los layouts por ti usando obviamente los css de yahoo:
http://developer.yahoo.com/yui/grids/builder/

Parecido a blueprint, pero parece que tiene mas recursos. Ya lo utilizaré cuando lo necesite.

Un saludo.

Hola, soy nuevo con YUI, peor pues me gustaria comenzar a usarlo, donde puedo ver como usar el http://developer.yahoo.com/yui/grids/builder/, ya que pego el codigo que este genera peor no me sale nada,

saludos

Comentar

*Campos obligatorios

No te pierdas

Foto de la sesión de trabajo con Rusticae
19 abril, 2015
Rediseñando Rusticae, capítulo I: hablando se entiende la gente
Desde hace unos meses, en Flat 101 trabajamos con Rusticae, elegido por el ministerio de Industria como mejor sitio web de turismo y viajes en 2014, en la mejora de...
No Image
25 mayo, 2014
UX Spain 2014 en Granada. Resumen, crónica y vivencias granadinas
Por tercera edición consecutiva se celebraba, en esta ocasión en Granada, el UX Spain, el encuentro de profesionales de experiencia de usuario. Y por tercera vez, para allá que me...
No Image
1 julio, 2013
Diseño web: del concepto al resultado. Creatividad, honestidad y belleza al servicio de los objetivos de negocio de un site
Los pasados días 21 y 22 de junio (viernes y sábado) se celebro el primer congreso SEonthebeach en La Manga del Mar Menor. Entre otras muchas particularidades, este congreso se...

Si continuas utilizando este sitio aceptas el uso de cookies. más información

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar