Los frameworks Css han crecido en popularidad recientemente, permitiéndonos crear rápidamente prototipos de nuestros diseños, la idea de los frameworks es ahorrar tiempo y minimizar los errores al trabajar con hojas de estilos haciendo todo el trabajo pesado de las tareas repetitivas que realizamos una y otra vez en cada sitio web, su finalidad es simplificar el código para construir la base de nuestros diseños.
A la hora de elegir un framework tenemos que tener en cuenta dos características principales, la primera es que nos proporcione la suficiente flexibilidad para poder implementar el diseño al que nos enfrentamos y la segunda es cómo nos sentimos trabajando con él, estamos cómodos, entendemos su funcionamiento, si no es así el tiempo que invertiremos en entender su funcionamiento no nos compensará.
Ventajas
- Agilizar el tiempo de desarrollo evitando programar desde cero y reutilizando código ya existente.
- Eliminar los problemas de compatibilidad entre los distintos navegadores.
- Cumplen con los estándares del W3C.
- Nos obliga a desarrollar basándonos en un único patrón y en los trabajos en grupo todo el equipo usará los mismos criterios para resolver los posibles problemas que se puedan presentar.
Desventajas
- El aprendizaje, decidir cual usar y como y cuando usarlo.
- Si nos surge algún problema la solución se complica ya que no es un código escrito por nosotros y nos costará mas encontrar las clases que se están sobrescribiendo.
- Las clases se nombran generalmente en función de su visualización en pantalla, de su apariencia por lo que pueden no ser correctas semánticamente.
- Muchas de las clases definidas nunca van a ser usadas ya que intentan contemplar todas las situaciones y muchas definiciones genéricas posiblemente nunca las lleguemos a utilizar.
La lógica aplicada a la mayoría de los frameworks consiste en dividir la pantalla en una rejilla, esta rejilla tendrá más o menos columnas en función del Framework utilizado y en ella se irán distribuyendo los distintos elementos en columnas, existen bastantes frameworks disponibles en el mercado, a continuación hablaremos de las características de algunos de ellos.
Algunos frameworks interesantes
Blueprint
Blueprint es uno de los más conocidos y su uso en la red está muy extendido. Gracias a este uso la comunidad ha desarrollado varios plugins o pequeños programas para adaptarlo a las necesidades personales de los desarrolladores que permiten realizar diseños líquidos, organizar o diseñar la información mediante menús con pestañas, posibilidad de utilizar sprites o iconos en diferentes enlaces,…
Una característica de Blueprint es la posibilidad de dividir la pantalla en 24 columnas con un ancho máximo de 950px, lo cual da la posibilidad para los diseños con una resolución de 1024 px, dejando ya atrás las obsoletas resoluciones de 800*600, contiene estilos específicos para impresión, formularios y para IE.
Yaml
YAML es un framework basado en estándares web, fácil de usar y sus plantillas presentan un esquema bastante definido con una cabecera, pie de página y un área para el contenido que puede ser dividido en una o varias columnas.
Yaml nos ofrece la posibilidad de realizar diseños fijos con un ancho máximo de 960px para resoluciones de 1024, diseños líquidos o fluidos, así como la posibilidad de crear un grid de hasta un máximo de 12 columnas.
Yaml nos da la posibilidad de crear un diseño online con su herramienta Yaml Builder, un editor WYSWYW que nos genera la plantilla que nosotros mismos vamos creando, pudiendo ver al momento el resultado y como se adecua a nuestras necesidades.
El uso de este Framework este definido bajo una licencia Creative Commons, la cual nos permite su uso privado siendo necesaria la identificación de framework poniendo en un lugar visible de nuestro proyecto un enlace a la web de Yaml. También tiene una licencia de distribución comercial la cual hay que comprarla.
Una característica muy interesante es que da soporte al idioma hebreo o el árabe en los cuales el flujo de texto es de «derecha a izquierda».
960 Grid System
El framework 960gs se basa en un grid de 960px de ancho, ofreciendo la posibilidad de resoluciones actuales de 1024px, pudiendo dividir este ancho en 12, 16 o 24 columnas, favoreciendo una distribución más flexible de nuestros contenidos a la hora de diseñar la información.
Hay que tener en cuenta las plantillas que 960gs pone a disposición, estas plantillas son compatibles con Fireworks, Indesigns, Photoshop, Flash,… aplicaciones muy utilizadas entre los profesionales del diseño.
Así como Yaml, 960gs también dispone de un editor online que nos genera el código, facilitándonos la tarea de implementarlo en nuestro sitio web.
Es muy útil la extensión creada para Dreamweaver, nos genera un tab nuevo para implementar las clases del frameWork. Lo puedes descargar desde la página de Facebook de DMXZone.
520 Grid System
520 Grid System esta orientado a Facebook y se basa en Facebook Markup Language (FBML), basado en 12 columnas de 26px cada una con un margen de 16px fáciles de dividir, no contiene estilos para textos, tablas y formularios.
Dispone de una plantilla para photoshop, un HTML y el css.
Maite Capalleja
Enviar comentarios