Los 16 mejores marcos/bibliotecas CSS para desarrolladores front-end

Una vez escuché una broma de un desarrollador front-end: "La NASA ha aterrizado robots en Marte, ¡y aquí todavía estamos luchando para alinear al centro nuestros divs!" Y me hace sentir mal que este chiste tenga mucha verdad.

Hacer algo que parezca tan fácil y de sentido común como centrar una box dentro de un box is incredibly difficult to work out in CSS. Unless you’ve encountered it before. And saved the code snippet somewhere. And even if you manage to pull it off, there’s always the lurking fear that it might just break horribly on some stupid browser somewhere!

CSS ties for the first spot of “necessary web evils” along with JavaScript. It’s a standard that evolved haphazardly, was interpreted differently by different browser manufacturers, and is now so full of contradictions that nobody dares call themselves a “CSS expert”.

No es de extrañar, entonces, que los frameworks CSS surgieron con el tiempo y eliminaron la mayor parte del dolor. Hoy en día no podemos imaginar la codificación sin nuestro marco CSS favorito, ya que apuntar a varios tamaños de pantalla se ha convertido en una necesidad.

Pero, ¿cómo sabe que su marco es el mejor para el trabajo en cuestión? Además, si es nuevo en el desarrollo de front-end, ¿qué marco debería ayudarlo a elegir?

Esta publicación ofrece una mirada amplia al panorama de desarrollo de front-end y compara los pioneros entre los frameworks CSS. Entonces, si está cansado de codificar manualmente las reglas CSS, ¡sumérjase para un alivio rápido!

Bootstrap

Una iniciativa de Twitter, Bootstrap se atribuye el mérito de haber introducido el diseño responsivo a gran escala. Fue el primer marco para promover la filosofía de "los dispositivos móviles primero". Diseñar para tamaños de pantalla más pequeños ya no era una tarea separada.ate project in itself; all you needed to do was include the relevant Bootstrap classes, and the design would automatically ajustar para diferentes tamaños de pantalla (bueno, casi).

Diseño receptivo en Bootstrap (4.0 vs 3.0)

Bootstrap logró un diseño responsivo al introducir la idea de una cuadrícula. Una cuadrícula es una partición invisible de la pantalla en columnas (junto con el ancho). Por ejemplo, si tienes tres “boxes” que desea colocar uno al lado del otro en pantallas grandes, pero verticalally en pantallas más pequeñas, esto es lo que harías:

 Una de tres columnas Una de tres columnas Una de tres columnas

La versión popular actual de Bootstrap es 4, que fue una revisión importante de la serie 3.3. La sintaxis anterior es la forma en que codificaría en Bootstrap 4, que debe gran parte de su elegancia a la potencia bruta de Flexbox and other modern layout features supported by browsers directly. In the lower versions of Bootstrap, the grid was defined as a total of 12 columns, which resulted in code such as

para hacer que un div ocupe uno-third del ancho de la pantalla en dispositivos de tamaño grande y la mitad del ancho en dispositivos de tamaño mediano. La sintaxis ahora es mucho más agradable, aunque exige familiaridad con Flex.box.

Pros de Bootstrap

Hay muchas cosas que me gustan de Bootstrap, especialmenteally para desarrolladores full-stack:

• Creación rápida de prototipos: With Bootstrap, there’s almost no need to spend thought on tricky CSS positioning and browser incompatibilities. All you need to do write out the HTML and then apply the appropriate Las clases de CSS hacen que llegue la capacidad de respuesta alive.
• Gran ecosistema: A partir de hoy, Bootstrap tiene el ecosistema más grande entre los marcos de front-end. La cantidad de diseños de sitios web, temas, paneles de administración, componentes de la interfaz de usuario, etc., creados con Bootstrap es alucinante y sigue mejorando. Tanto para los consultores como para las empresas de productos, esto significa que los elementos prediseñados y el apoyo de la comunidad siempre serán suficientes.
• Respaldado por Twitter: Una tendencia emergente en el código abierto es la rise de proyectos patrocinados por una entidad comercial. La mayoría de las veces, estas entidades construyen profitempresas capaces en torno a su oferta. Kotlin (JetBrains), WordPress (Automattic, Inc.), Angular (Google), React (Facebook), etc., son algunos ejemplos. Cuando un proyecto está respaldado por una entidad establecida y no es un espectáculo unipersonal, le da fe a la comunidad (especialmenteally la empresarise clientes) que el proyecto tendrá una hoja de ruta clara y un futuro a largo plazo.
• Una gran colección de componentes: Ofertas Bootstrap, fuera del box, casi todos los componentes de la interfaz de usuario que probablemente necesites. Navegación, formularios, tarjetas, modales, botones, insignias, barras de progreso, alertas. . . Lo que sea, y Bootstrap lo tiene. Para muchas empresas, esta prácticaally reduce la necesidad de tener un dedicated equipo de front-end.
• Soporte LESS y SASS: Among the massively popular CSS frameworks, Bootstrap is the only one that supports both LESS and SASS. Yes, I know, you don’t use LESS (as no self-respecting developer should, right?), but hey, there are massive projects out there that rely on LESS. Of course, you can choose neither and write out your plain CSS files.

Contras de Bootstrap

Nada es sin precio, ¿eh? Bueno, Bootstrap no es una excepción. Con el tiempo, Bootstrap ha sido objeto de fuertes críticas por parte de diseñadores y expertos en UI. Este es el por qué:

• Monotonía de UX: El hecho de que Bootstrap tenga una colección tan grande de resultados integrados en sitios web que parecen demasiado familiares y, sinceramente, aburridos. Solo tienes que dirigirte a la ejemplos oficiales para ver cuán monstruosos son los valores predeterminados. Simplemente busque "todos los sitios web de bootstrap tienen el mismo aspecto" y sabrá a qué me refiero. 🙂
• Problemas de estilo: Bootstrap es lo que podría considerarse una opinión.ated framework. In other words, it has ideas about layouts, and it makes you work extra hard if you want it to look/behave differently. Consider the default CSS breakpoints for screen widths: a medium-sized screen for Bootstrap is one that starts at a device width of 768px. And what if you want to target, say, the limit of 600px? Well, good luck with that! It’s the same with almost every other component in bootstrap: rows and containers have their default padding, buttons have colors and borders that are very tricky to override without a lot of work, and so on.

¿Quieres maestro CSS? Mira esto Curso online de Udemy.

Fundación

Si las tecnologías fueran religiones, los chicos de la Fundación y Bootstrap estarían buscando la sangre del otro. Ninguna discusión sobre los marcos CSS modernos está completa sin mencionar Foundation, así que aquí vamos.

Dirígete a la Fundación página web, y no puede dejar de notar el título: "El marco de front-end receptivo más avanzado del mundo". A primera vista, parece un gran reclamo para ir con una campaña de marketing.

Sin embargo, los partidarios del marco de la Fundación saben que al menos hay algo de verdad en eso. Fundación fue desarrollada para ir naturally con el marco Rails, y varios de los principios rectores “zen” de Rails se pueden ver en funcionamiento.

Por ejemplo, si desea una fila que contenga dos elementos en pantallas pequeñas, tres en pantallas medianas y cuatro en pantallas grandes, el código equivalente en Foundation se verá así:

En comparación con las versiones anteriores de Bootstrap, lo encuentro muy intuitivo y fácil de memorizar. ¡No más cuadrículas de doce columnas y averiguar qué se supone que es 4/12!

Aunque Foundation es mucho menos popular que Bootstrap, es un secreto comercial para muchos desarrolladores de front-end expertos.

Ventajas del Foundation Framework

Foundation tiene algunas características inusuales de todos los frameworks CSS que vamos a considerar en este artículo:

• Herramientas completas: es tecnicoally Es incorrecto decir que Foundation es un marco CSS. Quiero decir, lo es, pero ha sido construido como una colección grande y modular de que tiene como objetivo resolver casi todo tipo de problemas de front-end. hay separadosate ofertas de marco para sitios web y correos electrónicos, altamente optimizadas para sus respectivos dominios. Foundation también viene con una interfaz de línea de comandos (CLI), que sonará como música para los oídos de los desarrolladores acostumbrados a trabajar con Webpack u otros paquetes de módulos.
• Flexibilidad extrema: A diferencia de Bootstrap, Foundation se creó para brindar al desarrollador de front-end un control total sobre sus interfaces de usuario. Como resultado, Foundation se sentirá insípido y enormemente complejo para el recién llegado. Sin embargo, la razón es que Foundation no le impone ningún lenguaje de estilo, sino que pretende ser exactamente lo que es: un excelente marco CSS.
• Más que solo componentes de la interfaz de usuario: Si bien Foundation tiene la colección habitual de elementos de interfaz de usuario, va mucho más allá del llamado del deber. Los desarrolladores han incluido un sistema avanzado de imágenes receptivas, un componente de tabla de precios (sí, el que se usa para mostrar varios planes de precios), validación de formularios, soporte de derecha a izquierda, incrustaciones receptivas y más. Me gustaría enfatizar nuevamente que esto es una exageración para la mayoría de los sitios web simples, pero para los grandes, es una bendición que los desarrolladores experimentados reconocerán.
• Formación y consultoría: Ahora, mientras Bootstrap es createCreado por Twitter, es un proyecto paralelo y una parte muy pequeña del panorama general. La empresa detrás de la Fundación (ZURB), sin embargo, se compromete a utilizarla, desarrollarla y promoverla. Se ofrecen cursos de capacitación y consultoría profesional para grandes clientes, lo cual es excelente para empresas que tienen como objetivo proyectos masivos y están dispuestas a pagar.

Contras del Foundation Framework

Las fortalezas de un marco se convierten en sus debilidades cuando se ve desde el punto de vista opuesto. He aquí por qué la Fundación puede no ser la mejor opción para su proyecto:

• Comunidad pequeña (más): La comunidad de la Fundación es mucho más pequeña que la de Bootstrap, y si está intentando algo exótico y se queda atascado, las posibilidades de encontrar ayuda relevante son menores. Sin embargo, agregaría eso para todos los propósitos prácticos; hay suficiente comunidad ahí fuera. Es solo que es varios órdenes de magnitud más pequeño que el de Bootstrap, por lo que es posible que no encuentre soluciones al instante.
• Complejidad: If you’re used to Bootstrap or something simple, or worse, to vanilla CSS, Foundation will feel like an infinite explosion of complexity. Layers within layers, components with components, endless customization options . . . Pretty soon you’ll begin to question the usefulness of life itself! But then again, Foundation has a very different aim and can’t be blamed for that.
• Demasiadas opciones: A veces solo quieres hacer cosas y preocuparte por la perfección.ater. En esos momentos, es frustrante que se le presenten demasiadas opciones con pequeñas variaciones. Por ejemplo, piense en tener que pedir un sándwich Subway cuando tiene tanta hambre que podría comer barro. naturalezaally, La Fundación no es para tiempos como ese.
• Disponibilidad de talento: Dado que Foundation es (mucho) menos popular que Bootstrap, el talento disponible es mucho menor. Como regla general, es muy probable que cualquier empleado nuevo conozca Bootstrap, pero no tendrá ni idea de Foundation. Aprender lleva tiempo y es un lujo que no todos los equipos pueden tener.

Bulma

Bulma is a relatively new entrant to the battleground of CSS frameworks and has made a name for itself in a short time. Its attractLa versatilidad radica en un enfoque estricto, solo CSS (no hay componentes JavaScript) y valores predeterminados elegantes, que es algo con lo que muchos desarrolladores con buen ojo para el diseño tienen problemas cuando trabajan con Bootstrap.

Gran parte del impulso de Bulma proviene de la alta r.ates de adopción con la comunidad Laravel (un marco web PHP, en caso de que no lo sepas), que estoy seguro es lo que ayudó a Vue.js rise a las alturas de la popularidad entre Marcos de JavaScript.

Por qué elegir Bulma CSS Framework

Hay muchas razones para que te guste Bulma y usarla en tu próximo proyecto:

• Muy popular: De acuerdo, no es más popular que Bootstrap, pero es más popular que Foundation. Al momento de escribir, Bulma tiene más de 30k estrellas en Github, alrededor de 3k + más que Foundations. Por supuesto, varias estrellas de Github no son una métrica de mérito, pero sí dice que la comunidad aprueba a Bulma.
• Clases extremadamente legibles: Bulma, para mí, tiene las clases CSS más legibles de todos los frameworks que he probado. También hay un sistema ridículamente poderoso y simple para crear cuadrículas al estilo Metro, llamadas mosaicos (solo mire el código en la segunda mitad de la captura de pantalla y dígame que no está impresionado).

• Curva de aprendizaje plana: Bulma es altamente modular y fue creada.ated para resolver los problemas prácticos y cotidianos que enfrentan los equipos más pequeños y los desarrolladores individuales. Descubrirás que Bulma es muy fácil de aprender, aunque creo que tener una buena experiencia en CSS siempre es bueno para tener una idea de lo que podría estar pasando bajo el capó. Esto le ayudará cuando desee anular el comportamiento predeterminado.
• Elegante: Bueno, eche un vistazo a la sección Hero predeterminada de Bulma a continuación. ¡Basta de charla!

Bulma tiene una pequeña, pero extremadamente pasión.ate comunidad, por lo que si desea deshacerse de toda la tontería y aun así desea crear interfaces de usuario de apariencia elegante en un tiempo récord, Bulma es el camino a seguir. Para los desarrolladores de Bootstrap, Bulma tiene una opción separada.ate sección para convencerlos y ayudarlos a migrarate encima.

UIkit

Lo que me viene a la mente al pensar en UIkit es el minimalismo. El minimalismo no en las características (de hecho, ofrece quizás la mayoría de las características de todos los marcos), sino en el diseño. Si lo tuyo son los diseños súper limpios, elegantes y sin espacios en blanco, UIkit lo tiene cubierto.

Por ejemplo, eche un vistazo al componente de la barra de progreso:

O el componente de marcador de imagen (un marcador interactivo impulsado por JS para imágenes):

Si esto no grita elegancia a todo pulmón, no sé qué lo hará. Simplemente diríjase al sitio web de UIkit y vea todos los increíbles componentes que ofrece. A menos que su gerente de proyecto o el cliente le impone un lenguaje de estilo particular, creo que Uikit se lleva la corona en diseño de interfaz de usuario y está varios kilómetros por delante del M de Google.ateDiseño industrial.

Pero, ¿hay alguna trampa ?, se pregunta. Sí hay. Al igual que Bootstrap, UIkit funciona con su JavaScript y, si bien puede usar jQuery para la manipulación de DOM, usando un marco de DOM virtual como Reaccionar es imposible.

Also, Uikit is a self-contained system, and you won’t be able to modify or extend it without putting in considerable effort.

IU semántica

Otro contendiente en la carrera es IU semántica, which tries to distinguish itself with a lot of themes and customization. There are more than 3000 theming variables, which results in a massive breadth. Or so the docs say.

Bootstrap 4 cubre todo esto y también es totalmente personalizable, pero una ventaja de Semantic UI es que da como resultado nice-Diseños de aspecto predeterminado. Aún así, no es el más atractivo del box, por eso lo puse lateEstás abajo en mi lista.

También tiene una de las curvas de aprendizaje más empinadas y las convenciones de codificación son mucho más estrictas. Intentalo; Yo diría, y veré si se parece a algo que prefieres.

Susy

Susy Es un marco poco conocido en este momento, pero es una idea fascinante y refrescante. Otro marco de diseño puro, Susy elimina todas las ideas predefinidas de float, rejilla, Flexbox, tablas o cualquier otra cosa, y le permite componer el tipo de diseño que desea. “Redactar” es la palabra clave aquí, ya que Susy está diseñada para crear diseños asombrosos y altamente modulares con necesidades ultracomplejas, inusuales y precisas.

En manos del desarrollador experto, Susy es como un lanzallamas que hace volar todo lo demás. Los mortales menores, por supuesto, lograrán quemarse las manos.

Para tener una idea del poder de Susy, pruebe esta configuración predeterminada (SASS):

 // 4 columnas fluidas y simétricas // los canalones tienen 1/4 del tamaño de una columna // los elementos abarcan 1 canal menos que las columnas // los contenedores también abarcan 1 canal menos $ susy: ('columnas': susy-repeat (4 ), 'canalones': 0.25, 'esparcir': 'estrecho', 'contenedor-esparcir': 'estrecho',);

I think that the code is pretty self-explanatory, though it’s not for those in a hurry. 🙂 Susy makes perfect sense if you’re tired of all the bloat that modern frameworks impose on you, and you have layout needs that you know no ordinary framework can serve.

Materializar

Si estás enamorado de la M de GoogleateDiseño industrial, Materializar es un marco disfrutarás. Lo mejor es que tiene sólo un puñado de componentes y clases para aprender, y está enfocado en hacerte productive tan rápido como sea posible. Hay pocas opciones de personalización y Materialize sigue el popular formato de cuadrícula de 12 columnas establecido por Bootstrap.

Si me preguntas, sin embargo, un Mateverdadero diseño Se está volviendo tan común, y es así. . . Plano por defecto, muy pronto nos quejaremos de ello como lo hacemos del problema de que todos los sitios web tienen el mismo aspecto de Bootstrap. Aún así, es un nice marco para empezar.

Puro

¿Yahoo está muerto?

No, esta pregunta no es una distracción, pero destaca una observación importante: Yahoo creó el Puro framework 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 puro CSS framework. 🙂 In fact, the developers have gone the extra mile and broken it up into different CSS modules that you can import as needed. So, if you need only the grid system, there’s no need to import the entire CSS and add it to the site’s load time.

La cuadrícula Pure viene en varios sabores: 5 puntos, 2 puntos, 24 puntos, etc., por lo que cuando se trata de crear columnas, tiene mucha más flexibilidad. Pure no es el marco CSS más atractivo de forma predeterminada, pero puedo ver cómo agrega valor a aquellos que quieren resolver un pequeño problema de CSS en su interfaz de usuario y se avergüenzan de los valores predeterminados "útiles" con los que vienen otros marcos.

Esqueleto

Como puede ver en la captura de pantalla, Esqueleto is so minimal that it doesn’t even call itself a CSS framework, library, or even module. It’s calderaatey contiene solo 400 líneas de código fuente. ¿Increíble? Creo que sí, pero para poner las cosas en perspectiva, Skeleton fue diseñado para proyectos pequeños o pequeños que necesitan poco más que diseños y posicionamiento.

Digno de una mirada; después de todo, quién sabe, ¡Skeleton podría ser lo que estabas buscando todo el tiempo!

Miligramo

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

Un miligramo es una pequeña y divertida versión de los marcos CSS que apreciarás.ate trabajando con. Ampliarlo es fácil y con unas pocas líneas de CSS personalizado, puedes cambiar su apariencia como quieras.

CSS viento de cola

Tailwind defensorateUn estilo de escritura y uso de CSS que hizo que muchos gritaran de disgusto. Quiero decir, observe el uso de clases CSS en el siguiente código (tomado del sitio web de Tailwind):

<figure class="md:flex bg-gray-100 rounded-xl p-8 md:p-0">
  <img class="w-32 h-32 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto" src="/sarah-dayan.jpg" alt="" width="384" height="512">
  <div class="pt-6 md:p-8 text-center md:text-left space-y-4">
    <blockquote>
      <p class="text-lg font-semibold">
        “Tailwind CSS is the only framework that I've seen scale
        on large teams. It’s easy to customize, adapts to any design,
        and the build size is tiny.”
      </p>
    </blockquote>
    <figcaption class="font-medium">
      <div class="text-cyan-600">
        Sarah Dayan
      </div>
      <div class="text-gray-500">
        Staff Engineer, Algolia
      </div>
    </figcaption>
  </div>
</figure>

Ahora, si ha sido desarrollador durante más de un par de años, es probable que sienta náuseas. Entonces . . . muchos . . clases. . . ! Y aunque aquí no hay CSS en línea, se siente así dado lo explícitos (¿y feos?) Que son los nombres de las clases.

Entonces, durante bastante tiempo, Adán Wathan (el creador de Tailwind) corría de pilar en publicación (es decir, en podcasts, conferencias, publicaciones de blog, tweets) sobre por qué pensaba que el CSS basado en utilidades era superior al CSS semántico.

Hoy en día, el CSS basado en utilidades ha hecho una mella considerable. Mire este código Bootstrap 5 y vea cómo prevLas clases de utilidad de Alent se han convertido en:

<div class="d-grid gap-3">
  <div class="p-2 bg-light border">Grid item 1</div>
  <div class="p-2 bg-light border">Grid item 2</div>
  <div class="p-2 bg-light border">Grid item 3</div>
</div>

Habiendo hablado sobre el “panorama general” de Tailwind, veamos los beneficios concretos que ofrece:

• Más productividad: Ahora bien, la productividad es algo sobre lo que podemos discutir todo el día y nunca llegar a ninguna parte; Dicho esto, los desarrolladores que han adoptado Tailwind exclusivamente (especialmenteally para proyectos grandes) dicen que son mucho más productive. Pero necesitarás invertir de manera sostenida effort por adelantado porque Tailwind funcionará para usted sólo cuando haya desaprendido las “mejores prácticas” del pasado.
• Tamaño de paquete más pequeño: Tailwind es más o menos JS manipulando CSS, por lo que algunas cosas elegantes son posibles. Por ejemplo, cuando construye el proyecto, el compilador puede eliminar todo el CSS innecesario. Esto contrasta bastante con un proyecto web típico que utiliza el módulo CSS Bootstrap; en este caso, todo el CSS de Bootstrap se empaqueta en el último elemento.
• Configurable y personalizable: Tailwind no solo es extremadamente modular, sino que está construido para resaltar su facilidad de configuración y personalización. No hay nada como “empezar con Tailwind en 2 minutos” porque necesita aprender el qué, el dónde, el por qué y algo más; otro ejemplo: si no tiene listo su sistema de diseño y no le gustan los valores predeterminados, experimentará frustración. usted tienen para pasar por la curva inicial de aprendizaje / ajuste antes de poder decir "¡guau!".
• Sin nombres ni cambios de contexto: Una de las tareas más importantes que tienen los desarrolladores es nombrar cosas. ¿Debería llamarse el resultado final? totalAmountForUnits or expensesAcrossUnits, Por ejemplo. El problema es aún más serio en CSS ya que puede haber cientos (o incluso miles) de clases en un proyecto. Otro problema es el cambio de contexto: saltar constantemente entre HTML y CSS para ver cómo cambia el CSS. Con Tailwind, las decisiones de nombres ya las tomas por ti, y dado que siempre estás agregando o eliminando clases de HTML, hay zero cambio de contexto.
• Reutilización de código: Si encuentras tuself “reusing” some useful classes by copy-pasting them across projects, Tailwind has a feature called Components to solve this problem elegantly. Read more about this feature aquí.

Para muchos, Tailwind ha sido un soplo de aire fresco queesperatemuy necesario. Si estás cansado de tu biblioteca CSS actual y quieres probar algo nuevo y radical, ¡Tailwind es lo que estás buscando!

Tácito

Tácito es el proyecto paralelo de alguien con el que me encontré mientras buscaba cosas interesantes para este artículo. Sí, simplemente un proyecto paralelo; nada más que el trabajo de una persona según su gusto.

¿Por qué lo enfatizo tanto?

porque este generoally significa que el riesgo de ser abandonado es muy alto. Pero también puedo pensar en un par de aspectos positivos: 1) El proyecto está en GitHub, por lo que, si eres desarrollador y quieres respaldar/expandir Tacit, sabes qué hacer. 😉 2) CSS no es como JavaScript en términos de cambio o evolución; ¿Qué?atever styling you’re using today will be supported by browsers for a very long time.

Entonces, ¿qué es exactamente esta cosa tácita?

Como dice la captura de pantalla, Tácito es para aquellos que no conocen CSS o tienen mal gusto en diseño. La idea es novedosa: agregue el enlace CSS a su proyecto, ¡y tendrá un sitio web atractivo al instante! Pero asegúrese de cumplir su promesa: nunca agregue otro CSS o mezcle cosas de otros marcos, ya que esto romperá las cosas.

¿Y un sitio web Tácito se ve bien?

Si quieres confiar en mi palabra, diría que el estilo de diseño elegido es “muy bueno”. Actúally, I find it even more pleasant than Semantic UI, one of the most popular CSS frameworks/libraries out there! Without getting into a flame war and making side-by-side screenshot comparisons, I’ll drop the subject by saying that design is subjective. But you can compare and decide for yourself. 🤪

En cualquier caso, permítanme agregar un par de capturas de pantalla de la apariencia de Tacit.

Primero, así es como se ven los elementos de formulario:

Y así es como se ven las tablas en su forma más básica:

Terminaré repitiendo lo obvio: si crees que este tipo de colores, fuentes, estilos, etc., son excelentes por defecto, Tácito demostrará ser un alivio bienvenido.

Espectro

Moderno, flexible, liviano: si está buscando algo con estos atributos, vale la pena echarle un vistazo a Spectre.

Déjame explicarte mi elección de adjetivos para Espectro:

• Moderno: El sistema de diseño de Spectre se basa en Flex.box, que se encuentra entre las mejores cosas que nos ha brindado el CSS moderno. Al mismo tiempo, muchas funciones y herramientas que se encuentran en el CSS moderno workflows u otros marcos también están incluidos.
• Flexible: Puede escribir el marco CSS más modular y avanzado, pero es de poca utilidad si no pasan fácilmente personalizable. Me gusta cómo se menciona la personalización en la parte superior de sus documentos; sigue al rabbit agujero, y encontrarás una extensa explicaciones.
• Ligero: Estamos en una era en la que las preocupaciones sobre el rendimiento web están en alza; cada kilobyte que se transfiere es analizado y criticado. Como tal, Spectre envuelve todo en un dulce paquete de 10 KB, que no debería ser "demasiado" para todos nosotros. 😝

Ser liviano no significa que Spectre sacrifique la funcionalidad; hay todo a lo que estás acostumbrado como fan de Bootstrap: componentes (acordeones, migas de pan, tarjetas y más), elementos (formularios, tablas, botones, etc.), diseño (cuadrículas, sección de héroe, barra de navegación, etc.), utilidades (cargadores, hilanderos, etc.) y más.

¿Qué pienso de Spectre? Estoy más o menos vendido, pero hay un par de cosas que quiero mencionar. Primero, no me gusta mucho el color azul primario predeterminado, por lo que cambiarlo es lo primero que haría en mis proyectos. 😬 En segundo lugar, en 2020, creo que CSS Grid es la mejor herramienta para diseños; encuentro flexbox a bit Es extraño hacer todas las cosas de diseño, así que desearía que Spectre hubiera usado Grid en lugar de Flexbox.

Pero esto no es un factor decisivo si puedo desarrollarme rápido y obtener buenos resultados. ¡Entonces, diré que siga adelante y pruebe Spectre sin miedo!

Primero

Primer es no un marco o biblioteca CSS. Ni siquiera es una colección de clases CSS o algún otro giro extraño en la terminología.

Entonces, ¿por qué está en esta lista? Dos razones:

• It tiene un marco CSS.
• Es una de las cosas más completas y alucinantes que jamás hayas visto.

Sí, como dice la captura de pantalla, Primer es un sistema de diseño desarrollado por GitHub para uso propio. Eventoally, se dieron cuenta de que esto era poderoso y extremadamente útil para el trabajo visual y de interfaz; entonces lo hicieron de código abierto.

He estado luchando por encontrar las palabras adecuadas para describir Primer. Su propio equipo de sistema de diseño lo llama. . . bueno, sí, un sistema de diseño, pero creo que el alcance es mucho más amplio de lo que queremos decir cuando decimos “sistema de diseño”.

Primero Incluye muchas cosas, cuya importancia puede no ser inmediata.ateMuy obvio. Al menos para desarrolladores backend/full-stack. Entonces, veamos cuáles son estas cosas especiales y por qué son especiales:

• Directrices de interfaz: En un equipo unipersonal, diseñar y mantener las UI es trivial. Pero agregue tres personas más al equipo, y personas capacitadas y exitosas, y verá cómo todo comienza a degradarse. La razón es la falta de directrices claramente definidas y estrictamente aplicadas, de modo que todos sepan qué hacer en cada tipo de situación. La imprimación viene con un nice un conjunto de orientaciones que puedes levantar o adaptar a tus necesidades.
• Figma componentes: Aunque soy desarrollador, sé lo suficiente sobre diseño como para comprender que no tener una referencia / uso de componentes claros puede salirse de control a medida que avanza el proyecto. ¿Cómo debería verse el botón cuando se presiona en modo oscuro, por ejemplo? Si nadie tiene esto documentado y hay presión para cumplir, tendrá varias variaciones. Por eso, la gente de Primer ha proporcionado sus propios Figma componentes para que podamos aprender y hacerlo mejor.
• Marco CSS: finalally, la cosa que ganó Primero ¡Un lugar en esta lista! 😄 Primer tiene un marco CSS modular de estilo BEM que proporciona separaciónate estilos para las páginas de productos y marketing. Esto es algo que GitHub hizo para su conveniencia, y usted es libre de no tocarlo ni de aceptar la filosofía general tal como está. Incluso si solo te interesa el CSS, te recomiendo que le eches un vistazo. aquí.
• Iconos (Octicons): Cada sistema de diseño coherente tiene su propia versión de los iconos. por Primero, la respuesta es octicones. Al parecer, no hay demasiados íconos. Aún así, estoy colocando esto más arriba en la lista porque los íconos son parte de los fundamentos absolutos: si todo coincide, pero algunos íconos no, el resultado es una interfaz de usuario que te da conjuntivitis. 😝
• Reaccionar componentes: Y, por supuesto, dado que React es la biblioteca frontend más popular, la gente de GitHub codificó los elementos CSS como React componentes, que ahora están disponibles para todos nosotros!
• Presentaciones: Esta parte del Primero is all about what design language to use when presenting to audiences (as used by folks at GitHub internally). Fonts, colors, borders, contrasts — all the decisions have been taken already. You’re free to study their orientaciones y desarrolla el tuyo.

El mayor beneficio de Primer proviene de adoptarlo como un todo. Es posible que esto no sea posible para todos, y algunos incluso pueden descubrir que su lenguaje de diseño entra en conflicto con el de GitHub. Y luego, algunas personas encuentran útil una parte en particular (¡o incluso una parte de la parte!) de Primer y la ejecutan.

No matter where you stand on this spectrum, Primer has something to offer you: either reusable, high-quality design system components or food-for-thought for your own processes y pautas!

fictoano

fictoano es un marco intuitivo para diseñadores web que desean crear interfaces de usuario. El marco fue created para difuminar las líneas entre los desarrolladores y los diseñadores. 

Los creadores creen que los diseñadores deben controlar por completo la experiencia del usuario y la interfaz de usuario. Por otro lado, los desarrolladores deben centrarse en el rendimiento y cosas como la implementación. 

¿Por qué usar Fictoan?

• Una variedad de componentes: Fictoan tiene cientos de componentes que se clasifican en diferentes categories. Por ejemplo, si buscas un formulario, hay más de diez diseños. 
• Fuente abierta: Fictoan es de uso gratuito y puede encontrar el código en GitHub. 
• Accesible: La plataforma está diseñada con un fuerte enfoque en la accesibilidad. Los diseñadores también pueden personalizar el código disponible para mejorar la accesibilidad. 
• Fácil de comenzar: Fictoan era created para proyectos React.

puedes crearate una aplicación React simple para demostrarate cómo funciona. Utilice este comando;

npx create-react-app fictoan-app

cd fictoan-app

Ahora puede agregar fictoan a su aplicación React de la siguiente manera;

npm install fictoan-react

Podemos abrir el proyecto en un editor de código y crearate un simple botón. 

<Button kind="primary">

  Button

</Button>

• Fácil personalización: Puede personalizar el código anterior para satisfacer sus necesidades. 

Inconvenientes de Fictoan

• Todavía nuevo: El 21 de junio de 2020, la primera versión se envió a GitHub. La plataforma tiene menos de 10 bifurcaciones y todavía le queda un largo camino por recorrer attract las masas.  
• Funciones limitadas: Aunque Fictoan tiene algunos diseños modernos sorprendentes, todavía tiene un largo camino por recorrer para competir con otros, como Bootstrap, en términos de características. 
• Se basa en dependencias: Fictoan depende de algunas bibliotecas, como styled-components funcionar. Tener tantas dependencias puede conducir a un tamaño de aplicación grande. 

Vainilla 

Vainilla es un marco CSS simple y extensible escrito en Syntactically Awesome Style Sheets (Sass), un superíndice de CSS. La vainilla se utiliza en la mayoría Canónico productos, como Ubuntu y JAAS. 

Para empezar a usar Vainilla, create un archivo de proyecto y navegaciónate en ello. Luego puedes instalar Vanilla usando yarn or npm.

yarn add vanilla-framework

Or

npm install vanilla-framework

Alternativamente, puede agregar un enlace CDN en el <head> sección de su archivo html para comenzar a usar Vanilla Framework. 

<link rel="stylesheet" href="https://assets.ubuntu.com/v1/vanilla-framework-version-3.13.0.min.css" />

¿Por qué usar Vainilla?

• es responsivo: Las aplicaciones diseñadas con Vanilla Framework responden a diferentes tamaños de pantalla, como teléfonos inteligentes y computadoras personales. 
• Escrito en Sass: Sass hace la definición variables y mixins en tu CSS código fácil. 
• Múltiple browsers support: You can use Vanilla apps on different browsers such as Firefox, Chrome, and Safari. 
• Composable: Puede incluir el código específico que necesita o instalar todo el marco para su proyecto. 
• Fuente abierta: El código fuente es de código abierto, createDiseñado y mantenido por el equipo web de Canonical. 

Desventajas de usar vainilla

• Niveles limitados de personalización: Es posible que Vanilla no ofrezca los niveles de personalización que algunos desarrolladores desean.
• Documentación limitada: En comparación con otros marcos CSS, como Foundation y Bootstrap, la documentación de Vanilla no es tan completa. 
• Falta de una comunidad vibrante: Vanilla no tiene una gran comunidad en comparación con otros marcos. 

Entonces, ¿qué marco CSS es el mejor?

Admítelo, ha hecho preguntas similares antes y recibió la siguiente respuesta decepcionante: ninguna. 😀 Selección de un marco (o un del IRS, o incluso una persona en tu vida, para el caso) depende de muchos factores.

Si quieres mi consejo, aquí está: Elimina el ruido. El hecho de que la gente se vuelva loca por algo nuevo y brillante no significa que tengas que aprenderlo o te quedarás atrás. Probar cosas nuevas es genial, pero correr en círculos en busca de la herramienta perfecta es, bueno, un desperdicio.