Geekflare cuenta con el apoyo de nuestra audiencia. Podemos ganar comisiones de afiliados comprando enlaces en este sitio.
Comparte en:

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

Best-CSS-FrameworksLibraries-for-Front-End-Developers
Escáner de seguridad de aplicaciones web Invicti – la única solución que ofrece verificación automática de vulnerabilidades con Proof-Based Scanning™.

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 suena tan fácil y basado en el sentido común como centrar un cuadro dentro de otro cuadro es increíblemente difícil de resolver en CSS. A menos que lo hayas encontrado antes. Y guardó el fragmento de código en alguna parte. ¡E incluso si logras llevarlo a cabo, siempre existe el temor acechante de que podría romperse horriblemente en algún estúpido navegador en algún lugar!

Lazos CSS para el primer lugar de "males web necesarios" junto con JavaScript. Es un estándar que evolucionó al azar, fue interpretado de manera diferente por diferentes fabricantes de navegadores y ahora está tan lleno de contradicciones que nadie se atreve a llamarse "experto en CSS".

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 introducir el diseño receptivo a gran escala. Fue el primer marco en promover la filosofía de "dispositivos móviles primero". El diseño para pantallas más pequeñas ya no era un proyecto separado en sí mismo; todo lo que tenía que hacer era incluir las clases de Bootstrap relevantes, y el diseño se ajustaría automáticamente para diferentes tamaños de pantalla (bueno, casi).

arranque-1

Diseño receptivo en Bootstrap (4.0 vs 3.0)

Bootstrap logró un diseño receptivo 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 tiene tres "cuadros" que desea colocar uno al lado del otro en pantallas grandes, pero verticalmente en pantallas más pequeñas, esto es lo que haría:

 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 y otras características de diseño modernas compatibles directamente con los navegadores. En las versiones inferiores de Bootstrap, la cuadrícula se definió como un total de 12 columnas, lo que resultó en un código como


para hacer que un div ocupe un tercio del ancho de la pantalla en dispositivos de gran tamaño y la mitad del ancho en dispositivos de tamaño mediano. La sintaxis ahora es mucho más agradable, aunque exige familiaridad con Flexbox.

Pros de Bootstrap

Bootstrap tiene mucho que gustar, especialmente para desarrolladores full-stack:

  • Creación rápida de prototipos: Con Bootstrap, casi no hay necesidad de pensar en el complicado posicionamiento de CSS y las incompatibilidades del navegador. Todo lo que necesita hacer es escribir el HTML y luego aplicar las clases CSS apropiadas para que la capacidad de respuesta cobre vida.
  • 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 el aumento de proyectos patrocinados por una entidad comercial. La mayoría de las veces, estas entidades crean negocios rentables 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 programa de una sola persona, le da fe a la comunidad (especialmente a los clientes empresariales) de que el proyecto tendrá una hoja de ruta clara y un futuro a largo plazo.
  • Una gran colección de componentes: Bootstrap ofrece, listos para usar, casi todos los componentes de la interfaz de usuario que probablemente necesite. Navegación, formularios, tarjetas, modales, botones, insignias, barras de progreso, alertas. . . Lo que sea, y Bootstrap lo tiene. Para muchas empresas, esto prácticamente reduce la necesidad de tener un equipo de front-end dedicado.
  • Soporte LESS y SASS: Entre los frameworks CSS masivamente populares, Bootstrap es el único que admite tanto LESS como SASS. Sí, lo sé, no usas LESS (como ningún desarrollador que se precie debería hacerlo, ¿verdad?), Pero bueno, hay proyectos masivos que dependen de LESS. Por supuesto, no puede elegir ninguno y escribir sus archivos CSS simples.

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 un marco de opinión. En otras palabras, tiene ideas sobre diseños y te hace trabajar más duro si quieres que se vea / se comporte de manera diferente. Considere los puntos de interrupción de CSS predeterminados para los anchos de pantalla: una pantalla de tamaño mediano para Bootstrap es aquella que comienza en un ancho de dispositivo de 768px. ¿Y si quiere apuntar, digamos, al límite de 600 px? ¡Bueno, buena suerte con eso! Es lo mismo con casi todos los demás componentes de bootstrap: las filas y los contenedores tienen su relleno predeterminado, los botones tienen colores y bordes que son muy difíciles de anular sin mucho trabajo, y así sucesivamente.

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

Foundation

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.

fundación

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 hay al menos algo de verdad en eso. Foundation se desarrolló para ir de forma natural con el marco de Rails, y varios de los principios rectores "tipo 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 técnicamente 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 ofertas de marcos independientes para sitios web y correos electrónicos, muy 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, aunque Twitter crea Bootstrap, es un proyecto paralelo y una parte muy pequeña del panorama general. La empresa detrás de Foundation (ZURB), sin embargo, está comprometida con su uso, desarrollo y promoción. 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: Si está acostumbrado a Bootstrap o algo simple, o peor aún, a CSS vanilla, Foundation se sentirá como una explosión infinita de complejidad. Capas dentro de capas, componentes con componentes, infinitas opciones de personalización. . . ¡Muy pronto comenzarás a cuestionar la utilidad de la vida misma! Pero, de nuevo, la Fundación tiene un objetivo muy diferente y no se le puede culpar por eso.
  • Demasiadas opciones: A veces solo quieres hacer las cosas y preocuparte por la perfección más adelante. Durante esos momentos, es frustrante que se le presenten demasiadas opciones con variaciones menores. Por ejemplo, piense en tener que pedir un sándwich Subway cuando tenga tanta hambre que podría comer barro. Naturalmente, Foundation no es para tiempos como esos.
  • 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 es un participante relativamente nuevo en el campo de batalla de los marcos CSS y se ha hecho un nombre en poco tiempo. Está entractiveness radica en un enfoque estricto, solo de CSS (no hay componentes de 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.

Bulma

Gran parte del impulso de Bulma proviene de las altas tasas de adopción con la comunidad Laravel (un marco web PHP, en caso de que no lo supieras), que estoy seguro es lo que ayudó a Vue.js a alcanzar 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 para resolver los problemas prácticos y cotidianos con los que se encuentran los equipos más pequeños y los desarrolladores individuales. Descubrirás que Bulma es muy fácil de aprender, aunque creo que una experiencia decente 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 comunidad pequeña pero extremadamente apasionada, por lo que si desea deshacerse de toda la pelusa y, sin embargo, desea crear interfaces de usuario de aspecto elegante en un tiempo récord, Bulma es el camino a seguir. Para los desarrolladores de Bootstrap, Bulma tiene una sección separada para convencerlos y ayudarlos a migrar.

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.

uikit

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

uikit-progreso

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

uikit-marcador

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 de Material Design de Google.

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.

Además, Uikit es un sistema autónomo y no podrá modificarlo ni ampliarlo sin hacer un esfuerzo considerable.

Semantic UI

Otro contendiente en la carrera es IU semántica, que intenta distinguirse con una gran cantidad de temas y personalización. Hay más de 3000 variables temáticas, lo que da como resultado una amplitud enorme. O eso dicen los doctores.

interfaz de usuario semántica-1

Bootstrap 4 cubre todo esto y también es totalmente personalizable, pero una ventaja con la interfaz de usuario semántica es que da como resultado diseños atractivos por defecto. Aún así, no es el más atractivo listo para usar, por lo que lo puse más adelante 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 flotante, cuadrícula, 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.

susy-e1538810471595

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',);

Creo que el código se explica por sí mismo, aunque no es para aquellos que tienen prisa. 🙂 Susy tiene mucho sentido si estás cansado de toda la hinchazón que los marcos modernos te imponen y tienes necesidades de diseño que sabes que ningún marco ordinario puede satisfacer.

Materialize

Si está enamorado del Material Design de Google, Materialise es un marco disfrutarás. Lo mejor es que solo tiene un puñado de componentes y clases para aprender, y está enfocado en lograr que usted 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.

materializar-e1538810500518

Si me preguntas, sin embargo, un el diseño de materiales se está volviendo tan común, y lo es. . . Flat por defecto, que muy pronto nos vamos a quejar al igual que lo hacemos con el problema de todos los sitios web de Bootstrap. Aún así, es un buen marco para empezar.

Pure

¿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 Marco CSS. 🙂 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.

pure-css-e1538810526124

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.

Skeleton

Como puede ver en la captura de pantalla, Esqueleto es tan mínimo que ni siquiera se llama a sí mismo un marco, biblioteca o incluso módulo CSS. Sus repetitivoy 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.

esqueleto-e1538809129706

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

Milligram

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 frameworks CSS con la que apreciará trabajar. Ampliarlo es fácil y, con unas pocas líneas de CSS personalizado, puede cambiar su aspecto de la forma que desee.

Tailwind CSS

Tailwind Abogaba por un estilo de escritura y uso de CSS que enviaba a muchos a gritar de disgusto. Quiero decir, mire el uso de clases CSS en el siguiente código (tomado del sitio web 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 tenido un impacto considerable. Mire este código de Bootstrap 5 y vea cómo se han vuelto las clases de utilidad predominantes:

<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, 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 (especialmente para proyectos grandes) dicen que son mucho más productivos. Pero deberá invertir un esfuerzo sostenido por adelantado porque Tailwind funcionará para usted solo 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 entre HTML y CSS constantemente para ver el cambio de CSS. Con Tailwind, las decisiones de nomenclatura ya están tomadas por usted, y dado que siempre está agregando / eliminando clases de HTML, no hay cambio de contexto.
  • Reutilización de código: Si se encuentra “reutilizando” algunas clases útiles al copiarlas y pegarlas en proyectos, Tailwind tiene una función llamada Componentes para resolver este problema con elegancia. Leer más sobre esta función aquí.

Para muchos, Tailwind ha sido un soplo de aire fresco que necesitaban desesperadamente. Si está cansado de su biblioteca CSS actual y quiere probar algo radical y nuevo, Tailwind es lo que está buscando.

Tacit

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 esto generalmente significa que el riesgo de ser abandonado es muy alto. Pero luego, también puedo pensar en un par de aspectos positivos: 1) El proyecto está en GitHub, por lo que, si eres un desarrollador y quieres apoyar / expandir Tacit, sabes qué hacer. 😉 2) CSS no es como JavaScript en términos de cambio o evolución; cualquier estilo que esté usando hoy será compatible con los navegadores durante mucho tiempo.

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

tácito-css-framework-e1608729803870

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 quiere confiar en mi palabra, diría que el estilo de diseño elegido es "muy bueno". En realidad, lo encuentro incluso más agradable que Semantic UI, ¡uno de los frameworks / bibliotecas CSS más populares que existen! Sin entrar en una guerra de llamas y hacer comparaciones de capturas de pantalla una al lado de la otra, dejaré de lado el tema diciendo que el diseño es subjetivo. Pero puedes comparar y decidir por ti mismo. 🤪

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:

tácito-css-frameworks-formas

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

tácito-css-frameworks-tablas

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.

Spectre

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

descripción general de spectre-css

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

  • Moderno: El sistema de diseño de Spectre se basa en Flexbox, que se encuentra entre las mejores cosas que nos ha dado el CSS moderno. Al mismo tiempo, se encuentran muchas instalaciones y herramientas en 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 la madriguera del conejo y encontrarás 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 tanto 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; Me parece un poco extraño que Flexbox haga 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!

Primer

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.
primer-diseño-sistema-css

Sí, como dice la captura de pantalla, Primer es un sistema de diseño desarrollado por GitHub para su propio uso. Finalmente, se dieron cuenta de que esto era poderoso y extremadamente útil para el trabajo visual y de interfaz; así que 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 inmediatamente obvia. Al menos para desarrolladores backend / full-stack. Así que veamos cuáles son estas cosas especiales por qué son especiales:

  • Directrices de interfaz: En un equipo de una sola persona, diseñar y mantener interfaces de usuario es trivial. Pero agregue tres personas más al equipo, y personas capacitadas y exitosas en eso, y verá cómo todo comienza a degradarse. La razón es la falta de pautas que estén claramente definidas y se apliquen estrictamente, de modo que todos sepan qué hacer en cada tipo de situación. Primer viene con un buen juego de orientaciones que puedes levantar o adaptar a tus necesidades.
  • Componentes de Figma: 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: Finalmente, lo que ganó Primero un lugar en esta lista! 😄 Primer tiene un marco CSS modular de estilo BEM que proporciona estilos separados para las páginas de producto y marketing. Esto es algo que GitHub hizo para su conveniencia, y eres libre de no tocarlo o aceptar la filosofía general tal como es. Incluso si solo te interesa el CSS, te recomiendo que 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 se trata de qué lenguaje de diseño usar cuando se presenta a la audiencia (como lo usa la gente de GitHub internamente). Fuentes, colores, bordes, contrastes: ya se han tomado todas las decisiones. Eres libre de estudiar su 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 importa dónde se encuentre en este espectro, Primer tiene algo que ofrecerle: ¡componentes de sistema de diseño reutilizables y de alta calidad o elementos de reflexión para sus propios procesos y directrices!

Fictoan

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

Fictoan

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 categorías. Por ejemplo, si está buscando 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 fue creado para proyectos React.

Puede crear una aplicación React simple para demostrar 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 crear un botón simple. 

<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, el primer lanzamiento se envió a GitHub. La plataforma tiene menos de 10 bifurcaciones y todavía tiene un largo camino por recorrer para atraer a 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. 

Vanilla 

Vainilla es un marco CSS simple y extensible escrito en hojas de estilo sintácticamente impresionantes (Sass), un superíndice de CSS. La vainilla se usa en la mayoría Canónico productos, como Ubuntu y JAAS. 

imagen-156

Para comenzar a usar Vanilla, cree un archivo de proyecto y navegue hasta él. Luego puede 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. 
  • Compatibilidad con varios navegadores: Puede usar aplicaciones Vanilla en diferentes navegadores, como Firefox, Chrome y Safari. 
  • Componible: 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, creado y mantenido por Canonical Web Team. 

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.

Gracias a nuestros patrocinadores
Más lecturas interesantes sobre el desarrollo
Impulse su negocio
Algunas de las herramientas y servicios para ayudar a que su negocio crezca.
  • Invicti utiliza Proof-Based Scanning™ para verificar automáticamente las vulnerabilidades identificadas y generar resultados procesables en cuestión de horas.
    Prueba Invicti
  • Web scraping, proxy residencial, administrador de proxy, desbloqueador web, rastreador de motores de búsqueda y todo lo que necesita para recopilar datos web.
    Prueba Brightdata
  • Semrush es una solución de marketing digital todo en uno con más de 50 herramientas en SEO, redes sociales y marketing de contenido.
    Prueba Semrush
  • Intruder es un escáner de vulnerabilidades en línea que encuentra debilidades de ciberseguridad en su infraestructura, para evitar costosas filtraciones de datos.
    Intente Intruder