10 Útiles Librerías Full CSS (Parte 1)

Librerias Full CSS
En esta ocasión les compartiremos librerías orientadas al diseño responsive, que ha tomado gran relevancia en los últimos meses debido al anuncio de Google.

INTRODUCCIÓN

¿Qué es una librería o framework?
Dejando el debate de lado, diremos que un framework lo componen un conjunto de librerías, pero existen librerías tan amplias y poderosas (como JQuery) que pueden tener el mismo nivel de desempeño de un framework. Entonces llamaremos frameworks simples a las librerías individuales y frameworks completos al conjunto de librerías, tal y como recomiendan en un artículo de Awwwards.

Entonces, ¿qué es una librería?
Vamos a definir el término "librería": diremos que es un conjunto de código estandarizado y organizado en carpetas y archivos desde los cuales podrás servirte como apoyo en algún proyecto web que estés poniendo en marcha simplemente copiando/pegando y llamando al archivo en tu html. No tienes que hacer mucho más.

SI ERES NOVEL, NO TE SALTES ESTE PÁRRAFO

En este post no vamos a asumir que todos están enterados de la existencia de Normalize.css, Modernizr, Prefix-free, Bootstrap, Foundation e inclusive Boilerplate (framework de HTML5). Sin embargo no entrarán en la lista de las 10 librerías prometidas para hoy, sino que servirán como un preámbulo para los visitantes más noveles. Así que si no los conocías, te los presentamos:

NormalizeNormalize.css

Es un normalizador de código CSS que resetea tu sitio web para que pueda ser visto sin problemas en los diferentes navegadores disponibles.


Modernizr

Modernizr es un framework de Javascript, que contiene código CSS, y nos permite, al igual que Normalize.css, hacer que tu web funcione con todas sus capacidades en cualquier navegador.


Prefix-free

Una liviana librería Javascript que te permitirá trabajar de forma única con código CSS sin prefijos.


Boilerplate

Un front-end template y robusto framework JQuery que incluye Modernizr y Normalize.css, con los que podrás construir fácilmente sitios o aplicaciones web adaptables para HTML5.

Booptstrap

El framework mobile-first desarrollado por Twitter para crear interfaces y diseños web responsive basados en HTML5 y CSS3.


Foundation

Foundation es un poderoso framework CSS que te permite construir prototipos responsive en HTML5 a base de grillas preestablecidas.



DE LLENO A NUESTRO TEMA

En esta ocasión compartiremos librerías orientadas al diseño responsive, que ha tomado gran relevancia en los últimos meses debido al anuncio de Google sobre considerar ineficientes y problemáticos a los sitios web que no lo sean, viéndose afectados principalmente en el posicionamiento de su motor de búsqueda para móviles. Este nuevo algoritmo ya entro en vigor el pasado mes de abril y sus consecuencias podrán ser medibles dentro de muy poco tiempo. Ya estamos preparando un artículo sobre las implicancias de esta medida. Por lo pronto, a estar preparados.

Lee el anuncio oficial de Google aquí:

Sin más rodeos, las 10 primeras librerías full CSS:

1. ENTOMIC

Diseña tus páginas en cuestión de minutos para obtener increíbles sitios web responsive que responden muy bien en desktop, tablets y smartphones. Un servicio que ofrece la opción de crear el diseño de la página en función de los tamaños de pantalla (screen sizes) más populares. Basta con crear cajas y establecer su ancho, exportar el diseño y empezar a usarlo.

Entomic

2. SKELETON

Skeleton es una pequeña colección de archivos CSS que te ayudarán a desarrollar rápidamente sitios webs que se verán geniales en cualquier tamaño, desde desktop hasta móvil. Este framework consiste en una página HTML base que incluye el markup necesario inicial, y algunas hojas de estilo que pueden ayudarte con el estilo de tu página y un icon set incluido.

Skeleton

3. INK

Crea rápidamente mensajes de correo electrónico en html responsive que funcionan prefectamente en cualquier dispositivo y cliente. Incluso en Outlook! Puedes enviarlo a cualquier lugar y desde cualquier dispositivo.

Ink

4. LESS FRAMEWORK

Less Framework es un sistema de grilla en CSS para el diseño de sitios web adaptativos (responsive). Contiene 4 layouts (Default, Tablet, Mobile y Wide Mobile) y 3 conjuntos de tipografía preseteados, todo basado en una sola grilla. Las únicas medidas que cambian en el layout para el diseño son la cantidad de columnas y el ancho de los márgenes exteriores.

Less framework

5. SUSY

Responsive grids para Compass. Susy esta basado en el sistema CSS de Natalie Downe, hecho posible gracias a Sass, y funciona muy fácil con Compass. Se puede utilizar en cualquier lugar, desde sitios estáticos hasta sitios dinámicos hechos en Django, Rails, Wordpress y muchos otros. Incluso viene empaquetado como parte de Middleman, para hacerte la vida más fácil.

Susy

6. FURATTO

Ligero y amigable framework para terminar el trabajo bien hecho. Ya sea que estés usando Scss o CSS, es muy fácil comenzar un proyecto y culminarlo en poco tiempo.

Furatto

7. GRIDICULO

Una librería para crear grillas responsive. Según el autor, Gridiculo fue creado al darse cuenta que después de haber probado muchas grillas responsive, ninguna de ellas ofrecía todas las características que requería. Podrás decir lo mismo al usarlo?

Gridiculo

8. INGRID

Ingrid es un sistema de layouts ligero y fluido, cuyo objetivo principal es reducir el uso de clases en las unidades individuales.

Ingrid

9. GROUNDWORK

GroundworkCSS ha sido construido desde cero con el increíblemente poderoso preprocesador CSS: Sass.

Groundwork

10. YAML4

Un framework CSS modulador para sitios web verdaderamente flexibles, accesibles y responsive.

Yaml4


Quizás también te interese:

Te fue de utilidad esta información? Compártelo y déjanos tus opiniones.
Publicado por:
Jason Gonzales

Apasionado por el diseño y el desarrollo web, E-learning y el aprendizaje autodidacta. Radica en Lima (Perú), ciudad donde se desempeña como Frontend Developer. Fundó Frontendo en el 2014 y se ha convertido a la fecha en su proyecto predilecto.