Revisión AutomATCSS: Marco de utilidad CSS profesional para Oxígeno y WP

En este artículo, analizaremos el marco CSS de la utilidad AutomaticCSS para Oxygen Builder. Examinaremos las características, los precios, los elementos intangibles y los competidores para ver si este es un buen complemento para el conjunto de herramientas de complemento. AutomaticCSS presenta primero, AutomATCSS es un marco CSS. Utilizamos CSS para elegantes elementos HTML en el constructor de oxígeno. Por lo tanto, esta herramienta se utiliza para cambiar los colores, el tamaño, el espaciado y otros elementos visuales de los componentes, como títulos, texto y des dentro del generador.

Al igual que otros marcos CSS centrados en el oxígeno, podemos usar el sistema de clases increíbles incluido con el constructor y podemos agregar clases en este marco para que sean mucho más eficientes que los elementos de estilo manual con la interfaz de usuario. Aquí hay un buen ejemplo de por qué nos gustan tanto los marcos. Supongamos que queremos cambiar el fondo de un DIT al color de acento de nuestro sitio, en Hover. Algo como eso:
Flotar sobre mi
Con AutomATCSS, utilizamos esta clase única para hacer esto: .bg-accent-hover El color del acento se establece en el panel de configuración del administrador. Cuando el usuario pasa con el mouse sobre el elemento al que se asignó esta clase, el fondo cambia acento.
Sin AutomATCSS, estos son los pasos necesarios para lograr el mismo efecto: primero, crearemos un color global en oxígeno y lo llamaremos acento. Luego, iremos al Do al que queremos aplicar nuestro efecto de paso. Access Advanced -> Fondo y configure el color predeterminado. Ahora vaya a Advance -> Efectos y establezca la transición a aproximadamente 1 segundo. Luego vaya a la entrada del aula, haga clic en “Estado” y elija Hover. Acceda a Advanced -> Fondo y configure el color de cruce del mouse para que sea acento. Verá que hay más clics y pasos si intenta obtener el mismo efecto sin un marco. Y, si le atasco la identificación y no usa una clase, deberá hacer esto cada vez que vaya a tener este efecto. Esperamos que esto muestre por qué marcos como AutomATCSS y ahorrar mucho tiempo al crear un sitio web … ¡segundos y hace clic en el botón Reunión! Todo es un aspecto limpio y profesional. Los cambios globales son ligeros cuando se usan clases, porque los estilos están centralizados. Lea esto para obtener más información sobre por qué debe usar un marco:
En el momento de la publicación, AutomATCSS tiene 903 clases, que puede explorar mirando la hoja de Cheet. Estas clases cubren todo, incluyendo coloración, espaciado, dimensiones de fuente, cuadrículas CSS, apariencia flexible, etc. … Las clases de variables CSS son el núcleo de la oferta, pero el marco también incluye variables CSS.
Como los documentos de MDN mencionan esto, esto le permite establecer propiedades personalizadas y reutilizarlas en su sitio.

Un buen ejemplo a este respecto son los colores. En CSS puedes hacerlo haciéndolo en: raíz {-main-bg-color: gris;}. Luego puede introducir esto en ciertos elementos utilizando: Color de fondo: lima (-main-bg-color); Si desea hacer cambios globales, las variables son maravillosas. En AutomATCSS, establecerá sus colores en el panel de administración (mencionado a continuación) y puede insertarlos con clases de utilidad, pero también variables. Debido a que la configuración de oxígeno se traduce directamente en el CSS, puede pegar muchas variables en los campos de entrada, como: el panel de administración para cambiar la configuración global, como el tamaño básico, las alternativas y los colores se establecen en un panel de administración de backend. La WordPress .
Puede cambiar todos los colores de su sitio en unos segundos. ¡Intenta cuántos “temas de color” quieres! La naturaleza global de estas configuraciones es muy genial, especialmente las opciones de tamaño.


Si cree que los botones son demasiado grandes, solo necesita cambiar la configuración aquí y se editarán todos los botones del sitio. Si siente que todo en el sitio debe estar más cerca el uno del otro, cambiar la distancia base de 30px a 40px agregará un poco más de espacio alrededor de todos a la vez.

Todo es automático como sugiere el nombre, el dimensionamiento y el espaciado y son automáticos. Los tonos de color se generan automáticamente a partir de los colores básicos, y las dimensiones de tamaño/espaciado/fuente cambiarán automáticamente de acuerdo con el ancho de la ventana de visualización. Esto se logra utilizando las combinaciones complejas de Clamp (), con alternativas al calcio () y REM. Aquí hay un ejemplo de clase pequeña de margen. .Margin-Bottom- {Margin-Bottom: 2.133Rem; Margine-Jos: Calc (2,2492970947REM + (-0,2492970947 * ((100VW-32REM) / 96))); Margen inferior: abrazadera (2,2492970947REM, calc (-0,259684736VW + 2,3323961262REM), 2REM); } Esto muestra la complejidad de las alternativas junto con los cálculos para hacer que se amplíe automáticamente en función de la ventana de visualización. Lo que también es maravilloso es que estos valores se calculan a partir de la configuración básica en el panel de administración. Si los cambia, todos los valores de este tipo en el sitio cambiarán.


Esto le ahorrará mucho tiempo, porque no tendrá que editar manualmente el tamaño y la distancia para cada punto de interrupción en Oxygen Builder.
Dicho esto, este es un kit realmente fácil, dado que le ahorrará a necesitar estilo por identificación o hacer toneladas de clases personalizadas. También es algo que los desarrolladores de la agencia isotrópica realmente les gusta usar, porque se beneficia de los beneficios de un marco de utilidad, pero muchos aspectos están hechos para ser automáticos.
También es perfecto para oxígeno. (Una nota es que realmente nos gusta usar el viento de cola en proyectos personalizados construidos con el siguiente, pero no podemos usar el marco en oxígeno, porque no acepta los personajes “:” o “/” (además de otros problemas). Por lo tanto, nosotros, nosotros, nosotros ¿No podemos especificar estilos específicos del punto de interrupción, por lo que no podemos usar el viento de cola? Oxymade (otro marco) está inspirado en el viento de cola, pero no es corto cuando se trata de clases receptivas). AutomatCSS acepta algo como esto con descriptores -m -M – Sm. Page Creator / Assistance para otros complementos El marco tiene una hoja de ruta pública, que muestra planes futuros para el constructor y el sistema de formularios. Admitirá Bricks (revisión), Zion (revisión), Gutenberg, WooCommerce, North Commerce e incluso plataformas no WordPress en el futuro (el paquete de NPM como Tailwind sería genial!). También admitirán nuestro generador de formulación favorito, WSFORM (revisión detallada aquí), junto a formas fluidas y formas de gravedad. La hoja de ruta pública Este es un producto relativamente nuevo, y la hoja de ruta parece realmente prometedora. Las características como un constructor en el constructor de oxygen Builder y otras utilidades son realmente interesantes.


Las herramientas de consejos, los fondos de gradiente, las clases de iconos y otros aspectos únicos también llegarán pronto y eliminarán la necesidad de usar código personalizado o complementos adicionales. Facilidad de uso (¿puedo usar principiantes?) Sugerirle que cualquiera que use un constructor de administración de clases debe usar un marco. Es mucho más rápido y más efectivo que usar GUI. Los principiantes aprenderán rápidamente un marco, y AutomATCSS no es una locura. Eso es lo que AutomATCSS tiene que decir … y no me equivoco. Todo lo que tiene que hacer es usar el marco lo suficiente como para comprender los conceptos generales. Puede usar una hoja de trucos para estar al día, enumerando todas las clases. Una vez que mojas los pies, es increíblemente intuitivo. Los precios automáticos de AutomaticCSS CSS cuestan $ 69/año por una licencia personal y $ 99/año para una licencia de agencia. El personal es para un sitio, y la agencia es para sitios ilimitados.

Hay una garantía de devolución de dinero de 30 días. Si deja de pagar, aún tendrá acceso al marco (nada se romperá), simplemente recibirá actualizaciones futuras. Este modelo de precios es increíblemente correcto, dado el programa de desarrollo y lanzamiento activo, junto con las características, el valor y el ahorro de tiempo que obtendrá con este producto. AutomaticCSS Circle Community Cuando compra AutomicCSS, tiene acceso a una comunidad vibrante donde puede hacer preguntas y responder, obtener ayuda y solicitar funciones. Es increíblemente activo y cada pregunta que vi allí fue respondida rápidamente.

Esto es algo que no es muy promovido, sino un valor agregado masivo. El mundo habla sobre el producto, pero también sobre otros conceptos geniales (ver publicación en la parte inferior de la captura de pantalla). El círculo (en lo que se construye la comunidad) como plataforma es increíble. La interfaz de uso es fácil, el diseño es simple y la búsqueda de un determinado contenido es fácil. Un vistazo a la competencia AutomATCSS no es la única opción cuando se trata de un marco CSS sólido para el constructor de oxígeno. Hay dos competidores que vale la pena buscar; Oxyninja y Oxymade. Mientras que los tres son “cuadros”, AutomATCSS posiciona ligeramente diferentes (lea esta publicación oficial sobre cómo es diferente).

Estiliza los títulos, secciones y muchas más por defecto, haciendo las cosas más rápido.


Se centra en ser más automáticamente, eliminando la necesidad de clases de utilidad granular como MT-10, que vemos en OxyMade inspirado por Viento de Tail y Viento de Tail. Por lo tanto, es más simple y más fácil de memorizar.

Usted con estilo a nivel mundial a través de un panel de administración, y la configuración (como el tamaño y el espacio) se ajustarán a él. Por lo tanto, puede usar las mismas clases en diferentes sitios y puede obtener resultados diferentes.

Hay un sistema y un sistema de color resistente, mencionado anteriormente. Oxymade tiene un excelente sistema de color, pero el ACSS es más granular.

Hay alternativas: se usa calc () si no se acepta sujetador (). Si no se acepta calc (), entonces se usa REM.