10 mejores marcos CSS para desarrolladores front-end

Una vez escuché una broma de desarrollador front-end, “¡La NASA ha aterrizado robots en Marte, y aquí todavía estamos luchando por alinear nuestros divs en el centro!” 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 un cuadro es increíblemente difícil de resolver en CSS. A menos que lo haya encontrado antes. Y guardé el fragmento de código en alguna parte. E incluso si logras llevarlo a cabo, ¡siempre existe el temor al acecho de que pueda romperse horriblemente en algún estúpido navegador en alguna parte! CSS enlaza con el primer punto 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 a sí mismo un “experto en CSS”.


No es de extrañar, entonces, que los marcos CSS surgieron con el tiempo y eliminaron la mayor parte del dolor. Hoy no podemos imaginar la codificación sin nuestro marco CSS favorito, ya que la orientación a múltiples 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 eres nuevo en el desarrollo front-end, qué marco debería ayudarte a elegir?

Esta publicación arroja una mirada amplia al panorama de desarrollo front-end y compara a los líderes entre los frameworks CSS. Entonces, si estás cansado de codificar manualmente las reglas CSS, sumérgete para obtener un alivio rápido!

Oreja

Una iniciativa de Twitter, Oreja se atribuye el mérito de introducir un diseño receptivo a gran escala Fue el primer marco para promover la filosofía de “móvil primero”. Ya no se estaba diseñando para pantallas más pequeñas 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).

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 las tres columnas

Una de las tres columnas

Una de las tres columnas

La versión popular actual de Bootstrap es 4, que fue una revisión importante en la serie 3.3. La sintaxis anterior es cómo 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 con los navegadores directamente. 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.

Bootstrap Pros

Hay mucho que gustar de Bootstrap, especialmente para los desarrolladores de stack completo:

  • Creación rápida de prototipos: Con Bootstrap, casi no hay necesidad de pensar en el complicado posicionamiento CSS y las incompatibilidades del navegador. Todo lo que necesita hacer es escribir el HTML, y luego aplicar las clases CSS adecuadas hace que la capacidad de respuesta cobre vida.
  • Gran ecosistema: A partir de hoy, Bootstrap tiene el ecosistema más grande entre los marcos 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. Para consultores y compañías de productos por igual, esto significa que los artículos preconstruidos y el apoyo de la comunidad siempre serán suficientes..
  • Respaldado por Twitter: Una tendencia emergente en 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 espectáculo 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.
  • Gran colección de componentes: Bootstrap ofrece, desde el primer momento, casi todos los componentes de la interfaz de usuario que pueda necesitar. 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 front-end dedicado.
  • Soporte LESS y SASS: Entre los frameworks CSS masivamente populares, Bootstrap es el único que admite LESS y SASS. Sí, lo sé, no usas LESS (como no debería hacerlo un desarrollador que se precie), pero bueno, hay proyectos masivos que dependen de LESS. Por supuesto, no puede elegir ninguno y escribir sus archivos CSS simples.

Bootstrap Contras

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 UX: El hecho mismo de que Bootstrap tenga una colección tan grande de resultados integrados en sitios web que parecen demasiado familiares y, sinceramente, aburridos. Solo necesitas dirigirte a la ejemplos oficiales para ver qué tan molestos son los valores predeterminados. Simplemente busque “todos los sitios web de arranque tienen el mismo aspecto” y sabrá a qué me refiero. ��
  • Problemas de estilo: Bootstrap es lo que podría considerarse un marco obstinado. En otras palabras, tiene ideas sobre diseños, y te hace trabajar muy duro si quieres que se vea / se comporte de manera diferente. Considere los puntos de interrupción 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 qué pasa si quieres apuntar, digamos, el límite de 600 px? ¡Bueno, buena suerte con eso! Es lo mismo con casi cualquier otro componente en 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, etc..

Querer dominar el Bootstrap? Mira esto curso en línea por Brad Traversy.

Fundación

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

Pásate por la Fundación sitio web, y no puede evitar notar la frase: “El marco front-end receptivo más avanzado del mundo”. A primera vista, parece un reclamo alto 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 fue desarrollada para ir naturalmente con el marco de Rails, y varios de los principios rectores “similares al zen” de Rails se pueden ver en el trabajo.

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

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

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

Pros del Marco de la Fundación

Foundation tiene algunas características inusuales de todos los marcos 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 se ha creado como una colección grande y modular de herramientas que tiene como objetivo resolver casi todo tipo de problemas de front-end. Existen ofertas de marcos separados para sitios web y correos electrónicos, muy optimizados 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 dar al desarrollador front-end control total sobre sus IU. Como resultado, Foundation se sentirá insípida y enormemente compleja para el recién llegado. Sin embargo, la razón es que Foundation no le impone ningún estilo de lenguaje, 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 UI, va mucho más allá del llamado del deber. Los desarrolladores han incluido un sistema avanzado de imagen receptiva, 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 Bootstrap es creado por Twitter, es un proyecto paralelo y una parte muy pequeña de la imagen general. La compañía detrás de la Fundación (ZURB), sin embargo, se compromete a usarlo, desarrollarlo y promoverlo. Se ofrecen cursos de capacitación y consultoría profesional para grandes clientes, lo cual es ideal para empresas que se dirigen a proyectos masivos y están dispuestos a pagar.

Contras del Marco de la Fundación

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

  • Comunidad pequeña (er): La comunidad de la Fundación es mucho más pequeña que la de Bootstrap, y si estás intentando algo exótico y te quedas estancado, las posibilidades de encontrar ayuda relevante son menores. Sin embargo, agregaría eso para todos los propósitos prácticos; hay suficiente comunidad por ahí. Es solo que tiene varios órdenes de magnitud más pequeños que Bootstrap, por lo que es posible que no encuentre soluciones al instante.
  • Complejidad: Si estás acostumbrado a Bootstrap o algo simple, o peor, a CSS vainilla, 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 puede culpar por eso.
  • Demasiadas opciones: A veces solo quieres hacer una mierda y preocuparte por la perfección más tarde. En esos momentos, es frustrante que se te presenten demasiadas opciones con pequeñas variaciones. Por ejemplo, piense en tener que pedir un sándwich de metro cuando tiene tanta hambre que podría comer barro. Naturalmente, la Fundación no es para momentos como ese.
  • Disponibilidad de talento: Dado que Foundation es (mucho) menos popular que Bootstrap, el talento disponible es mucho menor. Como regla general, es probable que cualquier nuevo empleado conozca Bootstrap, pero no tendrá ni idea de Foundation. El aprendizaje 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. Su atractivo radica en un enfoque estricto, solo 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 al trabajar con Bootstrap.

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 supiera), que estoy seguro es más o menos lo que ayudó a Vue.js a alcanzar la cima de la popularidad entre marcos de JavaScript.

¿Por qué elegir el marco CSS Bulma?

Hay muchas razones para que le guste Bulma y usarlo para su 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, una serie de estrellas de Github no es una medida 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 marcos que he probado. También hay un sistema ridículamente poderoso y simple para crear cuadrículas de estilo Metro, llamadas mosaicos (¡solo mira el código en la segunda mitad de la captura de pantalla y dime que no estás impresionado!).

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

Bulma tiene una comunidad pequeña, pero extremadamente apasionada, por lo que si desea eliminar 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 viene a la mente cuando pienso en UIkit Es minimalismo. Minimalismo no en características (de hecho, ofrece quizás la mayoría de las características de todos los marcos), sino en diseño. Si lo tuyo son los diseños súper limpios, elegantes y que no son tímidos, UIkit te tiene cubierto.

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

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

O incluso la humilde forma HTML:

Si esto no grita elegancia en la parte superior de sus pulmones, no sé qué hace. Solo dirígete al sitio web de UIkit y echa un vistazo a todos los componentes increíbles que ofrece. A menos que su gerente de proyecto o cliente le imponga un lenguaje de estilo particular, creo que Uikit se lleva la corona del diseño de la interfaz de usuario y está varias millas por delante del diseño de materiales de Google.

Pero hay una trampa, te preguntas. Sí hay. Al igual que Bootstrap, UIkit funciona con su JavaScript y, aunque puede usar jQuery para la manipulación DOM, es imposible usar un marco DOM virtual como React.

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

IU semántica

Otro contendiente en la carrera es IU semántica, que trata de distinguirse con muchos temas y personalizaciones. Hay más de 3000 variables de temática, lo que resulta en una amplitud masiva. O eso dicen los documentos.

Bootstrap 4 cubre todo esto y también es totalmente personalizable, pero una ventaja de la interfaz de usuario semántica es que da como resultado diseños bonitos por defecto. Aún así, no es el mejor aspecto de la caja, por eso 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 parece algo que podrías preferir.

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 desee. “Componer” es la palabra clave aquí, ya que Susy está diseñada para crear diseños asombrosos y altamente modulares con necesidades ultra complejas, inusuales y precisas.

En manos del desarrollador experto, Susy es como un lanzallamas que vuela 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 simétricas
// las canaletas son 1/4 del tamaño de una columna
// los elementos abarcan 1 canal menos que las columnas
// los contenedores también abarcan 1 canalón menos
$ susy: (
‘columnas’: susy-repeat (4),
‘canaletas’: 0.25,
‘spread’: ‘estrecho’,
‘container-spread’: ‘estrecho’,
);

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

Materializar

Si estás enamorado del diseño de Material de Google, Materialise es un marco de referencia 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.

Si me preguntas, sin embargo, un Diseño de materiales se está volviendo tan común, y es así. . . Planamente por defecto, que muy pronto nos estaremos quejando sobre el problema de Bootstrap en todos los sitios web. Aún así, es un buen marco para comenzar.

Puro

¿Yahoo está muerto??

No, esta pregunta no es una distracción, pero destaca una observación importante: Yahoo creó el Marco puro y lanzado 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.

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 por defecto, pero puedo ver cómo agrega valor a aquellos que desean resolver un pequeño problema CSS en su interfaz de usuario y se avergüenzan de los valores predeterminados “útiles” que vienen con otros marcos..

Esqueleto

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

El último en la lista es Miligramo, 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 de hoy 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.

Entonces, ¿qué marco CSS es el mejor??

Admítelo, has hecho preguntas similares antes y recibiste la siguiente respuesta decepcionante: ninguna. �� La selección de un marco (o una herramienta, o incluso una persona en su vida, para el caso) depende de muchos factores. Si quieres mi consejo, aquí está: corta el ruido. El hecho de que la gente se vuelva loca por algo nuevo y brillante no significa que tenga que aprenderlo o se quedará atrás. Probar cosas nuevas es genial, pero correr en círculos en busca de la herramienta perfecta es, bueno, un desperdicio.

Entonces, ¿cuál de estos marcos has probado? ¿O tal vez hay algo asombroso que acabo de perder? Déjame saber en los comentarios, por favor. Amor, odio, hola al azar, todos son bienvenidos!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map