Revisión del marco CSS de OxyMonster para Oxygen Builder

¿Qué es OxyMonster?

OxyMonster es un plugin para Constructor de oxígeno que te permite introducir parte o la totalidad de un enorme marco de clases de utilidad CSS basado en Tailwind en Oxígeno de forma rápida, sencilla y modular. Esto es similar a lo que OxyNinja hace con su marco híbrido de UIkit y Tailwind.

Tuve la suerte de tener el privilegio de probar OxyMonster unos días antes del lanzamiento, y esta reseña se basará en gran medida en mis experiencias con la versión beta, aunque ahora tengo la versión completa. Gracias, equipo de OxyMonster, por la clave gratuita y por la oportunidad de probarlo antes del lanzamiento y dar mi opinión

Conceptos básicos del marco de trabajo

¿Qué es un Marco CSS ¿de todos modos? Básicamente, es una enorme lista de clases de utilidad CSS para un diseño eficiente y coherente. Una clase de utilidad es una clase destinada a hacer una cosa específica. Puedes pensar en ellas como si fueran bloques de construcción. Coge un div, por ejemplo, y añade una clase para el relleno, otra para la sombra, otra para los bordes redondeados y otra para el color de fondo y, de repente, ¡tienes una tarjeta!

OxyMonster añade clases para prácticamente cualquier cosa que se te ocurra. Cualquier cosa, desde el relleno, los márgenes, las sombras, los bordes, los colores, los anchos, las fuentes, las alineaciones, Flexbox, los diseños de rejilla CSS, y tantas cosas más. Oxymonster es un framework supercompleto y, en serio, encontrarás clases para prácticamente todo. Si se te ocurre algo para lo que hacer una clase de utilidad, hay un 99,999% de posibilidades de que OxyMonster ya lo haya hecho.

Te recomiendo que eches un vistazo al hoja de trucos si quieres ver una lista completa de todas las clases disponibles desglosadas por categorías. Como se basa en gran medida en Tailwind, también puedes utilizar La documentación de Tailwind si necesitas entender algo mejor, ya que su documentación es bastante completa.

Igual que en OxyNinjalas clases para los diseños de cuadrícula CSS son extremadamente potentes y recomiendo encarecidamente echar un vistazo a La documentación de Tailwind sobre los diseños de cuadrícula CSS para ver lo que puedes hacer con ellos. No te arrepentirás, ¡te lo prometo!

Marco modular

OxyMonster hace algo interesante en el sentido de que el marco de trabajo viene en forma modular. Hay un «marco base» que hará el 99% de lo que necesitas hacer, y luego el resto del marco se divide en muchas subsecciones diferentes que puedes añadir a medida que las necesites

El marco base tiene algo más de 500 clases, lo cual es mucho por sí solo, pero el marco completo es casi 1400 clases. Esto es básicamente la totalidad de lo que esperarías si usaras el marco completo de Tailwind.

Si eres como yo, cuando pruebes el plugin podrías estar tentado de añadir todo el framework de una vez No lo hagas. He aprendido por las malas que el framework completo es tan grande que el navegador Google Chrome no puede cargarlo todo en el editor Oxygen Builder. El equipo de OxyMonster conoce este problema, pero no hay mucho que puedan hacer al respecto, ya que está fuera de sus manos y es una limitación del navegador. El equipo ha añadido una gran advertencia en la página de instalación del módulo del framework explicando esto. Si utilizas Firefox debería ser capaz de manejar las clases adicionales, pero de todas formas no lo recomiendo.

Resumiendo, deberías empezar con el framework base y sólo añadir cosas cuando las necesites.

Instalación del Marco Modular OxyMonster

Fusión masiva de clases

Tengo que decir que esta función es impresionante. Una de las mayores desventajas de utilizar un framework de utilidad de bajo nivel como OxyMonster / Tailwind es que a veces acabas con un ton de clases en un solo elemento y a menudo terminan repitiendo esa misma lista masiva de clases en varios elementos. La función de fusión de clases de OxyMonster te ofrece una solución súper fácil para eso.

Fusión de clases de OxyMonster

En tres pasos muy cortos puedes combinar todas las clases de un elemento en una sola clase con un nuevo nombre

En el ejemplo anterior, estaba haciendo una tarjeta sencilla completamente con clases de utilidad y la lista tenía un aspecto similar a «p-5, bg-primary, color-tertiary, rounded-md, shadow-md». Anteriormente me ocupaba de esto copiando rápidamente todas mis clases de un elemento a otro utilizando la función de copiar estilos de Hydrogen, pero eso sigue añadiendo un montón de clases redundantes y no es la mejor práctica.

Usando la función de fusión de OxyMonster pude fusionar instantáneamente las cinco clases en una sola clase que llamé «mi tarjeta». Ahora puedo simplemente poner esa única clase en el resto de mis tarjetas en lugar de una lista de cinco. Es muy común tener elementos con tantas clases en ellos y con frecuencia te encontrarás con el doble en algunos casos utilizando cualquier marco de clases de utilidad, por lo que esta función de fusión es realmente impresionante en mi opinión.

Pros y contras

Pros

  • Se basa en gran medida en Tailwind, y Tailwind es genial
  • Enorme cantidad de clases
  • Las clases se pueden instalar de forma modular
  • La función de fusión de clases es súper útil y favorece las buenas prácticas de diseño
  • Las opciones de clase son muy completas
    • Hay algo para todo
  • La instalación del framework base y de los módulos posteriores es súper rápida y sencilla
  • Ofertas de licencias de por vida

Cons

  • Hay literalmente tantas clases que puedes romper el Editor de Oxígeno en Chrome
    • Sin embargo, esto es una limitación de Chrome. No es realmente culpa de OxyMonster
  • Puede llevar un poco de tiempo sentirse cómodo usándolo mientras intentas aprender la sintaxis
    • Sin embargo, ¡se siente muy bien una vez que lo tienes dominado!
  • Es un producto nuevo y eso siempre conlleva riesgos

Precios

El CSS Framework está disponible actualmente por 69,99 $ como producto independiente o por 199,99 $ en un paquete con los conjuntos de diseño de OxyMonster. Ambas opciones son ofertas de por vida. Cualquier usuario de OxyMade puede obtener el OxyMonster CSS Framework de forma gratuita a través de un cupón que debería haber recibido por correo electrónico

Precios de OxyMonster

Conclusión

En definitiva, creo que OxyMonster es genial. El marco de trabajo es básicamente Tailwind, que ha sido probado y aclamado. Tiene prácticamente cualquier clase de utilidad que puedas necesitar. Me encanta la función de fusión de clases, y aunque quizá sea una de las características menores del plugin, creo que es una de las mejores cosas que añade a Oxygen.

El precio es competitivo y actualmente tiene forma de licencia de por vida, lo que siempre es agradable.

La gran pregunta que espero empezar a ver es «¿Debo usar OxyMonster o OxyNinja«, y esa pregunta va a ser difícil de responder. Creo que si tienes experiencia con Tailwind, OxyMonster es una obviedad, ya que te sentirás como en casa. Lo mismo ocurre si sólo buscas un marco CSS completo. Si los frameworks CSS son un concepto nuevo para ti o buscas uno más fácil de usar, creo que OxyNinja podría ser la mejor opción. Probablemente escribiré un post completo comparando los dos en algún momento, ¡así que estate atento!



Source by [author_name]

Deja un comentario