Los Frameworks Css son cuerpos grandes (generalmente muchas clases de hoja de estilos) de código preescrito al que agrega su propio código para resolver un problema en un dominio específico para mejorar los tiempos de Desarrollo. Tal vez podría decir que el Frameworks utiliza su código porque generalmente es el marco el que está en control. Puede hacer uso de un marco llamando a sus métodos, herencia y proporcionando "devoluciones de llamada" con el fin de acelerar la vista de estratégico de diseños modulares flexibles.













Un framework de CSS es una biblioteca de estilos genéricos que puede ser usada para implementar diseños responsive. Aportan una serie de utilidades que pueden ser aprovechadas frecuentemente en los distintos diseños de aplicativos.


1 Bootstrap







https://getbootstrap.com/


Con una popularidad sin precedentes en el desarrollo Web. Nació como una simple herramienta interna de Twitter. Mark Otto y Jacob Thornton se encargaron de realizar un conjunto de estilos y patrones para dar homogeneidad a todas las Webs que se estaban creando dentro de empresa. Lo bautizada como Blueprint. En 2011 terminaron el desarrollo y lo hicieron público bajo el nombre de Bootstrap. Su gran uso a ayudado a que tenga una evolución, adaptándose a nuevos estándares, hasta llegar a nuestro días con Flex.


2.Foundation





https://foundation.zurb.com/


El ancestral enemigo de Bootstrap. Se ha visto siempre como la alternativa seria para empresas. Cabe destacar que nación en el 2011 con la intención de mejorar lo que había en el mercado. Y para ello usaron SASS como base, exprimiendo todo su potencial (con mixins) y siendo pioneros en la incorporación. A pesar de estar mantenido por una empresa (Zurb), su código posee licencia Opensource. Por otro lado es un proyecto con 3 ramas. No solo puedes hacer sitios Web, sino también Emails y Apps (con Angular). Siendo en su conjunto una navaja suiza del Diseño Web.


3.Bulma




https://bulma.io/

Un framework CSS (al igual que Bootstrap, Semantic UI y Foundation ) desarrollado por Jeremy Thomas y basado en Flexbox.

Nos encontramos ante un framework elegante, ligero ( comprimido pesa solo 21Kb), sencillo y responsive, de hecho se enfoca principalmente en los móviles. Además, si comparamos Bulma con otros frameworks CSS tenemos que este es altamente personalizable y para nada complejo.

Si bien Bulma es bastante joven eso no le quita que sea completo, y esto se demuestra en sus diversos componentes que bien utilizados te permitirán crear sitios web fantásticos y con dideños increíbles, aunque en realidad lo que puedas no hacer está solo limitado por tu creatividad, porque Bulma te da todo lo que necesitas.

Con Bulma crear grids, barras de navegación, formularios y botines es más sencillo y flexible, bastará con tan solo escribir unas cuantas líneas para que el framework se encargue de dar la apariencia adecuada a nuestra web.


4.UIkit





https://getuikit.com/


Recientemente he estado actualizando los enlaces sociales de CoalaWeb y una de las cosas que me han pedido es un nuevo aspecto de botones sociales con un recuento para reemplazar la falta de coincidencia de botones suministrados por las diferentes redes sociales.





En lugar de introducir más bibliotecas externas, decidí aprovechar el poder de UIkit, que ya estaba integrado en la mayoría de mis extensiones, y así nació CW UIkit Social Buttons .


5.Semantic UI






https://semantic-ui.com/

Una estupenda alternativa nacida en el 2003. Aunque en apariencia parece estar más enfocado a smartphone, con su estilo plano e integración con los grandes Frameworks de Javascript, es perfecto para cualquier sitio. Sea una web pequeña o grande. Al igual que Bootstrap, hace gran uso de JQuery para activar y manipular sus componentes. No obstante, no quiero que ello te asuste, su documentación da ejemplos lo suficientemente buenos para no pelearte.


6.Susy








http://susy.oddbird.net/


Con el advenimiento de flexbox y el módulo CSS Grid , hay cada vez menos razones para usar una biblioteca de grillas como Susy, ¡ y eso es maravilloso ! Las bibliotecas de cuadrícula siempre fueron una solución temporal, esperando que el navegador se hiciera cargo. Aún así, no todos pueden jugar con las últimas especificaciones, y siempre habrá casos extremos que requieren matemática de cuadrícula manual.





Susy3 se reduce a las características más básicas: una biblioteca ligera de funciones que se pueden usar junto con float, flexbox o con cualquier otro CSS , en cualquier lugar, en cualquier momento.





7.Materialize






https://materializecss.com/



Si estás enamorado del diseño Material de Google, Materialise es un marco que disfrutarás. Lo mejor es que solo tiene un puñado de componentes y clases para aprender, y se enfoca en que sea productivo lo más rápido posible. Hay pocas opciones de personalización y Materialise sigue el popular formato de cuadrícula de 12 columnas establecido por Bootstrap.


8.Pure css






https://purecss.io/


No, esta pregunta no es una distracción, pero destaca una observación importante: Yahoo creó el framework Pure y lo lanzó bajo la licencia BSD.


Un vistazo rápido me impresiona, y me pregunto por qué esta oferta no es conocida por más personas. De todos modos, lo que hace puro, bueno, puro, es que es un marco CSS puro .  De hecho, los desarrolladores han hecho un esfuerzo adicional y lo han dividido en diferentes módulos CSS que puede importar según sea necesario. Por lo tanto, si solo necesita el sistema de cuadrícula, no es necesario importar todo el CSS y agregarlo al tiempo de carga del sitio.






9.Skeleton








http://getskeleton.com/


Debería usar Skeleton si se embarca en un proyecto más pequeño o simplemente no siente que necesita toda la utilidad de marcos más grandes. Skeleton solo estiliza un puñado de elementos HTML estándar e incluye una cuadrícula, pero a menudo eso es más que suficiente para comenzar



10.Milligram





https://milligram.io/



Es Milligram , un marco CSS diseñado para la velocidad y la productividad. Los desarrolladores lo han mantenido por debajo de 2 KB de tamaño, lo que para los estándares actuales significa mucho.





Un miligramo es una versión divertida de los marcos CSS con los que apreciarás trabajar. Ampliarlo es fácil, y con unas pocas líneas de CSS personalizado, puede cambiar su aspecto como desee.



11.animate.css




https://daneden.github.io/animate.css/





Animaciones CSS es un módulo propuesto para hojas de estilo en cascada que permite la animación de elementos de documentos HTML utilizando CSS.


12.Clarity Design





https://clarity.design/


Project Clarity es un sistema de diseño de código abierto que reúne pautas UX, un marco HTML / CSS, componentes angulares y componentes web. Este repositorio incluye todo lo que necesita para construir, personalizar, probar e implementar Clarity. Para obtener la documentación completa, visite el sitio web de Clarity .


13.Angular Material






https://material.angular.io/


Es una biblioteca de componentes de interfaz de usuario de alta calidad creados con Angular y TypeScript. Funcionará en la web, dispositivos móviles y computadoras de escritorio. Es rápido y consistente y probado con todos los navegadores modernos. Es versátil, lo que significa que puede usar un tema precompilado o crear los suyos propios para mantener la marca de la aplicación web



14.Flat UI








http://designmodo.github.io/Flat-UI/

Flat UI  contiene muchos componentes básicos y complejos que son excelentes para que los diseñadores tengan a mano: botones, entradas, grupos de botones, selecciones, casillas de verificación y botones de opción, etiquetas, menús, barras de progreso y controles deslizantes, elementos de navegación y más.





15.tailwindcss







https://tailwindcss.com/

Tailwind CSS es un marco CSS de bajo nivel y altamente personalizable que le brinda todos los bloques de construcción que necesita para crear diseños a medida sin ningún estilo de opinión molesto que tenga que luchar para anular.








16.Mini css





https://minicss.org/


¡Entonces mini.css es la herramienta adecuada para ti! Su pequeño tamaño (menos de 10 KB comprimido), junto con su cuadrícula receptiva y componentes modernos aseguran que todos sus usuarios estén satisfechos y puedan acceder a su sitio web en cualquier momento y en cualquier lugar. Al cerrar la brecha entre los frameworks con todas las funciones (por ejemplo, Bootstrap y la interfaz de usuario semántica) y los micro frameworks (por ejemplo, Milligram y Pure.CSS), mini.css incluye muchas características en un paquete pequeño, mientras que se basa únicamente en CSS, lo que significa que usted lo hace No tiene que preocuparse por ningún conflicto con otras bibliotecas de Javascript que pueda estar utilizando.


17.Avalanche









http://colourgarden.github.io/avalanche/


18.Metro UI CSS





https://metroui.org.ua/






Metro 4 es un kit de herramientas de código abierto para desarrollar con HTML, CSS y JS. Realice rápidamente prototipos de sus ideas o cree toda su aplicación con un sistema de cuadrícula sensible, componentes preconstruidos extensos y complementos potentes.








19.Primer CSS 




https://primer.style/css/


Es crear un sistema que nos permita construir experiencias de usuario consistentes con facilidad, pero con suficiente flexibilidad para soportar el amplio espectro de sitios web de GitHub. Este objetivo está incrustado en nuestras decisiones de diseño y código. Nuestro enfoque de CSS está influenciado por los principios de CSS orientado a objetos, CSS funcional y arquitectura BEM.


20 Fictoan








https://sujan-s.github.io/fictoan/


crea y diseña interfaces interactivas y receptivas con poderos  framework simple






21.Cute Grids








https://www.cutegrids.com/


Las cuadrículas lindas se hicieron a partir de la frustración del mundo de hoy, lleno de grandes marcos construidos en exceso que pueden ser excesivos para la mayoría de los proyectos y restringir la creatividad del diseñador con demasiadas características de diseño incorporadas que pueden hacer que incluso la persona más creativa sea perezosa. Con demasiadas funciones infrautilizadas y código sobredimensionado en muchos marcos, la idea de cuadrículas lindas es limpiar todas las cosas sucias y dejarle una base limpia para que pueda seguir diseñando su sitio receptivo de la manera que desee. Pero no cometa el error de pensar que este es un sistema de cuadrícula mínimo. Se ha creado con la mayoría de las funciones que se consideran adecuadas para que su cuadrícula funcione de la manera que lo necesita. Por cierto, esto es simplemente css limpio. No sass, No Less. Pero quién sabe, tal vez se agregue una versión descarada en el futuro. Déjame saber cómo te va o si tienes alguna pregunta.


22.hoisin.scss





http://cyber-duck.github.io/hoisin.scss/



Hoisin es un mini framework front end receptivo muy simple hecho para iniciar su proyecto web, escrito en Sass.Este marco fue creado como una alternativa a los marcos frontales más complejos e hinchados, con un enfoque en la organización, la velocidad y la flexibilidad. También apuntamos a mantener su base de código fresca incluyendo nuevas técnicas, mientras mantenemos un buen soporte para los navegadores más comunes.





Tenga en cuenta que este marco no es un kit de interfaz de usuario y no incluye estilos predefinidos para componentes como formularios, widgets o botones. Nuestro objetivo es crear una base organizada desde la cual pueda crear su propia biblioteca en lugar de una solución única para todos.





Hoisin no tiene ninguna dependencia que no sea Sass 3.3, pero hemos incluido un Gulpfile básico para que pueda comenzar a usarlo. Solo necesitará el compilador Sass instalado para poder compilar sus cambios. Puede encontrar más información sobre la instalación y el uso de Sass en su sitio web .



23.typebase.css





https://devinhunt.github.io/typebase.css/


Typebase.css es una hoja de estilo de tipografía mínima y personalizable. Tiene versiones menos y sass , por lo que puede modificarse fácilmente y fusionarse en proyectos web modernos. Proporciona todos los andamios necesarios para una buena tipografía sin agregar ninguna estética.


24.Spark








https://www.codewithspark.com/



Spark es un marco de diseño web ligero basado en el primer enfoque móvil para un diseño web receptivo. Utilizando consultas de medios que alimentan una cuadrícula receptiva, Spark facilita la creación de páginas de aspecto profesional en minutos.





Está diseñado para ser fácil de usar con nombres de clase intuitivos y fácil de personalizar con un enfoque no intrusivo : con la excepción de algunos estilos básicos y restablecimientos, solo agrega clases de Spark a los elementos que realmente necesita.



25.Bijou








https://andhart.github.io/bijou/


Un ligero   marco de diseño web ligero basado en el primer enfoque web


26.beauter





https://beauter.io/


Aún no he tenido la oportunidad de probar Beauter en un proyecto, pero os digo que no puedo esperar. Este pequeño framework CSS no solo te proporciona las herramientas necesarias para acelerar el desarrollo de un front-end, sino que diseñar webs con este framework será coser y cantar.


27.Picnicss








https://picnicss.com/


Picnic CSS es una framework escrita en Sass, de tal forma que puedes editar fácilmente variables como colores y logitudes. Contiene componente no tan usuales como ventanas modales y sliders de contenido, de manera que puedes usar Picnic CSS para crear páginas ligeramente más interactivas. A pesar de su gran capacidad, pesa sólo 2 KB.


28.Kouto Swiss





http://kouto-swiss.io/


Kouto Swiss es una nueva y fantástica biblioteca mixin para el preprocesador CSS Stylus , creada por los desarrolladores Pierre-Antoine Delnatte y Thierry Lagasse de KRKN . Su objetivo es ser el juego de herramientas estándar al que recurren los desarrolladores de Stylus, y después de echar un buen vistazo a su conjunto de funcionalidades, puedo decir que sin duda sería digno de ese papel.


29.Vital








https://vitalcss.com/

ital es un marco de código completamente abierto con todo el código disponible en GitHub para leer detenidamente.



Todo está construido con Sass para CSS y Slim para HTML . Pero esto es solo para el desarrollo , por lo que si está utilizando Vital para la producción, puede exportar el CSS puro directamente .



Las últimas versiones están disponibles para descargar en la página de lanzamientos y estas incluyen el código CSS junto con las fuentes de íconos personalizados . También encontrará muchas demostraciones de HTML y CSS y documentación básica en la página de GitHub.



Pero lo realmente bueno se puede encontrar en la página de componentes . Esto enumera todo lo que obtienes con Vital , incluyendo cuadrículas, tipografía, botones, cargadores, tablas, pestañas, entradas de formularios y mucho más.


30.MATERIAL DESIGN








https://material.io/

Material design es una normativa de diseño enfocado en la visualización del sistema operativo Android, además en la web y en cualquier plataforma. Fue desarrollado por Google y anunciado en la conferencia Google I/O celebrada el 25 de junio de 2014.