15 Mejores librerías de estilos CSS3 gratis

Gracias a la funcionalidad de búsqueda avanzada de GitHub, porque encontré librerías CSS que hacen todo tipo de cosas. Incluso si no terminas usándolas, puedes aprender absolutamente de ellas.

Echa un vistazo: Y si no lo haces…. bueno… ¡bienvenido a la industria!

CSS Wand

CSS Wand es una de las bibliotecas más simples y pequeñas de esta lista; en realidad son sólo un puñado de animaciones simples y puras basadas en CSS que puedes copiar-pegar en tu sitio y personalizar a tu gusto.

Si necesita hacer que sus botones, entradas o animaciones de carga se sientan elegantes, puede probarlas.

Water.css

Sí, eso es Water.css, como en «just add water».

Es un conjunto de estilos por defecto que, aunque no llega a ser un marco de trabajo de CSS completo, puede ayudarle a empezar si no se molesta en crear su propio tipo o estilo de formulario.

Pesa menos de 2kb, y no utiliza ninguna clase. Ese es mi tipo de marco inicial, para ser honesto.

Raisin CSS

Raisin CSS se describe a sí mismo como una librería CSS de utilidad, lo que significa (lo adivinó) un montón de clases.

Tienen módulos preconstruidos para CSS Grid, FlexBox, puntos de ruptura, la propiedad Display, overflow, posicionamiento, y más.

Personalmente usaría una librería como esta si fuera a usar JS para alterar la apariencia de muchos elementos diferentes sobre la marcha.

Atomize

Atomize lleva las cosas un poco más lejos que Raisin CSS, creando algo más parecido a un framework completo basado en Atomic CSS, y la teoría de la separación de preocupaciones.

Su objetivo es ser neutro en cuanto al estilo, permitirle definir sus propios puntos de ruptura, y puede utilizarlo con NPM, o simplemente descargar el código fuente para utilizarlo con cualquier otro pipeline de desarrollo.

Sassyfication

Sassyfication tiene un par de cosas a su favor, empezando por su nombre.

Me dan ganas de chasquear los dedos en forma de»Z» y decirle a la gente que no pueden manejarme.

También tiene una colección de variables de uso común y mezclas para SASS.

Piense en las bibliotecas de utilidades mencionadas anteriormente, pero para SASS.

Tío, me encanta SASS, pero sigo echando de menos a LESS. ¿Alguien más echa de menos a LESS?

Spectrum CSS

No debe sorprender que Adobe tenga su propio sistema de diseño, o «lenguaje de diseño» como a veces lo llaman.

Bueno, se llama Spectrum, y Spectrum CSS es lo que puedes usar para hacer que tu sitio se parezca mucho a un proyecto de Adobe.

O, ya sabes, podrías ver cómo hacen las cosas, por diversión.

Box-shadows.css

Vale…. ¿cuánto te gustan las sombras y la propiedad de las sombras?

Probablemente no tanto como la gente que hizo Box-shadows.css, toda una biblioteca dedicada a una sola cosa: esquinas redondeadas.

Estoy bromeando. Creo que puedes adivinar lo que hace esto. Si necesita más sombras en su vida y en su interfaz de usuario, no busque más.

Flix Carousel

Flix Carousel es, como su nombre indica, un carrusel basado en los carruseles de previsualización de Netflix.

Es puro CSS, que me encanta, y parece funcionar bastante bien.

El único problema es que la vista previa en la página del repositorio no está funcionando. Para un ejemplo visual, tendrá que dirigirse al portafolio del autor.

Woah.css

Woah.css se factura como una librería de animación CSS para desarrolladores web excéntricos, y cumple con esa promesa.

Los elementos animados me recuerdan mucho a las viejas transiciones de vídeo en la televisión en los años 90, y las transiciones de vídeo en todos los editores de vídeo «de consumo».

Es tan cursi como el demonio, y muy divertido para jugar.

Animation Library

Se llama «Animation Library», y las animaciones son tan tranquilas como el nombre.

Esto no es algo malo, ya que un sitio corporativo probablemente no necesita o no quiere transiciones de vídeo de los 90 para sus botones animados. Es puro CSS, así que sólo tienes que añadir las clases que quieras y ya está.

Wipe.css

Wipe.css es básicamente un nuevo reinicio de CSS, basado en librerías como sanitize.css y normalize.css.

No reinventa la rueda, ni debería hacerlo.

Tiene unos valores predeterminados razonables que tienen mucho sentido para mí, y es muy posible que yo mismo los esté utilizando en un futuro próximo.

Denali CSS

La libería Denali CSS es otra basada en un sistema de diseño, específicamente el sistema de diseño Denali.

Presenta un aspecto elegante, moderno y altamente sin serigrafía que es perfecto para los sitios de negocios.

También tiene una documentación bastante detallada para que pueda empezar.

Nova Skeletons

nova-skeletons es interesante ya que definitivamente nunca debe ser usado para la producción.

Básicamente se utiliza para crear bloques grises para contenido simulado en prototipos, como se puede ver en esta captura de pantalla.

Ahora bien, el contenido ficticio nunca es completamente ideal, pero para los primeros prototipos, esto podría ser mejor que Lorem Ipsum.

vov.css

vov.css es un encantador conjunto de animaciones CSS puras que cubre básicamente todas las animaciones (básicas) que puedas desear.

Sólo agrega una clase y vete.

Una cosa que me gusta es que incluyen un conjunto extra de clases para añadir retraso a la animación.

relaxCSS

relaxCSS es un marco de trabajo completo (pero pequeño) que diseña la mayoría de las cosas que usted puede desear en una página web o aplicación básica, con componentes adicionales para la navegación, etiquetas y cosas por el estilo.

También presenta un tema oscuro.

Lo que más me gusta es que no hay un marco de trabajo de diseño, así que puedes añadir estos estilos a un sitio con un diseño de Grid o Flexbox y seguir adelante con tu día.