Bootstrap y Foundation son actualmente los frameworks front-end más completos y populares de la red, pero como ellos existen muchas alternativas, no tan completas como las mencionadas pero que merecen la pena probar.

IVORY es uno de ellos, se trata de un simple pero flexible framework front-end que puede manejar diseños adaptables (Responsive Design) desde 320 a 1200 pixels de ancho.

Cuenta con una grilla de 12 columnas e incluye estilos para tipografía, formularios, botones, tablas, paginación, tabs, tooltips, acordeones, etc. y funciona perfectamente con las últimas versiones de los navegadores más importantes.

Web: http://weice.in/ivory/
Demo: http://weice.in/ivory/demo.html
Descarga: https://github.com/kanthvallampati/IVORY

Groundwork es un framework front-end construído en SASS y Compass que ofrece un diseño adaptable bastante avanzado.

Cuenta con un sistema de grillas flexible, fluido y adaptable que hace posible la creación de cualquier diseño.

El framework incluye muchos componentes de interfaz de usuario, como tabs, botones, formularios, navegación, iconos, etc.

Groundwork está muy bien documentado y tiene plantillas para empezar rápidamente.

Web: http://groundworkcss.github.com/
Descarga: https://github.com/groundworkcss/groundwork

Reuze.me es un framework front-end que se centra en ofrecer códigoligero y listo para usar para estructuras HTML de uso frecuente, por ejemplo, en blogs o webs de noticias.

Actualmente, el framework incluye bloques de código para los artículos con o sin imágenes, encabezados, enlaces y distribución en varias columnas.

Reuze.me permite personalizar la salida con distintos parámetros y proporciona el código HTML generado, el cual es compatible con RDFa Lite, es responsive (adaptable a cualquier resolución), y también funciona con cualquier otro framework front-end como Bootstrap o Foundation.

Enlace: Reuze.me
Descarga: https://github.com/derny/reuze

34Grid es un sistema de grilla adaptable basado en el método de "columnas de igual distribución" para cada fila.

34Grid es completamente personalizable. Podemos definir el número máximo de columnas, el espacio entre estas, el margen entre las filas y las transiciones entre las columnas.

Una vez que las opciones son seleccionadas, se crean automáticamente los archivos necesarios listos para descarga y usar.

Enlace: 34Grid

Instant Sprite es un proyecto web open source que nos permite generar sprites con varias imágenes que podemos subir desde nuestra computadora de la forma clásica o mediante drag and drop.

Una vez que tengamos las imágenes cargadas, podemos eliminar las que no se necesitan y reordenarlas. La aplicación permite definir el espacio entre las imágenes y la dirección del sprite (vertical, horizonal y diagonal). También podemos establecer la forma como se establecerán los nombres de las clases que se van a generar, como prefijos, sufijos o incluso usando expresiones regulares.

La aplicación genera la imagen del sprite en formato GIF o PNG, además de los archivos HTML y CSS necesarios listos para utilizar.

Enlace: http://instantsprite.com/
Descarga: http://github.com/bgrins/InstantSprite

Quizás muchos conocen y han usado Bootstrap, el framework creado por Twitter, que permite crear páginas web de forma fácil y rápida.

Pues bien, BootMetro es otro interesante framework que está construído sobre Bootstrap, y que permite crear webs con la interfaz Metro (ahora conocida como 'Modern') de Windows 8.

BootMetro incluye todas las características, componentes y plugins de Bootstrap y algunos extras (para la interfaz Metro) como baldosas, barra de aplicaciones, íconos, navegación, etc.

Enlace: http://aozora.github.com/bootmetro/
Demo: http://aozora.github.com/bootmetro/hub.html

Es innegable que Google Web Fonts es actualmente, el servicio de web fonts más popular de la red, sin embargo, Adobe no se ha querido quedar atrás y ha lanzado una excelente alternativa, Adobe Edge Web Fonts.

El servicio es gratuito, e incluye las fuentes gratuitas de Google Web Fonts y algunas más.

Su uso es bastante sencillo, seleccionamos la fuente que deseemos utilizar y obtendremos un archivo JS que se deberá incluir en nuestra página, y finalmente, podremos asignarla a cualquier elemento HTML mendiante CSS.

Puedes ver la documentación existente para obtener más detalles sobre el uso de este servicio.

Enlace: Adobe Edge Web-Fonts

Cuando se empieza a crear un sitio adaptable, los puntos a tomar en cuenta son varios, como la definición de los breakpoints, el majejo del layout, de las imágenes, vídeos, navegación, etc.

This is Responsive es uns excelente herramienta para cualquier persona que trabaje con este tipo de diseños, ya que cuenta con patrones adaptables para el layout, tablas, navegación, formularios, imágenes, etc.

Además, el sitio cuenta con una lista muy bien organizada de enlaces hacia recursos relacionados con el Responsive Design, donde se pueden encontrar artículos, tutoriales y bibliotecas/plugins que nos serán de gran ayuda.

Enlace: This is Responsive

Hoy en día, es muy común encontrar códigos QR casi en cualquier lado, ya sea en sitios web o en cualquier lugar público (tiendas, bares, restaurantes, etc.), y cualquiera que tenga un smartphone podrá acceder fácilmente a su contenido.

En Web Resources Depot han hecho una interesate recopilación de generadores online, plugins javascript y librerías (PHP, Ruby, Python y .NET) que permiten crear códigos QR para mostrarlos en cualquier web o incluso imprimirlos. Estos son tres de ellos:

1. QR Code Gener (Generador Online)


2. jQuery.QRCode (Plugin jQuery)

3. PHP QR Code (Libería PHP)

Enlace: Create QR Codes Online (Generators, JavaScript Plugins & Code Libraries)

Responsive Grid System se presenta como la forma más rápida de crear webs sensibles/adaptables a cualquier resolución de pantalla (Desktops, tablets, smartphones).

No está limitado a trabajar con grillas de sólo 12, 16 o 24 columnas, sino que nos permite utilizar las que se necesiten, adaptándose fácilmente a cualquier resolución ya que utiliza porcentajes incluso en los márgenes entre columnas, consiguiendo así, que la grilla se adapte al contenido y no al revés. Win!

Ejemplo Práctico:

HTML:


CSS:



Puedes ver un ejemplo con varias columnas en este enlace

Enlace: Responsive Grid System