En el artículo anterior vimos 10 plantillas responsive gratis que os ayudarán a que tu diseño se adapte a los distintos tamaños de pantalla. A continuación mostraré una útil recopilación de responsive CSS Frameworks que te harán la vida más fácil y sencilla cuando estés diseñando sitios web.

Estos frameworks vienen con layouts, grids y media listos para que añadas tu propio diseño. Son bastante sencillos de usar, y gratis, así que no se puede pedir más. Dicho esto, muestro los frameworks responsives:

 

 

 

Skeleton

Skeleton es uno de los frameworks responsive más ligeros, basado en un sistema de grid (cuadrícula) simple. Skeleton scala desde 960px el tamaño del diseño, para que pueda verse en tablets y smartphones en modo normal y panorámico.

Ejemplo

 

Responsive Grid System

The Responsive Grid System es una manera rápida y fácil para crear un diseño responsive.

Ejemplo

 

Foundation

Foundation te permite personalizar el framework dependiendo de tus necesidades exactas, siendo mucho más sencillo el proceso de desarrollo.

Ejemplo

 

Bootstrap

Bootstrap es una herramienta con un montón de funciones de HTML y CSS que te permitirán usar muchas de sus novedades, ya que te dará tipografía estilizada, botones, formularios, tablas, navegación, y todo lo que necesitas en un framework ligero.

Ejemplo

 

Golden Grid System

The Golden Grid System parte la pantalla en 18 columnas, la más alejada hacia la izquierda y a al derecha se usan para hacer los márgenes exteriores de la cuadrícula, mientras que las otras 16 se usan apra el diseño. Puede ser combinado en 8 columnas para tamaños de tablet o en 4 para tamaños de móviles.

Ejemplo

 

320 and Up

320 and up contiene media queries para cinco diferentes tamaños de pantalla, una cuadrícula vertical, estilos de tipografía por defecto y componentes de HTML5 Boilerplate.

Ejemplo

 

Lessframework

Less Framework es una cuadrícula CSS para diseñar sitios adaptativos. Contiene 4 capas y 3 set de tipografías, basadas en una simple cuadrícula.

Ejemplo

 

CSS Grid

Esto es un sistema de cuadrículas que empieza con 12 columnas usando porcentajes. Funciona genial en pantallas de 1280 y 1140 píxles. Cuando la pantalla se hace más pequeña, se usan dos media queries para adaptar el contenido.

Ejemplo

 

Framelessgrid

Frame less grid es un framework que se adapta columna por columna, no pixel por pixel mediante el uso de media queries.

Ejemplo

 

Wirefy

Wirefy es una colección de archivos CSS y JS que te permitirán experimentar con marcos responsives

Ejemplo

 

Gumby Framework

Gumby Framework es un framework simple y ligero, que viene, a diferencia de algunos frameworks, con un kit PSD y UI que hace más fácil maquetar el diseño de la manera más tradicional.

Ejemplo

Si te ha gustado este artículo, puedes recibir gratis más y mejor por RSS, Twitter, Facebook o correo electrónico. ¡Muchas gracias por leerme!